Click outside closes TopRightMenu, detect click outside iframe

.eslintrc.json

@@ -53,7 +53,8 @@
         "no-lonely-if": [2],
         "curly": [2],
         "no-unused-vars": ["error", {
-            "argsIgnorePattern": "next"
+            "argsIgnorePattern": "^_|next",
+            "varsIgnorePattern": "^_"
         }],
         "no-multiple-empty-lines": ["error", {
             "max": 1

client/coral-admin/src/routes/Moderation/components/UserDetail.js

@@ -4,6 +4,7 @@ import styles from './UserDetail.css';
 import Slot from 'coral-framework/components/Slot';
 import Comment from './Comment';
 import {actionsMap} from '../helpers/moderationQueueActionsMap';
+import ClickOutside from 'coral-framework/components/ClickOutside';
 
 export default class UserDetail extends React.Component {
 
@@ -96,92 +97,94 @@ export default class UserDetail extends React.Component {
     }
 
     return (
-      <Drawer handleClickOutside={hideUserDetail}>
-        <h3>{user.username}</h3>
-        {profile && <input className={styles.profileEmail} readOnly type="text" ref={(ref) => this.profile = ref} value={profile} />}
+      <ClickOutside onClickOutside={hideUserDetail}>
+        <Drawer onClose={hideUserDetail}>
+          <h3>{user.username}</h3>
+          {profile && <input className={styles.profileEmail} readOnly type="text" ref={(ref) => this.profile = ref} value={profile} />}
 
-        <Copy onCopy={() => this.showCopied()} text={profile} className={styles.profileEmail}>
-          <Button className={styles.copyButton}>
-            {this.state.emailCopied ? 'Copied!' : 'Copy'}
-          </Button>
-        </Copy>
+          <Copy onCopy={() => this.showCopied()} text={profile} className={styles.profileEmail}>
+            <Button className={styles.copyButton}>
+              {this.state.emailCopied ? 'Copied!' : 'Copy'}
+            </Button>
+          </Copy>
 
-        <Slot
-          fill="userProfile"
-          data={this.props.data}
-          root={this.props.root}
-          user={user}
-        />
-        <p className={styles.memberSince}><strong>Member since</strong> {new Date(user.created_at).toLocaleString()}</p>
-        <hr/>
-        <p>
-          <strong>Account summary</strong>
-          <br/><small className={styles.small}>Data represents the last six months of activity</small>
-        </p>
-        <div className={styles.stats}>
-          <div className={styles.stat}>
-            <p>Total Comments</p>
-            <p>{totalComments}</p>
-          </div>
-          <div className={styles.stat}>
-            <p>Reject Rate</p>
-            <p>{`${(rejectedPercent).toFixed(1)}%`}</p>
-          </div>
-        </div>
-        {
-          selectedIds.length === 0
-          ? (
-            <ul className={styles.commentStatuses}>
-              <li className={tab === 'all' ? styles.active : ''} onClick={this.showAll}>All</li>
-              <li className={tab === 'rejected' ? styles.active : ''} onClick={this.showRejected}>Rejected</li>
-            </ul>
-          )
-          : (
-            <div className={styles.bulkActionGroup}>
-              <Button
-                onClick={bulkAccept}
-                className={styles.bulkAction}
-                cStyle='approve'
-                icon='done'>
-              </Button>
-              <Button
-                onClick={bulkReject}
-                className={styles.bulkAction}
-                cStyle='reject'
-                icon='close'>
-              </Button>
-              {`${selectedIds.length} comments selected`}
+          <Slot
+            fill="userProfile"
+            data={this.props.data}
+            root={this.props.root}
+            user={user}
+          />
+          <p className={styles.memberSince}><strong>Member since</strong> {new Date(user.created_at).toLocaleString()}</p>
+          <hr/>
+          <p>
+            <strong>Account summary</strong>
+            <br/><small className={styles.small}>Data represents the last six months of activity</small>
+          </p>
+          <div className={styles.stats}>
+            <div className={styles.stat}>
+              <p>Total Comments</p>
+              <p>{totalComments}</p>
             </div>
-          )
-        }
-
-        <div>
+            <div className={styles.stat}>
+              <p>Reject Rate</p>
+              <p>{`${(rejectedPercent).toFixed(1)}%`}</p>
+            </div>
+          </div>
           {
-            nodes.map((comment, i) => {
-              const status = comment.action_summaries ? 'FLAGGED' : comment.status;
-              const selected = selectedIds.indexOf(comment.id) !== -1;
-              return <Comment
-                key={i}
-                index={i}
-                comment={comment}
-                selected={false}
-                suspectWords={suspectWords}
-                bannedWords={bannedWords}
-                viewUserDetail={() => {}}
-                actions={actionsMap[status]}
-                showBanUserDialog={showBanUserDialog}
-                showSuspendUserDialog={showSuspendUserDialog}
-                acceptComment={this.acceptThenReload}
-                rejectComment={this.rejectThenReload}
-                selected={selected}
-                toggleSelect={toggleSelect}
-                currentAsset={null}
-                currentUserId={this.props.id}
-                minimal={true} />;
-            })
+            selectedIds.length === 0
+            ? (
+              <ul className={styles.commentStatuses}>
+                <li className={tab === 'all' ? styles.active : ''} onClick={this.showAll}>All</li>
+                <li className={tab === 'rejected' ? styles.active : ''} onClick={this.showRejected}>Rejected</li>
+              </ul>
+            )
+            : (
+              <div className={styles.bulkActionGroup}>
+                <Button
+                  onClick={bulkAccept}
+                  className={styles.bulkAction}
+                  cStyle='approve'
+                  icon='done'>
+                </Button>
+                <Button
+                  onClick={bulkReject}
+                  className={styles.bulkAction}
+                  cStyle='reject'
+                  icon='close'>
+                </Button>
+                {`${selectedIds.length} comments selected`}
+              </div>
+            )
           }
-        </div>
-      </Drawer>
+
+          <div>
+            {
+              nodes.map((comment, i) => {
+                const status = comment.action_summaries ? 'FLAGGED' : comment.status;
+                const selected = selectedIds.indexOf(comment.id) !== -1;
+                return <Comment
+                  key={i}
+                  index={i}
+                  comment={comment}
+                  selected={false}
+                  suspectWords={suspectWords}
+                  bannedWords={bannedWords}
+                  viewUserDetail={() => {}}
+                  actions={actionsMap[status]}
+                  showBanUserDialog={showBanUserDialog}
+                  showSuspendUserDialog={showSuspendUserDialog}
+                  acceptComment={this.acceptThenReload}
+                  rejectComment={this.rejectThenReload}
+                  selected={selected}
+                  toggleSelect={toggleSelect}
+                  currentAsset={null}
+                  currentUserId={this.props.id}
+                  minimal={true} />;
+              })
+            }
+          </div>
+        </Drawer>
+      </ClickOutside>
     );
   }
 }

client/coral-embed-stream/src/components/Toggleable.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import ClickOutside from 'coral-framework/components/ClickOutside';
+import styles from './Toggleable.css';
+import classnames from 'classnames';
+
+const upArrow = <span className={classnames(styles.chevron, styles.up)}></span>;
+const downArrow = <span className={classnames(styles.chevron, styles.down)}></span>;
+export default class Toggleable extends React.Component {
+  constructor(props) {
+    super(props);
+    this.toggle = this.toggle.bind(this);
+    this.close = this.close.bind(this);
+    this.state = {
+      isOpen: false
+    };
+  }
+  toggle() {
+    this.setState({isOpen: !this.state.isOpen});
+  }
+
+  close = () => {
+    this.setState({isOpen: false});
+  }
+
+  render() {
+    const {children} = this.props;
+    const {isOpen} = this.state;
+    return (
+      <ClickOutside onClickOutside={this.close}>
+        <span className={styles.Toggleable} tabIndex="0" >
+          <span className={styles.toggler}
+                onClick={this.toggle}>{isOpen ? upArrow : downArrow}</span>
+          {isOpen ? children : null}
+        </span>
+      </ClickOutside>
+    );
+  }
+}
+

client/coral-embed-stream/src/components/TopRightMenu.js

@@ -1,8 +1,6 @@
 import React, {PropTypes} from 'react';
-import classnames from 'classnames';
-
 import {IgnoreUserWizard} from './IgnoreUserWizard';
-import styles from './TopRightMenu.css';
+import Toggleable from './Toggleable';
 
 // TopRightMenu appears as a dropdown in the top right of the comment.
 // when you click the down cehvron, it expands and shows IgnoreUserWizard
@@ -56,38 +54,6 @@ export class TopRightMenu extends React.Component {
             />
         </div>
       </Toggleable>
-    );        
-  }
-}
-
-const upArrow = <span className={classnames(styles.chevron, styles.up)}></span>;
-const downArrow = <span className={classnames(styles.chevron, styles.down)}></span>;
-class Toggleable extends React.Component {
-  constructor(props) {
-    super(props);
-    this.toggle = this.toggle.bind(this);
-    this.close = this.close.bind(this);
-    this.state = {
-      isOpen: false
-    };
-  }
-  toggle() {
-    this.setState({isOpen: !this.state.isOpen});
-  }
-  close() {
-    this.setState({isOpen: false});
-  }
-  render() {
-    const {children} = this.props;
-    const {isOpen} = this.state;
-    return (
-
-      // /*onBlur={ this.close } */
-      <span className={styles.Toggleable} tabIndex="0" >
-        <span className={styles.toggler}
-              onClick={this.toggle}>{isOpen ? upArrow : downArrow}</span>
-        {isOpen ? children : null}
-      </span>
     );
   }
 }

