rc-trigger - npm Package Compare versions

Comparing version 1.2.5 to 1.3.0

HISTORY.md

 # History
 ----
 
+## 1.3.0 / 2016-03-25
+
+- support mask/maskTransitionName/zIndex
+
 ## 1.2.0 / 2016-03-01
@@ -5,0 +9,0 @@

lib/LazyRenderBox.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _react = require('react');
@@ -19,15 +21,19 @@
     children: _react.PropTypes.any,
+    className: _react.PropTypes.string,
     visible: _react.PropTypes.bool,
-    prefixCls: _react.PropTypes.string
+    hiddenClassName: _react.PropTypes.string
   },
   shouldComponentUpdate: function shouldComponentUpdate(nextProps) {
-    return nextProps.visible;
+    return nextProps.hiddenClassName || nextProps.visible;
   },
   render: function render() {
+    if (this.props.hiddenClassName) {
+      var className = this.props.className;
+      if (!this.props.visible) {
+        className += ' ' + this.props.hiddenClassName;
+      }
+      return _react2["default"].createElement('div', _extends({}, this.props, { className: className }));
+    }
     if (_react2["default"].Children.count(this.props.children) > 1) {
-      return _react2["default"].createElement(
-        'div',
-        { className: this.props.prefixCls + '-content' },
-        this.props.children
-      );
+      return _react2["default"].createElement('div', this.props);
     }
@@ -34,0 +40,0 @@ return _react2["default"].Children.only(this.props.children);

lib/Popup.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _react = require('react');
@@ -28,2 +30,6 @@
 
+var _LazyRenderBox = require('./LazyRenderBox');
+
+var _LazyRenderBox2 = _interopRequireDefault(_LazyRenderBox);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -36,5 +42,5 @@
     visible: _react.PropTypes.bool,
-    wrap: _react.PropTypes.object,
     style: _react.PropTypes.object,
     getClassNameFromAlign: _react.PropTypes.func,
+    getRootDomNode: _react.PropTypes.func,
     onMouseEnter: _react.PropTypes.func,
@@ -61,7 +67,16 @@ align: _react.PropTypes.any,
   getPopupDomNode: function getPopupDomNode() {
-    return _reactDom2["default"].findDOMNode(this);
+    return _reactDom2["default"].findDOMNode(this.refs.popup);
   },
   getTarget: function getTarget() {
-    return _reactDom2["default"].findDOMNode(this.props.wrap);
+    return this.props.getRootDomNode();
   },
+  getMaskTransitionName: function getMaskTransitionName() {
+    var props = this.props;
+    var transitionName = props.maskTransitionName;
+    var animation = props.maskAnimation;
+    if (!transitionName && animation) {
+      transitionName = props.prefixCls + '-' + animation;
+    }
+    return transitionName;
+  },
   getTransitionName: function getTransitionName() {
@@ -78,3 +93,3 @@ var props = this.props;
   },
-  render: function render() {
+  getPopupElement: function getPopupElement() {
     var props = this.props;
@@ -92,2 +107,11 @@ var align = props.align;
     }
+    var newStyle = _extends({}, style, this.getZIndexStyle());
+    var popupInnerProps = {
+      className: className,
+      prefixCls: prefixCls,
+      ref: 'popup',
+      onMouseEnter: props.onMouseEnter,
+      onMouseLeave: props.onMouseLeave,
+      style: newStyle
+    };
     if (destroyPopupOnHide) {
@@ -113,10 +137,5 @@ return _react2["default"].createElement(
             _PopupInner2["default"],
-            {
-              className: className,
-              prefixCls: prefixCls,
-              visible: true,
-              onMouseEnter: props.onMouseEnter,
-              onMouseLeave: props.onMouseLeave,
-              style: style
-            },
+            _extends({
+              visible: true
+            }, popupInnerProps),
             props.children
@@ -150,10 +169,5 @@ )
           _PopupInner2["default"],
-          {
-            className: className,
-            hiddenClassName: hiddenClassName,
-            prefixCls: prefixCls,
-            onMouseEnter: props.onMouseEnter,
-            onMouseLeave: props.onMouseLeave,
-            style: style
-          },
+          _extends({
+            hiddenClassName: hiddenClassName
+          }, popupInnerProps),
           props.children
@@ -163,2 +177,46 @@ )
     );
+  },
+  getZIndexStyle: function getZIndexStyle() {
+    var style = {};
+    var props = this.props;
+    if (props.zIndex !== undefined) {
+      style.zIndex = props.zIndex;
+    }
+    return style;
+  },
+  getMaskElement: function getMaskElement() {
+    var props = this.props;
+    var maskElement = void 0;
+    if (props.mask) {
+      var maskTransition = this.getMaskTransitionName();
+      maskElement = _react2["default"].createElement(_LazyRenderBox2["default"], {
+        style: this.getZIndexStyle(),
+        key: 'mask',
+        className: props.prefixCls + '-mask',
+        hiddenClassName: props.prefixCls + '-mask-hidden',
+        visible: props.visible
+      });
+      if (maskTransition) {
+        maskElement = _react2["default"].createElement(
+          _rcAnimate2["default"],
+          {
+            key: 'mask',
+            showProp: 'visible',
+            transitionAppear: true,
+            component: '',
+            transitionName: maskTransition
+          },
+          maskElement
+        );
+      }
+    }
+    return maskElement;
+  },
+  render: function render() {
+    return _react2["default"].createElement(
+      'div',
+      null,
+      this.getMaskElement(),
+      this.getPopupElement()
+    );
   }
