Support for ClickOutside

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

@@ -2,14 +2,14 @@ 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 { Button, ClickOutside, Flex, TextField } from "talk-ui/components";
 import * as styles from "./PermalinkPopover.css";
 
 interface InnerProps {
   permalinkUrl: string;
   style?: CSSProperties;
   forwardRef?: RefHandler;
-  toggleVisibility?: () => any;
+  toggleVisibility: () => void;
 }
 
 interface State {
@@ -35,25 +35,27 @@ class PermalinkPopover extends React.Component<InnerProps> {
   };
 
   public render() {
-    const { permalinkUrl } = this.props;
+    const { permalinkUrl, toggleVisibility } = this.props;
     const { copied } = this.state;
     return (
-      <Flex>
-        <TextField defaultValue={permalinkUrl} className={styles.textField} />
-        <CopyToClipboard text={permalinkUrl} 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>
+      <ClickOutside onClickOutside={toggleVisibility}>
+        <Flex>
+          <TextField defaultValue={permalinkUrl} className={styles.textField} />
+          <CopyToClipboard text={permalinkUrl} 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>
+      </ClickOutside>
     );
   }
 }

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

@@ -1,12 +1,12 @@
 import React from "react";
 import { findDOMNode } from "react-dom";
 
-interface Props {
+export interface ClickOutsideProps {
   onClickOutside: () => void;
   children: React.ReactNode;
 }
 
-class ClickOutside extends React.Component<Props> {
+export class ClickOutside extends React.Component<ClickOutsideProps> {
   public domNode: Element | null = null;
 
   public handleClick = (e: MouseEvent) => {
@@ -30,4 +30,5 @@ class ClickOutside extends React.Component<Props> {
     return this.props.children;
   }
 }
+
 export default ClickOutside;

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

@@ -0,0 +1 @@
+export { default, ClickOutside } from "./ClickOutside";

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

@@ -42,7 +42,7 @@ interface Props {
 }
 
 interface RenderProps {
-  toggleVisibility?: () => void;
+  toggleVisibility: () => void;
   forwardRef?: RefHandler;
 }
 
@@ -115,8 +115,6 @@ class Popover extends React.Component<InnerProps> {
                 aria-hidden={!visible}
               >
                 <AriaInfo id={`${id}-ariainfo`}>{description}</AriaInfo>
-
-                {/* <ClickOutside onClickOutside={toggleVisibility}> */}
                 <div
                   style={props.style}
                   className={cn(styles.root, className)}
@@ -129,7 +127,6 @@ class Popover extends React.Component<InnerProps> {
                         forwardRef: props.ref,
                       })}
                 </div>
-                {/* </ClickOutside> */}
               </div>
             )
           }

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

@@ -8,3 +8,4 @@ export { default as UIContext, UIContextProps } from "./UIContext";
 export { default as Flex } from "./Flex";
 export { default as MatchMedia } from "./MatchMedia";
 export { default as TrapFocus } from "./TrapFocus";
+export { default as ClickOutside } from "./ClickOutside";