Support for esc char

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

@@ -1,8 +1,8 @@
-import { Localized } from "fluent-react/compat";
 import React from "react";
 import { StatelessComponent } from "react";
-import { Button, Popover, Typography } from "talk-ui/components";
-import PermalinkPopover from "../PermalinkPopover";
+import { Typography } from "talk-ui/components";
+
+import Permalink from "../Permalink/Permalink";
 import Timestamp from "./Timestamp";
 import TopBar from "./TopBar";
 import Username from "./Username";
@@ -26,24 +26,7 @@ const Comment: StatelessComponent<CommentProps> = props => {
       </TopBar>
       <Typography>{props.body}</Typography>
       <div>
-        <Popover
-          // tslint:disable-next-line:jsx-no-lambda
-          body={({ toggleVisibility, forwardRef }) => (
-            <PermalinkPopover
-              commentID={props.id}
-              forwardRef={forwardRef}
-              toggleVisibility={toggleVisibility}
-            />
-          )}
-        >
-          {({ toggleVisibility, forwardRef }) => (
-            <Button onClick={toggleVisibility} forwardRef={forwardRef}>
-              <Localized id="comments-permalink-share">
-                <span>Share</span>
-              </Localized>
-            </Button>
-          )}
-        </Popover>
+        <Permalink commentID={props.id} />
       </div>
     </div>
   );

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

@@ -0,0 +1,36 @@
+import { Localized } from "fluent-react/compat";
+import React from "react";
+import { Button, Popover } from "talk-ui/components";
+import PermalinkPopover from "./PermalinkPopover";
+
+interface InnerProps {
+  commentID: string;
+}
+
+class Permalink extends React.Component<InnerProps> {
+  public render() {
+    const { commentID } = this.props;
+    return (
+      <Popover
+        placement="top"
+        body={({ toggleVisibility, forwardRef }) => (
+          <PermalinkPopover
+            commentID={commentID}
+            forwardRef={forwardRef}
+            toggleVisibility={toggleVisibility}
+          />
+        )}
+      >
+        {({ toggleVisibility, forwardRef }) => (
+          <Button onClick={toggleVisibility} forwardRef={forwardRef}>
+            <Localized id="comments-permalink-share">
+              <span>Share</span>
+            </Localized>
+          </Button>
+        )}
+      </Popover>
+    );
+  }
+}
+
+export default Permalink;

src/core/client/stream/components/Permalink/PermalinkPopover.css

@@ -3,6 +3,4 @@
 }
 
 .root {
-  padding: 6px 10px;
-  display: flex;
 }

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

@@ -1,9 +1,61 @@
-import { Manager, Popper, Reference } from "react-popper";
+import { Localized } from "fluent-react/compat";
+import React, { CSSProperties } from "react";
+import CopyToClipboard from "react-copy-to-clipboard";
+import { RefHandler } from "react-popper";
+import { Button, Flex, TextField } from "talk-ui/components";
+import * as styles from "./PermalinkPopover.css";
 
-import Popover from "./Popover";
+interface InnerProps {
+  commentID: string;
+  style?: CSSProperties;
+  forwardRef?: RefHandler;
+  toggleVisibility?: () => any;
+}
 
-const PermalinkPopover = ({ id, show, style }) => (
-  <Popover id={id} style={style}>
-    <Textfield /> Copy
-  </Popover>
-);
+interface State {
+  copied: boolean;
+}
+
+class PermalinkPopover extends React.Component<InnerProps> {
+  public state: State = {
+    copied: false,
+  };
+
+  public onCopy = async () => {
+    await this.toggleCopied();
+    setTimeout(() => {
+      this.toggleCopied();
+    }, 800);
+  };
+
+  public toggleCopied = () => {
+    this.setState((state: State) => ({
+      copied: !state.copied,
+    }));
+  };
+
+  public render() {
+    const { commentID } = this.props;
+    const { copied } = this.state;
+    return (
+      <Flex>
+        <TextField defaultValue={commentID} className={styles.textField} />
+        <CopyToClipboard text={commentID} onCopy={this.onCopy}>
+          <Button color="primary" variant="filled">
+            {copied ? (
+              <Localized id="comments-permalink-copied">
+                <span>Copied!</span>
+              </Localized>
+            ) : (
+              <Localized id="comments-permalink-copy">
+                <span>Copy</span>
+              </Localized>
+            )}
+          </Button>
+        </CopyToClipboard>
+      </Flex>
+    );
+  }
+}
+
+export default PermalinkPopover;

src/core/client/stream/components/Permalink/PermalinkShareButton.tsx

@@ -1,30 +0,0 @@
-import React from "react";
-import ToggleShow from "./ToggleShow";
-
-const PermalinkShareButton = () => (
-  <ToggleShow>
-    {({ toggleShow, show }) => (
-      <Manager>
-        <Reference>
-          {({ ref }) => (
-            <Button ref={ref} onClick={toggleShow} aria-controls="popover-id">
-              Share
-            </Button>
-          )}
-        </Reference>
-        <Popper placement="right">
-          {({ ref, style, placement, arrowProps }) => (
-            <PermalinkPopover
-              visible={show}
-              style={style}
-              ref={ref}
-              id="popover-id"
-            />
-          )}
-        </Popper>
-      </Manager>
-    )}
-  </ToggleShow>
-);
-
-export default PermalinkShareButton;

