rmc-picker - npm Package Compare versions

Comparing version 0.5.0 to 1.0.0

lib/index.js

@@ -1,2 +0,1 @@
-// export this package's api
 'use strict';
@@ -18,4 +17,4 @@
 
-_Picker2['default'].PickerItem = _PickerItem2['default'];
+_Picker2['default'].Item = _PickerItem2['default'];
 exports['default'] = _Picker2['default'];
 module.exports = exports['default'];

lib/Picker.js

@@ -27,5 +27,14 @@ 'use strict';
 
-var _PickerItem = require('./PickerItem');
+// 前后补三个空元素，页面展示需要
+var paddingElements = [0, 1, 2, 3, 4, 5].map(function (i) {
+  return {
+    props: {
+      value: 'padding_' + i,
+      label: '',
+      key: 'padding_' + i
+    }
+  };
+});
 
-var _PickerItem2 = _interopRequireDefault(_PickerItem);
+var paddingElementsHalfLen = paddingElements.length / 2;
 
@@ -36,35 +45,29 @@ var Picker = _react2['default'].createClass({
   propTypes: {
-    prefixCls: _react2['default'].PropTypes.string,
-    onValueChange: _react2['default'].PropTypes.func,
-    selectedValue: _react2['default'].PropTypes.oneOfType([_react2['default'].PropTypes.string, _react2['default'].PropTypes.number]),
-    heightOfItem: _react2['default'].PropTypes.number
+    prefixCls: _react.PropTypes.string,
+    onValueChange: _react.PropTypes.func,
+    children: _react.PropTypes.any,
+    selectedValue: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number])
   },
   getDefaultProps: function getDefaultProps() {
     return {
-      prefixCls: 'rmc-picker',
-      selectedValue: '',
-      heightOfItem: 34 };
+      onValueChange: function onValueChange() {},
+      prefixCls: 'rmc-picker'
+    };
   },
-  // scroller's list item's height, should be a constant value
   componentDidMount: function componentDidMount() {
-    this.componentDidUpdate();
+    this.initScroller();
+    this.positionScroll();
   },
-  componentDidUpdate: function componentDidUpdate() {
-    var _this = this;
-
+  shouldComponentUpdate: function shouldComponentUpdate() {
     var thisDom = _reactDom2['default'].findDOMNode(this);
     // when parent element display none
     if (thisDom.offsetHeight <= 0 || thisDom.offsetWidth <= 0) {
-      return;
+      return false;
     }
-    if (!this.iscroll) {
-      this.initScroller();
-    } else {
-      // refresh 和 scrollTo 等方法都会再次触发 scrollEnd
-      setTimeout(function () {
-        _this.iscroll.refresh();
-        _this.iscroll.scrollTo(0, _this.iscroll.pages[0][_this.defaultScrollPosition].y);
-      }, 0);
-    }
+    return true;
   },
+  componentDidUpdate: function componentDidUpdate() {
+    this.iscroll.refresh();
+    this.positionScroll();
+  },
   componentWillUnmount: function componentWillUnmount() {
@@ -75,74 +78,62 @@ this.iscroll.destroy();
   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;
-        }
-      });
+    var iscrollY = this.iscroll.y;
+    this.iscroll.pages[0].forEach(function (item, i) {
+      if (index === undefined && Math.abs(iscrollY - item.y) < 2) {
+        index = i;
+      }
+    });
+    if (index !== undefined) {
+      var selectedValue = this.getValueByIndex(index);
+      if (selectedValue !== this.props.selectedValue) {
+        this.props.onValueChange(this.getValueByIndex(index));
+      }
     }
