support maskClosble. Fixes #29

react-component · Sep 22, 2016 · a6db35e · a6db35e
1 parent 48a11f5
commit a6db35e
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -156,9 +156,15 @@ ReactDOM.render((
         <tr>
           <td>mask</td>
           <td>boolean</td>
-          <td></td>
+          <td>false</td>
           <td>whether to support mask</td>
         </tr>
+        <tr>
+          <td>maskClosable</td>
+          <td>boolean</td>
+          <td>true</td>
+          <td>whether to support click mask to hide</td>
+        </tr>
         <tr>
           <td>popupVisible</td>
           <td>boolean</td>

diff --git a/examples/simple.js b/examples/simple.js
@@ -54,6 +54,8 @@ function getPopupContainer(trigger) {
 const Test = React.createClass({
   getInitialState() {
     return {
+      mask: false,
+      maskClosable: false,
       placement: 'right',
       trigger: {
         hover: 1,
@@ -105,6 +107,18 @@ const Test = React.createClass({
     console.log('tooltip', visible);
   },
 
+  onMask(e) {
+    this.setState({
+      mask: e.target.checked,
+    });
+  },
+
+  onMaskClosable(e) {
+    this.setState({
+      maskClosable: e.target.checked,
+    });
+  },
+
   destroy() {
     this.setState({
       destroyed: true,
@@ -156,7 +170,7 @@ const Test = React.createClass({
         <label>
           <input
             value="hover"
-            checked={trigger.hover}
+            checked={!!trigger.hover}
             type="checkbox"
             onChange={this.onTriggerChange}
           />
@@ -165,7 +179,7 @@ const Test = React.createClass({
         <label>
           <input
             value="focus"
-            checked={trigger.focus}
+            checked={!!trigger.focus}
             type="checkbox"
             onChange={this.onTriggerChange}
           />
@@ -174,7 +188,7 @@ const Test = React.createClass({
         <label>
           <input
             value="click"
-            checked={trigger.click}
+            checked={!!trigger.click}
             type="checkbox"
             onChange={this.onTriggerChange}
           />
@@ -189,7 +203,28 @@ const Test = React.createClass({
           />
           destroyPopupOnHide
         </label>
-        <br/>
+
+        &nbsp;&nbsp;&nbsp;&nbsp;
+        <label>
+          <input
+            checked={!!this.state.mask}
+            type="checkbox"
+            onChange={this.onMask}
+          />
+          mask
+        </label>
+
+        &nbsp;&nbsp;&nbsp;&nbsp;
+        <label>
+          <input
+            checked={!!this.state.maskClosable}
+            type="checkbox"
+            onChange={this.onMaskClosable}
+          />
+          maskClosable
+        </label>
+
+        <br />
         <label>
           offsetX:
           <input
@@ -217,16 +252,17 @@ const Test = React.createClass({
           popupPlacement={state.placement}
           destroyPopupOnHide={this.state.destroyPopupOnHide}
           // zIndex={40}
-          // mask
+          mask={this.state.mask}
+          maskClosable={this.state.maskClosable}
           // maskAnimation="fade"
           // mouseEnterDelay={0.1}
           // mouseLeaveDelay={0.1}
           action={Object.keys(state.trigger)}
           builtinPlacements={builtinPlacements}
           popup={
-          <div style={{ border: '1px solid red', padding: 10, background: 'white' }}>
-          i am a popup
-          </div>
+            <div style={{ border: '1px solid red', padding: 10, background: 'white' }}>
+              i am a popup
+            </div>
           }
           popupTransitionName={state.transitionName}
         >

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-trigger",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "description": "base abstract trigger component for react",
   "keywords": [
     "react",
@@ -30,7 +30,7 @@
     "build": "rc-tools run build",
     "gh-pages": "rc-tools run gh-pages",
     "start": "rc-tools run server",
-    "pub": "rc-tools run pub",
+    "pub": "rc-tools run pub --babel-runtime",
     "lint": "rc-tools run lint",
     "karma": "rc-tools run karma",
     "saucelabs": "rc-tools run saucelabs",
@@ -53,6 +53,7 @@
     "lint"
   ],
   "dependencies": {
+    "babel-runtime": "6.x",
     "rc-align": "2.x",
     "rc-animate": "2.x",
     "rc-util": "^3.3.x"

diff --git a/src/Trigger.jsx b/src/Trigger.jsx
@@ -13,7 +13,6 @@ function returnEmptyString() {
   return '';
 }
 
-
 const ALL_HANDLERS = ['onClick', 'onMouseDown', 'onTouchStart', 'onMouseEnter',
   'onMouseLeave', 'onFocus', 'onBlur'];
 
@@ -45,6 +44,7 @@ const Trigger = React.createClass({
     getPopupContainer: PropTypes.func,
     destroyPopupOnHide: PropTypes.bool,
     mask: PropTypes.bool,
+    maskClosable: PropTypes.bool,
     onPopupAlign: PropTypes.func,
     popupAlign: PropTypes.object,
     popupVisible: PropTypes.bool,
@@ -77,27 +77,29 @@ const Trigger = React.createClass({
         if (instance.isMouseLeaveToHide()) {
           mouseProps.onMouseLeave = instance.onPopupMouseLeave;
         }
-        return (<Popup
-          prefixCls={props.prefixCls}
-          destroyPopupOnHide={props.destroyPopupOnHide}
-          visible={state.popupVisible}
-          className={props.popupClassName}
-          action={props.action}
-          align={instance.getPopupAlign()}
-          onAlign={props.onPopupAlign}
-          animation={props.popupAnimation}
-          getClassNameFromAlign={instance.getPopupClassNameFromAlign}
-          {...mouseProps}
-          getRootDomNode={instance.getRootDomNode}
-          style={props.popupStyle}
-          mask={props.mask}
-          zIndex={props.zIndex}
-          transitionName={props.popupTransitionName}
-          maskAnimation={props.maskAnimation}
-          maskTransitionName={props.maskTransitionName}
-        >
-          {typeof props.popup === 'function' ? props.popup() : props.popup}
-        </Popup>);
+        return (
+          <Popup
+            prefixCls={props.prefixCls}
+            destroyPopupOnHide={props.destroyPopupOnHide}
+            visible={state.popupVisible}
+            className={props.popupClassName}
+            action={props.action}
+            align={instance.getPopupAlign()}
+            onAlign={props.onPopupAlign}
+            animation={props.popupAnimation}
+            getClassNameFromAlign={instance.getPopupClassNameFromAlign}
+            {...mouseProps}
+            getRootDomNode={instance.getRootDomNode}
+            style={props.popupStyle}
+            mask={props.mask}
+            zIndex={props.zIndex}
+            transitionName={props.popupTransitionName}
+            maskAnimation={props.maskAnimation}
+            maskTransitionName={props.maskTransitionName}
+          >
+            {typeof props.popup === 'function' ? props.popup() : props.popup}
+          </Popup>
+        );
       },
     }),
   ],
@@ -119,6 +121,7 @@ const Trigger = React.createClass({
       popupAlign: {},
       defaultPopupVisible: false,
       mask: false,
+      maskClosable: true,
       action: [],
       showAction: [],
       hideAction: [],
@@ -277,11 +280,14 @@ const Trigger = React.createClass({
   },
 
   onDocumentClick(event) {
+    if (this.props.mask && !this.props.maskClosable) {
+      return;
+    }
     const target = event.target;
     const root = findDOMNode(this);
     const popupNode = this.getPopupDomNode();
     if (!contains(root, target) && !contains(popupNode, target)) {
-      this.setPopupVisible(false);
+      this.close();
     }
   },
 
@@ -406,6 +412,10 @@ const Trigger = React.createClass({
     }
   },
 
+  close() {
+    this.setPopupVisible(false);
+  },
+
   render() {
     const props = this.props;
     const children = props.children;