src/core/client/stream/components/Permalink/Popover.tsx

@@ -1,9 +0,0 @@
-const Popover = ({
-  id,
-  style,
-  children,
-  visible,
-  onClose,
-  firstFocusable,
-  lastFocusable,
-}) => <div aria-role="dialog">{children}</div>;

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

@@ -1,61 +0,0 @@
-import { Localized } from "fluent-react/compat";
-import React, { CSSProperties } from "react";
-import CopyToClipboard from "react-copy-to-clipboard";
-import { RefHandler } from "react-popper";
-import { Button, TextField } from "talk-ui/components";
-import * as styles from "./PermalinkPopover.css";
-
-interface InnerProps {
-  commentID: string;
-  style?: CSSProperties;
-  forwardRef?: RefHandler;
-  toggleVisibility?: () => any;
-}
-
-interface State {
-  copied: boolean;
-}
-
-class PermalinkPopover extends React.Component<InnerProps> {
-  public state: State = {
-    copied: false,
-  };
-
-  public onCopy = async () => {
-    await this.toggleCopied();
-    setTimeout(() => {
-      this.toggleCopied();
-    }, 800);
-  };
-
-  public toggleCopied = () => {
-    this.setState((state: State) => ({
-      copied: !state.copied,
-    }));
-  };
-
-  public render() {
-    const { commentID } = this.props;
-    const { copied } = this.state;
-    return (
-      <div className={styles.root}>
-        <TextField defaultValue={commentID} className={styles.textField} />
-        <CopyToClipboard text={commentID} onCopy={this.onCopy}>
-          <Button color="primary" variant="filled">
-            {copied ? (
-              <Localized id="comments-permalink-copied">
-                <span>Copied!</span>
-              </Localized>
-            ) : (
-              <Localized id="comments-permalink-copy">
-                <span>Copy</span>
-              </Localized>
-            )}
-          </Button>
-        </CopyToClipboard>
-      </div>
-    );
-  }
-}
-
-export default PermalinkPopover;

src/core/client/tslint.json

@@ -3,11 +3,13 @@
   "rules": {
     "jsx-curly-spacing": false,
     "jsx-no-multiline-js": false,
-    "jsx-boolean-value": [true, "never"]
+    "jsx-boolean-value": [true, "never"],
+    "jsx-no-lambda": false
   },
   "jsRules": {
     "jsx-curly-spacing": false,
     "jsx-no-multiline-js": false,
-    "jsx-boolean-value": [true, "never"]
+    "jsx-boolean-value": [true, "never"],
+    "jsx-no-lambda": false
   }
 }

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

@@ -1,15 +1,15 @@
 .root {
-  padding: 6px 10px;
-  background: #ffffff !important;
+  background: #ffffff;
   border: 1px solid #c9cacb;
   box-sizing: border-box;
   box-shadow: 1px 0px 4px rgba(0, 0, 0, 0.25);
   border-radius: 1px;
-  color: #222 !important;
-  display: flex !important;
+  color: #222;
+  display: flex;
+  padding: 6px 10px;
 
   &:after,
   &::before {
-    border-top-color: transparent !important;
+    border-top-color: transparent;
   }
 }

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

@@ -6,6 +6,7 @@ menu: UI Kit
 import { Playground, PropsTable } from 'docz'
 import Popover from './Popover'
 import Button from '../Button'
+import ButtonIcon from '../Button/ButtonIcon'
 
 # Popover
 
@@ -14,7 +15,6 @@ import Button from '../Button'
 ## Basic usage
 <Playground>
   <Popover
-    // tslint:disable-next-line:jsx-no-lambda
     body={<div>This is the body</div>}
   >
     {({ toggleVisibility, forwardRef }) => (
@@ -28,12 +28,12 @@ import Button from '../Button'
 #### Example with `placement=top`
 <Playground>
   <Popover
-    // tslint:disable-next-line:jsx-no-lambda
     placement="top"
     body={({ toggleVisibility, forwardRef }) => (
       <div>
         This is the body
         <Button onClick={toggleVisibility}>
+          <ButtonIcon>close</ButtonIcon>
           Close
         </Button>
       </div>

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

@@ -57,6 +57,27 @@ class Popover extends React.Component<InnerProps> {
     }));
   };
 
+  public close = () => {
+    this.setState((state: State) => ({
+      visible: false,
+    }));
+  };
+
+  public handleEsc = (e: KeyboardEvent) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      this.close();
+    }
+  };
+
+  public componentDidMount() {
+    document.addEventListener("keydown", this.handleEsc, true);
+  }
+
+  public componentWillUnmount() {
+    document.removeEventListener("keydown", this.handleEsc, true);
+  }
+
   public render() {
     const {
       id,
@@ -95,7 +116,7 @@ class Popover extends React.Component<InnerProps> {
               >
                 <AriaInfo id={`${id}-ariainfo`}>{description}</AriaInfo>
 
-                {/* <ClickOutside onClickOutside={onClose}> */}
+                {/* <ClickOutside onClickOutside={toggleVisibility}> */}
                 <div
                   style={props.style}
                   className={cn(styles.root, className)}