-    if (this.props.onValueChange && index !== undefined) {
-      this.props.onValueChange(this.userData[index]);
+  },
+  getValueByIndex: function getValueByIndex(index) {
+    return this.props.children[index].props.value;
+  },
+  getScrollPosition: function getScrollPosition() {
+    var props = this.props;
+    if (!props.selectedValue) {
+      return 0;
     }
+    var scrollPosition = 0;
+    props.children.forEach(function (item, index) {
+      if (item.props.value === props.selectedValue) {
+        scrollPosition = index;
+      }
+    });
+    return scrollPosition;
   },
   initScroller: function initScroller() {
-    // debugger
-    this.iscroll = new _iscroll2['default'](this.refs.iscroll_wrapper, {
-      snap: 'div',
-      startY: this.startY
+    this.iscroll = new _iscroll2['default'](this.refs.iscrollWrapper, {
+      snap: 'div'
     });
     this.iscroll.on('scrollEnd', this.onScrollEnd);
   },
-  teardownScroller: function teardownScroller() {},
+  positionScroll: function positionScroll() {
+    if (this.iscroll.pages[0]) {
+      this.iscroll.scrollTo(0, this.iscroll.pages[0][this.getScrollPosition()].y);
+    }
+  },
   render: function render() {
-    var _this3 = this;
-
     var props = this.props;
     var prefixCls = props.prefixCls;
-
-    // 前后补三个空元素，页面展示需要
-    var temp = [0, 1, 2].map(function () {
-      return { value: '', name: '' };
+    var compositeData = [].concat(_toConsumableArray(paddingElements.slice(0, paddingElementsHalfLen)), _toConsumableArray(props.children), _toConsumableArray(paddingElements.slice(paddingElementsHalfLen, paddingElements.length)));
+    var items = compositeData.map(function (item, index) {
+      var itemProps = item.props;
+      return _react2['default'].createElement(
+        'div',
+        { key: itemProps.key || index, className: prefixCls + '-scroller-item' },
+        itemProps.label
+      );
     });
-    var len = temp.length;
-
-    this.userData = [];
-    _react2['default'].Children.forEach(props.children, function (child) {
-      if (child.type === _PickerItem2['default']) {
-        _this3.userData.push({ value: child.props.value, name: child.props.name });
-      }
-    });
-    var compositeData = [].concat(_toConsumableArray(temp), _toConsumableArray(this.userData), _toConsumableArray(temp));
-
-    // get default scroll position
-    this.defaultScrollPosition = 0;
-    if (props.selectedValue) {
-      compositeData.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',
-      { ref: 'iscroll_wrapper', className: (0, _classnames2['default'])(props.className, prefixCls + '-scroller-wrapper') },
+      { ref: 'iscrollWrapper', className: (0, _classnames2['default'])(props.className, prefixCls + '-scroller-wrapper') },
       _react2['default'].createElement(
         'div',
         { ref: 'iscroll_scroller', className: prefixCls + '-scroller' },
-        compositeData.map(function (item, index) {
-          return _react2['default'].createElement(
-            'div',
-            { key: index, className: prefixCls + '-scroller-item',
-              'data-value': item.value },
-            item.name
-          );
-        })
+        items
       ),
@@ -149,0 +140,0 @@ _react2['default'].createElement('div', { className: prefixCls + '-scroller-mask', 'data-role': 'mask' }),

package.json

 {
   "name": "rmc-picker",
-  "version": "0.5.0",
-  "description": "m-picker ui component for react",
+  "version": "1.0.0",
+  "description": "React Mobile Picker Component",
   "keywords": [
@@ -12,3 +12,6 @@ "react",
   "homepage": "https://github.com/react-component/m-picker",
-  "author": "[e-mail]",
+  "maitainers": [
+    "[e-mail]",
+    "[e-mail]"
+  ],
   "repository": {
@@ -15,0 +18,0 @@ "type": "git",

README.md

 # rmc-picker
 ---
 
-React MCascadeSelect Component
+React Mobile Picker Component
 
@@ -13,6 +13,3 @@
 [![npm download][download-image]][download-url]
-[![Sauce Test Status](https://saucelabs.com/buildstatus/rmc-picker)](https://saucelabs.com/u/rmc-picker)
 
-[![Sauce Test Status](https://saucelabs.com/browser-matrix/rmc-picker.svg)](https://saucelabs.com/u/rmc-picker)
-
 [npm-image]: http://img.shields.io/npm/v/rmc-picker.svg?style=flat-square
@@ -47,3 +44,3 @@ [npm-url]: http://npmjs.org/package/rmc-picker
 
-online example: http://react-component.github.io/m-picker/examples/
+online example: http://react-component.github.io/m-picker/
 
@@ -65,6 +62,6 @@
 |----------|----------------|----------|--------------|
-|className | additional css class of root dom node | String | '' |
+|className | additional css class of root dom node | String |  |
 |prefixCls | prefix class | String | '' |
 |selectedValue | default selected values corresponding to the input data above | string/number |  |
-|onValueChange | fire when picker change | Function | '' |
+|onValueChange | fire when picker change | Function(value) |  |
 
@@ -75,6 +72,5 @@ ### PickerItem props
 |----------|----------------|----------|--------------|
-|value | PickerItem value | any | '' |
-|name | PickerItem name | any | '' |
+|value | PickerItem value | any |  |
+|label | PickerItem label | any |  |
 
-
 ## Test Case
@@ -81,0 +77,0 @@

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

11121

decreased by-4.79%

Lines of code

211

decreased by-0.94%

Number of low maintenance alerts

2

increased by100%

Number of lines in readme file

83

decreased by-4.6%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes