Remove click-awayable mixin

mui · Feb 19, 2016 · 9811cda · 9811cda
1 parent 26e6502
commit 9811cda
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 68 deletions.
diff --git a/src/ClickAwayListener.jsx b/src/ClickAwayListener.jsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import events from './utils/events';
+
+const isDescendant = (el, target) => {
+  if (target !== null) {
+    return el === target || isDescendant(el, target.parentNode);
+  }
+  return false;
+};
+
+const clickAwayEvents = ['mousedown', 'touchstart'];
+const bind = (callback) => clickAwayEvents.forEach((event) => events.on(document, event, callback));
+const unbind = (callback) => clickAwayEvents.forEach((event) => events.off(document, event, callback));
+
+export default class ClickAwayListener extends React.Component {
+
+  static propTypes = {
+    children: React.PropTypes.node,
+    onClickAway: React.PropTypes.any,
+    type: React.PropTypes.any,
+  };
+
+  componentDidMount() {
+    if (this.props.onClickAway) {
+      bind(this.handleClickAway);
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.onClickAway !== this.props.onClickAway) {
+      unbind(this.handleClickAway);
+      if (this.props.onClickAway) {
+        bind(this.handleClickAway);
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    unbind(this.handleClickAway);
+  }
+
+  handleClickAway = (event) => {
+    if (event.defaultPrevented) {
+      return;
+    }
+
+    const el = ReactDOM.findDOMNode(this);
+
+    if (document.documentElement.contains(event.target) && !isDescendant(el, event.target)) {
+      this.props.onClickAway(event);
+    }
+  };
+
+
+  render() {
+    const {
+      children,
+      onClickAway,
+      type = 'div',
+      ...other,
+    } = this.props;
+
+    return React.createElement(type, other, children);
+  }
+}
diff --git a/src/menus/menu.jsx b/src/menus/menu.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import update from 'react-addons-update';
-import ClickAwayable from '../mixins/click-awayable';
+import ClickAwayListener from '../ClickAwayListener';
 import autoPrefix from '../styles/auto-prefix';
 import Transitions from '../styles/transitions';
 import KeyCode from '../utils/key-code';
@@ -132,10 +132,6 @@ const Menu = React.createClass({
     muiTheme: React.PropTypes.object,
   },
 
-  mixins: [
-    ClickAwayable,
-  ],
-
   getDefaultProps() {
     return {
       autoWidth: true,
@@ -564,7 +560,8 @@ const Menu = React.createClass({
     });
 
     return (
-      <div
+      <ClickAwayListener
+        onClickAway={this.componentClickAway}
         onKeyDown={this._handleKeyDown}
         style={prepareStyles(mergedRootStyles)}
       >
@@ -581,7 +578,7 @@ const Menu = React.createClass({
             {newChildren}
           </List>
         </Paper>
-      </div>
+      </ClickAwayListener>
     );
   },
 

diff --git a/src/mixins/click-awayable.js b/src/mixins/click-awayable.js
diff --git a/src/mixins/index.js b/src/mixins/index.js
@@ -1,13 +1,10 @@
-import ClickAwayable from './click-awayable';
 import StylePropable from './style-propable';
 import StyleResizable from './style-resizable';
 
-export {ClickAwayable};
 export {StylePropable};
 export {StyleResizable};
 
 export default {
-  ClickAwayable,
   StylePropable,
   StyleResizable,
 };
diff --git a/src/snackbar.jsx b/src/snackbar.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Transitions from './styles/transitions';
-import ClickAwayable from './mixins/click-awayable';
+import ClickAwayListener from './ClickAwayListener';
 import FlatButton from './flat-button';
 import getMuiTheme from './styles/getMuiTheme';
 import StyleResizable from './mixins/style-resizable';
@@ -138,7 +138,6 @@ const Snackbar = React.createClass({
 
   mixins: [
     StyleResizable,
-    ClickAwayable,
   ],
 
   getInitialState() {
@@ -162,7 +161,7 @@ const Snackbar = React.createClass({
 
       //Only Bind clickaway after transition finishes
       this.timerTransitionId = setTimeout(() => {
-        this._bindClickAway();
+        this.timerTransitionId = 0;
       }, 400);
     }
   },
@@ -204,11 +203,10 @@ const Snackbar = React.createClass({
 
         //Only Bind clickaway after transition finishes
         this.timerTransitionId = setTimeout(() => {
-          this._bindClickAway();
+          this.timerTransitionId = 0;
         }, 400);
       } else {
         clearTimeout(this.timerAutoHideId);
-        this._unbindClickAway();
       }
     }
   },
@@ -217,7 +215,6 @@ const Snackbar = React.createClass({
     clearTimeout(this.timerAutoHideId);
     clearTimeout(this.timerTransitionId);
     clearTimeout(this.timerOneAtTheTimeId);
-    this._unbindClickAway();
   },
 
   manuallyBindClickAway: true,
@@ -227,6 +224,8 @@ const Snackbar = React.createClass({
   timerOneAtTheTimeId: undefined,
 
   componentClickAway() {
+    if (this.timerTransitionId) return;
+
     if (this.props.open !== null && this.props.onRequestClose) {
       this.props.onRequestClose('clickaway');
     } else {
@@ -263,6 +262,7 @@ const Snackbar = React.createClass({
       muiTheme: {
         prepareStyles,
       },
+      open,
     } = this.state;
 
     const styles = getStyles(this.props, this.state);
@@ -276,14 +276,18 @@ const Snackbar = React.createClass({
     );
 
     return (
-      <div {...others} style={prepareStyles(Object.assign(styles.root, style))}>
+      <ClickAwayListener
+        {...others}
+        onClickAway={open && this.componentClickAway}
+        style={prepareStyles(Object.assign(styles.root, style))}
+      >
         <div style={prepareStyles(Object.assign(styles.body, bodyStyle))}>
           <div style={prepareStyles(styles.content)}>
             <span>{message}</span>
             {actionButton}
           </div>
         </div>
-      </div>
+      </ClickAwayListener>
     );
   },
 

diff --git a/src/table/table-body.jsx b/src/table/table-body.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Checkbox from '../checkbox';
 import TableRowColumn from './table-row-column';
-import ClickAwayable from '../mixins/click-awayable';
+import ClickAwayListener from '../ClickAwayListener';
 import getMuiTheme from '../styles/getMuiTheme';
 
 const TableBody = React.createClass({
@@ -121,10 +121,6 @@ const TableBody = React.createClass({
     muiTheme: React.PropTypes.object,
   },
 
-  mixins: [
-    ClickAwayable,
-  ],
-
   getDefaultProps() {
     return {
       allRowsSelected: false,
@@ -419,9 +415,14 @@ const TableBody = React.createClass({
     const rows = this._createRows();
 
     return (
-      <tbody className={className} style={prepareStyles(Object.assign({}, style))}>
+      <ClickAwayListener
+        className={className}
+        onClickAway={this.componentClickAway}
+        style={prepareStyles(Object.assign({}, style))}
+        type="tbody"
+      >
         {rows}
-      </tbody>
+      </ClickAwayListener>
     );
   },