work in progress

package-lock.json

@@ -16549,9 +16549,9 @@
       "dev": true
     },
     "react-popper": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.0.0.tgz",
-      "integrity": "sha1-uZRSFE6P5KzHf6PZWajHngemUIQ=",
+      "version": "1.0.0-beta.6",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.0.0-beta.6.tgz",
+      "integrity": "sha1-yyeirFatzLr1+cQTI4cokGkkCDQ=",
       "requires": {
         "babel-runtime": "6.x.x",
         "create-react-context": "^0.2.1",

package.json

@@ -49,7 +49,7 @@
     "performance-now": "^2.1.0",
     "rc-tooltip": "^3.7.2",
     "react-copy-to-clipboard": "^5.0.1",
-    "react-popper": "^1.14.3",
+    "react-popper": "^1.0.0-beta.6",
     "react-tooltip": "^3.6.1",
     "subscriptions-transport-ws": "^0.9.11",
     "uuid": "^3.2.1"

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

@@ -1,10 +1,9 @@
 import cn from "classnames";
 import React from "react";
 import { StatelessComponent } from "react";
-import CopyToClipboard from "react-copy-to-clipboard";
-import { Manager, Popper, Reference } from "react-popper";
-import { Button, Input, Popover, Typography } from "talk-ui/components";
+import { Typography } from "talk-ui/components";
 import * as styles from "./Comment.css";
+import PermalinkPopover from "./PermalinkPopover";
 
 export interface CommentProps {
   id: string;
@@ -28,40 +27,8 @@ const Comment: StatelessComponent<CommentProps> = props => {
         {props.author && props.author.username}
       </Typography>
       <Typography>{props.body}</Typography>
-      <Manager>
-        <Reference>
-          {({ ref }) => (
-            <button type="button" ref={ref}>
-              Reference element
-            </button>
-          )}
-        </Reference>
-        <Popper
-          placement="left"
-          modifiers={{ preventOverflow: { enabled: false } }}
-          eventsEnabled
-          positionFixed={false}
-        >
-          {({ ref, style, placement, arrowProps }) => (
-            <div ref={ref} style={style} data-placement={placement}>
-              Popper element
-            </div>
-          )}
-        </Popper>
-      </Manager>
       <div className={cn("talk-comment-footer")}>
-        <Popover
-          body={
-            <div>
-              <Input defaultValue={props.id} className={styles.input} />
-              <CopyToClipboard text={props.id}>
-                <Button primary>Copy</Button>
-              </CopyToClipboard>
-            </div>
-          }
-        >
-          <Button className={styles.shareButton}>Share</Button>
-        </Popover>
+        <PermalinkPopover />
       </div>
     </div>
   );

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

@@ -0,0 +1,25 @@
+import React from "react";
+import CopyToClipboard from "react-copy-to-clipboard";
+import { Button, Input, Popover } from "talk-ui/components";
+
+class PermalinkPopover extends React.Component {
+  public render() {
+    const props = this.props;
+    return (
+      <Popover
+        body={
+          <div>
+            <Input defaultValue={props.id} className={styles.input} />
+            <CopyToClipboard text={props.id}>
+              <Button primary>Copy</Button>
+            </CopyToClipboard>
+          </div>
+        }
+      >
+        <button>Reference element</button>
+      </Popover>
+    );
+  }
+}
+
+export default PermalinkPopover;

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

@@ -49,6 +49,7 @@ class Button extends React.Component<InnerProps> {
       [classes.secondary]: secondary,
     });
 
+    console.log(this.props);
     return (
       <BaseButton
         className={rootClassName}

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

@@ -5,27 +5,42 @@ import { Manager, Popper, Reference } from "react-popper";
 interface InnerProps {
   body: React.ReactElement<any>;
   children: React.ReactElement<any>;
+  placement?:
+    | "auto-start"
+    | "auto"
+    | "auto-end"
+    | "top-start"
+    | "top"
+    | "top-end"
+    | "right-start"
+    | "right"
+    | "right-end"
+    | "bottom-end"
+    | "bottom"
+    | "bottom-start"
+    | "left-end"
+    | "left"
+    | "left-start";
 }
 
 class Popover extends React.Component<InnerProps> {
   public render() {
-    const { children, body } = this.props;
+    const { children, body, placement = "top" } = this.props;
     return (
       <Manager>
         <Reference>
           {({ ref }) => React.cloneElement(children, { ref })}
         </Reference>
         <Popper
-          placement="left"
+          placement={placement}
           modifiers={{ preventOverflow: { enabled: false } }}
           eventsEnabled
           positionFixed={false}
         >
-          {({ ref, placement, style }) =>
+          {({ ref, style }) =>
             React.cloneElement(body, {
               ref,
               style,
-              "data-placement": placement,
             })
           }
         </Popper>

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

@@ -0,0 +1,9 @@
+import React from "react";
+
+export function forwardRef(
+  WrappedComponent: React.ComponentType
+): React.RefForwardingComponent<any, any> {
+  return React.forwardRef((props, ref) => {
+    return <WrappedComponent {...props} forwardedRef={ref} />;
+  });
+}