@ant-design/react-native/lib/tabs/DefaultTabBar.js

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

"use strict";"use client";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _typeof=require("@babel/runtime/helpers/typeof");Object.defineProperty(exports,"__esModule",{value:true});exports.DefaultTabBar=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=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _style=require("../style");var _style2=_interopRequireDefault(require("./style"));function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||_typeof(obj)!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}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 WINDOW_WIDTH=_reactNative.Dimensions.get('window').width;var DefaultTabBar=function(_React$PureComponent){function DefaultTabBar(props){var _this2;(0,_classCallCheck2.default)(this,DefaultTabBar);_this2=_callSuper(this,DefaultTabBar,[props]);_this2._tabsMeasurements=[];_this2.updateView=function(offset){var position=Math.floor(offset.value);var pageOffset=offset.value%1;var tabCount=_this2.props.tabs.length;var lastTabPosition=tabCount-1;if(tabCount===0||offset.value<0||offset.value>lastTabPosition){return;}if(_this2.necessarilyMeasurementsCompleted(position,position===lastTabPosition)){_this2.updateTabPanel(position,pageOffset);_this2.updateTabUnderline(position,pageOffset,tabCount);}};_this2.onPress=function(index){var _this2$props=_this2.props,goToTab=_this2$props.goToTab,onTabClick=_this2$props.onTabClick,tabs=_this2$props.tabs;onTabClick&&onTabClick(tabs[index],index);goToTab&&goToTab(index);};_this2.renderTab=function(tab,index,width,onLayoutHandler,styles,theme){var _this2$props2=_this2.props,activeTextColor=_this2$props2.tabBarActiveTextColor,inactiveTextColor=_this2$props2.tabBarInactiveTextColor,textStyle=_this2$props2.tabBarTextStyle,activeTab=_this2$props2.activeTab,renderTab=_this2$props2.renderTab;var isTabActive=activeTab===index;var textColor=isTabActive?activeTextColor||theme.activeTextColor:inactiveTextColor||theme.inactiveTextColor;return _react.default.createElement(_reactNative.TouchableOpacity,{activeOpacity:1,key:"".concat(tab.title,"_").concat(index),accessible:true,accessibilityRole:"button",onPress:function onPress(){return _this2.onPress(index);},onLayout:onLayoutHandler},_react.default.createElement(_reactNative.View,{style:(0,_extends2.default)((0,_extends2.default)((0,_extends2.default)({},_reactNative.StyleSheet.flatten(styles.tab)),{minWidth:width}),_this2.props.tabStyle)},renderTab?renderTab(tab):(0,_react.isValidElement)(tab.title)?tab.title:_react.default.createElement(_reactNative.Text,{style:[(0,_extends2.default)({color:textColor},_reactNative.StyleSheet.flatten(styles.textStyle)),textStyle]},tab.title)));};_this2.measureTab=function(page,event){var _event$nativeEvent$la=event.nativeEvent.layout,x=_event$nativeEvent$la.x,width=_event$nativeEvent$la.width,height=_event$nativeEvent$la.height;_this2._tabsMeasurements[page]={left:x,right:x+width,width:width,height:height};_this2.updateView({value:_this2.props.scrollValue._value});};_this2.getTabs=function(styles,theme){var _this2$props3=_this2.props,tabs=_this2$props3.tabs,_this2$props3$page=_this2$props3.page,page=_this2$props3$page===void 0?0:_this2$props3$page;return tabs.map(function(name,index){var tab={title:name};if(tabs.length-1>=index){tab=tabs[index];}var tabWidth=_this2.state._containerWidth/Math.min(page,tabs.length);return _this2.renderTab(tab,index,tabWidth,_this2.measureTab.bind(_this2,index),styles,theme);});};_this2.getUnderLine=function(styles){var _this2$props4=_this2.props,tabBarUnderlineStyle=_this2$props4.tabBarUnderlineStyle,renderUnderline=_this2$props4.renderUnderline;var tabUnderlineStyle=(0,_extends2.default)((0,_extends2.default)({position:'absolute',bottom:0},_reactNative.StyleSheet.flatten(styles.underline)),_reactNative.StyleSheet.flatten(tabBarUnderlineStyle));var dynamicTabUnderline={left:_this2.state._leftTabUnderline,width:_this2.state._widthTabUnderline};var underlineProps={style:(0,_extends2.default)((0,_extends2.default)({},dynamicTabUnderline),tabUnderlineStyle)};return renderUnderline?renderUnderline(underlineProps.style):_react.default.createElement(_reactNative.Animated.View,(0,_extends2.default)({},underlineProps));};_this2.onTabContainerLayout=function(e){_this2._tabContainerMeasurements=e.nativeEvent.layout;var width=_this2._tabContainerMeasurements.width;_this2.setState({_tabContainerWidth:width});_this2.updateView({value:_this2.props.scrollValue._value});};_this2.onContainerLayout=function(e){_this2._containerMeasurements=e.nativeEvent.layout;_this2.setState({_containerWidth:_this2._containerMeasurements.width});_this2.updateView({value:_this2.props.scrollValue._value});};_this2.state={_leftTabUnderline:new _reactNative.Animated.Value(0),_widthTabUnderline:new _reactNative.Animated.Value(0),_containerWidth:WINDOW_WIDTH,_tabContainerWidth:WINDOW_WIDTH};return _this2;}(0,_inherits2.default)(DefaultTabBar,_React$PureComponent);return(0,_createClass2.default)(DefaultTabBar,[{key:"componentDidMount",value:function componentDidMount(){this.props.scrollValue.addListener(this.updateView);}},{key:"necessarilyMeasurementsCompleted",value:function necessarilyMeasurementsCompleted(position,isLastTab){return this._tabsMeasurements[position]&&(isLastTab||this._tabsMeasurements[position+1])&&this._tabContainerMeasurements&&this._containerMeasurements;}},{key:"updateTabPanel",value:function updateTabPanel(position,pageOffset){var _a,_b;var containerWidth=this._containerMeasurements.width;var tabWidth=this._tabsMeasurements[position].width;var nextTabMeasurements=this._tabsMeasurements[position+1];var nextTabWidth=nextTabMeasurements&&nextTabMeasurements.width||0;var tabOffset=this._tabsMeasurements[position].left;var absolutePageOffset=pageOffset*tabWidth;var newScrollX=tabOffset+absolutePageOffset;newScrollX-=(containerWidth-(1-pageOffset)*tabWidth-pageOffset*nextTabWidth)/2;newScrollX=newScrollX>=0?newScrollX:0;if(_reactNative.Platform.OS==='android'){(_a=this._scrollView)===null||_a===void 0?void 0:_a.scrollTo({x:newScrollX,y:0});}else{var rightBoundScroll=this._tabContainerMeasurements.width-this._containerMeasurements.width;newScrollX=newScrollX>rightBoundScroll?rightBoundScroll:newScrollX;(_b=this._scrollView)===null||_b===void 0?void 0:_b.scrollTo({x:newScrollX,y:0});}}},{key:"updateTabUnderline",value:function updateTabUnderline(position,pageOffset,tabCount){var _a,_b;if(position>=0&&position<=tabCount-1){var nowLeft=this._tabsMeasurements[position].left;var nowRight=this._tabsMeasurements[position].right;var nextTabLeft=((_a=this._tabsMeasurements[position+1])===null||_a===void 0?void 0:_a.left)||0;var nextTabRight=((_b=this._tabsMeasurements[position+1])===null||_b===void 0?void 0:_b.right)||0;var newLineLeft=pageOffset*nextTabLeft+(1-pageOffset)*nowLeft;var newLineRight=pageOffset*nextTabRight+(1-pageOffset)*nowRight;if(this._newLineLeft===newLineLeft){return;}this._newLineLeft=newLineLeft;if(this.props.animated){_reactNative.Animated.timing(this.state._leftTabUnderline,{toValue:newLineLeft,useNativeDriver:false}).start();_reactNative.Animated.timing(this.state._widthTabUnderline,{toValue:newLineRight-newLineLeft,useNativeDriver:false}).start();}else{this.state._leftTabUnderline.setValue(newLineLeft);this.state._widthTabUnderline.setValue(newLineRight-newLineLeft);}}}},{key:"render",value:function render(){var _this3=this;var _this$props=this.props,tabs=_this$props.tabs,_this$props$page=_this$props.page,page=_this$props$page===void 0?0:_this$props$page,tabBarBackgroundColor=_this$props.tabBarBackgroundColor,tabsContainerStyle=_this$props.tabsContainerStyle,keyboardShouldPersistTaps=_this$props.keyboardShouldPersistTaps;return _react.default.createElement(_style.WithTheme,{styles:this.props.styles,themeStyles:_style2.default},function(styles,theme){return _react.default.createElement(_reactNative.View,{style:[styles.container,{backgroundColor:tabBarBackgroundColor}],onLayout:_this3.onContainerLayout},_react.default.createElement(_reactNative.ScrollView,{ref:function ref(scrollView){_this3._scrollView=scrollView;},horizontal:true,showsHorizontalScrollIndicator:false,showsVerticalScrollIndicator:false,directionalLockEnabled:true,bounces:false,scrollsToTop:false,scrollEnabled:tabs.length>page,keyboardShouldPersistTaps:keyboardShouldPersistTaps,renderToHardwareTextureAndroid:true},_react.default.createElement(_reactNative.View,{style:[styles.tabs,tabsContainerStyle,{backgroundColor:tabBarBackgroundColor}],onLayout:_this3.onTabContainerLayout},_this3.getTabs(styles,theme),_this3.getUnderLine(styles))));});}}]);}(_react.default.PureComponent);exports.DefaultTabBar=DefaultTabBar;DefaultTabBar.defaultProps={animated:true,tabs:[],goToTab:function goToTab(){},activeTab:0,page:5,tabBarUnderlineStyle:{},tabBarBackgroundColor:'#fff',tabBarActiveTextColor:'',tabBarInactiveTextColor:'',tabBarTextStyle:{}};