nuke-mask - npm Package Compare versions

Comparing version 0.0.12 to 0.1.0

docs/advanced.md

@@ -16,2 +16,3 @@ # Mask 遮罩层 Demo
 import Text from 'nuke-text';
+import Env from 'nuke-env';
 import Checkbox from 'nuke-checkbox';
@@ -21,2 +22,3 @@ import Button from 'nuke-button';
 import Page from 'nuke-page';
+const {isWeb} =Env;
 let App = class NukeDemoIndex extends Component {
@@ -40,3 +42,5 @@ constructor() {
     }
+    
     onChange =(value) =>{
+
         this.setState({
@@ -53,6 +57,5 @@ fruitChecked:value
                 </View>
-                <Button type="primary" onPress={(e)=>this.showMask()}>打开浮层</Button>
-                <Mask defaultVisible={false} ref="myMask" animate={true} style={styles.mask} maskClosable={false}>
+                <Button type="primary" onPress={(e)=>this.showMask()}>打开浮层(空白区域不能关闭)</Button>
+                <Mask defaultVisible={false} ref="myMask" animate={true} style={styles.mask} contentStyle={styles.body}>
                     
-                    <View style={styles.body}>
                         <View style={styles.head}><Text style={styles.textHead}>选择区域</Text></View>
@@ -62,7 +65,7 @@ <View style={styles.topicsWrap}>
                         </View>
-                    </View>
-                    <View style={styles.footer}>
-                        <Button rect block style={styles.dlgBtn} type="primary" size="large" onPress={()=>this.hideMask()}>确定</Button>
-                       
-                    </View>
+                         <View style={styles.footer}>
+                            <Button rect block style={styles.dlgBtn} type="primary" size="large" onPress={()=>this.hideMask()}>确定</Button>
+                           
+                        </View>
+                   
                 </Mask>
@@ -92,6 +95,5 @@
         width: '750rem',
-        height: '364rem',
+        height: '468rem',
         borderRadius:'8rem',
-        paddingLeft:40,
-        paddingRight:40,
+        
         paddingTop:30,
@@ -102,3 +104,3 @@ borderRadius:'8rem',
       head:{
-        height: 50,
+        height: 60,
         alignItems: 'center',
@@ -115,3 +117,4 @@ justifyContent: 'center',
       topics:{
-        padding:'10rem',
+        paddingLeft:40,
+        paddingRight:40,
         flexDirection:'row',
@@ -118,0 +121,0 @@ },

docs/basic.md

@@ -44,8 +44,6 @@ # Mask 遮罩层 Demo
                 <Mask defaultVisible={false} onVisibleChanged={this.onVisibleChanged} ref="myMask" animate={true} style={styles.mask} maskClosable={true}>
-                    <View style={styles.bg}>
                         <View style={styles.dialogWrap}>
-                            <Text style={styles.text}>遮罩层里的内容</Text>
-                            <Button type="primary" onPress={(e)=>this.hideMask(e)}>点击关闭</Button>
+                            <Text style={styles.text}>点击空白区域可关闭</Text>
+                            <Button type="primary" onPress={(e)=>this.hideMask(e)}>点击按钮关闭</Button>
                         </View>
-                    </View>
                 </Mask>
@@ -66,6 +64,4 @@
     mask:{
+        flex:1,
 
-    },
-    bg:{
-        flex:1,
         width:'750rem',
@@ -87,3 +83,2 @@ alignItems: 'center',
         marginBottom:20,
-        //color:'#ffffff'
     }
@@ -90,0 +85,0 @@ }

HISTORY.md

 # Changelog 
 
 
+## 0.1.0 / 2017-10-20 
+
+  * [[cb4cc7b](http://gitlab.alibaba-inc.com/nuke/mask/commit/cb4cc7bb6182535fe42828368be95ff785a8a0a4)] - `fix` fix init render more than once 
+  * [[3796bb5](http://gitlab.alibaba-inc.com/nuke/mask/commit/3796bb59fc20c766598bfc148f04e288ff990094)] - `fix` 修复若干逻辑不正确的bug 
+
 ## 0.0.12 / 2017-09-28 
@@ -5,0 +10,0 @@

lib/index.js

@@ -40,3 +40,4 @@ 'use strict';
 
-var isWeex = _nukeEnv2.default.isWeex,
+var isWeb = _nukeEnv2.default.isWeb,
+    isWeex = _nukeEnv2.default.isWeex,
     appInfo = _nukeEnv2.default.appInfo;
@@ -52,2 +53,3 @@
 
+        _this.initFlag = false;
         var visible = true;
@@ -66,2 +68,11 @@
     _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 || nextState.styleOpacity !== this.state.styleOpacity;
+            }
+            return true;
+        }
+    }, {
         key: 'componentDidMount',
@@ -136,3 +147,3 @@ value: function componentDidMount() {
 
-                var box = (0, _rax.findDOMNode)(this.maskNode);
+                var box = this.maskNode;
                 (0, _nukeTransition2.default)(box, { opacity: 0 }, {
@@ -155,3 +166,3 @@ timingFunction: effect,
         key: 'maskPress',
-        value: function maskPress() {
+        value: function maskPress(e) {
             if (this.props.maskClosable) {
@@ -163,14 +174,48 @@ this.hide();
     }, {
+        key: 'empty',
+        value: function empty(e) {
+            if (isWeb) {
+                e.stopPropagation();
+            }
+        }
+    }, {
+        key: 'getChildren',
+        value: function getChildren() {
+            var _this4 = this;
+
+            var _props3 = this.props,
+                children = _props3.children,
+                _props3$contentStyle = _props3.contentStyle,
+                contentStyle = _props3$contentStyle === undefined ? {} : _props3$contentStyle;
+
+            if (!children) return null;
+            if (children.length === 1) {
+                return (0, _rax.cloneElement)(children[0], {
+                    onPress: function onPress(e) {}
+                });
+            } else {
+                return (0, _rax.createElement)(
+                    _nukeView2.default,
+                    { style: contentStyle, x: 'autowrap', onClick: function onClick(e) {
+                            return _this4.empty(e);
+                        } },
+                    children
+                );
+            }
+        }
+    }, {
         key: 'render',
         value: function render() {
-            var _this4 = this;
+            var _this5 = this;
 
             var visible = this.state.visible;
 
-            var _props3 = this.props,
-                content = _props3.content,
-                children = _props3.children,
-                _props3$style = _props3.style,
-                style = _props3$style === undefined ? {} : _props3$style,
-                others = _objectWithoutProperties(_props3, ['content', 'children', 'style']);
+            var _props4 = this.props,
+                content = _props4.content,
+                children = _props4.children,
+                _props4$style = _props4.style,
+                style = _props4$style === undefined ? {} : _props4$style,
+                onVisibleChanged = _props4.onVisibleChanged,
+                onClick = _props4.onClick,
+                others = _objectWithoutProperties(_props4, ['content', 'children', 'style', 'onVisibleChanged', 'onClick']);
             //mask 组件在安卓端bug较多
@@ -183,7 +228,9 @@
                     _extends({ ref: function ref(n) {
-                            _this4.maskNode = (0, _rax.findDOMNode)(n);
+                            _this5.maskNode = (0, _rax.findDOMNode)(n);
+                        }, style: [styles.transparent, { opacity: this.state.styleOpacity }, style] }, others, { onClick: function onClick(e) {
+                            return _this5.maskPress(e);
                         }, onVisibleChanged: function onVisibleChanged(e) {
-                            return _this4.change(e);
-                        }, style: [styles.transparent, { opacity: this.state.styleOpacity }, style] }, others),
-                    children
+                            return _this5.change(e);
+                        } }),
+                    this.getChildren()
                 ) : null;
@@ -195,7 +242,7 @@ return maskWeex;
                     _extends({ ref: function ref(n) {
-                            _this4.maskNode = (0, _rax.findDOMNode)(n);
-                        }, x: 'mask', style: [styles.maskPosition, { opacity: this.state.styleOpacity }, style], onClick: function onClick(e) {
-                            return _this4.maskPress(e);
-                        } }, others),
-                    children
+                            _this5.maskNode = (0, _rax.findDOMNode)(n);
+                        }, style: [styles.maskPosition, { opacity: this.state.styleOpacity }, style] }, others, { onClick: function onClick(e) {
+                            return _this5.maskPress(e);
+                        } }),
+                    this.getChildren()
                 ) : null;
@@ -202,0 +249,0 @@ }

package.json

 {
   "name": "nuke-mask",
-  "version": "0.0.12",
+  "version": "0.1.0",
   "description": "遮罩层",
@@ -74,6 +74,3 @@ "main": "lib/index",
     "registry": "http://registry.npmjs.org"
-  },
-  "peerDependencies": {
-    "rax": "^0.4.8"
   }
 }

README.md

@@ -38,3 +38,12 @@ # Mask
 duration | 动画时长，默认 200（单位是 ms）|number|200
+contentStyle| 内容 style, 如果 Mask 的Children 数量超过1个，可能需要使用。参见如下解释| obj|
 
+### 关于 contentStyle
+
+如果 Mask 标签内部不止 1 个子组件，默认我们会在 children 外面再包一层 View，contentStyle 为了控制这层 View 的样式。
+
+<img src="https://img.alicdn.com/tfs/TB1LYU0kPihSKJjy0FlXXadEXXa-1100-750.png" width="600" />
+
+
+
 ### 实例方法：
@@ -72,2 +81,3 @@
 import Text from 'nuke-text';
+import Env from 'nuke-env';
 import Checkbox from 'nuke-checkbox';
@@ -77,2 +87,3 @@ import Button from 'nuke-button';
 import Page from 'nuke-page';
+const {isWeb} =Env;
 let App = class NukeDemoIndex extends Component {
@@ -96,3 +107,5 @@ constructor() {
     }
+    
     onChange =(value) =>{
+
         this.setState({
@@ -109,5 +122,5 @@ fruitChecked:value
                 </View>
-                <Button type="primary" onPress={(e)=>this.showMask()}>打开浮层</Button>
-                <Mask defaultVisible={false} ref="myMask" animate={true} style={styles.mask} maskClosable={false}>
-                    <View style={styles.body}>
+                <Button type="primary" onPress={(e)=>this.showMask()}>打开浮层(空白区域不能关闭)</Button>
+                <Mask defaultVisible={false} ref="myMask" animate={true} style={styles.mask} contentStyle={styles.body}>
+                    
                         <View style={styles.head}><Text style={styles.textHead}>选择区域</Text></View>
@@ -117,7 +130,10 @@ <View style={styles.topicsWrap}>
                         </View>
-                    </View>
-                    <View style={styles.footer}>
-                        <Button rect block style={styles.dlgBtn} type="primary" size="large" onPress={()=>this.hideMask()}>确定</Button>
-                    </View>
+                         <View style={styles.footer}>
+                            <Button rect block style={styles.dlgBtn} type="primary" size="large" onPress={()=>this.hideMask()}>确定</Button>
+                           
+                        </View>
+                   
                 </Mask>
+                
+                
             </Page>
@@ -141,8 +157,8 @@ );
     },
+
     body: {
         width: '750rem',
-        height: '364rem',
+        height: '468rem',
         borderRadius:'8rem',
-        paddingLeft:40,
-        paddingRight:40,
+        
         paddingTop:30,
@@ -153,3 +169,3 @@ borderRadius:'8rem',
       head:{
-        height: 50,
+        height: 60,
         alignItems: 'center',
@@ -166,3 +182,4 @@ justifyContent: 'center',
       topics:{
-        padding:'10rem',
+        paddingLeft:40,
+        paddingRight:40,
         flexDirection:'row',
@@ -169,0 +186,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

28865

increased by2.06%

Dependency count

3

decreased by-25%

Lines of code

303

increased by17.44%

Number of lines in readme file

218

increased by8.46%

Worsened metrics

Number of package files

7

decreased by-12.5%

No dependency changes