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

Tab view component for React Native

var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");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 _getPrototypeOf3=_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 _reactNativeReanimated=_interopRequireDefault(require("react-native-reanimated"));var _TabBarItem=_interopRequireDefault(require("./TabBarItem"));var _TabBarIndicator=_interopRequireDefault(require("./TabBarIndicator"));var _memoize=_interopRequireDefault(require("./memoize"));var _jsxFileName="/Users/satya/Workspace/Projects/react-native-tab-view/src/TabBar.tsx";var TabBar=function(_React$Component){(0,_inherits2.default)(TabBar,_React$Component);function TabBar(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,TabBar);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(TabBar)).call.apply(_getPrototypeOf2,[this].concat(args)));_this.state={layout:{width:0,height:0}};_this.scrollAmount=new _reactNativeReanimated.default.Value(0);_this.getTabWidth=function(props,state){var layout=state.layout;var navigationState=props.navigationState,tabStyle=props.tabStyle;var flattened=_reactNative.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(_reactNative.Platform.OS==='android'&&_reactNative.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=(0,_memoize.default)(function(scrollAmount,maxScrollDistance){return _reactNativeReanimated.default.multiply(_reactNative.Platform.OS==='android'&&_reactNative.I18nManager.isRTL?_reactNativeReanimated.default.sub(maxScrollDistance,scrollAmount):scrollAmount,_reactNative.I18nManager.isRTL?1:-1);});return _this;}(0,_createClass2.default)(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(_reactNativeReanimated.default.View,{onLayout:this.handleLayout,style:[styles.tabBar,style],__source:{fileName:_jsxFileName,lineNumber:240}},React.createElement(_reactNativeReanimated.default.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(_reactNative.View,{style:styles.scroll,__source:{fileName:_jsxFileName,lineNumber:262}},React.createElement(_reactNativeReanimated.default.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:_reactNativeReanimated.default.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.default,{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);exports.default=TabBar;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.default,(0,_extends2.default)({},props,{__source:{fileName:_jsxFileName,lineNumber:81}}));}};var styles=_reactNative.StyleSheet.create({container:{flex:1},scroll:{overflow:'scroll'},tabBar:{backgroundColor:'#2196f3',elevation:4,shadowColor:'black',shadowOpacity:0.1,shadowRadius:_reactNative.StyleSheet.hairlineWidth,shadowOffset:{height:_reactNative.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