@@ -165,0 +223,0 @@ });

lib/PopupInner.js

@@ -44,3 +44,3 @@ 'use strict';
         _LazyRenderBox2["default"],
-        { prefixCls: props.prefixCls, visible: props.visible },
+        { className: props.prefixCls + '-content', visible: props.visible },
         props.children
@@ -47,0 +47,0 @@ )

lib/Trigger.js

@@ -57,2 +57,3 @@ 'use strict';
     mouseLeaveDelay: _react.PropTypes.number,
+    zIndex: _react.PropTypes.number,
     focusDelay: _react.PropTypes.number,
@@ -62,4 +63,7 @@ blurDelay: _react.PropTypes.number,
     destroyPopupOnHide: _react.PropTypes.bool,
+    mask: _react.PropTypes.bool,
     popupAlign: _react.PropTypes.object,
-    popupVisible: _react.PropTypes.bool
+    popupVisible: _react.PropTypes.bool,
+    maskTransitionName: _react.PropTypes.string,
+    maskAnimation: _react.PropTypes.string
   },
@@ -82,2 +86,3 @@
       defaultPopupVisible: false,
+      mask: false,
       action: [],
@@ -123,3 +128,3 @@ showAction: [],
           if (this.isMounted()) {
-            self.popupDomNode = (0, _reactDom.findDOMNode)(this);
+            self.popupDomNode = this.getPopupDomNode();
           } else {
@@ -229,2 +234,5 @@ self.popupDomNode = null;
   },
+  getRootDomNode: function getRootDomNode() {
+    return _reactDom2["default"].findDOMNode(this);
+  },
   getPopupContainer: function getPopupContainer() {
@@ -288,5 +296,9 @@ if (!this.popupContainer) {
       }, mouseProps, {
-        wrap: this,
+        getRootDomNode: this.getRootDomNode,
         style: props.popupStyle,
-        transitionName: props.popupTransitionName
+        mask: props.mask,
+        zIndex: props.zIndex,
+        transitionName: props.popupTransitionName,
+        maskAnimation: props.maskAnimation,
+        maskTransitionName: props.maskTransitionName
       }),
@@ -293,0 +305,0 @@ props.popup

package.json

 {
   "name": "rc-trigger",
-  "version": "1.2.5",
+  "version": "1.3.0",
   "description": "base abstract trigger component for react",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -138,5 +138,11 @@ # rc-trigger
           <td></td>
-          <td>same as https://github.com/react-component/animate</td>
+          <td>https://github.com/react-component/animate</td>
         </tr>
         <tr>
+          <td>maskTransitionName</td>
+          <td>String</td>
+          <td></td>
+          <td>https://github.com/react-component/animate</td>
+        </tr>
+        <tr>
           <td>onPopupVisibleChange</td>
@@ -148,2 +154,8 @@ <td>Function</td>
         <tr>
+          <td>mask</td>
+          <td>boolean</td>
+          <td></td>
+          <td>whether to support mask</td>
+        </tr>
+        <tr>
           <td>popupVisible</td>
@@ -155,2 +167,8 @@ <td>boolean</td>
         <tr>
+          <td>zIndex</td>
+          <td>number</td>
+          <td></td>
+          <td>popup's zIndex</td>
+        </tr>
+        <tr>
           <td>defaultPopupVisible</td>
@@ -157,0 +175,0 @@ <td>boolean</td>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38091

increased by16.58%

Lines of code

871

increased by21.48%

Number of lines in readme file

228

increased by8.57%

No dependency changes