component renaming: copy-to-click => copy-to-clipboard => clipboard

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/components/+extensions/extensions.scss

@@ -24,7 +24,7 @@
     }
 
     .install-extension {
-      .CopyToClick:hover code {
+      .Clipboard:hover code {
         color: $textColorSecondary;
       }
     }

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 {
             <Trans><b>Pro-Tip 1</b>: you can download extension archive.tgz via NPM:</Trans>
           </p>
           <ul>
-            <CopyToClick showNotification selector="code">
+            <Clipboard showNotification cssSelectorLimit="code">
               <li>
                 <code>npm pack %name</code>
                 <em> (click to copy)</em>
               </li>
-            </CopyToClick>
+            </Clipboard>
-            <CopyToClick showNotification selector="code">
+            <Clipboard showNotification cssSelectorLimit="code">
-              <li className="click-to-copy">
+              <li>
                 <code>npm view %name dist.tarball</code>
                 <em> (click to copy)</em>
               </li>
-            </CopyToClick>
+            </Clipboard>
           </ul>
           <p className="hint">
             <Trans><b>Pro-Tip 2</b>: you also can drop archive from file-system to this window to request installation</Trans>

src/renderer/components/clipboard/clipboard.scss

@@ -1,3 +1,3 @@
-.CopyToClick {
+.Clipboard {
   cursor: pointer;
 }

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<CopyToClickProps> = {
+export const defaultProps: Partial<CopyToClipboardProps> = {
   getNotificationMessage(copiedText: string) {
     return <p>Copied to clipboard: <em>{copiedText}</em></p>
   }
 }
 
-export class CopyToClick extends React.Component<CopyToClickProps> {
+export class Clipboard extends React.Component<CopyToClipboardProps> {
+  static displayName = "Clipboard"
   static defaultProps = defaultProps as object;
 
   get rootElem(): HTMLElement {
@@ -32,18 +33,17 @@ export class CopyToClick extends React.Component<CopyToClickProps> {
   }
 
   @autobind()
-  onClick(evt: React.MouseEvent<HTMLElement>) {
+  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<HTMLElement>(selector) : this.rootElem;
-    const { copiedText, copied } = copyToClipboard(contentElem, { resetSelection });
-    if (copied && showNotification) {
-      Notifications.ok(getNotificationMessage(copiedText));
-    }
     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<any>(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<CopyToClickProps> {
     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) {

src/renderer/components/clipboard/index.ts

@@ -0,0 +1 @@
+export * from "./clipboard"

src/renderer/components/copy-to-click/index.ts

@@ -1 +0,0 @@
-export * from "./copy-to-click"