@ant-design/react-native
Version:
基于蚂蚁金服移动设计规范的 React Native 组件库
1 lines • 10.7 kB
JavaScript
"use client";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 _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");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 _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 instanceId=0;var Tabs=function(_React$PureComponent){function Tabs(props){var _this2;(0,_classCallCheck2.default)(this,Tabs);_this2=_callSuper(this,Tabs,[props]);_this2.tabCache={};_this2.renderContent=function(){var getSubElements=arguments.length>0&&arguments[0]!==undefined?arguments[0]:_this2.getSubElements();var _this2$props=_this2.props,tabs=_this2$props.tabs,destroyInactiveTab=_this2$props.destroyInactiveTab;var _this2$state=_this2.state,_this2$state$containe=_this2$state.containerHeight,containerHeight=_this2$state$containe===void 0?0:_this2$state$containe,_this2$state$containe2=_this2$state.containerWidth,containerWidth=_this2$state$containe2===void 0?0:_this2$state$containe2,currentTab=_this2$state.currentTab;var content=tabs.map(function(tab,index){var key=tab.key||"tab_".concat(index);if(_this2.shouldRenderTab(index)){_this2.tabCache[index]=_this2.getSubElement(tab,index,getSubElements);}else if(destroyInactiveTab){_this2.tabCache[index]=undefined;}return _react.default.createElement(_view.default,{key:key,style:[{width:containerWidth},containerHeight?{height:containerHeight}:{flex:1}]},_this2.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 _this2.props.onChange==='function'&&_this2.props.onChange(tabs[index],index);_this2.setState({currentTab:index},function(){_this2.state.scrollX.setValue(index*_this2.state.containerWidth);});},scrollEnabled:_this2.props.swipeable,style:{height:containerHeight,width:containerWidth},ref:function ref(_ref){return _this2.carousel=_ref;}},content);};_this2.handleLayout1=function(e){var height=e.nativeEvent.layout.height;requestAnimationFrame(function(){_this2.setState({containerHeight:height});});};_this2.handleLayout2=function(e){var width=e.nativeEvent.layout.width;requestAnimationFrame(function(){_this2.scrollTo(_this2.state.currentTab,false);});if(Math.round(width)!==Math.round(_this2.state.containerWidth)){_this2.setState({containerWidth:width});}};_this2.scrollTo=function(index){var animated=arguments.length>1&&arguments[1]!==undefined?arguments[1]:true;if(_this2.carousel){_this2.carousel.goTo(index,animated);}};_this2.isTabVertical=function(){var direction=arguments.length>0&&arguments[0]!==undefined?arguments[0]:_this2.props.tabDirection;return direction==='vertical';};_this2.shouldRenderTab=function(idx){var _this2$props2=_this2.props,_this2$props2$prerend=_this2$props2.prerenderingSiblingsNumber,prerenderingSiblingsNumber=_this2$props2$prerend===void 0?0:_this2$props2$prerend,usePaged=_this2$props2.usePaged;var _this2$state$currentT=_this2.state.currentTab,currentTab=_this2$state$currentT===void 0?0:_this2$state$currentT;return!usePaged||currentTab-prerenderingSiblingsNumber<=idx&&idx<=currentTab+prerenderingSiblingsNumber;};_this2.getOffsetIndex=function(current,width){var threshold=arguments.length>2&&arguments[2]!==undefined?arguments[2]:_this2.props.distanceToChangeTab||0;var ratio=Math.abs(current/width);var direction=ratio>_this2.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);}};_this2.getSubElements=function(){var children=_this2.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=_this2.getTabIndex(props);_this2.state={currentTab:pageIndex,scrollX:new _reactNative.Animated.Value(pageIndex*width),scrollValue:new _reactNative.Animated.Value(pageIndex),containerWidth:width,containerHeight:0,selectedIndex:0};_this2.instanceId=instanceId++;return _this2;}(0,_inherits2.default)(Tabs,_React$PureComponent);return(0,_createClass2.default)(Tabs,[{key:"componentDidMount",value:function componentDidMount(){var _this3=this;this.prevCurrentTab=this.state.currentTab;this.state.scrollX.addListener(function(_ref2){var value=_ref2.value;var scrollValue=value/_this3.state.containerWidth;_this3.state.scrollValue.setValue(scrollValue);});}},{key:"render",value:function render(){var _this4=this;var _this$props=this.props,children=_this$props.children,tabBarPosition=_this$props.tabBarPosition,noRenderContent=_this$props.noRenderContent,keyboardShouldPersistTaps=_this$props.keyboardShouldPersistTaps;var _this$state=this.state,scrollX=_this$state.scrollX,scrollValue=_this$state.scrollValue,containerWidth=_this$state.containerWidth,containerHeight=_this$state.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},_this4.renderTabBar(tabBarProps,_DefaultTabBar.DefaultTabBar)),!noRenderContent&&_this4.renderContent()];if(containerHeight===0&&Array.isArray(children)){return _react.default.createElement(_view.default,{style:[{flexDirection:'row'},styles.container,_this4.props.style],onLayout:_this4.handleLayout1},_react.default.Children.toArray(children)[0]);}return _react.default.createElement(_view.default,{style:[styles.container,_this4.props.style],onLayout:_this4.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 _this5=this;if(this.carousel){this.carousel.goTo(index,this.props.animated);}this.setState({currentTab:index},function(){_this5.state.scrollX.setValue(index*_this5.state.containerWidth);});}},{key:"tabClickGoToTab",value:function tabClickGoToTab(index){this.goToTab(index);}},{key:"getTabBarBaseProps",value:function getTabBarBaseProps(){var currentTab=this.state.currentTab;var _this$props2=this.props,animated=_this$props2.animated,onTabClick=_this$props2.onTabClick,tabBarActiveTextColor=_this$props2.tabBarActiveTextColor,tabBarBackgroundColor=_this$props2.tabBarBackgroundColor,tabBarInactiveTextColor=_this$props2.tabBarInactiveTextColor,tabBarPosition=_this$props2.tabBarPosition,tabBarTextStyle=_this$props2.tabBarTextStyle,tabBarUnderlineStyle=_this$props2.tabBarUnderlineStyle,renderTab=_this$props2.renderTab,renderUnderline=_this$props2.renderUnderline,tabs=_this$props2.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;}}]);}(_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;