nuke-mask - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

docs/basic.md

@@ -12,3 +12,3 @@ # Mask 遮罩层 Demo
 /** @jsx createElement */
-import {createElement, Component,render} from 'rax';
+import {createElement, Component,findDOMNode,render} from 'rax';
 import Input from 'nuke-input';
@@ -27,12 +27,10 @@ import View from 'nuke-view';
     }
-    showMask = ()=>{
-        this.setState({
-            maskVisible:true
-        })
+
+    showMask(e){
+        //debugger;
+        this.refs.myMask.show();
         
     }
-    hideMask =()=>{
-        this.setState({
-            maskVisible:false
-        })
+    hideMask(e){
+        this.refs.myMask.hide();
     }
@@ -43,15 +41,13 @@ render() {
                 <Page.Intro main="普通用法"></Page.Intro>
-                <Button type="primary" onPress={this.showMask}>打开浮层</Button>
-                {
-                    this.state.maskVisible ?
-                    <Mask style={styles.mask}>
-                        <View style={styles.bg}>
-                            <View style={styles.dialogWrap}>
-                                <Text style={styles.text}>遮罩层里的内容</Text>
-                                <Button type="primary" onPress={this.hideMask}>点击关闭</Button>
-                            </View>
+                <Button type="primary" onPress={(e)=>this.showMask(e)}>打开浮层</Button>
+                
+                <Mask defaultVisible={false} 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>
                         </View>
-                    </Mask>
-                    :null
-                }
+                    </View>
+                </Mask>
+                    
             </Page>
@@ -69,3 +65,5 @@ );
     },
-    
+    mask:{
+
+    },
     bg:{
@@ -72,0 +70,0 @@ flex:1,

HISTORY.md

 # Changelog 
 
 
+## 0.0.7 / 2017-08-03 
+
+  * [[285f9e6](http://gitlab.alibaba-inc.com/nuke/mask/commit/285f9e63405a19e971bb5e743a802cdfa6ee53de)] - `feat` 新增h5 适配，安卓端改用view，增加一系列demo 
+  * [[79ad33d](http://gitlab.alibaba-inc.com/nuke/mask/commit/79ad33d8bd6f9a4e6a4e7f404b2757fa5978bdfb)] - `fix` mask 开发完成 
+
 ## 0.0.6 / 2017-07-17 
@@ -5,0 +10,0 @@

lib/index.js

@@ -14,2 +14,6 @@ 'use strict';
 
+var _nukeView = require('nuke-view');
+
+var _nukeView2 = _interopRequireDefault(_nukeView);
+
 var _nukeEnv = require('nuke-env');
@@ -19,2 +23,10 @@
 
+var _universalTransition = require('universal-transition');
+
+var _universalTransition2 = _interopRequireDefault(_universalTransition);
+
+var _nukeDimensions = require('nuke-dimensions');
+
+var _nukeDimensions2 = _interopRequireDefault(_nukeDimensions);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,3 +42,4 @@
 
-var isWeex = _nukeEnv2.default.isWeex;
+var isWeex = _nukeEnv2.default.isWeex,
+    appInfo = _nukeEnv2.default.appInfo;
 
@@ -42,3 +55,2 @@ var Mask = function (_Component) {
         var visible = void 0;
-
         if ('visible' in props) {
@@ -49,5 +61,6 @@ visible = props.visible;
         }
-
-        _this.state = { visible: visible };
-
+        _this.state = {
+            visible: visible,
+            styleOpacity: 0
+        };
         return _this;
@@ -57,6 +70,47 @@ }
     _createClass(Mask, [{
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+            if (this.state.visible) {
+                if (this.props.animate) {
+                    this.animateShow();
+                } else {
+                    this.setState({
+                        styleOpacity: 1
+                    });
+                }
+            }
+        }
+    }, {
         key: 'show',
         value: function show() {
-            this.setState({
-                visible: true
+            this.setState({ visible: true });
+        }
+    }, {
+        key: 'componentDidUpdate',
+        value: function componentDidUpdate(prevProps, prevState) {
+            if (this.state.visible && this.props.animate) {
+                this.animateShow();
+            }
+        }
+    }, {
+        key: 'animateShow',
+        value: function animateShow() {
+            var _this2 = this;
+
+            var box = (0, _rax.findDOMNode)(this.maskNode);
+            var _props = this.props,
+                _props$effect = _props.effect,
+                effect = _props$effect === undefined ? 'ease-in-out' : _props$effect,
+                _props$duration = _props.duration,
+                duration = _props$duration === undefined ? 200 : _props$duration;
+            // 此处各种 bug，所以加了 setTimeout
+
+            setTimeout(function () {
+                (0, _universalTransition2.default)(box, { opacity: 1 }, {
+                    timingFunction: effect, //ease-in,ease-in-out,ease-out,linear,cubic-bezier
+                    delay: 0,
+                    duration: duration
+                }, function () {
+                    _this2.props.onShow && _this2.props.onShow();
+                });
             });
@@ -67,29 +121,73 @@ }
         value: function hide() {
-            this.setState({
-                visible: false
-            });
+            var _this3 = this;
+
+            var _props2 = this.props,
+                _props2$animate = _props2.animate,
+                animate = _props2$animate === undefined ? true : _props2$animate,
+                _props2$effect = _props2.effect,
+                effect = _props2$effect === undefined ? 'ease-in-out' : _props2$effect,
+                _props2$duration = _props2.duration,
+                duration = _props2$duration === undefined ? 200 : _props2$duration;
+
+            if (animate) {
+
+                var box = (0, _rax.findDOMNode)(this.maskNode);
+                (0, _universalTransition2.default)(box, { opacity: 0 }, {
+                    timingFunction: effect,
+                    delay: 0,
+                    duration: duration
+                }, function () {
+                    _this3.setState({ visible: false });
+                    _this3.props.onHide && _this3.props.onHide();
+                });
+            } else {
+                this.setState({
+                    styleOpacity: 1,
+                    visible: false
+                });
+            }
         }
     }, {
+        key: 'maskPress',
+        value: function maskPress() {
+            if (this.props.maskClosable) {
+                this.hide();
+            }
+            this.props.onMaskPress && this.props.onMaskPress();
+        }
+    }, {
         key: 'render',
         value: function render() {
+            var _this4 = this;
+
             var visible = this.state.visible;
 
-            var _props = this.props,
-                content = _props.content,
-                children = _props.children,
-                others = _objectWithoutProperties(_props, ['content', 'children']);
+            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']);
+            //mask 组件在安卓端bug较多，只在 iOS 下启用
 
-            var _props$style = this.props.style,
-                style = _props$style === undefined ? {} : _props$style;
 
-            if (isWeex) {
-                var maskWeex = (0, _rax.createElement)(
+            if (isWeex && appInfo.platform === 'iOS') {
+                var maskWeex = visible ? (0, _rax.createElement)(
                     'mask',
-                    _extends({ style: style }, others),
+                    _extends({ ref: function ref(n) {
+                            _this4.maskNode = (0, _rax.findDOMNode)(n);
+                        }, style: [styles.transparent, { opacity: this.state.styleOpacity }, style] }, others),
                     children
-                );
+                ) : null;
                 return maskWeex;
             } else {
-                throw Error('unsupported env');
-                return null;
+                return visible ? (0, _rax.createElement)(
+                    _nukeView2.default,
+                    _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
+                ) : null;
             }
@@ -102,3 +200,19 @@ }
 
+var styles = {
+    maskPosition: {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 100
+    },
+    transparent: {
+        opacity: 0
+    },
+    shown: {
+        opacity: 1
+    }
+};
 exports.default = Mask;
 module.exports = exports['default'];

package.json

 {
   "name": "nuke-mask",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "遮罩层",
@@ -15,3 +15,6 @@ "main": "lib/index",
     "nuke",
-    "mask"
+    "mask",
+    "weex",
+    "rax",
+    "nuke-mask"
   ],
@@ -47,9 +50,22 @@ "author": {
   },
+  "engines": {
+    "weex": "",
+    "aliweex": ""
+  },
+  "weex": {
+    "plugins": {},
+    "market": {
+      "thumbnail": "https://img.alicdn.com/tfs/TB1AlB.SFXXXXarXVXXXXXXXXXX-1242-2208.png"
+    }
+  },
   "dependencies": {
-    "nuke-env": "^0.x.x"
+    "nuke-dimensions": "^0.1.9",
+    "nuke-env": "^0.x.x",
+    "nuke-transition": "^0.1.10"
   },
   "devDependencies": {
-    "nuke-page": "^0.x.x",
     "nuke-button": "^0.x.x",
+    "nuke-checkbox": "^0.3.14",
     "nuke-input": "^0.x.x",
+    "nuke-page": "^0.x.x",
     "nuke-text": "^0.x.x",
@@ -60,3 +76,6 @@ "nuke-view": "^0.x.x"
     "registry": "http://registry.npmjs.org"
+  },
+  "peerDependencies": {
+    "rax": "^0.4.8"
   }
 }

README.md

@@ -8,9 +8,21 @@ # Mask
 ---
+<a href="http://nuke.alibaba-inc.com/" target="_blank"> Nuke UI </a>
 
+
+![nuke-mask@ALINPM](http://web.npm.alibaba-inc.com/badge/v/nuke-mask.svg?style=flat-square)  ![nuke-mask@ALINPM](http://web.npm.alibaba-inc.com/badge/d/nuke-mask.svg?style=flat-square)
+
+## 何时使用
+
+Mask 是一个简单的遮罩层，常用于展示上层的对话框、提示等
+
 ## 设计思路
 
-**注意，该组件在安卓端存在较多bug，暂不推荐使用。**
+**新增 web 端支持，android 端改用 View 实现**
 
-Mask 是 weex component  `mask` 的封装实现。目前仅支持 native ，h5 无法调用。
+Mask 在 iOS 端封装了 `mask` 组件，在 web 和Android 端使用 View 封装，因此如果要实现遮挡全屏的效果，对组件层级和样式书写有如下要求：
 
+- 页面根节点不能有任何 padding、margin、border 样式 （确保边缘不漏出来）
+- Mask 组件必须是根节点的最后一个子元素 （确保 View 堆叠顺序）
+
+
 ## API
@@ -20,25 +32,65 @@
 -----|-----|-----|-----
-style | 样式object | |
+style | 样式object |obj |
+animate| 显示时是否开启动画|boolean|true
+effect | 显示的动画效果，animate = true 时生效，枚举值可选：ease-in,ease-in-out,ease-out,linear,cubic-bezier|string|'ease-in-out'
+maskClosable| 能否点击空白区域关闭|boolean|false
+duration | 动画时长，默认 200（单位是 ms）|number|200
 
-## 调用方法
+### 实例方法：
 
-````js
+- this.refs.myMask.show() : 显示浮层
+- this.refs.myMask.hide() : 关闭浮层
+
+## demo 参考
+
+<img src="https://img.alicdn.com/tfs/TB1AlB.SFXXXXarXVXXXXXXXXXX-1242-2208.png" width="240" />
+
+扫码预览(手淘、千牛、天猫等)
+
+<img src="https://img.alicdn.com/tfs/TB1lpKqSFXXXXcvXpXXXXXXXXXX-280-280.png" width="160" /> 
+
+## 使用方法
+
+- 安装
+
+```bash
+// 切换到你的 rax 项目中
+tnpm i nuke-mask --save
+// 参考如下 demo 您可能还需要安装
+// tnpm i nuke-view nuke-text nuke-checkbox nuke-button nuke-page --save
+```
+
+- 调用示例
+
+```js
 /** @jsx createElement */
 import {createElement, Component,render} from 'rax';
-import {View,Text,Button,Mask} from 'nuke';
-let App = class Demo extends Component {
+import Input from 'nuke-input';
+import View from 'nuke-view';
+import Text from 'nuke-text';
+import Checkbox from 'nuke-checkbox';
+import Button from 'nuke-button';
+import Mask from 'nuke-mask';
+import Page from 'nuke-page';
+let App = class NukeDemoIndex extends Component {
     constructor() {
         super();
-        this.state={
-            maskVisible:false
+        this.GroupFruit = [
+            {value: 'zj', label: '浙江'},
+            {value: 'ah', label: '安徽'},
+            {value: 'sh', label: '上海'}
+        ];
+        this.state = {
+            fruitChecked:['ah'],
         }
     }
-    showMask = ()=>{
-        this.setState({
-            maskVisible:true
-        })
+    showMask(){
+        this.refs.myMask.show();
     }
-    hideMask =()=>{
+    hideMask(){
+        this.refs.myMask.hide();
+    }
+    onChange =(value) =>{
         this.setState({
-            maskVisible:false
+            fruitChecked:value
         })
@@ -48,15 +100,20 @@ }
         return (
-            <View style={styles.containner}>
-                <Button type="primary" onPress={this.showMask}>打开浮层</Button>
-                {
-                    this.state.maskVisible ?
-                    <Mask>
-                        <View style={styles.bg}>
-                            <Text style={styles.text}>遮罩层里的内容</Text>
-                            <Button type="primary" onPress={this.hideMask}>确认</Button>
+            <Page title="Mask">
+                <Page.Intro main="浮层中嵌入简易表单操作"></Page.Intro>
+                <View style={styles.result}>
+                    {this.state.fruitChecked ? <Text style={styles.resultText}>已选择： {this.state.fruitChecked.join(',')}</Text> :null}
+                </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}>
+                        <View style={styles.head}><Text style={styles.textHead}>选择区域</Text></View>
+                        <View style={styles.topicsWrap}>
+                            <Checkbox.Group value={this.state.fruitChecked} onChange={ this.onChange } size="small" dataSource={ this.GroupFruit }  style={{marginRight:10}}></Checkbox.Group>
                         </View>
-                    </Mask>
-                    :null
-                }
-            </View>
+                    </View>
+                    <View style={styles.footer}>
+                        <Button rect block style={styles.dlgBtn} type="primary" size="large" onPress={()=>this.hideMask()}>确定</Button>
+                    </View>
+                </Mask>
+            </Page>
         );
@@ -66,17 +123,81 @@ }
 const styles={
+    textarea:{
+        // position:'absolute'
+        width: '600rem',
+        height: '200rem',
+        borderWidth:'1rem',
+        borderStyle:'solid',
+        borderColor:'#cccccc'
+    },
     mask:{
-        
+        flex:1,
+        backgroundColor:'rgba(0,0,0,0.7)',
+        justifyContent: 'flex-end',
     },
-    bg:{
-        flex:1,
+    body: {
+        width: '750rem',
+        height: '364rem',
+        borderRadius:'8rem',
+        paddingLeft:40,
+        paddingRight:40,
+        paddingTop:30,
+        borderRadius:'8rem',
+        backgroundColor: '#ffffff',
+      },
+      head:{
+        height: 50,
         alignItems: 'center',
         justifyContent: 'center',
-        backgroundColor:'rgba(0,0,0,0.7)'
-
+        borderBottomColor:'#eeeeee',
+        borderBottomStyle:'solid',
+        borderBottomWidth:'1rem',
+      },
+      textHead:{
+        color:'#3d4145',
+        fontSize:32,
+      },
+      topics:{
+        padding:'10rem',
+        flexDirection:'row',
+      },
+      text:{
+        fontSize:'28rem',
+        padding:'10rem',
+        color:'#3089dc',
+        borderColor:'#3089dc',
+        borderStyle:'solid',
+        borderWidth:'1rem',
+        marginRight:'20rem'
+      },
+      footer: {
+        borderTopColor:'#dddddd',
+        flexDirection:'row',
+        borderTopStyle:'solid',
+        borderTopWidth:1,
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        height: '94rem'
+      },
+      dlgBtn:{
+        flex:1,
+      },
+      result : {
+        height:'480rem',
+        margin:'30rem',
+        padding:'10rem',
+        backgroundColor:'#ffffff',
+        justifyContent:'center',
+        alignItems:'center'
     },
-    text:{
-        color:'#ffffff'
-    }
+    resultText : {
+        fontSize:'28rem'
+    },
 }
 render(<App/>);
-````
+```
+
+## 其他
+- bug、建议联系 <a href="dingtalk://dingtalkclient/action/sendmsg?dingtalk_id=kjwo3w5">@翊晨</a>
+- 钉钉交流群
+
+<img src="https://img.alicdn.com/tfs/TB101EESpXXXXXFXpXXXXXXXXXX-1122-1362.jpg" width="260" /> 

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

25052

increased by81.58%

Lines of code

252

increased by71.43%

Number of lines in readme file

199

increased by155.13%

Worsened metrics

Dependency count

4

increased by300%

Dev dependency count

6

increased by20%

Dependency changes

• + Addednuke-dimensions@^0.1.9

• + Addednuke-transition@^0.1.10

• + Addeddriver-browser@0.4.20(transitive)

• + Addeddriver-server@0.4.20(transitive)

• + Addeddriver-weex@0.4.20(transitive)

• + Addednuke-dimensions@0.1.12(transitive)

• + Addednuke-transition@0.1.11(transitive)

• + Addedrax@0.4.20(transitive)

• + Addedstyle-unit@0.4.20(transitive)

• + Addeduniversal-env@0.4.20(transitive)