nuke-mask - npm Package Compare versions

Comparing version 2.2.3 to 2.2.4

CHANGELOG.md

@@ -6,2 +6,14 @@ # Change Log
 
+<a name="2.2.4"></a>
+## [2.2.4](https://gitlab.alibaba-inc.com/nuke/mask/compare/v2.2.3...v2.2.4) (2018-09-04)
+
+
+### Bug Fixes
+
+* fix mask issue http://rax.alibaba-inc.com/playground/9e11b7ff-b338-4f60-9e36-0e9731ba9e95 ([c03f017](https://gitlab.alibaba-inc.com/nuke/mask/commit/c03f017))
+
+
+
+
+
 <a name="2.2.3"></a>
@@ -8,0 +20,0 @@ ## [2.2.3](https://gitlab.alibaba-inc.com/nuke/mask/compare/v2.2.2...v2.2.3) (2018-08-24)

lib/index.js

@@ -21,2 +21,4 @@ 'use strict';
 
+var _nukeEnv2 = _interopRequireDefault(_nukeEnv);
+
 var _nukeTransition = require('nuke-transition');
@@ -40,2 +42,6 @@
 
+var isWeb = _nukeEnv2.default.isWeb,
+    isWeex = _nukeEnv2.default.isWeex,
+    appInfo = _nukeEnv2.default.appInfo;
+
 var Mask = function (_Component) {
@@ -49,3 +55,2 @@ _inherits(Mask, _Component);
 
-    _this.initFlag = false;
     var visible = true;
@@ -57,21 +62,29 @@
     _this.state = {
-      visible: visible
+      visible: visible,
+      style: visible ? styles.transparent : styles.shown
     };
     return _this;
   }
+  // shouldComponentUpdate(nextProps, nextState) {
+  //   if (!this.initFlag) {
+  //     this.initFlag = true;
+  //     return (
+  //       nextProps.style !== this.props.style ||
+  //       nextState.visible !== this.state.visible
+  //     );
+  //   }
+  //   return true;
+  // }
 
