Feature: disabled flag

README.md

@@ -245,6 +245,12 @@ ReactDOM.render((
           <td></td>
           <td>Let popup div stretch with trigger element. enums of 'width', 'minWidth', 'height', 'minHeight'. (You can also mixed with 'height minWidth')</td>
         </tr>
+        <tr>
+          <td>disabled</td>
+          <td>boolean</td>
+          <td>false</td>
+          <td>Flag for disable the popup, (none of the events is triggered when this flag is setted to true)</td>
+        </tr>
     </tbody>
 </table>
 

examples/disabled.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Trigger from 'rc-trigger';
+import 'rc-trigger/assets/index.less';
+import './disabled.less';
+import { builtinPlacements } from './simple';
+
+class Test extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      disabled: false,
+    };
+    this.handleDisabledChanged = this.handleDisabledChanged.bind(this);
+  }
+
+  handleDisabledChanged(event) {
+    this.setState({ disabled: event.target.checked });
+  }
+
+  render() {
+    const { disabled } = this.state;
+    return (
+      <div className="container">
+        <div className="disabledWrapper">
+          <input onChange={this.handleDisabledChanged} type="checkbox"/>
+          <label> Disabled </label>
+        </div>
+        <div className="examples">
+          <div className="trigger-example">
+              <Trigger
+                onPopupVisibleChange={() => console.log('Click popup visible changed')}
+                popupPlacement={'bottom'}
+                builtinPlacements={builtinPlacements}
+                action={['click']}
+                disabled={disabled}
+                popup={
+                    <div>I'm a popup</div>
+                }
+              >
+                <label>Click me {disabled && '(I\'m disabled)'}</label>
+              </Trigger>
+          </div>
+          <div className="trigger-example">
+              <Trigger
+                onPopupVisibleChange={() => console.log('Hover popup visible changed')}
+                popupPlacement={'bottom'}
+                builtinPlacements={builtinPlacements}
+                action={['hover']}
+                disabled={disabled}
+                popup={
+                    <div>
+                        I'm a popup
+                    </div>
+                }
+              >
+                  <label> Hover me {disabled && '(I\'m disabled)'} </label>
+              </Trigger>
+          </div>
+          <div className="trigger-example">
+              <Trigger
+                onPopupVisibleChange={() => console.log('Hover popup visible changed')}
+                popupPlacement={'contextMenu'}
+                builtinPlacements={builtinPlacements}
+                action={['hover']}
+                disabled={disabled}
+                popupAlign={{
+                  points: ['tl', 'bl'],
+                  offset: [0, 3],
+                }}
+                popup={
+                    <div>
+                        I'm a popup
+                    </div>
+                }
+              >
+                <label> Context Menu {disabled && '(I\'m disabled)'} </label>
+              </Trigger>
+          </div>
+          <Trigger
+            onPopupVisibleChange={() => console.log('Focus popup visible changed')}
+            popupPlacement={'bottom'}
+            builtinPlacements={builtinPlacements}
+            action={['focus']}
+            disabled={disabled}
+            popup={
+                <div>
+                    I'm a popup
+                </div>
+            }
+          >
+            <input placeholder={`Focus me ${disabled ? '(I\'m disabled)' : ''}`} />
+          </Trigger>
+        </div>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<Test />, document.getElementById('__react-content'));

examples/disabled.less

@@ -0,0 +1,26 @@
+.container { 
+    display: flex;
+    flex-direction: column;
+    height: 300px;
+    .disabledWrapper {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 50px;
+        font-size: 24px;
+        input {
+            margin-right: 10px;
+            width: 20px;
+            height: 20px;
+        }
+    }
+    .examples {
+        display: flex;
+        .trigger-example {
+            flex: 1;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+}

examples/simple.js

@@ -15,7 +15,7 @@ function getPopupAlign(state) {
   };
 }
 
-const builtinPlacements = {
+export const builtinPlacements = {
   left: {
     points: ['cr', 'cl'],
   },
@@ -46,10 +46,6 @@ function preventDefault(e) {
   e.preventDefault();
 }
 
-function getPopupContainer(trigger) {
-  return trigger.parentNode;
-}
-
 class Test extends React.Component {
   state = {
     mask: false,
@@ -107,10 +103,6 @@ class Test extends React.Component {
     });
   }
 
-  onVisibleChange = (visible) => {
-    console.log('tooltip', visible);
-  }
-
   onMask = (e) => {
     this.setState({
       mask: e.target.checked,
@@ -271,7 +263,6 @@ class Test extends React.Component {
       </div>
       <div style={{ margin: 120, position: 'relative' }}>
         <Trigger
-          getPopupContainer={undefined && getPopupContainer}
           popupAlign={getPopupAlign(state)}
           popupPlacement={state.placement}
           destroyPopupOnHide={this.state.destroyPopupOnHide}

package.json

@@ -22,7 +22,7 @@
     "lib",
     "assets/*.css"
   ],
-  "licenses": "MIT",
+  "license": "MIT",
   "main": "./lib/index",
   "module": "./es/index",
   "config": {

src/index.js

@@ -78,6 +78,7 @@ export default class Trigger extends React.Component {
     maskAnimation: PropTypes.string,
     stretch: PropTypes.string,
     alignPoint: PropTypes.bool, // Maybe we can support user pass position in the future
+    disabled: PropTypes.bool,
   };
 
   static contextTypes = contextTypes;
@@ -105,6 +106,7 @@ export default class Trigger extends React.Component {
     action: [],
     showAction: [],
     hideAction: [],
+    disabled: false,
   };
 
   constructor(props) {
@@ -209,6 +211,7 @@ export default class Trigger extends React.Component {
   }
 
   onMouseEnter = (e) => {
+    if (this.props.disabled) return;
     const { mouseEnterDelay } = this.props;
     this.fireEvents('onMouseEnter', e);
     this.delaySetPopupVisible(true, mouseEnterDelay, mouseEnterDelay ? null : e);
@@ -220,6 +223,7 @@ export default class Trigger extends React.Component {
   };
 
   onMouseLeave = (e) => {
+    if (this.props.disabled) return;
     this.fireEvents('onMouseLeave', e);
     this.delaySetPopupVisible(false, this.props.mouseLeaveDelay);
   }
@@ -229,6 +233,7 @@ export default class Trigger extends React.Component {
   }
 
   onPopupMouseLeave = (e) => {
+    if (this.props.disabled) return;
     // https://github.com/react-component/trigger/pull/13
     // react bug?
     if (e.relatedTarget && !e.relatedTarget.setTimeout &&
@@ -241,6 +246,7 @@ export default class Trigger extends React.Component {
   }
 
   onFocus = (e) => {
+    if (this.props.disabled) return;
     this.fireEvents('onFocus', e);
     // incase focusin and focusout
     this.clearDelayTimer();
@@ -261,6 +267,7 @@ export default class Trigger extends React.Component {
   }
 
   onBlur = (e) => {
+    if (this.props.disabled) return;
     this.fireEvents('onBlur', e);
     this.clearDelayTimer();
     if (this.isBlurToHide()) {
@@ -269,6 +276,7 @@ export default class Trigger extends React.Component {
   }
 
   onContextMenu = (e) => {
+    if (this.props.disabled) return;
     e.preventDefault();
     this.fireEvents('onContextMenu', e);
     this.setPopupVisible(true, e);
@@ -281,6 +289,7 @@ export default class Trigger extends React.Component {
   }
 
   onClick = (event) => {
+    if (this.props.disabled) return;
     this.fireEvents('onClick', event);
     // focus will trigger click
     if (this.focusTime) {