ui functionality

src/core/client/stream/components/PermalinkPopover.tsx

@@ -7,21 +7,56 @@ interface InnerProps {
   commentId: string;
 }
 
+interface State {
+  copied: boolean;
+  showBody: boolean;
+}
+
 class PermalinkPopover extends React.Component<InnerProps> {
+  public state: State = {
+    copied: false,
+    showBody: false,
+  };
+
+  public onCopy = async () => {
+    await this.toggleCopied();
+    setTimeout(() => {
+      this.toggleCopied();
+    }, 800);
+  };
+
+  public onClick = () => this.toggleShow();
+
+  public toggleShow = () => {
+    this.setState((state: State) => ({
+      showBody: !state.showBody,
+    }));
+  };
+
+  public toggleCopied = () => {
+    this.setState((state: State) => ({
+      copied: !state.copied,
+    }));
+  };
+
   public render() {
     const { commentId } = this.props;
+    const { copied, showBody } = this.state;
     return (
       <Popover
+        showBody={showBody}
         body={
           <div className={styles.root}>
             <TextField defaultValue={commentId} className={styles.textField} />
-            <CopyToClipboard text={commentId}>
-              <Button primary>Copy</Button>
+            <CopyToClipboard text={commentId} onCopy={this.onCopy}>
+              <Button primary>{copied ? "Copied!" : "Copy"}</Button>
             </CopyToClipboard>
           </div>
         }
       >
-        <button className={styles.shareButton}>Share</button>
+        <button className={styles.shareButton} onClick={this.onClick}>
+          Share
+        </button>
       </Popover>
     );
   }

src/core/client/ui/components/Popover/Popover.css

@@ -13,7 +13,3 @@
     border-top-color: transparent !important;
   }
 }
-
-.clickable {
-  pointer-events: all;
-}

src/core/client/ui/components/Popover/Popover.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import { Manager, Popper, Reference } from "react-popper";
-// import * as styles from "./Popover.css";
+import * as styles from "./Popover.css";
 
 interface InnerProps {
   body: React.ReactElement<any>;
   children: React.ReactElement<any>;
+  showBody: boolean;
   placement?:
     | "auto-start"
     | "auto"
@@ -25,25 +26,28 @@ interface InnerProps {
 
 class Popover extends React.Component<InnerProps> {
   public render() {
-    const { children, body, placement = "top" } = this.props;
+    const { children, body, placement = "top", showBody = true } = this.props;
     return (
       <Manager>
         <Reference>
           {({ ref }) => React.cloneElement(children, { ref })}
         </Reference>
-        <Popper
-          placement={placement}
-          modifiers={{ preventOverflow: { enabled: false } }}
-          eventsEnabled
-          positionFixed={false}
-        >
-          {({ ref, style }) =>
-            React.cloneElement(body, {
-              ref,
-              style,
-            })
-          }
-        </Popper>
+        {showBody && (
+          <Popper
+            placement={placement}
+            modifiers={{ preventOverflow: { enabled: false } }}
+            eventsEnabled
+            positionFixed={false}
+          >
+            {({ ref, style }) =>
+              React.cloneElement(body, {
+                ref,
+                style,
+                className: styles.root,
+              })
+            }
+          </Popper>
+        )}
       </Manager>
     );
   }