@ant-design/react-native/lib/picker-view/Wheel.js

基于蚂蚁金服移动设计规范的 React Native 组件库

"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _reactNativeGestureHandler=require("react-native-gesture-handler");function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2["default"])(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2["default"])(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return(0,_possibleConstructorReturn2["default"])(this,result);};}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}var Wheel=function(_React$Component){(0,_inherits2["default"])(Wheel,_React$Component);var _super=_createSuper(Wheel);function Wheel(){var _this;(0,_classCallCheck2["default"])(this,Wheel);_this=_super.apply(this,arguments);_this.scrollTo=function(y){var _a,_b;(_b=(_a=_this.scrollerRef)===null||_a===void 0?void 0:_a.scrollTo)===null||_b===void 0?void 0:_b.call(_a,{y:y,animated:false});};_this.handleSelect=function(){if(_this.props.value!==_this.selectValue&&_this.props.onSelect){_this.props.onSelect(_this.selectValue,_this.props.index);}setTimeout(function(){_this.scrollTo(_this.getSelectIndex(_this.props.column,_this.props.value)*_this.props.itemHeight);});};_this.onScrollEndForWeb=function(e){var _a;(_a=e.persist)===null||_a===void 0?void 0:_a.call(e);var contentOffset=e.nativeEvent.contentOffset;if(!contentOffset){var position=e.nativeEvent.position;contentOffset={x:0,y:position*_this.props.itemHeight};}var selectIndex=Math.round(contentOffset.y/_this.props.itemHeight);if(_this.props.column[selectIndex]){_this.selectValue=_this.props.column[selectIndex].value;if(!_this.isScrolling){_this.updateSelectThrottle();}}};_this.onTouchStartForWeb=function(){_this.isScrolling=true;};_this.onTouchEndForWeb=function(){_this.isScrolling=false;_this.updateSelectThrottle();};_this.onScrollForWeb=function(e){_this.onScrollEndForWeb(e);};_this.updateSelectThrottle=function(){clearTimeout(_this.scrollBuffer);_this.scrollBuffer=setTimeout(function(){_this.handleSelect();},100);};_this.onMomentumScrollBegin=function(){_this.isScrolling=true;};_this.onMomentumScrollEnd=function(e){var _a;(_a=e.persist)===null||_a===void 0?void 0:_a.call(e);if(_this.isScrolling){var contentOffset=e.nativeEvent.contentOffset;if(!contentOffset){var position=e.nativeEvent.position;contentOffset={x:0,y:position*_this.props.itemHeight};}var selectIndex=Math.round(contentOffset.y/_this.props.itemHeight);if(_this.props.column[selectIndex]){_this.selectValue=_this.props.column[selectIndex].value;_this.handleSelect();}}_this.isScrolling=false;};_this.renderItems=function(){var _this$props=_this.props,column=_this$props.column,renderLabel=_this$props.renderLabel,itemHeight=_this$props.itemHeight,wheelHeight=_this$props.wheelHeight;return _react["default"].createElement(_reactNative.View,{style:{paddingVertical:(wheelHeight-itemHeight)/2}},column.map(function(item,index){return renderLabel(item,index);}));};return _this;}(0,_createClass2["default"])(Wheel,[{key:"componentDidMount",value:function componentDidMount(){var _this2=this;var _this$props2=this.props,value=_this$props2.value,column=_this$props2.column,itemHeight=_this$props2.itemHeight;setTimeout(function(){_this2.scrollTo(_this2.getSelectIndex(column,value)*itemHeight);});}},{key:"shouldComponentUpdate",value:function shouldComponentUpdate(nextProps){var value=nextProps.value,column=nextProps.column,itemHeight=nextProps.itemHeight,wheelHeight=nextProps.wheelHeight;if(value!==this.props.value||itemHeight!==this.props.itemHeight||wheelHeight!==this.props.wheelHeight){this.scrollTo(this.getSelectIndex(column,value)*itemHeight);return true;}return column!==this.props.column;}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){var column=prevProps.column;if(column!==this.props.column){this.scrollTo(this.getSelectIndex(this.props.column,this.props.value)*this.props.itemHeight);}}},{key:"getSelectIndex",value:function getSelectIndex(column,value){return Math.max(column.findIndex(function(item){return item.value===value;}),0);}},{key:"render",value:function render(){var _this3=this;return _react["default"].createElement(_reactNativeGestureHandler.ScrollView,(0,_extends2["default"])({style:{flex:1},horizontal:false,ref:function ref(el){return _this3.scrollerRef=el;},showsHorizontalScrollIndicator:false,showsVerticalScrollIndicator:false,pagingEnabled:false,automaticallyAdjustContentInsets:false,directionalLockEnabled:true,decelerationRate:"fast",snapToInterval:this.props.itemHeight},_reactNative.Platform.OS==='web'?{onTouchStart:this.onTouchStartForWeb,onTouchEnd:this.onTouchEndForWeb,onScroll:this.onScrollForWeb,scrollEventThrottle:16}:{onMomentumScrollBegin:this.onMomentumScrollBegin,onMomentumScrollEnd:this.onMomentumScrollEnd}),this.renderItems());}}]);return Wheel;}(_react["default"].Component);var _default=Wheel;exports["default"]=_default;