{"ast":null,"code":"var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _toConsumableArray2=_interopRequireDefault(require(\"@babel/runtime/helpers/toConsumableArray\"));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 _StyleSheet=_interopRequireDefault(require(\"react-native-web/dist/exports/StyleSheet\"));var _I18nManager=_interopRequireDefault(require(\"react-native-web/dist/exports/I18nManager\"));var _reactNativeReanimated=_interopRequireWildcard(require(\"react-native-reanimated\"));var _memoize=_interopRequireDefault(require(\"./memoize\"));var _jsxFileName=\"/Users/satya/Workspace/Projects/react-native-tab-view/src/TabBarIndicator.tsx\";var interpolate=_reactNativeReanimated.default.interpolate,multiply=_reactNativeReanimated.default.multiply,Extrapolate=_reactNativeReanimated.default.Extrapolate;var TabBarIndicator=function(_React$Component){(0,_inherits2.default)(TabBarIndicator,_React$Component);function TabBarIndicator(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,TabBarIndicator);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)(TabBarIndicator)).call.apply(_getPrototypeOf2,[this].concat(args)));_this.fadeInIndicator=function(){var _this$props=_this.props,navigationState=_this$props.navigationState,layout=_this$props.layout,width=_this$props.width,getTabWidth=_this$props.getTabWidth;if(!_this.isIndicatorShown&&width==='auto'&&layout.width&&navigationState.routes.every(function(_,i){return getTabWidth(i);})){_this.isIndicatorShown=true;_reactNativeReanimated.default.timing(_this.opacity,{duration:150,toValue:1,easing:_reactNativeReanimated.Easing.in(_reactNativeReanimated.Easing.linear)}).start();}};_this.isIndicatorShown=false;_this.opacity=new _reactNativeReanimated.default.Value(_this.props.width==='auto'?0:1);_this.getTranslateX=(0,_memoize.default)(function(position,routes,getTabWidth){var inputRange=routes.map(function(_,i){return i;});var outputRange=routes.reduce(function(acc,_,i){if(i===0)return[0];return[].concat((0,_toConsumableArray2.default)(acc),[acc[i-1]+getTabWidth(i-1)]);},[]);var transalteX=interpolate(position,{inputRange:inputRange,outputRange:outputRange,extrapolate:Extrapolate.CLAMP});return multiply(transalteX,_I18nManager.default.isRTL?-1:1);});_this.getWidth=(0,_memoize.default)(function(position,routes,getTabWidth){var inputRange=routes.map(function(_,i){return i;});var outputRange=inputRange.map(getTabWidth);return interpolate(position,{inputRange:inputRange,outputRange:outputRange,extrapolate:Extrapolate.CLAMP});});return _this;}(0,_createClass2.default)(TabBarIndicator,[{key:\"componentDidMount\",value:function componentDidMount(){this.fadeInIndicator();}},{key:\"componentDidUpdate\",value:function componentDidUpdate(){this.fadeInIndicator();}},{key:\"render\",value:function render(){var _this$props2=this.props,position=_this$props2.position,navigationState=_this$props2.navigationState,getTabWidth=_this$props2.getTabWidth,width=_this$props2.width,style=_this$props2.style,layout=_this$props2.layout;var routes=navigationState.routes;var translateX=routes.length>1?this.getTranslateX(position,routes,getTabWidth):0;var indicatorWidth=width==='auto'?routes.length>1?this.getWidth(position,routes,getTabWidth):getTabWidth(0):width;return React.createElement(_reactNativeReanimated.default.View,{style:[styles.indicator,{width:indicatorWidth},layout.width?{transform:[{translateX:translateX}]}:{left:100/routes.length*navigationState.index+\"%\"},width==='auto'?{opacity:this.opacity}:null,style],__source:{fileName:_jsxFileName,lineNumber:117}});}}]);return TabBarIndicator;}(React.Component);exports.default=TabBarIndicator;var styles=_StyleSheet.default.create({indicator:{backgroundColor:'#ffeb3b',position:'absolute',left:0,bottom:0,right:0,height:2}});","map":{"version":3,"sources":["TabBarIndicator.tsx"],"names":["interpolate","multiply","Extrapolate","Animated","TabBarIndicator","React","fadeInIndicator","navigationState","layout","width","getTabWidth","duration","toValue","easing","Easing","isIndicatorShown","opacity","getTranslateX","memoize","inputRange","routes","outputRange","i","acc","transalteX","extrapolate","I18nManager","getWidth","position","style","translateX","indicatorWidth","styles","transform","left","StyleSheet","indicator","backgroundColor","bottom","right","height"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { StyleSheet, I18nManager, StyleProp, ViewStyle } from 'react-native';\nimport Animated, { Easing } from 'react-native-reanimated';\n\nimport memoize from './memoize';\nimport { Route, SceneRendererProps, NavigationState } from './types';\n\nexport type GetTabWidth = (index: number) => number;\n\nexport type Props<T extends Route> = SceneRendererProps & {\n  navigationState: NavigationState<T>;\n  width: string;\n  style?: StyleProp<ViewStyle>;\n  getTabWidth: GetTabWidth;\n};\n\nconst { interpolate, multiply, Extrapolate } = Animated;\n\nexport default class TabBarIndicator<T extends Route> extends React.Component<\n  Props<T>\n> {\n  componentDidMount() {\n    this.fadeInIndicator();\n  }\n\n  componentDidUpdate() {\n    this.fadeInIndicator();\n  }\n\n  private fadeInIndicator = () => {\n    const { navigationState, layout, width, getTabWidth } = this.props;\n\n    if (\n      !this.isIndicatorShown &&\n      width === 'auto' &&\n      layout.width &&\n      // We should fade-in the indicator when we have widths for all the tab items\n      navigationState.routes.every((_, i) => getTabWidth(i))\n    ) {\n      this.isIndicatorShown = true;\n\n      Animated.timing(this.opacity, {\n        duration: 150,\n        toValue: 1,\n        easing: Easing.in(Easing.linear),\n      }).start();\n    }\n  };\n\n  private isIndicatorShown = false;\n\n  private opacity = new Animated.Value(this.props.width === 'auto' ? 0 : 1);\n\n  private getTranslateX = memoize(\n    (\n      position: Animated.Node<number>,\n      routes: Route[],\n      getTabWidth: GetTabWidth\n    ) => {\n      const inputRange = routes.map((_, i) => i);\n\n      // every index contains widths at all previous indices\n      const outputRange = routes.reduce<number[]>((acc, _, i) => {\n        if (i === 0) return [0];\n        return [...acc, acc[i - 1] + getTabWidth(i - 1)];\n      }, []);\n\n      const transalteX = interpolate(position, {\n        inputRange,\n        outputRange,\n        extrapolate: Extrapolate.CLAMP,\n      });\n\n      return multiply(transalteX, I18nManager.isRTL ? -1 : 1);\n    }\n  );\n\n  private getWidth = memoize(\n    (\n      position: Animated.Node<number>,\n      routes: Route[],\n      getTabWidth: GetTabWidth\n    ) => {\n      const inputRange = routes.map((_, i) => i);\n      const outputRange = inputRange.map(getTabWidth);\n\n      return interpolate(position, {\n        inputRange,\n        outputRange,\n        extrapolate: Extrapolate.CLAMP,\n      });\n    }\n  );\n\n  render() {\n    const {\n      position,\n      navigationState,\n      getTabWidth,\n      width,\n      style,\n      layout,\n    } = this.props;\n    const { routes } = navigationState;\n\n    const translateX =\n      routes.length > 1 ? this.getTranslateX(position, routes, getTabWidth) : 0;\n\n    const indicatorWidth =\n      width === 'auto'\n        ? routes.length > 1\n          ? this.getWidth(position, routes, getTabWidth)\n          : getTabWidth(0)\n        : width;\n\n    return (\n      <Animated.View\n        style={[\n          styles.indicator,\n          // If layout is not available, use `left` property for positioning the indicator\n          // This avoids rendering delay until we are able to calculate translateX\n          { width: indicatorWidth },\n          layout.width\n            ? { transform: [{ translateX }] as any }\n            : { left: `${(100 / routes.length) * navigationState.index}%` },\n          width === 'auto' ? { opacity: this.opacity } : null,\n          style,\n        ]}\n      />\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  indicator: {\n    backgroundColor: '#ffeb3b',\n    position: 'absolute',\n    left: 0,\n    bottom: 0,\n    right: 0,\n    height: 2,\n  },\n});\n"]},"metadata":{},"sourceType":"script"}