nuke-switch - npm Package Compare versions

Comparing version 0.0.1 to 0.1.0

docs/basic.md

@@ -11,3 +11,2 @@ # Switch Demo
 
-/** @jsx createElement */
 import {createElement, Component,render} from 'rax';
@@ -19,39 +18,67 @@ import Text from 'nuke-text';
 
-
 let App = class NukeDemoIndex extends Component {
     constructor() {
         super();
+        this.state = {
+            switch1: true,
+            switch2: false,
+            switch3: null,
+            switch4: null,
+        }
     }
-
-    state = {
-        c1: true,
-        c2: false
-    };
-    change=(item,value)=>{
-        let obj={};
+    change = (item,value) => {
+        let obj = {};
         obj[item]= value;
         this.setState(obj);
     }
+    changeNotice = (item,value) => {
+        let obj = {};
+        obj[item]= value;
+        this.setState(obj);
+    }
     render() {
         return (
             <BizPage title="Switch">
-                
-                <BizPage.Intro main="normal"></BizPage.Intro>
+                <BizPage.Intro main="受控，状态自行控制"></BizPage.Intro>
                 <View style={styles.row}>
-                    <View style={styles.cellItemSmall}>
-                        <Switch value={this.state.c1} onValueChange={this.change.bind(this,'c1')}/>
-
+                    <View style={styles.cellItem}>
+                        <Switch key="switch1" checked={this.state.switch1} onValueChange={this.change.bind(this,'switch1')}/>
+                        <View style={styles.cellResult}>
+                            <Text style={styles.label}>switch1: </Text>
+                            <Text style={styles.text}>{this.state.switch1}</Text>
+                        </View>
                     </View>
-                    <View style={styles.cellItemSmall}>
-                        <Switch size="small" value={this.state.c2} onValueChange={this.change.bind(this,'c2')}/>
+                    <View style={styles.cellItem}>
+                        <Switch key="switch2" checked={this.state.switch2} onValueChange={this.change.bind(this,'switch2')}/>
+                        <View style={styles.cellResult}>
+                            <Text style={styles.label}>switch2: </Text>
+                            <Text style={styles.text}>{this.state.switch2}</Text>
+                        </View>
                     </View>
                 </View>
+                <BizPage.Intro main="非受控，组件checked 状态更新后，返回结果"></BizPage.Intro>
+                <View style={styles.row}>
+                    <View style={styles.cellItem}>
+                        <Switch key="switch3" defaultChecked={true} onValueChange={(value)=> this.changeNotice('switch3',value)}/>
+                        <View style={styles.cellResult}>
+                            <Text style={styles.label}>switch3 返回: </Text>
+                            <Text style={styles.text}>{this.state.switch3}</Text>
+                        </View>
+                    </View>
+                    <View style={styles.cellItem}>
+                        <Switch key="switch4" defaultChecked={false} onValueChange={(value) => this.changeNotice('switch4',value)}/>
+                        <View style={styles.cellResult}>
+                            <Text style={styles.label}>switch4 返回: </Text>
+                            <Text style={styles.text}>{this.state.switch4}</Text>
+                        </View>
+                    </View>
+                </View>
                 <BizPage.Intro main="disabled"></BizPage.Intro>
                 <View style={styles.row}>
-                    <View style={styles.cellItemSmall}>
-                        <Switch disabled value={true}/>
+                    <View style={styles.cellItem}>
+                        <Switch disabled checked={true}/>
 
                     </View>
-                    <View style={styles.cellItemSmall}>
-                        <Switch disabled size="small" value={true}/>
+                    <View style={styles.cellItem}>
+                        <Switch disabled size="small" checked={true}/>
 
@@ -68,17 +95,18 @@ </View>
         paddingLeft:'40rem',
-        marginTop:'30rem'
+        marginBottom:'30rem'
     },
     cellItem:{
-        width:'140rem',
-        height:'120rem',
-        // justifyContent:'center'
+        flex:1,
+        height:240,
     },
-    cellItemSmall:{
-        width:'140rem',
-        height:'75rem',
-        // justifyContent:'center'
+    cellResult:{
+        flexDirection:'row'
     },
-    cellTitle:{
-        marginLeft:'10rem',
-        fontSize:'30rem',
+    text:{
+        marginTop:20,
+        fontSize:24,
+    },
+    label:{
+        marginTop:20,
+        fontSize:24,
         color:'#999999'
@@ -85,0 +113,0 @@ }

HISTORY.md

 # Changelog 
 
 
+## 0.1.0 / 2017-06-16 
+
+  * [[4c72bbb](http://gitlab.alibaba-inc.com/nuke/switch/commit/4c72bbb6c5e63dfa60cb0b1195c5242170d3d51c)] - `feat` 增加 受控于非受控，明确switch的使用场景，更新readme 与demo 
+  * [[09702c7](http://gitlab.alibaba-inc.com/nuke/switch/commit/09702c7ed10469b52b23a098576cc543856bf926)] - `fix` fix bugs for switch 
+
 ## 0.0.1 / 2017-05-10 
 
   * [[9e29aa5](http://gitlab.alibaba-inc.com/nuke/switch/commit/9e29aa54cdacd8d57976f4516838e26a86023199)] - `feat` first 

lib/index.js

@@ -0,5 +1,7 @@
+/* @jsx createElement */
+
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
@@ -13,6 +15,8 @@
 
-var _nukeEnv = require('nuke-env');
+var _raxSwitch = require('rax-switch');
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+var _raxSwitch2 = _interopRequireDefault(_raxSwitch);
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -24,139 +28,76 @@
 
-var DEFAULT_WIDTH = 100;
-var DEFAULT_HEIGHT = 60;
+var noop = function noop() {};
 
 var Switch = function (_Component) {
-  _inherits(Switch, _Component);
+    _inherits(Switch, _Component);
 
-  function Switch() {
-    var _ref;
+    function Switch(props) {
+        _classCallCheck(this, Switch);
 
-    var _temp, _this, _ret;
+        var _this = _possibleConstructorReturn(this, (Switch.__proto__ || Object.getPrototypeOf(Switch)).call(this, props));
 
-    _classCallCheck(this, Switch);
+        _initialiseProps.call(_this);
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Switch.__proto__ || Object.getPrototypeOf(Switch)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (e) {
-      if (_this.props.disabled) {
-        return null;
-      }
-      var newVal = !_this.props.value;
-      _this.props.onValueChange && _this.props.onValueChange.call(_this, newVal);
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
-
-  _createClass(Switch, [{
-    key: 'getStyles',
-    value: function getStyles() {
-      return {
-        span: {
-          width: DEFAULT_WIDTH,
-          height: DEFAULT_HEIGHT,
-          minWidth: DEFAULT_WIDTH,
-          minHeight: DEFAULT_HEIGHT,
-          borderRadius: 40,
-          position: 'relative',
-          display: 'inline-block',
-          margin: 4,
-          padding: 0,
-          cursor: 'default', // pointer will cause a grey background color on chrome
-          verticalAlign: 'middle',
-          borderColor: '#dfdfdf',
-          borderWidth: '1px',
-          borderStyle: 'solid',
-          WebkitUserSelect: 'none',
-          WebkitBoxSizing: 'content-box',
-          WebkitBackfaceVisibility: 'hidden'
-        },
-        checkedSpan: {
-          borderColor: this.props.onTintColor,
-          backgroundColor: this.props.onTintColor,
-          boxShadow: this.props.onTintColor + ' 0 0 0 16px inset',
-          WebkitTransition: 'border 0.2s, box-shadow 0.2s, background-color 1s'
-        },
-        uncheckedSpan: {
-          borderColor: '#dfdfdf',
-          backgroundColor: this.props.tintColor,
-          boxShadow: '#dfdfdf 0 0 0 0 inset',
-          WebkitTransition: 'border 0.2s, box-shadow 0.2s'
-        },
-        disabledSpan: {
-          opacity: 0.5,
-          cursor: 'not-allowed',
-          boxShadow: 'none'
-        },
-        small: {
-          position: 'absolute',
-          top: 0,
-          width: 60,
-          height: 60,
-          backgroundColor: this.props.thumbTintColor,
-          borderRadius: '100%',
-          boxShadow: '0 1px 3px rgba(0,0,0,0.4)',
-          WebkitTransition: '-webkit-transform 0.2s ease-in'
-        },
-        checkedSmall: {
-          WebkitTransform: 'translateX(40rem)' // should with rem unit that the value is string type
-        },
-        uncheckedSmall: {
-          WebkitTransform: 'translateX(0)'
+        var checked = false;
+        if ('checked' in props) {
+            checked = props.checked;
+        } else {
+            checked = props.defaultChecked;
         }
-      };
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          style = _props.style,
-          value = _props.value,
-          disabled = _props.disabled,
-          onValueChange = _props.onValueChange,
-          others = _objectWithoutProperties(_props, ['style', 'value', 'disabled', 'onValueChange']);
 
-      if (_nukeEnv.isWeex) {
-        var nativeProps = {
-          style: _extends({}, styles.initial, style),
-          checked: value,
-          disabled: disabled,
-          onChange: function onChange(_ref2) {
-            var value = _ref2.value;
-            return onValueChange(value);
-          }
+        _this.state = {
+            checked: checked
         };
+        return _this;
+    }
 
-        return _rax.createElement('switch', _extends({}, nativeProps, others));
-      } else {
-        var _styles = this.getStyles();
-        var spancss = value ? _extends({}, _styles.span, _styles.checkedSpan) : _extends({}, _styles.span, _styles.uncheckedSpan);
-        var smallcss = value ? _extends({}, _styles.small, _styles.checkedSmall) : _extends({}, _styles.small, _styles.uncheckedSmall);
-        spancss = disabled ? _extends({}, spancss, _styles.disabledSpan) : spancss;
-        spancss = _extends({}, style, spancss);
+    _createClass(Switch, [{
+        key: 'componentWillReceiveProps',
+        value: function componentWillReceiveProps(nextProps) {
+            if ('checked' in nextProps) {
+                this.setState({ checked: nextProps.checked });
+            }
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var checked = this.state.checked;
 
-        return _rax.createElement(
-          'span',
-          _extends({ onClick: this.handleClick, style: spancss }, others),
-          _rax.createElement('small', { style: smallcss })
-        );
-      }
-    }
-  }]);
+            return (0, _rax.createElement)(_raxSwitch2.default, _extends({}, this.props, { onValueChange: this.handleClick, value: checked }));
+        }
+    }]);
 
-  return Switch;
+    return Switch;
 }(_rax.Component);
 
 Switch.defaultProps = {
-  onTintColor: '#00e158',
-  thumbTintColor: '#ffffff',
-  tintColor: '#ffffff'
+    onValueChange: noop,
+    size: 'medium',
+    defaultChecked: false,
+    defaultIndeterminate: false,
+    onTintColor: '#00e158',
+    thumbTintColor: '#fff',
+    tintColor: '#ffffff'
 };
 
+var _initialiseProps = function _initialiseProps() {
+    var _this2 = this;
 
-var styles = {
-  initial: {
-    width: DEFAULT_WIDTH,
-    height: DEFAULT_HEIGHT
-  }
+    this.handleClick = function (e) {
+        var _props = _this2.props,
+            _props$disabled = _props.disabled,
+            disabled = _props$disabled === undefined ? false : _props$disabled,
+            onValueChange = _props.onValueChange;
+
+        if (disabled) {
+            return null;
+        }
+        var checked = !_this2.state.checked;
+        if (!('checked' in _this2.props)) {
+            _this2.setState({
+                checked: checked
+            });
+        }
+        onValueChange(checked, e);
+    };
 };
@@ -163,0 +104,0 @@

package.json

 {
   "name": "nuke-switch",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "开关",
@@ -47,2 +47,3 @@ "main": "lib/index",
   "dependencies": {
+    "rax-switch": "^0.3.7",
     "nuke-env": "^0.x.x"
@@ -49,0 +50,0 @@ },

README.md

@@ -9,6 +9,7 @@ # Switch
 
+## 何时使用
+
 Switch 是状态切换的开关按钮组件。
 
 
-
 ## API
@@ -20,4 +21,40 @@
 disabled | 开关是否可交互 | boolean | true
-value | 开关默认状态开启或关闭 | boolean|false
-onValueChange | 值改变时调用此函数 | event | 无
+checked | 开启或关闭（受控用法，需与 onValueChange 配合使用） | boolean|false
+defaultChecked | 默认是否选中（非受控用法） | boolean|false
+onValueChange | Switch 改变时调用此函数 | function(value) | 无
 
+### 受控用法与非受控用法
+
+所有的输入、交互类组件都有受控用法和非受控用法
+
+- 受控用法： 组件状态受到外部传入的 props 影响，外部 props 改变，组件才改变，如下 demo :
+
+````js
+constructor() {
+    super();
+    this.state = {
+        checked: true
+    }
+}
+change = (value) => {
+    this.setState({
+        checked:!value
+    });
+}
+//...
+render(){
+    return (<Switch checked={this.state.checked} onValueChange={this.change}/>)
+}
+````
+
+- 非受控用法： 组件自身自由改变，并通过事件通知外部改变成了什么。如下 demo :
+
+````js
+change = (value) => {
+    console.log('switch 改变成了：',value);
+}
+//...
+render(){
+    return (<Switch defaultChecked={true} onValueChange={this.change}/>)
+}
+````

theme/index.jsx

@@ -1,2 +0,1 @@
-/** @jsx createElement */
 import {createElement, Component,render} from 'rax';
@@ -8,39 +7,67 @@ import Text from 'nuke-text';
 
-
 let App = class NukeDemoIndex extends Component {
     constructor() {
         super();
+        this.state = {
+            switch1: true,
+            switch2: false,
+            switch3: null,
+            switch4: null,
+        }
     }
-
-    state = {
-        c1: true,
-        c2: false
-    };
-    change=(item,value)=>{
-        let obj={};
+    change = (item,value) => {
+        let obj = {};
         obj[item]= value;
         this.setState(obj);
     }
+    changeNotice = (item,value) => {
+        let obj = {};
+        obj[item]= value;
+        this.setState(obj);
+    }
     render() {
         return (
             <BizPage title="Switch">
-                
-                <BizPage.Intro main="normal"></BizPage.Intro>
+                <BizPage.Intro main="受控，状态自行控制"></BizPage.Intro>
                 <View style={styles.row}>
-                    <View style={styles.cellItemSmall}>
-                        <Switch value={this.state.c1} onValueChange={this.change.bind(this,'c1')}/>
-
+                    <View style={styles.cellItem}>
+                        <Switch key="switch1" checked={this.state.switch1} onValueChange={this.change.bind(this,'switch1')}/>
+                        <View style={styles.cellResult}>
+                            <Text style={styles.label}>switch1: </Text>
+                            <Text style={styles.text}>{this.state.switch1}</Text>
+                        </View>
                     </View>
-                    <View style={styles.cellItemSmall}>
-                        <Switch size="small" value={this.state.c2} onValueChange={this.change.bind(this,'c2')}/>
+                    <View style={styles.cellItem}>
+                        <Switch key="switch2" checked={this.state.switch2} onValueChange={this.change.bind(this,'switch2')}/>
+                        <View style={styles.cellResult}>
+                            <Text style={styles.label}>switch2: </Text>
+                            <Text style={styles.text}>{this.state.switch2}</Text>
+                        </View>
                     </View>
                 </View>
+                <BizPage.Intro main="非受控，组件checked 状态更新后，返回结果"></BizPage.Intro>
+                <View style={styles.row}>
+                    <View style={styles.cellItem}>
+                        <Switch key="switch3" defaultChecked={true} onValueChange={(value)=> this.changeNotice('switch3',value)}/>
+                        <View style={styles.cellResult}>
+                            <Text style={styles.label}>switch3 返回: </Text>
+                            <Text style={styles.text}>{this.state.switch3}</Text>
+                        </View>
+                    </View>
+                    <View style={styles.cellItem}>
+                        <Switch key="switch4" defaultChecked={false} onValueChange={(value) => this.changeNotice('switch4',value)}/>
+                        <View style={styles.cellResult}>
+                            <Text style={styles.label}>switch4 返回: </Text>
+                            <Text style={styles.text}>{this.state.switch4}</Text>
+                        </View>
+                    </View>
+                </View>
                 <BizPage.Intro main="disabled"></BizPage.Intro>
                 <View style={styles.row}>
-                    <View style={styles.cellItemSmall}>
-                        <Switch disabled value={true}/>
+                    <View style={styles.cellItem}>
+                        <Switch disabled checked={true}/>
 
                     </View>
-                    <View style={styles.cellItemSmall}>
-                        <Switch disabled size="small" value={true}/>
+                    <View style={styles.cellItem}>
+                        <Switch disabled size="small" checked={true}/>
 
@@ -57,17 +84,18 @@ </View>
         paddingLeft:'40rem',
-        marginTop:'30rem'
+        marginBottom:'30rem'
     },
     cellItem:{
-        width:'140rem',
-        height:'120rem',
-        // justifyContent:'center'
+        flex:1,
+        height:240,
     },
-    cellItemSmall:{
-        width:'140rem',
-        height:'75rem',
-        // justifyContent:'center'
+    cellResult:{
+        flexDirection:'row'
     },
-    cellTitle:{
-        marginLeft:'10rem',
-        fontSize:'30rem',
+    text:{
+        marginTop:20,
+        fontSize:24,
+    },
+    label:{
+        marginTop:20,
+        fontSize:24,
         color:'#999999'
@@ -74,0 +102,0 @@ }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14549

increased by19.56%

Number of lines in readme file

58

increased by163.64%

Worsened metrics

Dependency count

2

increased by100%

Lines of code

177

decreased by-13.66%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedrax-switch@^0.3.7

• + Addeddriver-browser@0.6.7(transitive)

• + Addeddriver-server@0.6.5(transitive)

• + Addeddriver-weex@0.6.5(transitive)

• + Addedrax@0.6.7(transitive)

• + Addedrax-switch@0.3.8(transitive)

• + Addedstyle-unit@0.6.5(transitive)

• + Addeduniversal-env@0.3.80.6.6(transitive)