client/coral-embed/src/index.js

@@ -73,6 +73,11 @@ function configurePymParent(pymParent, opts) {
 
   window.document.body.appendChild(snackbar);
 
+  // Notify embed that there was a click outside.
+  document.addEventListener('click', () => {
+    pymParent.sendMessage('click');
+  }, true);
+
   // Workaround: IOS Safari ignores `width` but respects `min-width` value.
   pymParent.el.firstChild.style.width = '1px';
   pymParent.el.firstChild.style.minWidth = '100%';

client/coral-framework/components/ClickOutside.js

@@ -0,0 +1,35 @@
+import {Component, cloneElement, Children} from 'react';
+import PropTypes from 'prop-types';
+import {findDOMNode} from 'react-dom';
+import {pym} from 'coral-framework';
+
+export default class ClickOutside extends Component {
+  static propTypes = {
+    onClickOutside: PropTypes.func.isRequired
+  };
+
+  domNode = null;
+
+  handleClick = (e) => {
+    const {onClickOutside} = this.props;
+    if (!e || !this.domNode.contains(e.target)) {
+      onClickOutside(e);
+    }
+  };
+
+  componentDidMount() {
+    this.domNode = findDOMNode(this);
+    document.addEventListener('click', this.handleClick, true);
+    pym.onMessage('click', this.handleClick);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleClick, true);
+    pym.messageHandlers.click = pym.messageHandlers.click.filter((h) => h !== this.handleClick);
+  }
+
+  render() {
+    const {children, onClickOutside: _, ...rest} = this.props;
+    return cloneElement(Children.only(children), rest);
+  }
+}