+
   _createClass(Mask, [{
-    key: 'shouldComponentUpdate',
-    value: function shouldComponentUpdate(nextProps, nextState) {
-      if (!this.initFlag) {
-        this.initFlag = true;
-        return nextProps.style !== this.props.style || nextState.visible !== this.state.visible;
-      }
-      return true;
-    }
-  }, {
     key: 'componentDidMount',
     value: function componentDidMount() {
+
       if (this.state.visible) {
-        this.show();
+        if (this.props.animate) {
+          this.doAnimShow();
+        } else {
+          this.show();
+        }
       }
@@ -83,3 +96,4 @@ }
       if (this.props.animate) {
-        return this.animateShow();
+        this.setState({ visible: true, style: styles.transparent });
+        return;
       }
@@ -98,27 +112,26 @@ this.setState({ visible: true });
     value: function componentDidUpdate(prevProps, prevState) {
+      //
       if (this.state.visible && this.props.animate) {
-        this.animateShow();
+        this.doAnimShow();
       }
     }
   }, {
-    key: 'animateShow',
-    value: function animateShow() {
+    key: 'doAnimShow',
+    value: function doAnimShow() {
       var _this2 = this;
 
-      var box = (0, _rax.findDOMNode)(this.maskNode);
       var _props = this.props,
           effect = _props.effect,
           duration = _props.duration;
-      // add setTimeout to avoid bugs
 
-      setTimeout(function () {
-        if (box) {
-          (0, _nukeTransition2.default)(box, { opacity: 1 }, {
-            timingFunction: effect,
-            duration: duration
-          }, function () {
-            _this2.props.onShow && _this2.props.onShow();
-          });
-        }
-      }, 10);
+      var box = (0, _rax.findDOMNode)(this.maskNode);
+      if (this.state.visible && box && this.state.style.opacity == 0) {
+        (0, _nukeTransition2.default)(box, styles.shown, {
+          timingFunction: effect,
+          duration: duration
+        }, function () {
+          _this2.setState({ style: styles.shown });
+          _this2.props.onShow && _this2.props.onShow();
+        });
+      }
     }
@@ -138,9 +151,11 @@ }, {
         if (box) {
-          (0, _nukeTransition2.default)(box, { opacity: 0 }, {
-            timingFunction: effect,
-            duration: duration
-          }, function () {
-            _this3.setState({ visible: false });
-            _this3.props.onHide && _this3.props.onHide();
-          });
+          setTimeout(function () {
+            (0, _nukeTransition2.default)(box, styles.transparent, {
+              timingFunction: effect,
+              duration: duration
+            }, function () {
+              _this3.setState({ visible: false });
+              _this3.props.onHide && _this3.props.onHide();
+            });
+          }, 10);
         }
@@ -166,3 +181,3 @@ } else {
       // EmptyEvent consumes events in android, so it would not be bubbled to mask press.
-      if (_nukeEnv.isWeb) {
+      if (isWeb) {
         e.stopPropagation();
@@ -198,5 +213,9 @@ }
         _nukeView2.default,
-        { style: contentStyle, x: 'autowrap', onClick: function onClick(e) {
+        {
+          style: contentStyle,
+          x: 'autowrap',
+          onClick: function onClick(e) {
             return _this4.emptyEvent(e);
-          } },
+          }
+        },
         children
@@ -223,5 +242,5 @@ );
 
-      if (_nukeEnv.isWeex) {
+      if (isWeex) {
         var nativeAttrs = _extends({}, others, {
-          style: [_nukeEnv.appInfo.platform === 'iOS' ? styles.maskNativeIOS : {}, style],
+          style: [appInfo.platform === 'iOS' ? styles.maskNativeIOS : {}, style],
           onClick: function onClick(e) {
@@ -254,3 +273,3 @@ return _this5.maskPress(e);
           },
-          style: [styles.maskWeb, style],
+          style: [styles.maskWeb, this.state.style, style],
           onClick: function onClick(e) {
@@ -273,2 +292,4 @@ return _this5.maskPress(e);
     width: 750,
+    left: 0,
+    top: 0,
     // To get fullscreen mask , we set screen height
@@ -275,0 +296,0 @@ height: Math.round(_nukeDimensions2.default.get('screen').height / window.devicePixelRatio) + 'wx'

package.json

 {
   "name": "nuke-mask",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "description": "遮罩层",
@@ -55,13 +55,13 @@ "main": "lib/index",
   "dependencies": {
-    "nuke-dimensions": "^2.2.3",
-    "nuke-env": "^2.2.3",
-    "nuke-transition": "^2.2.3",
-    "nuke-view": "^2.2.3"
+    "nuke-dimensions": "^2.2.4",
+    "nuke-env": "^2.2.4",
+    "nuke-transition": "^2.2.4",
+    "nuke-view": "^2.2.4"
   },
   "devDependencies": {
-    "nuke-button": "^2.2.3",
-    "nuke-checkbox": "^2.2.3",
-    "nuke-input": "^2.2.3",
-    "nuke-page": "^2.2.3",
-    "nuke-text": "^2.2.3"
+    "nuke-button": "^2.2.4",
+    "nuke-checkbox": "^2.2.4",
+    "nuke-input": "^2.2.4",
+    "nuke-page": "^2.2.4",
+    "nuke-text": "^2.2.4"
   },
@@ -72,3 +72,3 @@ "publishConfig": {
   "license": "Apache",
-  "gitHead": "31d1903070b554e3c028a9bfac19811d557f4c0c"
+  "gitHead": "fe68bcf499be6b27131be89239c58078850afabd"
 }

src/index.js

@@ -6,10 +6,11 @@ 'use strict';
 import View from 'nuke-view';
-import { isWeb, isWeex, appInfo } from 'nuke-env';
+import Env from 'nuke-env';
 import Transition from 'nuke-transition';
 import Dimensions from 'nuke-dimensions';
 
+const { isWeb, isWeex, appInfo } = Env;
+
 class Mask extends Component {
   constructor(props) {
     super(props);
-    this.initFlag = false;
     let visible = true;
@@ -22,14 +23,23 @@
       visible,
+      style: visible ? styles.transparent : styles.shown
     };
   }
-  shouldComponentUpdate(nextProps, nextState) {
-    if (!this.initFlag) {
-      this.initFlag = true;
-      return nextProps.style !== this.props.style || nextState.visible !== this.state.visible;
-    }
-    return true;
-  }
+  // shouldComponentUpdate(nextProps, nextState) {
+  //   if (!this.initFlag) {
+  //     this.initFlag = true;
+  //     return (
+  //       nextProps.style !== this.props.style ||
+  //       nextState.visible !== this.state.visible
+  //     );
+  //   }
+  //   return true;
+  // }
   componentDidMount() {
+
     if (this.state.visible) {
-      this.show();
+      if (this.props.animate) {
+        this.doAnimShow();
+      } else {
+        this.show();
+      }
     }
@@ -39,3 +49,4 @@ }
     if (this.props.animate) {
-      return this.animateShow();
+      this.setState({ visible: true, style: styles.transparent });
+      return;
     }
@@ -50,25 +61,25 @@ this.setState({ visible: true });
   componentDidUpdate(prevProps, prevState) {
+    //
     if (this.state.visible && this.props.animate) {
-      this.animateShow();
+      this.doAnimShow();
     }
   }
-  animateShow() {
+
+  doAnimShow() {
+    const { effect, duration } = this.props;
     const box = findDOMNode(this.maskNode);
-    const { effect, duration } = this.props;
-    // add setTimeout to avoid bugs
-    setTimeout(() => {
-      if (box) {
-        Transition(
-          box,
-          { opacity: 1 },
-          {
-            timingFunction: effect,
-            duration,
-          },
-          () => {
-            this.props.onShow && this.props.onShow();
-          }
-        );
-      }
-    }, 10);
+    if (this.state.visible && box && this.state.style.opacity == 0) {
+      Transition(
+        box,
+        styles.shown,
+        {
+          timingFunction: effect,
+          duration,
+        },
+        () => {
+          this.setState({ style: styles.shown });
+          this.props.onShow && this.props.onShow();
+        }
+      );
+    }
   }
@@ -80,14 +91,16 @@ hide() {
       if (box) {
-        Transition(
-          box,
-          { opacity: 0 },
-          {
-            timingFunction: effect,
-            duration,
-          },
-          () => {
-            this.setState({ visible: false });
-            this.props.onHide && this.props.onHide();
-          }
-        );
+        setTimeout(() => {
+          Transition(
+            box,
+            styles.transparent,
+            {
+              timingFunction: effect,
+              duration,
+            },
+            () => {
+              this.setState({ visible: false });
+              this.props.onHide && this.props.onHide();
+            }
+          );
+        }, 10);
       }
@@ -131,3 +144,7 @@ } else {
     return (
-      <View style={contentStyle} x="autowrap" onClick={e => this.emptyEvent(e)}>
+      <View
+        style={contentStyle}
+        x="autowrap"
+        onClick={e => this.emptyEvent(e)}
+      >
         {children}
@@ -139,3 +156,11 @@ </View>
     const { visible } = this.state;
-    const { content, children, style = {}, onVisibleChanged, onClick, noPress = false, ...others } = this.props;
+    const {
+      content,
+      children,
+      style = {},
+      onVisibleChanged,
+      onClick,
+      noPress = false,
+      ...others
+    } = this.props;
 
@@ -170,3 +195,3 @@ if (isWeex) {
         }}
-        style={[styles.maskWeb, style]}
+        style={[styles.maskWeb, this.state.style, style]}
         onClick={e => this.maskPress(e)}
@@ -184,4 +209,8 @@ >
     width: 750,
+    left: 0,
+    top: 0,
     // To get fullscreen mask , we set screen height
-    height: `${Math.round(Dimensions.get('screen').height / window.devicePixelRatio)}wx`,
+    height:
+      `${Math.round(Dimensions.get('screen').height / window.devicePixelRatio)
+      }wx`,
   },
@@ -188,0 +217,0 @@

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

40738

increased by3.07%

Lines of code

580

increased by8.01%

Dependency changes

• Updatednuke-dimensions@^2.2.4

• Updatednuke-env@^2.2.4

• Updatednuke-transition@^2.2.4

• Updatednuke-view@^2.2.4