diff --git a/package-lock.json b/package-lock.json index c8a6caf98..9f3848257 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1616,6 +1616,14 @@ "csstype": "^2.2.0" } }, + "@types/react-copy-to-clipboard": { + "version": "4.2.5", + "resolved": "https://registry.npmjs.org/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-4.2.5.tgz", + "integrity": "sha512-5LggaWWlMcgehfeDmr4FZmK8MXntzxLYERFdrXk72ye6QwpoZpyYFGgUM+xGVVtIP2WXlor8twZTXK1xckEDYw==", + "requires": { + "@types/react": "*" + } + }, "@types/react-dom": { "version": "16.0.6", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.0.6.tgz", @@ -5591,6 +5599,14 @@ "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=", "dev": true }, + "copy-to-clipboard": { + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.0.8.tgz", + "integrity": "sha512-c3GdeY8qxCHGezVb1EFQfHYK/8NZRemgcTIzPq7PuxjHAf/raKibn2QdhHPb/y6q74PMgH6yizaDZlRmw6QyKw==", + "requires": { + "toggle-selection": "^1.0.3" + } + }, "copy-webpack-plugin": { "version": "4.5.2", "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-4.5.2.tgz", @@ -16219,6 +16235,15 @@ "prop-types": "^15.6.0" } }, + "react-copy-to-clipboard": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.1.tgz", + "integrity": "sha512-ELKq31/E3zjFs5rDWNCfFL4NvNFQvGRoJdAKReD/rUPA+xxiLPQmZBZBvy2vgH7V0GE9isIQpT9WXbwIVErYdA==", + "requires": { + "copy-to-clipboard": "^3", + "prop-types": "^15.5.8" + } + }, "react-dev-utils": { "version": "6.0.0-next.3e165448", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-6.0.0-next.3e165448.tgz", @@ -18888,6 +18913,11 @@ } } }, + "toggle-selection": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz", + "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI=" + }, "topo": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/topo/-/topo-3.0.0.tgz", diff --git a/package.json b/package.json index e8082799a..d2defed61 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "author": "", "license": "Apache-2.0", "dependencies": { + "@types/react-copy-to-clipboard": "^4.2.5", "@types/react-tooltip": "^3.3.5", "apollo-server-express": "^1.3.6", "bunyan": "^1.8.12", @@ -47,6 +48,7 @@ "passport": "^0.4.0", "performance-now": "^2.1.0", "rc-tooltip": "^3.7.2", + "react-copy-to-clipboard": "^5.0.1", "react-tooltip": "^3.6.1", "subscriptions-transport-ws": "^0.9.11", "uuid": "^3.2.1" diff --git a/src/core/client/stream/components/Comment.spec.tsx b/src/core/client/stream/components/Comment.spec.tsx index 6008bfc3b..4f7448a93 100644 --- a/src/core/client/stream/components/Comment.spec.tsx +++ b/src/core/client/stream/components/Comment.spec.tsx @@ -4,6 +4,7 @@ import Comment from "./Comment"; it("renders username and body", () => { const props = { + id: "id", author: { username: "Marvin", }, @@ -16,6 +17,7 @@ it("renders username and body", () => { it("renders with gutterBottom", () => { const props = { + id: "id", author: { username: "Marvin", }, diff --git a/src/core/client/stream/components/Comment.tsx b/src/core/client/stream/components/Comment.tsx index 1f4e11b1c..b594cf27d 100644 --- a/src/core/client/stream/components/Comment.tsx +++ b/src/core/client/stream/components/Comment.tsx @@ -1,10 +1,12 @@ 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 * as styles from "./Comment.css"; export interface CommentProps { + id: string; className?: string; author: { username: string; @@ -32,9 +34,17 @@ const Comment: StatelessComponent = props => { > Share - - - + + + + { + console.log("ey"); + }} + > + + diff --git a/src/core/client/stream/containers/CommentContainer.tsx b/src/core/client/stream/containers/CommentContainer.tsx index 9a4d03cd8..3d7956dc6 100644 --- a/src/core/client/stream/containers/CommentContainer.tsx +++ b/src/core/client/stream/containers/CommentContainer.tsx @@ -17,6 +17,7 @@ const CommentContainer: StatelessComponent = props => { const enhanced = withFragmentContainer<{ data: Data }>( graphql` fragment CommentContainer on Comment { + id author { username } diff --git a/src/core/client/ui/components/Tooltip/Tooltip.css b/src/core/client/ui/components/Tooltip/Tooltip.css index e3de3d8fe..1a1553256 100644 --- a/src/core/client/ui/components/Tooltip/Tooltip.css +++ b/src/core/client/ui/components/Tooltip/Tooltip.css @@ -1,4 +1,5 @@ .root { + padding: 6px 10px; background: #ffffff !important; border: 1px solid #c9cacb; box-sizing: border-box; @@ -12,3 +13,7 @@ border-top-color: transparent !important; } } + +.clickable { + pointer-events: all; +} diff --git a/src/core/client/ui/components/Tooltip/Tooltip.tsx b/src/core/client/ui/components/Tooltip/Tooltip.tsx index dffda088a..f6e1a9cf0 100644 --- a/src/core/client/ui/components/Tooltip/Tooltip.tsx +++ b/src/core/client/ui/components/Tooltip/Tooltip.tsx @@ -1,10 +1,21 @@ +import cn from "classnames"; import React from "react"; import ReactTooltip from "react-tooltip"; import * as styles from "./Tooltip.css"; -class Tooltip extends React.Component { +interface InnerProps extends ReactTooltip.Props { + clickable: boolean; +} + +class Tooltip extends React.Component { public render() { - return ; + const { clickable } = this.props; + return ( + + ); } }