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:

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"