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

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

"use strict";"use client";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 _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=(0,_getPrototypeOf2.default)(derived);return(0,_possibleConstructorReturn2.default)(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],(0,_getPrototypeOf2.default)(_this).constructor):derived.apply(_this,args));}var Wheel=function(_React$Component){function Wheel(){var _this2;(0,_classCallCheck2.default)(this,Wheel);_this2=_callSuper(this,Wheel,arguments);_this2.scrollTo=function(y){var _a,_b;(_b=(_a=_this2.scrollerRef)===null||_a===void 0?void 0:_a.scrollTo)===null||_b===void 0?void 0:_b.call(_a,{y:y,animated:false});};_this2.handleSelect=function(){if(_this2.props.value!==_this2.selectValue&&_this2.props.onSelect){_this2.props.onSelect(_this2.selectValue,_this2.props.index);}setTimeout(function(){_this2.scrollTo(_this2.getSelectIndex(_this2.props.column,_this2.props.value)*_this2.props.itemHeight);});};_this2.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*_this2.props.itemHeight};}var selectIndex=Math.round(contentOffset.y/_this2.props.itemHeight);if(_this2.props.column[selectIndex]){_this2.selectValue=_this2.props.column[selectIndex].value;if(!_this2.isScrolling){_this2.updateSelectThrottle();}}};_this2.onTouchStartForWeb=function(){_this2.isScrolling=true;};_this2.onTouchEndForWeb=function(){_this2.isScrolling=false;_this2.updateSelectThrottle();};_this2.onScrollForWeb=function(e){_this2.onScrollEndForWeb(e);};_this2.updateSelectThrottle=function(){clearTimeout(_this2.scrollBuffer);_this2.scrollBuffer=setTimeout(function(){_this2.handleSelect();},100);};_this2.onMomentumScrollBegin=function(){_this2.isScrolling=true;};_this2.onMomentumScrollEnd=function(e){var _a;(_a=e.persist)===null||_a===void 0?void 0:_a.call(e);if(_this2.isScrolling){var contentOffset=e.nativeEvent.contentOffset;if(!contentOffset){var position=e.nativeEvent.position;contentOffset={x:0,y:position*_this2.props.itemHeight};}var selectIndex=Math.round(contentOffset.y/_this2.props.itemHeight);if(_this2.props.column[selectIndex]){_this2.selectValue=_this2.props.column[selectIndex].value;_this2.handleSelect();}}_this2.isScrolling=false;};_this2.renderItems=function(){var _this2$props=_this2.props,column=_this2$props.column,renderLabel=_this2$props.renderLabel,itemHeight=_this2$props.itemHeight,wheelHeight=_this2$props.wheelHeight;return _react.default.createElement(_reactNative.View,{style:{paddingVertical:(wheelHeight-itemHeight)/2}},column.map(function(item,index){return renderLabel(item,index);}));};return _this2;}(0,_inherits2.default)(Wheel,_React$Component);return(0,_createClass2.default)(Wheel,[{key:"componentDidMount",value:function componentDidMount(){var _this3=this;var _this$props=this.props,value=_this$props.value,column=_this$props.column,itemHeight=_this$props.itemHeight;setTimeout(function(){_this3.scrollTo(_this3.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 _this4=this;return _react.default.createElement(_reactNative.ScrollView,(0,_extends2.default)({style:{flex:1},nestedScrollEnabled:true,horizontal:false,ref:function ref(el){return _this4.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());}}]);}(_react.default.Component);var _default=Wheel;exports.default=_default;