wip

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

@@ -2,7 +2,7 @@ import cn from "classnames";
 import React from "react";
 import { StatelessComponent } from "react";
 import CopyToClipboard from "react-copy-to-clipboard";
-import { Button, Input, Tooltip, Typography } from "talk-ui/components";
+import { Button, Input, Popover, Typography } from "talk-ui/components";
 import * as styles from "./Comment.css";
 
 export interface CommentProps {
@@ -15,6 +15,8 @@ export interface CommentProps {
   gutterBottom?: boolean;
 }
 
+// make a permalink popover
+
 const Comment: StatelessComponent<CommentProps> = props => {
   const rootClassName = cn(styles.root, props.className, {
     [styles.gutterBottom]: props.gutterBottom,
@@ -26,26 +28,18 @@ const Comment: StatelessComponent<CommentProps> = props => {
       </Typography>
       <Typography>{props.body}</Typography>
       <div className={cn("talk-comment-footer")}>
-        <Button
-          className={styles.shareButton}
-          data-tip
-          data-for="tooltip"
-          data-event="click"
+        <Popover
+          body={
+            <div>
+              <Input defaultValue={props.id} className={styles.input} />
+              <CopyToClipboard text={props.id}>
+                <Button primary>Copy</Button>
+              </CopyToClipboard>
+            </div>
+          }
         >
-          Share
-        </Button>
-
-        <Tooltip id="tooltip" effect="solid" clickable>
-          <Input defaultValue={props.id} className={styles.input} />
-          <CopyToClipboard
-            text={props.id}
-            onCopy={() => {
-              console.log("ey");
-            }}
-          >
-            <Button primary>Copy</Button>
-          </CopyToClipboard>
-        </Tooltip>
+          <Button className={styles.shareButton}>Share</Button>
+        </Popover>
       </div>
     </div>
   );

src/core/client/tslint.json

@@ -1,20 +1,13 @@
 {
-  "extends": [
-    "../../../tslint.json",
-    "tslint-react"
-  ],
+  "extends": ["../../../tslint.json", "tslint-react"],
   "rules": {
+    "jsx-curly-spacing": false,
     "jsx-no-multiline-js": false,
-    "jsx-boolean-value": [
-      true,
-      "never"
-    ]
+    "jsx-boolean-value": [true, "never"]
   },
   "jsRules": {
+    "jsx-curly-spacing": false,
     "jsx-no-multiline-js": false,
-    "jsx-boolean-value": [
-      true,
-      "never"
-    ]
+    "jsx-boolean-value": [true, "never"]
   }
-}
+}

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

@@ -0,0 +1,32 @@
+import React from "react";
+import { Manager, Popper, Reference } from "react-popper";
+// import * as styles from "./Popover.css";
+
+interface InnerProps {
+  body: React.ReactElement<any>;
+  children: React.ReactElement<any>;
+}
+
+class Popover extends React.Component<InnerProps> {
+  public render() {
+    const { children, body } = this.props;
+    return (
+      <Manager>
+        <Reference>
+          {({ ref }) => React.cloneElement(children, { ref })}
+        </Reference>
+        <Popper placement="right">
+          {({ ref, style, placement, arrowProps }) =>
+            React.cloneElement(body, {
+              ref,
+              style,
+              "data-placement": placement,
+            })
+          }
+        </Popper>
+      </Manager>
+    );
+  }
+}
+
+export default Popover;

src/core/client/ui/components/Popover/index.ts

@@ -0,0 +1,2 @@
+export * from "./Popover";
+export { default } from "./Popover";

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

@@ -0,0 +1,11 @@
+.root {
+  font-family: "Source Sans Pro";
+  font-weight: 400;
+  font-size: 16px;
+  letter-spacing: calc(0.57em / 16);
+  background: #ffffff;
+  border: 1px solid #979797;
+  box-sizing: border-box;
+  border-radius: 1px;
+  padding: 5px 20px;
+}

src/core/client/ui/components/TextField/TextField.d.ts

@@ -0,0 +1 @@
+export const root: string;

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

@@ -0,0 +1,14 @@
+import cn from "classnames";
+import React, { InputHTMLAttributes, StatelessComponent } from "react";
+
+import * as styles from "./TextField";
+
+interface InnerProps extends InputHTMLAttributes<HTMLInputElement> {
+  classes?: typeof styles;
+}
+
+const Input: StatelessComponent<InnerProps> = ({ className, ...rest }) => {
+  return <input {...rest} className={cn(styles.root, className)} />;
+};
+
+export default Input;

src/core/client/ui/components/TextField/index.ts

@@ -0,0 +1,2 @@
+export * from "./TextField";
+export { default } from "./TextField";

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

@@ -1,22 +0,0 @@
-import cn from "classnames";
-import React from "react";
-import ReactTooltip from "react-tooltip";
-import * as styles from "./Tooltip.css";
-
-interface InnerProps extends ReactTooltip.Props {
-  clickable: boolean;
-}
-
-class Tooltip extends React.Component<InnerProps> {
-  public render() {
-    const { clickable } = this.props;
-    return (
-      <ReactTooltip
-        className={cn(styles.root, { [styles.clickable]: clickable })}
-        {...this.props}
-      />
-    );
-  }
-}
-
-export default Tooltip;

src/core/client/ui/components/Tooltip/index.ts

@@ -1,2 +0,0 @@
-export * from "./Tooltip";
-export { default } from "./Tooltip";

src/core/client/ui/components/index.ts

@@ -2,5 +2,5 @@ export { default as BaseButton } from "./BaseButton";
 export { default as Button } from "./Button";
 export { default as Center } from "./Center";
 export { default as Typography } from "./Typography";
-export { default as Tooltip } from "./Tooltip";
+export { default as Popover } from "./Popover";
 export { default as Input } from "./Input";

src/tsconfig.json

@@ -9,26 +9,13 @@
     "outDir": "../dist",
     // See https://github.com/prismagraphql/graphql-request/issues/26 for why we
     // have to include "dom" here.
-    "lib": [
-      "es6",
-      "esnext.asynciterable",
-      "dom"
-    ],
+    "lib": ["es6", "esnext.asynciterable", "dom"],
     "baseUrl": "./",
     "paths": {
-      "talk-server/*": [
-        "./core/server/*"
-      ],
-      "talk-common/*": [
-        "./core/common/*"
-      ]
+      "talk-server/*": ["./core/server/*"],
+      "talk-common/*": ["./core/common/*"]
     }
   },
-  "include": [
-    "./**/*"
-  ],
-  "exclude": [
-    "node_modules",
-    "./core/client"
-  ]
-}
+  "include": ["./**/*"],
+  "exclude": ["node_modules", "./core/client"]
+}

tslint.json

@@ -7,10 +7,7 @@
   "rules": {
     "prettier": true,
     "object-literal-sort-keys": false,
-    "interface-name": [
-      true,
-      "never-prefix"
-    ],
+    "interface-name": [true, "never-prefix"],
     "no-switch-case-fall-through": true,
     "member-ordering": false,
     "variable-name": [
@@ -35,8 +32,6 @@
     ]
   },
   "linterOptions": {
-    "exclude": [
-      "**/node_modules/**/*"
-    ]
+    "exclude": ["**/node_modules/**/*"]
   }
-}
+}