Use onClickOutside HOC instead of mixin

ericgio · Apr 16, 2016 · 048be70 · 048be70
1 parent 396790c
commit 048be70
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 12 deletions.
diff --git a/src/Token.react.js b/src/Token.react.js
@@ -5,7 +5,7 @@ import {findDOMNode} from 'react-dom';
 
 import cx from 'classnames';
 import keyCode from './keyCode';
-import onClickOutside from 'react-onclickoutside';
+import listensToClickOutside from 'react-onclickoutside/decorator';
 
 require('../css/Token.css');
 
@@ -18,8 +18,6 @@ require('../css/Token.css');
 const Token = React.createClass({
   displayName: 'Token',
 
-  mixins: [onClickOutside],
-
   propTypes: {
     /**
      * Handler for removing/deleting the token. If not defined, the token will
@@ -113,4 +111,4 @@ const Token = React.createClass({
   },
 });
 
-export default Token;
+export default listensToClickOutside(Token);
diff --git a/src/Typeahead.react.js b/src/Typeahead.react.js
@@ -8,7 +8,7 @@ import TypeaheadMenu from './TypeaheadMenu.react';
 
 import {find, head, isEmpty, isEqual, uniqueId} from 'lodash';
 import {BACKSPACE, DOWN, ESC, RETURN, TAB, UP} from './keyCode';
-import onClickOutside from 'react-onclickoutside';
+import listensToClickOutside from 'react-onclickoutside/decorator';
 
 require('../css/Typeahead.css');
 
@@ -18,8 +18,6 @@ require('../css/Typeahead.css');
 const Typeahead = React.createClass({
   displayName: 'Typeahead',
 
-  mixins: [onClickOutside],
-
   propTypes: {
     /**
      * Allows the creation of new selections on the fly. Note that any new items
@@ -321,4 +319,4 @@ const Typeahead = React.createClass({
   },
 });
 
-export default Typeahead;
+export default listensToClickOutside(Typeahead);
diff --git a/src/TypeaheadInput.react.js b/src/TypeaheadInput.react.js
@@ -5,7 +5,7 @@ import React, {PropTypes} from 'react';
 import cx from 'classnames';
 import {head} from 'lodash';
 import keyCode from './keyCode';
-import onClickOutside from 'react-onclickoutside';
+import listensToClickOutside from 'react-onclickoutside/decorator';
 
 /**
  * TypeaheadInput
@@ -15,8 +15,6 @@ import onClickOutside from 'react-onclickoutside';
 const TypeaheadInput = React.createClass({
   displayName: 'TypeaheadInput',
 
-  mixins: [onClickOutside],
-
   propTypes: {
     disabled: PropTypes.bool,
     filteredOptions: PropTypes.array,
@@ -127,4 +125,4 @@ const TypeaheadInput = React.createClass({
   },
 });
 
-export default TypeaheadInput;
+export default listensToClickOutside(TypeaheadInput);