react-native-tab-view/lib/commonjs/TabBarItem.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 _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 _TouchableItem=_interopRequireDefault(require("./TouchableItem"));var _reactNativeReanimated=_interopRequireDefault(require("react-native-reanimated"));var _memoize=_interopRequireDefault(require("./memoize"));var _jsxFileName="/Users/satya/Workspace/Projects/react-native-tab-view/src/TabBarItem.tsx";var DEFAULT_ACTIVE_COLOR='rgba(255, 255, 255, 1)';var DEFAULT_INACTIVE_COLOR='rgba(255, 255, 255, 0.7)';var TabBarItem=function(_React$Component){(0,_inherits2.default)(TabBarItem,_React$Component);function TabBarItem(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,TabBarItem);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)(TabBarItem)).call.apply(_getPrototypeOf2,[this].concat(args)));_this.getActiveOpacity=(0,_memoize.default)(function(position,routes,tabIndex){if(routes.length>1){var inputRange=routes.map(function(_,i){return i;});return _reactNativeReanimated.default.interpolate(position,{inputRange:inputRange,outputRange:inputRange.map(function(i){return i===tabIndex?1:0;})});}else{return 1;}});_this.getInactiveOpacity=(0,_memoize.default)(function(position,routes,tabIndex){if(routes.length>1){var inputRange=routes.map(function(_,i){return i;});return _reactNativeReanimated.default.interpolate(position,{inputRange:inputRange,outputRange:inputRange.map(function(i){return i===tabIndex?0:1;})});}else{return 0;}});return _this;}(0,_createClass2.default)(TabBarItem,[{key:"render",value:function render(){var _this$props=this.props,route=_this$props.route,position=_this$props.position,navigationState=_this$props.navigationState,scrollEnabled=_this$props.scrollEnabled,renderLabelPassed=_this$props.renderLabel,renderIcon=_this$props.renderIcon,renderBadge=_this$props.renderBadge,getLabelText=_this$props.getLabelText,getTestID=_this$props.getTestID,getAccessibilityLabel=_this$props.getAccessibilityLabel,getAccessible=_this$props.getAccessible,_this$props$activeCol=_this$props.activeColor,activeColor=_this$props$activeCol===void 0?DEFAULT_ACTIVE_COLOR:_this$props$activeCol,_this$props$inactiveC=_this$props.inactiveColor,inactiveColor=_this$props$inactiveC===void 0?DEFAULT_INACTIVE_COLOR:_this$props$inactiveC,pressColor=_this$props.pressColor,pressOpacity=_this$props.pressOpacity,labelStyle=_this$props.labelStyle,style=_this$props.style,tabWidth=_this$props.tabWidth,onPress=_this$props.onPress,onLongPress=_this$props.onLongPress;var tabIndex=navigationState.routes.indexOf(route);var isFocused=navigationState.index===tabIndex;var activeOpacity=this.getActiveOpacity(position,navigationState.routes,tabIndex);var inactiveOpacity=this.getInactiveOpacity(position,navigationState.routes,tabIndex);var icon=null;var label=null;if(renderIcon){var activeIcon=renderIcon({route:route,focused:true,color:activeColor});var inactiveIcon=renderIcon({route:route,focused:false,color:inactiveColor});if(inactiveIcon!=null&&activeIcon!=null){icon=React.createElement(_reactNative.View,{style:styles.icon,__source:{fileName:_jsxFileName,lineNumber:134}},React.createElement(_reactNativeReanimated.default.View,{style:{opacity:inactiveOpacity},__source:{fileName:_jsxFileName,lineNumber:135}},inactiveIcon),React.createElement(_reactNativeReanimated.default.View,{style:[_reactNative.StyleSheet.absoluteFill,{opacity:activeOpacity}],__source:{fileName:_jsxFileName,lineNumber:138}},activeIcon));}}var renderLabel=renderLabelPassed!==undefined?renderLabelPassed:function(_ref){var route=_ref.route,color=_ref.color;var labelText=getLabelText({route:route});if(typeof labelText==='string'){return React.createElement(_reactNativeReanimated.default.Text,{style:[styles.label,icon?{marginTop:0}:null,{color:color},labelStyle],__source:{fileName:_jsxFileName,lineNumber:156}},labelText);}return labelText;};if(renderLabel){var activeLabel=renderLabel({route:route,focused:true,color:activeColor});var inactiveLabel=renderLabel({route:route,focused:false,color:inactiveColor});label=React.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:186}},React.createElement(_reactNativeReanimated.default.View,{style:{opacity:inactiveOpacity},__source:{fileName:_jsxFileName,lineNumber:187}},inactiveLabel),React.createElement(_reactNativeReanimated.default.View,{style:[_reactNative.StyleSheet.absoluteFill,{opacity:activeOpacity}],__source:{fileName:_jsxFileName,lineNumber:190}},activeLabel));}var tabStyle=_reactNative.StyleSheet.flatten(style);var isWidthSet=tabStyle&&typeof tabStyle.width!=='undefined'||scrollEnabled===true;var tabContainerStyle={};var itemStyle=isWidthSet?{width:tabWidth}:null;if(tabStyle&&typeof tabStyle.flex==='number'){tabContainerStyle.flex=tabStyle.flex;}else if(!isWidthSet){tabContainerStyle.flex=1;}var scene={route:route};var accessibilityLabel=getAccessibilityLabel(scene);accessibilityLabel=typeof accessibilityLabel!=='undefined'?accessibilityLabel:getLabelText(scene);var badge=renderBadge?renderBadge(scene):null;return React.createElement(_TouchableItem.default,{borderless:true,testID:getTestID(scene),accessible:getAccessible(scene),accessibilityLabel:accessibilityLabel,accessibilityTraits:isFocused?['button','selected']:'button',accessibilityComponentType:"button",accessibilityRole:"button",accessibilityStates:isFocused?['selected']:[],pressColor:pressColor,pressOpacity:pressOpacity,delayPressIn:0,onPress:onPress,onLongPress:onLongPress,style:tabContainerStyle,__source:{fileName:_jsxFileName,lineNumber:225}},React.createElement(_reactNative.View,{pointerEvents:"none",style:[styles.item,itemStyle,tabStyle],__source:{fileName:_jsxFileName,lineNumber:241}},icon,label,badge!=null?React.createElement(_reactNative.View,{style:styles.badge,__source:{fileName:_jsxFileName,lineNumber:244}},badge):null));}}]);return TabBarItem;}(React.Component);exports.default=TabBarItem;var styles=_reactNative.StyleSheet.create({label:{margin:4,backgroundColor:'transparent'},icon:{margin:2},item:{flex:1,alignItems:'center',justifyContent:'center',padding:10,minHeight:48},badge:{position:'absolute',top:0,right:0}});
//# sourceMappingURL=TabBarItem.js.map