client/coral-plugin-flags/FlagButton.js

@@ -4,11 +4,11 @@ import t from 'coral-framework/services/i18n';
 import {can} from 'coral-framework/services/perms';
 
 import {PopupMenu, Button} from 'coral-ui';
-import onClickOutside from 'react-onclickoutside';
+import ClickOutside from 'coral-framework/components/ClickOutside';
 
 const name = 'coral-plugin-flags';
 
-class FlagButton extends Component {
+export default class FlagButton extends Component {
 
   state = {
     showMenu: false,
@@ -128,7 +128,7 @@ class FlagButton extends Component {
     this.setState({message: e.target.value});
   }
 
-  handleClickOutside () {
+  handleClickOutside = () => {
     this.closeMenu();
   }
 
@@ -138,79 +138,81 @@ class FlagButton extends Component {
     const flagged = flaggedByCurrentUser || localPost;
     const popupMenu = getPopupMenu[this.state.step](this.state.itemType);
 
-    return <div className={`${name}-container`}>
-      <button
-        ref={(ref) => this.flagButton = ref}
-        onClick={!this.props.banned && !flaggedByCurrentUser && !localPost ? this.onReportClick : null}
-        className={`${name}-button`}>
-        {
-          flagged
-          ? <span className={`${name}-button-text`}>{t('reported')}</span>
-          : <span className={`${name}-button-text`}>{t('report')}</span>
-        }
-        <i className={`${name}-icon material-icons ${flagged && 'flaggedIcon'}`}
-          style={flagged ? styles.flaggedIcon : {}}
-          aria-hidden={true}>flag</i>
-      </button>
-      {
-        this.state.showMenu &&
-        <div className={`${name}-popup`} ref={(ref) => this.popup = ref}>
-          <PopupMenu>
-            <div className={`${name}-popup-header`}>{popupMenu.header}</div>
+    return (
+      <ClickOutside onClickOutside={this.handleClickOutside}>
+        <div className={`${name}-container`}>
+          <button
+            ref={(ref) => this.flagButton = ref}
+            onClick={!this.props.banned && !flaggedByCurrentUser && !localPost ? this.onReportClick : null}
+            className={`${name}-button`}>
             {
-              popupMenu.text &&
-              <div className={`${name}-popup-text`}>{popupMenu.text}</div>
+              flagged
+              ? <span className={`${name}-button-text`}>{t('reported')}</span>
+              : <span className={`${name}-button-text`}>{t('report')}</span>
             }
-            {
-              popupMenu.options && <form className={`${name}-popup-form`}>
+            <i className={`${name}-icon material-icons ${flagged && 'flaggedIcon'}`}
+              style={flagged ? styles.flaggedIcon : {}}
+              aria-hidden={true}>flag</i>
+          </button>
+          {
+            this.state.showMenu &&
+            <div className={`${name}-popup`} ref={(ref) => this.popup = ref}>
+              <PopupMenu>
+                <div className={`${name}-popup-header`}>{popupMenu.header}</div>
                 {
-                  popupMenu.options.map((option) =>
-                    <div key={option.val}>
-                      <input
-                        className={`${name}-popup-radio`}
-                        type="radio"
-                        id={option.val}
-                        checked={this.state[popupMenu.sets] === option.val}
-                        onClick={this.onPopupOptionClick(popupMenu.sets)}
-                        value={option.val}/>
-                      <label htmlFor={option.val} className={`${name}-popup-radio-label`}>{option.text}</label><br/>
-                    </div>
-                  )
+                  popupMenu.text &&
+                  <div className={`${name}-popup-text`}>{popupMenu.text}</div>
                 }
                 {
-                  this.state.reason && <div>
-                  <label htmlFor={'message'} className={`${name}-popup-radio-label`}>
-                    {t('flag_reason')}
-                  </label><br/>
-                  <textarea
-                      className={`${name}-reason-text`}
-                      id="message"
-                      rows={4}
-                      onChange={this.onNoteTextChange}
-                      value={this.state.message}/>
-                  </div>
+                  popupMenu.options && <form className={`${name}-popup-form`}>
+                    {
+                      popupMenu.options.map((option) =>
+                        <div key={option.val}>
+                          <input
+                            className={`${name}-popup-radio`}
+                            type="radio"
+                            id={option.val}
+                            checked={this.state[popupMenu.sets] === option.val}
+                            onClick={this.onPopupOptionClick(popupMenu.sets)}
+                            value={option.val}/>
+                          <label htmlFor={option.val} className={`${name}-popup-radio-label`}>{option.text}</label><br/>
+                        </div>
+                      )
+                    }
+                    {
+                      this.state.reason && <div>
+                      <label htmlFor={'message'} className={`${name}-popup-radio-label`}>
+                        {t('flag_reason')}
+                      </label><br/>
+                      <textarea
+                          className={`${name}-reason-text`}
+                          id="message"
+                          rows={4}
+                          onChange={this.onNoteTextChange}
+                          value={this.state.message}/>
+                      </div>
+                    }
+                  </form>
                 }
-              </form>
-            }
-            <div className={`${name}-popup-counter`}>
-              {this.state.step + 1} of {getPopupMenu.length}
+                <div className={`${name}-popup-counter`}>
+                  {this.state.step + 1} of {getPopupMenu.length}
+                </div>
+                {
+                  popupMenu.button && <Button
+                  className={`${name}-popup-button`}
+                  onClick={this.onPopupContinue}>
+                    {popupMenu.button}
+                  </Button>
+                }
+              </PopupMenu>
             </div>
-            {
-              popupMenu.button && <Button
-              className={`${name}-popup-button`}
-              onClick={this.onPopupContinue}>
-                {popupMenu.button}
-              </Button>
-            }
-          </PopupMenu>
+          }
         </div>
-      }
-    </div>;
+      </ClickOutside>
+    );
   }
 }
 
-export default onClickOutside(FlagButton);
-
 const styles = {
   flaggedIcon: {
     color: '#F00'

client/coral-plugin-permalinks/PermalinkButton.js

@@ -1,12 +1,12 @@
 import React, {PropTypes} from 'react';
-import onClickOutside from 'react-onclickoutside';
 const name = 'coral-plugin-permalinks';
 import {Button} from 'coral-ui';
 import styles from './styles.css';
+import ClickOutside from 'coral-framework/components/ClickOutside';
 
 import t from 'coral-framework/services/i18n';
 
-class PermalinkButton extends React.Component {
+export default class PermalinkButton extends React.Component {
 
   static propTypes = {
     articleURL: PropTypes.string.isRequired,
@@ -28,7 +28,7 @@ class PermalinkButton extends React.Component {
     this.setState({popoverOpen: !this.state.popoverOpen});
   }
 
-  handleClickOutside () {
+  handleClickOutside = () => {
     this.setState({popoverOpen: false});
   }
 
@@ -49,33 +49,33 @@ class PermalinkButton extends React.Component {
   render () {
     const {copySuccessful, copyFailure} = this.state;
     return (
-      <div className={`${name}-container`}>
-        <button
-          ref={(ref) => this.linkButton = ref}
-          onClick={this.toggle}
-          className={`${name}-button`}>
-          {t('permalink')}
-          <i className={`${name}-icon material-icons`} aria-hidden={true}>link</i>
-        </button>
-        <div
-          ref={(ref) => this.popover = ref}
-          className={`${name}-popover ${styles.container} ${this.state.popoverOpen ? 'active' : ''}`}>
-          <input
-            className={`${name}-copy-field`}
-            type='text'
-            ref={(input) => this.permalinkInput = input}
-            value={`${this.props.articleURL}#${this.props.commentId}`}
-            onChange={() => {}} />
-          <Button className={`${name}-copy-button ${copySuccessful ? styles.success : ''} ${copyFailure ? styles.failure : ''}`}
-                  onClick={this.copyPermalink} >
-            {!copyFailure && !copySuccessful && 'Copy'}
-            {copySuccessful && 'Copied'}
-            {copyFailure && 'Not supported'}
-          </Button>
+      <ClickOutside onClickOutside={this.handleClickOutside}>
+        <div className={`${name}-container`}>
+          <button
+            ref={(ref) => this.linkButton = ref}
+            onClick={this.toggle}
+            className={`${name}-button`}>
+            {t('permalink')}
+            <i className={`${name}-icon material-icons`} aria-hidden={true}>link</i>
+          </button>
+          <div
+            ref={(ref) => this.popover = ref}
+            className={`${name}-popover ${styles.container} ${this.state.popoverOpen ? 'active' : ''}`}>
+            <input
+              className={`${name}-copy-field`}
+              type='text'
+              ref={(input) => this.permalinkInput = input}
+              value={`${this.props.articleURL}#${this.props.commentId}`}
+              onChange={() => {}} />
+            <Button className={`${name}-copy-button ${copySuccessful ? styles.success : ''} ${copyFailure ? styles.failure : ''}`}
+                    onClick={this.copyPermalink} >
+              {!copyFailure && !copySuccessful && 'Copy'}
+              {copySuccessful && 'Copied'}
+              {copyFailure && 'Not supported'}
+            </Button>
+          </div>
         </div>
-      </div>
+      </ClickOutside>
     );
   }
 }
-
-export default onClickOutside(PermalinkButton);

client/coral-ui/components/Drawer.js

@@ -1,11 +1,10 @@
 import React, {PropTypes} from 'react';
 import styles from './Drawer.css';
-import onClickOutside from 'react-onclickoutside';
 
-const Drawer = ({children, handleClickOutside}) => {
+const Drawer = ({children, onClose}) => {
   return (
     <div className={styles.drawer}>
-      <div className={styles.closeButton} onClick={handleClickOutside}>×</div>
+      <div className={styles.closeButton} onClick={onClose}>×</div>
       <div className={styles.content}>
         {children}
       </div>
@@ -15,7 +14,7 @@ const Drawer = ({children, handleClickOutside}) => {
 
 Drawer.propTypes = {
   active: PropTypes.bool,
-  handleClickOutside: PropTypes.func.isRequired
+  onClose: PropTypes.func.isRequired
 };
 
-export default onClickOutside(Drawer);
+export default Drawer;

package.json

@@ -192,7 +192,6 @@
     "react-linkify": "^0.1.3",
     "react-mdl": "^1.7.2",
     "react-mdl-selectfield": "^0.2.0",
-    "react-onclickoutside": "^5.11.1",
     "react-redux": "^4.4.5",
     "react-router": "^3.0.0",
     "react-tagsinput": "^3.14.0",

yarn.lock

@@ -2041,7 +2041,7 @@ create-hmac@^1.1.0, create-hmac@^1.1.2:
     create-hash "^1.1.0"
     inherits "^2.0.1"
 
-create-react-class@^15.5.1, create-react-class@^15.5.x:
+create-react-class@^15.5.1:
   version "15.5.2"
   resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.5.2.tgz#6a8758348df660b88326a0e764d569f274aad681"
   dependencies:
@@ -6900,12 +6900,6 @@ react-mdl@^1.7.1, react-mdl@^1.7.2:
     lodash.isequal "^4.4.0"
     prop-types "^15.5.0"
 
-react-onclickoutside@^5.11.1:
-  version "5.11.1"
-  resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-5.11.1.tgz#00314e52567cf55faba94cabbacd119619070623"
-  dependencies:
-    create-react-class "^15.5.x"
-
 react-recaptcha@^2.2.6:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/react-recaptcha/-/react-recaptcha-2.2.6.tgz#bb44c1948a39b37d5a41920c73db833e5d8524f9"