diff --git a/src/renderer/components/+extensions/extensions.scss b/src/renderer/components/+extensions/extensions.scss
index 14e42e3831..aa666f6922 100644
--- a/src/renderer/components/+extensions/extensions.scss
+++ b/src/renderer/components/+extensions/extensions.scss
@@ -24,7 +24,7 @@
}
.install-extension {
- .CopyToClick:hover code {
+ .Clipboard:hover code {
color: $textColorSecondary;
}
}
diff --git a/src/renderer/components/+extensions/extensions.tsx b/src/renderer/components/+extensions/extensions.tsx
index 7a09dc0756..d7e632f287 100644
--- a/src/renderer/components/+extensions/extensions.tsx
+++ b/src/renderer/components/+extensions/extensions.tsx
@@ -10,7 +10,7 @@ import { WizardLayout } from "../layout/wizard-layout";
import { DropFileInput, Input, InputValidators } from "../input";
import { Icon } from "../icon";
import { PageLayout } from "../layout/page-layout";
-import { CopyToClick } from "../copy-to-click/copy-to-click";
+import { Clipboard } from "../clipboard";
import { extensionLoader } from "../../../extensions/extension-loader";
import { extensionManager } from "../../../extensions/extension-manager";
@@ -116,18 +116,18 @@ export class Extensions extends React.Component {
Pro-Tip 1: you can download extension archive.tgz via NPM:
-
+
-
npm pack %name
(click to copy)
-
-
- -
+
+
+
-
npm view %name dist.tarball
(click to copy)
-
+
Pro-Tip 2: you also can drop archive from file-system to this window to request installation
diff --git a/src/renderer/components/copy-to-click/copy-to-click.scss b/src/renderer/components/clipboard/clipboard.scss
similarity index 57%
rename from src/renderer/components/copy-to-click/copy-to-click.scss
rename to src/renderer/components/clipboard/clipboard.scss
index af7a64d140..1c8e007dba 100644
--- a/src/renderer/components/copy-to-click/copy-to-click.scss
+++ b/src/renderer/components/clipboard/clipboard.scss
@@ -1,3 +1,3 @@
-.CopyToClick {
+.Clipboard {
cursor: pointer;
}
\ No newline at end of file
diff --git a/src/renderer/components/copy-to-click/copy-to-click.tsx b/src/renderer/components/clipboard/clipboard.tsx
similarity index 58%
rename from src/renderer/components/copy-to-click/copy-to-click.tsx
rename to src/renderer/components/clipboard/clipboard.tsx
index 5ad4d7266b..88be556b68 100644
--- a/src/renderer/components/copy-to-click/copy-to-click.tsx
+++ b/src/renderer/components/clipboard/clipboard.tsx
@@ -1,4 +1,4 @@
-import "./copy-to-click.scss"
+import "./clipboard.scss"
import React from "react"
import { findDOMNode } from "react-dom";
import { autobind } from "../../../common/utils";
@@ -7,20 +7,21 @@ import { copyToClipboard } from "../../utils/copyToClipboard";
import logger from "../../../main/logger";
import { cssNames } from "../../utils";
-export interface CopyToClickProps {
+export interface CopyToClipboardProps {
resetSelection?: boolean;
showNotification?: boolean;
- selector?: string; // allows to copy partial content with css-selector from children-element
+ cssSelectorLimit?: string; // allows to copy partial content with css-selector in children-element context
getNotificationMessage?(copiedText: string): React.ReactNode;
}
-export const defaultProps: Partial = {
+export const defaultProps: Partial = {
getNotificationMessage(copiedText: string) {
return Copied to clipboard: {copiedText}
}
}
-export class CopyToClick extends React.Component {
+export class Clipboard extends React.Component {
+ static displayName = "Clipboard"
static defaultProps = defaultProps as object;
get rootElem(): HTMLElement {
@@ -32,18 +33,17 @@ export class CopyToClick extends React.Component {
}
@autobind()
- onClick(evt: React.MouseEvent) {
- if (!this.rootElem || !this.rootElem.contains(evt.target as any)) {
- return;
- }
- const { showNotification, resetSelection, getNotificationMessage, selector } = this.props;
- const contentElem = selector ? this.rootElem.querySelector(selector) : this.rootElem;
- const { copiedText, copied } = copyToClipboard(contentElem, { resetSelection });
- if (copied && showNotification) {
- Notifications.ok(getNotificationMessage(copiedText));
- }
+ onClick(evt: React.MouseEvent) {
if (this.rootReactElem.props.onClick) {
- this.rootReactElem.props.onClick(evt); // pass event to content element as well when provided
+ this.rootReactElem.props.onClick(evt); // pass event to children-root-element if any
+ }
+ const { showNotification, resetSelection, getNotificationMessage, cssSelectorLimit } = this.props;
+ const contentElem = this.rootElem.querySelector(cssSelectorLimit) || this.rootElem;
+ if (contentElem) {
+ const { copiedText, copied } = copyToClipboard(contentElem, { resetSelection });
+ if (copied && showNotification) {
+ Notifications.ok(getNotificationMessage(copiedText));
+ }
}
}
@@ -51,7 +51,7 @@ export class CopyToClick extends React.Component {
try {
let rootElem = this.rootReactElem;
return React.cloneElement(rootElem, {
- className: cssNames("CopyToClick", rootElem.props.className),
+ className: cssNames(Clipboard.displayName, rootElem.props.className),
onClick: this.onClick,
});
} catch (err) {
diff --git a/src/renderer/components/clipboard/index.ts b/src/renderer/components/clipboard/index.ts
new file mode 100644
index 0000000000..0483f275a4
--- /dev/null
+++ b/src/renderer/components/clipboard/index.ts
@@ -0,0 +1 @@
+export * from "./clipboard"
diff --git a/src/renderer/components/copy-to-click/index.ts b/src/renderer/components/copy-to-click/index.ts
deleted file mode 100644
index c927dba518..0000000000
--- a/src/renderer/components/copy-to-click/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./copy-to-click"