react-native-tab-view/lib/module/TabBar.js

Tab view component for React Native

import _extends from"@babel/runtime/helpers/extends";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _inherits from"@babel/runtime/helpers/inherits";var _jsxFileName="/Users/satya/Workspace/Projects/react-native-tab-view/src/TabBar.tsx";import*as React from'react';import{StyleSheet,View,I18nManager,Platform}from'react-native';import Animated from'react-native-reanimated';import TabBarItem from'./TabBarItem';import TabBarIndicator from'./TabBarIndicator';import memoize from'./memoize';var TabBar=function(_React$Component){_inherits(TabBar,_React$Component);function TabBar(){var _getPrototypeOf2;var _this;_classCallCheck(this,TabBar);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_possibleConstructorReturn(this,(_getPrototypeOf2=_getPrototypeOf(TabBar)).call.apply(_getPrototypeOf2,[this].concat(args)));_this.state={layout:{width:0,height:0}};_this.scrollAmount=new Animated.Value(0);_this.getTabWidth=function(props,state){var layout=state.layout;var navigationState=props.navigationState,tabStyle=props.tabStyle;var flattened=StyleSheet.flatten(tabStyle);if(flattened){switch(typeof flattened.width){case'number':return flattened.width;case'string':if(flattened.width.endsWith('%')){var width=parseFloat(flattened.width);if(Number.isFinite(width)){return layout.width*(width/100);}}}}if(props.scrollEnabled){return layout.width/5*2;}return layout.width/navigationState.routes.length;};_this.getMaxScrollDistance=function(tabBarWidth,layoutWidth){return tabBarWidth-layoutWidth;};_this.normalizeScrollValue=function(props,state,value){var layout=state.layout;var navigationState=props.navigationState;var tabWidth=_this.getTabWidth(props,state);var tabBarWidth=Math.max(tabWidth*navigationState.routes.length,layout.width);var maxDistance=_this.getMaxScrollDistance(tabBarWidth,layout.width);var scrollValue=Math.max(Math.min(value,maxDistance),0);if(Platform.OS==='android'&&I18nManager.isRTL){return maxDistance-scrollValue;}return scrollValue;};_this.getScrollAmount=function(props,state,i){var layout=state.layout;var tabWidth=_this.getTabWidth(props,state);var centerDistance=tabWidth*(i+1/2);var scrollAmount=centerDistance-layout.width/2;return _this.normalizeScrollValue(props,state,scrollAmount);};_this.resetScroll=function(value){if(_this.props.scrollEnabled){_this.scrollView&&_this.scrollView.scrollTo({x:_this.getScrollAmount(_this.props,_this.state,value),animated:true});}};_this.handleLayout=function(e){var _e$nativeEvent$layout=e.nativeEvent.layout,height=_e$nativeEvent$layout.height,width=_e$nativeEvent$layout.width;if(_this.state.layout.width===width&&_this.state.layout.height===height){return;}_this.setState({layout:{height:height,width:width}});};_this.getTranslateX=memoize(function(scrollAmount,maxScrollDistance){return Animated.multiply(Platform.OS==='android'&&I18nManager.isRTL?Animated.sub(maxScrollDistance,scrollAmount):scrollAmount,I18nManager.isRTL?1:-1);});return _this;}_createClass(TabBar,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){if(prevProps.navigationState.routes.length!==this.props.navigationState.routes.length||prevProps.navigationState.index!==this.props.navigationState.index||prevState.layout.width!==this.state.layout.width){this.resetScroll(this.props.navigationState.index);}}},{key:"render",value:function render(){var _this2=this;var _this$props=this.props,position=_this$props.position,navigationState=_this$props.navigationState,jumpTo=_this$props.jumpTo,scrollEnabled=_this$props.scrollEnabled,bounces=_this$props.bounces,getAccessibilityLabel=_this$props.getAccessibilityLabel,getAccessible=_this$props.getAccessible,getLabelText=_this$props.getLabelText,getTestID=_this$props.getTestID,renderBadge=_this$props.renderBadge,renderIcon=_this$props.renderIcon,renderLabel=_this$props.renderLabel,activeColor=_this$props.activeColor,inactiveColor=_this$props.inactiveColor,pressColor=_this$props.pressColor,pressOpacity=_this$props.pressOpacity,onTabPress=_this$props.onTabPress,onTabLongPress=_this$props.onTabLongPress,tabStyle=_this$props.tabStyle,labelStyle=_this$props.labelStyle,indicatorStyle=_this$props.indicatorStyle,contentContainerStyle=_this$props.contentContainerStyle,style=_this$props.style;var layout=this.state.layout;var routes=navigationState.routes;var tabWidth=this.getTabWidth(this.props,this.state);var tabBarWidth=tabWidth*routes.length;var translateX=this.getTranslateX(this.scrollAmount,this.getMaxScrollDistance(tabBarWidth,layout.width));return React.createElement(Animated.View,{onLayout:this.handleLayout,style:[styles.tabBar,style],__source:{fileName:_jsxFileName,lineNumber:240}},React.createElement(Animated.View,{pointerEvents:"none",style:[styles.indicatorContainer,scrollEnabled?{width:tabBarWidth,transform:[{translateX:translateX}]}:null],__source:{fileName:_jsxFileName,lineNumber:244}},this.props.renderIndicator({position:position,layout:layout,navigationState:navigationState,jumpTo:jumpTo,width:tabWidth,style:indicatorStyle})),React.createElement(View,{style:styles.scroll,__source:{fileName:_jsxFileName,lineNumber:262}},React.createElement(Animated.ScrollView,{horizontal:true,keyboardShouldPersistTaps:"handled",scrollEnabled:scrollEnabled,bounces:bounces,alwaysBounceHorizontal:false,scrollsToTop:false,showsHorizontalScrollIndicator:false,automaticallyAdjustContentInsets:false,overScrollMode:"never",contentContainerStyle:[styles.tabContent,scrollEnabled?null:styles.container,contentContainerStyle],scrollEventThrottle:16,onScroll:Animated.event([{nativeEvent:{contentOffset:{x:this.scrollAmount}}}],{useNativeDriver:true}),ref:function ref(el){_this2.scrollView=el&&el.getNode();},__source:{fileName:_jsxFileName,lineNumber:263}},routes.map(function(route){return React.createElement(TabBarItem,{key:route.key,position:position,route:route,tabWidth:tabWidth,navigationState:navigationState,scrollEnabled:scrollEnabled,getAccessibilityLabel:getAccessibilityLabel,getAccessible:getAccessible,getLabelText:getLabelText,getTestID:getTestID,renderBadge:renderBadge,renderIcon:renderIcon,renderLabel:renderLabel,activeColor:activeColor,inactiveColor:inactiveColor,pressColor:pressColor,pressOpacity:pressOpacity,onPress:function onPress(){onTabPress&&onTabPress({route:route});_this2.props.jumpTo(route.key);},onLongPress:function onLongPress(){return onTabLongPress&&onTabLongPress({route:route});},labelStyle:labelStyle,style:tabStyle,__source:{fileName:_jsxFileName,lineNumber:295}});}))));}}]);return TabBar;}(React.Component);TabBar.defaultProps={getLabelText:function getLabelText(_ref){var route=_ref.route;return typeof route.title==='string'?route.title.toUpperCase():route.title;},getAccessible:function getAccessible(_ref2){var route=_ref2.route;return typeof route.accessible!=='undefined'?route.accessible:true;},getAccessibilityLabel:function getAccessibilityLabel(_ref3){var route=_ref3.route;return typeof route.accessibilityLabel==='string'?route.accessibilityLabel:typeof route.title==='string'?route.title:undefined;},getTestID:function getTestID(_ref4){var route=_ref4.route;return route.testID;},renderIndicator:function renderIndicator(props){return React.createElement(TabBarIndicator,_extends({},props,{__source:{fileName:_jsxFileName,lineNumber:81}}));}};export{TabBar as default};var styles=StyleSheet.create({container:{flex:1},scroll:{overflow:'scroll'},tabBar:{backgroundColor:'#2196f3',elevation:4,shadowColor:'black',shadowOpacity:0.1,shadowRadius:StyleSheet.hairlineWidth,shadowOffset:{height:StyleSheet.hairlineWidth,width:0},zIndex:1},tabContent:{flexDirection:'row',flexWrap:'nowrap'},indicatorContainer:{position:'absolute',top:0,left:0,right:0,bottom:0}});
//# sourceMappingURL=TabBar.js.map