@ant-design/react-native/es/tabs/Tabs.js

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

var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Tabs=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 _index=_interopRequireDefault(require("../carousel/index"));var _style=require("../style");var _view=_interopRequireDefault(require("../view"));var _DefaultTabBar=require("./DefaultTabBar");var _tabs=_interopRequireDefault(require("./style/tabs"));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 instanceId=0;var Tabs=function(_React$PureComponent){(0,_inherits2["default"])(Tabs,_React$PureComponent);var _super=_createSuper(Tabs);function Tabs(props){var _this;(0,_classCallCheck2["default"])(this,Tabs);_this=_super.call(this,props);_this.tabCache={};_this.renderContent=function(){var getSubElements=arguments.length>0&&arguments[0]!==undefined?arguments[0]:_this.getSubElements();var _this$props=_this.props,tabs=_this$props.tabs,destroyInactiveTab=_this$props.destroyInactiveTab;var _this$state=_this.state,_this$state$container=_this$state.containerHeight,containerHeight=_this$state$container===void 0?0:_this$state$container,_this$state$container2=_this$state.containerWidth,containerWidth=_this$state$container2===void 0?0:_this$state$container2,currentTab=_this$state.currentTab;var content=tabs.map(function(tab,index){var key=tab.key||"tab_".concat(index);if(_this.shouldRenderTab(index)){_this.tabCache[index]=_this.getSubElement(tab,index,getSubElements);}else if(destroyInactiveTab){_this.tabCache[index]=undefined;}return _react["default"].createElement(_view["default"],{key:key,style:[{width:containerWidth},containerHeight?{height:containerHeight}:{flex:1}]},_this.tabCache[index]);});return _react["default"].createElement(_index["default"],{key:"$content",keyboardDismissMode:"on-drag",pagination:function pagination(){return null;},selectedIndex:currentTab,afterChange:function afterChange(index){typeof _this.props.onChange==='function'&&_this.props.onChange(tabs[index],index);_this.setState({currentTab:index},function(){_this.state.scrollX.setValue(index*_this.state.containerWidth);});},scrollEnabled:_this.props.swipeable,style:{height:containerHeight,width:containerWidth},ref:function ref(_ref){return _this.carousel=_ref;}},content);};_this.handleLayout1=function(e){var height=e.nativeEvent.layout.height;requestAnimationFrame(function(){_this.setState({containerHeight:height});});};_this.handleLayout2=function(e){var width=e.nativeEvent.layout.width;requestAnimationFrame(function(){_this.scrollTo(_this.state.currentTab,false);});if(Math.round(width)!==Math.round(_this.state.containerWidth)){_this.setState({containerWidth:width});}};_this.scrollTo=function(index){var animated=arguments.length>1&&arguments[1]!==undefined?arguments[1]:true;if(_this.carousel){_this.carousel.goTo(index,animated);}};_this.isTabVertical=function(){var direction=arguments.length>0&&arguments[0]!==undefined?arguments[0]:_this.props.tabDirection;return direction==='vertical';};_this.shouldRenderTab=function(idx){var _this$props2=_this.props,_this$props2$prerende=_this$props2.prerenderingSiblingsNumber,prerenderingSiblingsNumber=_this$props2$prerende===void 0?0:_this$props2$prerende,usePaged=_this$props2.usePaged;var _this$state$currentTa=_this.state.currentTab,currentTab=_this$state$currentTa===void 0?0:_this$state$currentTa;return!usePaged||currentTab-prerenderingSiblingsNumber<=idx&&idx<=currentTab+prerenderingSiblingsNumber;};_this.getOffsetIndex=function(current,width){var threshold=arguments.length>2&&arguments[2]!==undefined?arguments[2]:_this.props.distanceToChangeTab||0;var ratio=Math.abs(current/width);var direction=ratio>_this.state.currentTab?'<':'>';var index=Math.floor(ratio);switch(direction){case'<':return ratio-index>threshold?index+1:index;case'>':return 1-ratio+index>threshold?index:index+1;default:return Math.round(ratio);}};_this.getSubElements=function(){var children=_this.props.children;var subElements={};return function(){var defaultPrefix=arguments.length>0&&arguments[0]!==undefined?arguments[0]:'$i$-';if(Array.isArray(children)){children.forEach(function(child,index){if(child.key){subElements[child.key]=child;}subElements["".concat(defaultPrefix).concat(index)]=child;});}return subElements;};};var width=_reactNative.Dimensions.get('window').width;var pageIndex=_this.getTabIndex(props);_this.state={currentTab:pageIndex,scrollX:new _reactNative.Animated.Value(pageIndex*width),scrollValue:new _reactNative.Animated.Value(pageIndex),containerWidth:width,containerHeight:0,selectedIndex:0};_this.instanceId=instanceId++;return _this;}(0,_createClass2["default"])(Tabs,[{key:"componentDidMount",value:function componentDidMount(){var _this2=this;this.prevCurrentTab=this.state.currentTab;this.state.scrollX.addListener(function(_ref2){var value=_ref2.value;var scrollValue=value/_this2.state.containerWidth;_this2.state.scrollValue.setValue(scrollValue);});}},{key:"render",value:function render(){var _this3=this;var _this$props3=this.props,children=_this$props3.children,tabBarPosition=_this$props3.tabBarPosition,noRenderContent=_this$props3.noRenderContent,keyboardShouldPersistTaps=_this$props3.keyboardShouldPersistTaps;var _this$state2=this.state,scrollX=_this$state2.scrollX,scrollValue=_this$state2.scrollValue,containerWidth=_this$state2.containerWidth,containerHeight=_this$state2.containerHeight;var tabBarProps=(0,_extends2["default"])((0,_extends2["default"])({},this.getTabBarBaseProps()),{keyboardShouldPersistTaps:keyboardShouldPersistTaps,scrollX:scrollX,scrollValue:scrollValue,containerWidth:containerWidth});return _react["default"].createElement(_style.WithTheme,{styles:this.props.styles,themeStyles:_tabs["default"]},function(styles){var content=[_react["default"].createElement(_view["default"],{key:"$tabbar",style:tabBarPosition==='top'?styles.topTabBarSplitLine:styles.bottomTabBarSplitLine},_this3.renderTabBar(tabBarProps,_DefaultTabBar.DefaultTabBar)),!noRenderContent&&_this3.renderContent()];if(containerHeight===0&&Array.isArray(children)){return _react["default"].createElement(_view["default"],{style:[{flexDirection:'row'},styles.container,_this3.props.style],onLayout:_this3.handleLayout1},_react["default"].Children.toArray(children)[0]);}return _react["default"].createElement(_view["default"],{style:[styles.container,_this3.props.style],onLayout:_this3.handleLayout2},tabBarPosition==='top'?content:content.reverse());});}},{key:"getTabIndex",value:function getTabIndex(props){var page=props.page,initialPage=props.initialPage,tabs=props.tabs;var param=(page!==undefined?page:initialPage)||0;var index=0;if(typeof param==='string'){tabs.forEach(function(t,i){if(t.key===param){index=i;}});}else{index=param||0;}return index<0?0:index;}},{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(this.props.page!==nextProps.page&&nextProps.page!==undefined){this.goToTab(this.getTabIndex(nextProps));}}},{key:"componentDidUpdate",value:function componentDidUpdate(){this.prevCurrentTab=this.state.currentTab;}},{key:"goToTab",value:function goToTab(index){var _this4=this;if(this.carousel){this.carousel.goTo(index,this.props.animated);}this.setState({currentTab:index},function(){_this4.state.scrollX.setValue(index*_this4.state.containerWidth);});}},{key:"tabClickGoToTab",value:function tabClickGoToTab(index){this.goToTab(index);}},{key:"getTabBarBaseProps",value:function getTabBarBaseProps(){var currentTab=this.state.currentTab;var _this$props4=this.props,animated=_this$props4.animated,onTabClick=_this$props4.onTabClick,tabBarActiveTextColor=_this$props4.tabBarActiveTextColor,tabBarBackgroundColor=_this$props4.tabBarBackgroundColor,tabBarInactiveTextColor=_this$props4.tabBarInactiveTextColor,tabBarPosition=_this$props4.tabBarPosition,tabBarTextStyle=_this$props4.tabBarTextStyle,tabBarUnderlineStyle=_this$props4.tabBarUnderlineStyle,renderTab=_this$props4.renderTab,renderUnderline=_this$props4.renderUnderline,tabs=_this$props4.tabs;return{activeTab:currentTab,animated:!!animated,goToTab:this.tabClickGoToTab.bind(this),onTabClick:onTabClick,tabBarActiveTextColor:tabBarActiveTextColor,tabBarBackgroundColor:tabBarBackgroundColor,tabBarInactiveTextColor:tabBarInactiveTextColor,tabBarPosition:tabBarPosition,tabBarTextStyle:tabBarTextStyle,tabBarUnderlineStyle:tabBarUnderlineStyle,renderTab:renderTab,renderUnderline:renderUnderline,tabs:tabs,instanceId:this.instanceId};}},{key:"renderTabBar",value:function renderTabBar(tabBarProps,DefaultTabBar){var renderTabBar=this.props.renderTabBar;if(renderTabBar===false){return null;}else if(renderTabBar){return renderTabBar(tabBarProps);}else{return _react["default"].createElement(DefaultTabBar,(0,_extends2["default"])({},tabBarProps));}}},{key:"getSubElement",value:function getSubElement(tab,index,subElements){var defaultPrefix=arguments.length>3&&arguments[3]!==undefined?arguments[3]:'$i$-';var allPrefix=arguments.length>4&&arguments[4]!==undefined?arguments[4]:'$ALL$';var key=tab.key||"".concat(defaultPrefix).concat(index);var elements=subElements(defaultPrefix,allPrefix);var component=elements[key]||elements[allPrefix];if(component instanceof Function){component=component(tab,index);}return component||null;}}]);return Tabs;}(_react["default"].PureComponent);exports.Tabs=Tabs;Tabs.defaultProps={tabBarPosition:'top',initialPage:0,swipeable:true,animated:true,prerenderingSiblingsNumber:1,tabs:[],destroyInactiveTab:false,usePaged:true,tabDirection:'horizontal',distanceToChangeTab:0.3,style:{}};Tabs.DefaultTabBar=_DefaultTabBar.DefaultTabBar;