rmc-picker - npm Package Compare versions

Comparing version 0.3.2 to 0.4.0

lib/Picker.js

@@ -23,6 +23,22 @@ 'use strict';
 
-var _Scroller = require('./Scroller');
+var _iscroll = require('iscroll');
 
-var _Scroller2 = _interopRequireDefault(_Scroller);
+var _iscroll2 = _interopRequireDefault(_iscroll);
 
+// compare two object,  props.data with nextProps.data
+// data: [{value: '1', name: '1x'}, {value: '2', name: '2x'}...]
+function isEqual(preData, data) {
+  if (preData.length !== data.length) {
+    return false;
+  }
+  var equal = data.every(function (item, index) {
+    return item.value === preData[index].value && item.name === preData[index].name;
+  });
+  if (!equal) {
+    return false;
+  }
+  return true;
+}
+// console.log(isEqual([{value: '1', name: '1x'}, {value: '2', name: '2x'}], [{value: '1', name: '1x'}]));
+
 var Picker = _react2['default'].createClass({
@@ -33,7 +49,6 @@ displayName: 'Picker',
     prefixCls: _react2['default'].PropTypes.string,
-    open: _react2['default'].PropTypes.bool,
     data: _react2['default'].PropTypes.array,
-    value: _react2['default'].PropTypes.array,
-    onOk: _react2['default'].PropTypes.func,
-    onChange: _react2['default'].PropTypes.func
+    onValueChange: _react2['default'].PropTypes.func,
+    selectedValue: _react2['default'].PropTypes.oneOfType([_react2['default'].PropTypes.string, _react2['default'].PropTypes.number]),
+    heightOfItem: _react2['default'].PropTypes.number
   },
@@ -43,156 +58,113 @@ getDefaultProps: function getDefaultProps() {
       prefixCls: 'rmc-picker',
-      data: [],
-      value: []
-    };
+      selectedValue: '',
+      heightOfItem: 34 };
   },
-  getInitialState: function getInitialState() {
-    var st = {
-      open: false
-    };
-    if ('open' in this.props) {
-      st.open = this.props.open || false;
-    }
-    return st;
-  },
+  // scroller's list item's height, should be a constant value
   componentDidMount: function componentDidMount() {
     this.componentDidUpdate();
   },
