nuke-components - npm Package Compare versions

Comparing version 0.2.21 to 0.2.22

HISTORY.md

 # Changelog 
 
 
+## 0.2.22 / 2017-04-10 
+
+  * [[ebf9d3d](http://gitlab.alibaba-inc.com/nuke/components/commit/ebf9d3d66577cf871bb97f714b2ce3f9ee5504d6)] - `fix` switch add ...other properties to avoid find dom error bug 
+
 ## 0.2.21 / 2017-04-05 
@@ -5,0 +9,0 @@

lib/switch.js

@@ -6,3 +6,3 @@ /* @jsx createElement */
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
@@ -18,2 +18,4 @@
 
+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; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -25,199 +27,209 @@
 
-var Size = {
-  medium: {
-    width: '100rem',
-    height: '60rem',
-    borderRadius: '40rem',
-    animLength: '40rem'
-  },
-  small: {
-    width: '80rem',
-    height: '48rem',
-    borderRadius: '24rem',
-    animLength: '32rem'
-  }
-};
-// const
 var noop = function noop() {};
 
 var Switch = function (_Component) {
-  _inherits(Switch, _Component);
+    _inherits(Switch, _Component);
 
-  function Switch(props) {
-    _classCallCheck(this, Switch);
+    function Switch(props) {
+        _classCallCheck(this, Switch);
 
-    var _this = _possibleConstructorReturn(this, (Switch.__proto__ || Object.getPrototypeOf(Switch)).call(this, props));
+        var _this = _possibleConstructorReturn(this, (Switch.__proto__ || Object.getPrototypeOf(Switch)).call(this, props));
 
-    _initialiseProps.call(_this);
+        _initialiseProps.call(_this);
 
-    var checked = void 0,
-        indeterminate = void 0;
-    if ('checked' in props) {
-      checked = props.checked;
-    } else {
-      checked = props.defaultChecked;
-    }
+        var checked = false;
+        if ('checked' in props) {
+            checked = props.checked;
+        } else {
+            checked = props.defaultChecked;
+        }
 
-    if ('indeterminate' in props) {
-      indeterminate = props.indeterminate;
-    } else {
-      indeterminate = props.defaultIndeterminate;
+        // if ('indeterminate' in props) {
+        //     indeterminate = props.indeterminate;
+        // } else {
+        //     indeterminate = props.defaultIndeterminate;
+        // }
+        _this.state = {
+            checked: checked
+        };
+        return _this;
     }
-    _this.state = {
-      checked: checked,
-      indeterminate: indeterminate
-    };
-    return _this;
-  }
 
-  _createClass(Switch, [{
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
-      //
-      if ('checked' in nextProps) {
-        this.setState({ checked: nextProps.checked });
-      }
+    _createClass(Switch, [{
+        key: 'componentWillReceiveProps',
+        value: function componentWillReceiveProps(nextProps) {
+            if ('checked' in nextProps) {
+                this.setState({ checked: nextProps.checked });
+            }
 
-      if ('indeterminate' in nextProps) {
-        this.setState({ indeterminate: nextProps.indeterminate });
-      }
-    }
-  }, {
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      this.componentDidUpdate();
-    }
-  }, {
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate() {}
-  }, {
-    key: 'render',
-    value: function render() {
-      if (_nukeEnv.isWeex) {
-        var nativeProps = {
-          style: _extends({}, styles.initial, this.props.style),
-          checked: this.state.checked,
-          disabled: this.props.disabled,
-          onChange: this.handleClick
-        };
+            // if ('indeterminate' in nextProps) {
+            //     this.setState({ indeterminate: nextProps.indeterminate});
+            // }
+        }
+    }, {
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+            this.componentDidUpdate();
+        }
+    }, {
+        key: 'componentDidUpdate',
+        value: function componentDidUpdate() {}
+        // shouldComponentUpdate(nextProps, nextState) {
 
-        return (0, _rax.createElement)('switch', nativeProps);
-      } else {
-        var _styles = this.getStyles();
-        var spancss = this.state.checked ? _extends({}, _styles.span, _styles.checkedSpan) : _extends({}, _styles.span, _styles.uncheckedSpan);
-        var smallcss = this.state.checked ? _extends({}, _styles.small, _styles.checkedSmall) : _extends({}, _styles.small, _styles.uncheckedSmall);
-        spancss = this.props.disabled ? _extends({}, spancss, _styles.disabledSpan) : spancss;
+        // }
 
-        return (0, _rax.createElement)(
-          'span',
-          { onClick: this.handleClick, style: spancss },
-          (0, _rax.createElement)('small', { style: smallcss })
-        );
-      }
-    }
-  }, {
-    key: 'getStyles',
-    value: function getStyles() {
-      var sizeObj = this.props.size === 'small' ? Size.small : Size.medium;
-      return {
-        span: {
-          width: sizeObj.width,
-          height: sizeObj.height,
-          borderRadius: sizeObj.borderRadius,
-          position: 'relative',
-          display: 'inline-block',
-          margin: '4rem',
-          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: sizeObj.height,
-          height: sizeObj.height,
-          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(' + sizeObj.animLength + ')'
-        },
-        uncheckedSmall: {
-          WebkitTransform: 'translateX(0)'
+    }, {
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                style = _props.style,
+                disabled = _props.disabled,
+                size = _props.size,
+                onValueChange = _props.onValueChange,
+                others = _objectWithoutProperties(_props, ['style', 'disabled', 'size', 'onValueChange']);
+
+            var checked = this.state.checked;
+
+
+            if (_nukeEnv.isWeex) {
+                var nativeProps = {
+                    style: _extends({}, styles.initial, this.props.style),
+                    checked: checked,
+                    disabled: disabled,
+                    onChange: this.handleClick
+                };
+
+                return (0, _rax.createElement)('switch', _extends({}, nativeProps, others));
+            } else {
+                var _styles = this.getStyles();
+                var wraperStyle = Object.assign({}, _styles.span, checked ? _styles.checkedSpan : _styles.uncheckedSpan, disabled ? _styles.disabledSpan : {});
+
+                var innerStyle = Object.assign({}, _styles.small, checked ? _styles.checkedSmall : _styles.uncheckedSmall);
+
+                return (0, _rax.createElement)(
+                    'span',
+                    _extends({ onClick: this.handleClick.bind(this), style: wraperStyle }, others),
+                    (0, _rax.createElement)('small', { style: innerStyle })
+                );
+            }
         }
-      };
-    }
-  }]);
+    }, {
+        key: 'getStyles',
+        value: function getStyles() {
+            var sizeObj = this.props.size === 'small' ? Size.small : Size.medium;
+            return {
+                span: {
+                    width: sizeObj.width,
+                    height: sizeObj.height,
+                    borderRadius: sizeObj.borderRadius,
+                    position: 'relative',
+                    display: 'inline-block',
+                    margin: '4rem',
+                    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: sizeObj.height,
+                    height: sizeObj.height,
+                    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(' + sizeObj.animLength + ')'
+                },
+                uncheckedSmall: {
+                    WebkitTransform: 'translateX(0)'
+                }
+            };
+        }
+    }]);
 
-  return Switch;
+    return Switch;
 }(_rax.Component);
 
 Switch.defaultProps = {
-  onValueChange: noop,
-  size: 'medium',
-  defaultChecked: false,
-  defaultIndeterminate: false,
-  onTintColor: '#00e158',
-  thumbTintColor: '#fff',
-  tintColor: '#fff'
+    onValueChange: noop,
+    size: 'medium',
+    defaultChecked: false,
+    defaultIndeterminate: false,
+    onTintColor: '#00e158',
+    thumbTintColor: '#fff',
+    tintColor: '#ffffff'
 };
 
 var _initialiseProps = function _initialiseProps() {
-  var _this2 = this;
+    var _this2 = this;
 
-  this.handleClick = function (e) {
-    if (_this2.props.disabled) {
-      return null;
-    }
-    var _props = _this2.props,
-        disabled = _props.disabled,
-        onValueChange = _props.onValueChange;
+    this.handleClick = function (e) {
+        var _props2 = _this2.props,
+            disabled = _props2.disabled,
+            onValueChange = _props2.onValueChange;
 
-    var checked = !_this2.state.checked;
-    if (!('checked' in _this2.props)) {
-      _this2.setState({
-        checked: checked
-      });
-    }
+        if (disabled) {
+            return null;
+        }
+        var checked = !_this2.state.checked;
+        if (!('checked' in _this2.props)) {
+            _this2.setState({
+                checked: checked
+            });
+        }
 
-    if (!('indeterminate' in _this2.props)) {
-      _this2.setState({
-        indeterminate: false
-      });
-      onValueChange(checked, e);
-    } else {
-      onValueChange(checked, false, e);
+        // if (!('indeterminate' in this.props)) {
+        //     this.setState({
+        //         indeterminate: false
+        //     });
+        onValueChange(checked, e);
+        // } else {
+        //     onValueChange(checked, false, e);
+        // }
+    };
+};
+
+var Size = {
+    medium: {
+        width: '100rem',
+        height: '60rem',
+        borderRadius: '40rem',
+        animLength: '40rem'
+    },
+    small: {
+        width: '80rem',
+        height: '48rem',
+        borderRadius: '24rem',
+        animLength: '32rem'
     }
-  };
 };
-
 var styles = {
-  initial: {
-    width: Size.medium.width,
-    height: Size.medium.height
-  }
+    initial: {
+        width: Size.medium.width,
+        height: Size.medium.height
+    }
 };
@@ -224,0 +236,0 @@

package.json

 {
   "name": "nuke-components",
-  "version": "0.2.21",
+  "version": "0.2.22",
   "description": "nuke原件库",
@@ -5,0 +5,0 @@ "main": "lib/index",

src/switch.js

@@ -8,22 +8,8 @@ /* @jsx createElement */
 
-const Size= {
-  medium : {
-    width:'100rem',
-    height:'60rem',
-    borderRadius:'40rem',
-    animLength:'40rem'
-  },
-  small:{
-    width:'80rem',
-    height:'48rem',
-    borderRadius:'24rem',
-    animLength:'32rem'
-  }
-}
-// const
+
 const noop = () => {};
 class Switch extends Component {
-  constructor(props) {
+    constructor(props) {
         super(props);
-        let checked, indeterminate;
+        let checked = false;
         if ('checked' in props) {
@@ -35,10 +21,10 @@ checked = props.checked;
 
-        if ('indeterminate' in props) {
-            indeterminate = props.indeterminate;
-        } else {
-            indeterminate = props.defaultIndeterminate;
-        }
+        // if ('indeterminate' in props) {
+        //     indeterminate = props.indeterminate;
+        // } else {
+        //     indeterminate = props.defaultIndeterminate;
+        // }
         this.state = {
-            checked,
-            indeterminate
+            checked:checked,
+            // indeterminate
         };
@@ -53,3 +39,3 @@ }
         thumbTintColor: '#fff',
-        tintColor: '#fff'
+        tintColor: '#ffffff'
     }
@@ -59,3 +45,2 @@
     componentWillReceiveProps(nextProps) {
-        //
         if ('checked' in nextProps) {
@@ -65,5 +50,5 @@ this.setState({ checked: nextProps.checked});
 
-        if ('indeterminate' in nextProps) {
-            this.setState({ indeterminate: nextProps.indeterminate});
-        }
+        // if ('indeterminate' in nextProps) {
+        //     this.setState({ indeterminate: nextProps.indeterminate});
+        // }
     }
@@ -75,119 +60,144 @@ componentDidMount() {
     }
+    // shouldComponentUpdate(nextProps, nextState) {
+        
+    // }
 
-  handleClick = (e) => {
-    if (this.props.disabled) {
-        return null;
-    }
-    const { disabled, onValueChange } = this.props;
-    const checked =!this.state.checked;
-    if (!('checked' in this.props)) {
-        this.setState({
-            checked
-        });
-    }
+    handleClick = (e) => {
+        
+        const { disabled, onValueChange } = this.props;
+        if (disabled) {
+            return null;
+        }
+        const checked =!this.state.checked;
+        if (!('checked' in this.props)) {
+            this.setState({
+                checked: checked
+            });
+        }
 
-    if (!('indeterminate' in this.props)) {
-        this.setState({
-            indeterminate: false
-        });
+        // if (!('indeterminate' in this.props)) {
+        //     this.setState({
+        //         indeterminate: false
+        //     });
         onValueChange(checked, e);
-    } else {
-        onValueChange(checked, false, e);
-    }
-  };
+        // } else {
+        //     onValueChange(checked, false, e);
+        // }
+    };
 
-  render() {
-    if (isWeex) {
-      let nativeProps = {
-        style: {
-          ...styles.initial,
-          ...this.props.style
-        },
-        checked: this.state.checked,
-        disabled: this.props.disabled,
-        onChange: this.handleClick
-      };
+    render() {
+        const { style,disabled,size,onValueChange, ...others} = this.props;
+        const { checked } = this.state;
 
-      return (
-        <switch {...nativeProps} />
-      );
-    } else {
-      let styles = this.getStyles();
-      let spancss = this.state.checked ? {...styles.span, ...styles.checkedSpan} : {...styles.span, ...styles.uncheckedSpan};
-      let smallcss = this.state.checked ? {...styles.small, ...styles.checkedSmall} : {...styles.small, ...styles.uncheckedSmall};
-      spancss = this.props.disabled ? {...spancss, ...styles.disabledSpan} : spancss;
+        if (isWeex) {
+            let nativeProps = {
+                style: {
+                    ...styles.initial,
+                    ...this.props.style
+                },
+                checked: checked,
+                disabled: disabled,
+                onChange: this.handleClick
+            };
 
-      return (
-        <span onClick={this.handleClick} style={spancss}>
-          <small style={smallcss}/>
-        </span>
-      );
+            return (
+                <switch {...nativeProps} {...others}/>
+            );
+        } else {
+            let styles = this.getStyles();
+            let wraperStyle = Object.assign({},styles.span,
+                checked ? styles.checkedSpan : styles.uncheckedSpan,
+                disabled ? styles.disabledSpan: {}
+            );
 
+            let innerStyle = Object.assign({},styles.small,
+                checked ? styles.checkedSmall : styles.uncheckedSmall
+            );
+
+            return (
+                <span onClick={this.handleClick.bind(this)} style={wraperStyle}  {...others}>
+                    <small style={innerStyle}/>
+                </span>
+            );
+
+        }
     }
-  }
 
-  getStyles() {
-    let sizeObj= this.props.size === 'small' ? Size.small : Size.medium;
-    return {
-      span: {
-        width: sizeObj.width,
-        height: sizeObj.height,
-        borderRadius: sizeObj.borderRadius,
-        position: 'relative',
-        display: 'inline-block',
-        margin: '4rem',
-        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: sizeObj.height,
-        height: sizeObj.height,
-        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(' + sizeObj.animLength + ')'
-      },
-      uncheckedSmall: {
-        WebkitTransform: 'translateX(0)'
-      }
-    };
-  }
+    getStyles() {
+        let sizeObj= this.props.size === 'small' ? Size.small : Size.medium;
+        return {
+            span: {
+                width: sizeObj.width,
+                height: sizeObj.height,
+                borderRadius: sizeObj.borderRadius,
+                position: 'relative',
+                display: 'inline-block',
+                margin: '4rem',
+                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: sizeObj.height,
+                height: sizeObj.height,
+                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(' + sizeObj.animLength + ')'
+            },
+            uncheckedSmall: {
+                WebkitTransform: 'translateX(0)'
+            }
+        };
+    }
 
 }
-
+const Size= {
+    medium : {
+        width:'100rem',
+        height:'60rem',
+        borderRadius:'40rem',
+        animLength:'40rem'
+    },
+    small:{
+        width:'80rem',
+        height:'48rem',
+        borderRadius:'24rem',
+        animLength:'32rem'
+    }
+}
 const styles = {
-  initial: {
-    width: Size.medium.width,
-    height: Size.medium.height,
-  },
+    initial: {
+        width: Size.medium.width,
+        height: Size.medium.height,
+    },
 };
 
 export default Switch;

No alert changes

Improved metrics

Total package byte prevSize

128223

increased by4.26%

Number of package files

40

increased by2.56%

Lines of code

2303

increased by3.65%

No dependency changes