progress

src/core/client/stream/components/Comment/Comment.spec.tsx

@@ -7,7 +7,7 @@ import Comment from "./Comment";
 
 it("renders username and body", () => {
   const props: PropTypesOf<typeof Comment> = {
-    id: "comment-ID",
+    id: "comment-id",
     author: {
       username: "Marvin",
     },

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

@@ -1,6 +1,7 @@
+import { Localized } from "fluent-react/compat";
 import React from "react";
 import { StatelessComponent } from "react";
-import { Typography } from "talk-ui/components";
+import { Popover, Typography } from "talk-ui/components";
 import PermalinkPopover from "../PermalinkPopover";
 import Timestamp from "./Timestamp";
 import TopBar from "./TopBar";
@@ -25,7 +26,15 @@ const Comment: StatelessComponent<CommentProps> = props => {
       </TopBar>
       <Typography>{props.body}</Typography>
       <div>
-        <PermalinkPopover commentId={props.id} />
+        <Popover body={<PermalinkPopover commentId={props.id} />}>
+          {({ toggleShow }) => (
+            <button onClick={toggleShow}>
+              <Localized id="comments-permalink-share">
+                <span>Share</span>
+              </Localized>
+            </button>
+          )}
+        </Popover>
       </div>
     </div>
   );

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

@@ -1,22 +1,22 @@
-import { Localized as L } from "fluent-react/compat";
-import React from "react";
+import { Localized } from "fluent-react/compat";
+import React, { CSSProperties } from "react";
 import CopyToClipboard from "react-copy-to-clipboard";
-import { Button, Popover, TextField } from "talk-ui/components";
+import { Button, TextField } from "talk-ui/components";
 import * as styles from "./PermalinkPopover.css";
 
 interface InnerProps {
   commentId: string;
+  ref?: any;
+  style?: CSSProperties;
 }
 
 interface State {
   copied: boolean;
-  showBody: boolean;
 }
 
 class PermalinkPopover extends React.Component<InnerProps> {
   public state: State = {
     copied: false,
-    showBody: false,
   };
 
   public onCopy = async () => {
@@ -26,14 +26,6 @@ class PermalinkPopover extends React.Component<InnerProps> {
     }, 800);
   };
 
-  public onClick = () => this.toggleShow();
-
-  public toggleShow = () => {
-    this.setState((state: State) => ({
-      showBody: !state.showBody,
-    }));
-  };
-
   public toggleCopied = () => {
     this.setState((state: State) => ({
       copied: !state.copied,
@@ -41,40 +33,27 @@ class PermalinkPopover extends React.Component<InnerProps> {
   };
 
   public render() {
-    const { commentId } = this.props;
-    const { copied, showBody } = this.state;
+    const { commentId, ref, style } = this.props;
+    const { copied } = this.state;
+
+    console.log(this.props, "props");
     return (
-      <Popover
-        body={
-          showBody ? (
-            <div className={styles.root}>
-              <TextField
-                defaultValue={commentId}
-                className={styles.textField}
-              />
-              <CopyToClipboard text={commentId} onCopy={this.onCopy}>
-                <Button primary>
-                  {copied ? (
-                    <L id="comments-permalink-copied">
-                      <span>Copied!</span>
-                    </L>
-                  ) : (
-                    <L id="comments-permalink-copy">
-                      <span>Copy</span>
-                    </L>
-                  )}
-                </Button>
-              </CopyToClipboard>
-            </div>
-          ) : null
-        }
-      >
-        <button className={styles.shareButton} onClick={this.onClick}>
-          <L id="comments-permalink-share">
-            <span>Share</span>
-          </L>
-        </button>
-      </Popover>
+      <div className={styles.root} ref={ref} style={style}>
+        <TextField defaultValue={commentId} className={styles.textField} />
+        <CopyToClipboard text={commentId} onCopy={this.onCopy}>
+          <Button primary>
+            {copied ? (
+              <Localized id="comments-permalink-copied">
+                <span>Copied!</span>
+              </Localized>
+            ) : (
+              <Localized id="comments-permalink-copy">
+                <span>Copy</span>
+              </Localized>
+            )}
+          </Button>
+        </CopyToClipboard>
+      </div>
     );
   }
 }

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

@@ -25,13 +25,17 @@ interface InnerProps {
     | "left-start";
 }
 
+interface Props {
+  ref: any;
+}
+
 class Attachment extends React.Component<InnerProps> {
   public render() {
     const { children, body, placement = "top", className } = this.props;
     return (
       <Manager>
         <Reference>
-          {({ ref }) => React.cloneElement(children, { ref })}
+          {(props: Props) => React.cloneElement(children, { ref: props.ref })}
         </Reference>
 
         <Popper

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

@@ -2,17 +2,41 @@ import React from "react";
 import Attachment from "../Attachment";
 import * as styles from "./Popover.css";
 
+interface RenderProps {
+  toggleShow: () => void;
+}
+
 interface InnerProps {
-  body: React.ReactElement<any> | null;
-  children: React.ReactElement<any>;
+  body: React.ReactElement<Props> | null;
+  children: (props: RenderProps) => React.ReactElement<any>;
+}
+
+interface Props {
+  ref: any;
+}
+
+interface State {
+  show: false;
 }
 
 class Popover extends React.Component<InnerProps> {
+  public state: State = {
+    show: false,
+  };
+
+  public toggleShow = () => {
+    this.setState((state: State) => ({
+      show: !state.show,
+    }));
+  };
+
   public render() {
-    const { body, children: reference } = this.props;
+    const { body, children } = this.props;
+    // const { show } = this.state;
+    console.log(children);
     return (
       <Attachment body={body} className={styles.root}>
-        {reference}
+        {({ ref }) => children({ toggleShow: this.toggleShow, ref })}
       </Attachment>
     );
   }

src/core/client/ui/hocs/withForwardRef.tsx

@@ -9,14 +9,12 @@ import {
  * the `React.forwardRef` api.
  */
 function withForwardRef<T>(): InferableComponentEnhancerWithProps<
-  { forwardRef: any },
+  { forwardRef: Ref<any> },
   {}
 > {
   return WrappedComponent => {
     return React.forwardRef((props, ref) => (
-      ref as button={ref} className="FancyButton">
-        {props.children}
-      </button>
+      <WrappedComponent forwardRef={ref} />
     ));
   };
 }