-  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
-    var props = {};
-    if ('open' in nextProps) {
-      props.open = nextProps.open;
+  shouldComponentUpdate: function shouldComponentUpdate(nextProps) {
+    if (isEqual(this.props.data, nextProps.data) && this.iscroll) {
+      return false;
     }
-    this.setState(props);
+    return true;
   },
   componentDidUpdate: function componentDidUpdate() {
-    if (this.state.open) {
-      this.processDataValue();
-      this.createSelector();
+    var _this = this;
+
+    var thisDom = _reactDom2['default'].findDOMNode(this);
+    // when parent element display none
+    if (thisDom.offsetHeight <= 0 || thisDom.offsetWidth <= 0) {
+      return;
+    }
+    if (!this.iscroll) {
+      this.initScroller();
     } else {
-      this.destroySelector();
+      // refresh 和 scrollTo 等方法都会再次触发 scrollEnd
+      setTimeout(function () {
+        _this.iscroll.refresh();
+        _this.iscroll.scrollTo(0, _this.iscroll.pages[0][_this.defaultScrollPosition].y);
+      }, 0);
     }
   },
   componentWillUnmount: function componentWillUnmount() {
-    this.destroySelector();
+    this.iscroll.destroy();
+    this.iscroll = null;
   },
-  onOk: function onOk() {
-    this.setOpenState(false);
-    if (this.props.onOk) {
-      this.props.onOk({
-        value: this.value
+  onScrollEnd: function onScrollEnd() {
+    var _this2 = this;
+
+    var index = undefined;
+    if (this.props.heightOfItem) {
+      index = Math.abs(this.iscroll.y / this.props.heightOfItem);
+    } else {
+      this.iscroll.pages[0].forEach(function (item, i) {
+        if (index !== undefined && Math.abs(_this2.iscroll.y - item.y) < 2) {
+          index = i;
+        }
       });
     }
-  },
-  onSelect: function onSelect(selectNameValue, indexOfScrollers) {
-    if (this.props.onChange) {
-      this.props.onChange(selectNameValue.value, {
-        indexOfScrollers: indexOfScrollers,
-        preValue: [].concat(_toConsumableArray(this.value))
-      });
+    if (this.props.onValueChange && index !== undefined) {
+      this.props.onValueChange(this.data[index]);
     }
   },
-  setOpenState: function setOpenState(open, callback) {
-    if (this.state.open !== open) {
-      if (!('open' in this.props)) {
-        this.setState({
-          open: open
-        }, callback);
-      } else {
-        this.setState({
-          open: this.props.open
-        });
-      }
-    }
+  initScroller: function initScroller() {
+    // debugger
+    this.iscroll = new _iscroll2['default'](this.refs.iscroll_wrapper, {
+      snap: 'div',
+      startY: this.startY
+    });
+    this.iscroll.on('scrollEnd', this.onScrollEnd);
   },
-  createSelector: function createSelector() {
-    var _this = this;
+  teardownScroller: function teardownScroller() {},
+  render: function render() {
+    var _this3 = this;
 
     var props = this.props;
+    var prefixCls = props.prefixCls;
 
-    var container = _react2['default'].createElement(
+    var data = [].concat(_toConsumableArray(props.data));
+    this.data = data;
+    // 前后补三个空元素，页面展示需要
+    var temp = [0, 1, 2].map(function () {
+      return { value: '', name: '' };
+    });
+    var len = temp.length;
+    data = [].concat(_toConsumableArray(temp), _toConsumableArray(data), _toConsumableArray(temp));
+
+    // get default scroll position
+    this.defaultScrollPosition = 0;
+    if (props.selectedValue) {
+      data.forEach(function (item, index) {
+        if (item.value === props.selectedValue) {
+          _this3.defaultScrollPosition = index - len;
+        }
+      });
+    }
+
+    // get default scroll startY
+    this.startY = -(props.heightOfItem * this.defaultScrollPosition) || 0;
+
+    return _react2['default'].createElement(
       'div',
-      { className: (0, _classnames2['default'])(props.className, props.prefixCls + '-container') },
+      { ref: 'iscroll_wrapper', className: (0, _classnames2['default'])(props.className, prefixCls + '-scroller-wrapper') },
       _react2['default'].createElement(
         'div',
-        { className: props.prefixCls + '-header' },
-        _react2['default'].createElement('div', { className: props.prefixCls + '-item' }),
-        _react2['default'].createElement('div', { className: props.prefixCls + '-item' }),
-        _react2['default'].createElement(
-          'div',
-          { className: props.prefixCls + '-item', onClick: this.onOk },
-          '完成'
-        )
-      ),
-      _react2['default'].createElement(
-        'div',
-        { className: props.prefixCls + '-content' },
-        this.data.map(function (item, index) {
-          return item.length ? _react2['default'].createElement(
+        { ref: 'iscroll_scroller', className: prefixCls + '-scroller' },
+        data.map(function (item, index) {
+          return _react2['default'].createElement(
             'div',
-            { key: index, className: _this.props.prefixCls + '-item', 'data-index': index },
-            _react2['default'].createElement(_Scroller2['default'], { data: item, indexOfScrollers: index, defaultValue: _this.value[index], onSelect: _this.onSelect })
-          ) : null;
+            { key: index, className: prefixCls + '-scroller-item',
+              'data-value': item.value },
+            item.name
+          );
         })
-      )
+      ),
+      _react2['default'].createElement('div', { className: prefixCls + '-scroller-mask', 'data-role': 'mask' }),
+      _react2['default'].createElement('div', { ref: 'indicator', className: prefixCls + '-scroller-indicator', 'data-role': 'indicator' })
     );
-
-    var mask = _react2['default'].createElement('div', { className: (0, _classnames2['default'])(props.prefixCls + '-mask', this.state.open ? props.prefixCls + '-mask-open' : ''),
-      onClick: function () {
-        _this.setOpenState(false);
-      } });
-
-    if (!this.selectorContainer) {
-      this.selectorContainer = document.createElement('div');
-      document.body.appendChild(this.selectorContainer);
-    }
-
-    _reactDom2['default'].render(_react2['default'].createElement(
-      'div',
-      null,
-      container,
-      mask
-    ), this.selectorContainer);
-  },
-  destroySelector: function destroySelector() {
-    if (this.selectorContainer) {
-      _reactDom2['default'].unmountComponentAtNode(this.selectorContainer);
-      document.body.removeChild(this.selectorContainer);
-      this.selectorContainer = null;
-    }
-  },
-  processDataValue: function processDataValue() {
-    // make value array lenth equal with data array length
-    var value = [].concat(_toConsumableArray(this.props.value));
-    this.value = value;
-    this.data = [].concat(_toConsumableArray(this.props.data));
-    this.data.forEach(function (item, index) {
-      value[index] = value[index] || '';
-    });
-  },
-  render: function render() {
-    var _this2 = this;
-
-    var props = this.props;
-
-    var ele = '';
-    if (_react2['default'].Children.count(props.children) === 1) {
-      ele = _react2['default'].Children.only(props.children);
-    } else {
-      ele = _react2['default'].createElement(
-        'span',
-        null,
-        props.children
-      );
-    }
-
-    ele = _react2['default'].cloneElement(ele, 'open' in this.props ? {} : {
-      onClick: function onClick() {
-        _this2.setOpenState(true);
-      }
-    });
-
-    return ele;
   }
 });
+
 exports['default'] = Picker;
 module.exports = exports['default'];

package.json

 {
   "name": "rmc-picker",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "m-picker ui component for react",
@@ -47,3 +47,4 @@ "keywords": [
     "react-addons-test-utils": "0.14.x",
-    "react-dom": "0.14.x"
+    "react-dom": "0.14.x",
+    "rmc-modal": "~0.1.0"
   },
@@ -50,0 +51,0 @@ "pre-commit": [

README.md

@@ -65,7 +65,5 @@ # rmc-picker
 |prefixCls | prefix class | String | '' |
-|open | controlled open state | bool | false |
-|data | input data | array<array{obj}>  | [ [{name, value, selected(option)},...], ... ] |
-|value | default selected values corresponding to the input data above | array | [val1, val2] |
-|onChange | fire when change the selector's item | Function | '' |
-|onOk | fire when finish select the selector | Function | '' |
+|data | input data | array{obj}  | [{name, value, selected(option)},...] |
+|selectedValue | default selected values corresponding to the input data above | string/number |  |
+|onValueChange | fire when picker change | Function | '' |
 
@@ -72,0 +70,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

Worsened metrics

Total package byte prevSize

12037

decreased by-41.77%

Dev dependency count

8

increased by14.29%

Number of package files

7

decreased by-22.22%

Lines of code

242

decreased by-55.27%

Number of lines in readme file

81

decreased by-2.41%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes