9bc49ebea8dd6c91a535bd016d6b4abc.json 16.5 KB
{"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 _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _objectSpread2=_interopRequireDefault(require(\"@babel/runtime/helpers/objectSpread\"));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 _View=_interopRequireDefault(require(\"react-native-web/dist/exports/View\"));var _reactNativeReanimated=_interopRequireDefault(require(\"react-native-reanimated\"));var _TabBar=_interopRequireDefault(require(\"./TabBar\"));var _Pager=_interopRequireDefault(require(\"./Pager\"));var _SceneView=_interopRequireDefault(require(\"./SceneView\"));var _jsxFileName=\"/Users/satya/Workspace/Projects/react-native-tab-view/src/TabView.tsx\";var TabView=function(_React$Component){(0,_inherits2.default)(TabView,_React$Component);function TabView(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,TabView);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)(TabView)).call.apply(_getPrototypeOf2,[this].concat(args)));_this.state={layout:(0,_objectSpread2.default)({width:0,height:0},_this.props.initialLayout)};_this.jumpToIndex=function(index){if(index!==_this.props.navigationState.index){_this.props.onIndexChange(index);}};_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}});};return _this;}(0,_createClass2.default)(TabView,[{key:\"render\",value:function render(){var _this$props=this.props,positionListener=_this$props.position,onSwipeStart=_this$props.onSwipeStart,onSwipeEnd=_this$props.onSwipeEnd,navigationState=_this$props.navigationState,lazy=_this$props.lazy,lazyPreloadDistance=_this$props.lazyPreloadDistance,removeClippedSubviews=_this$props.removeClippedSubviews,keyboardDismissMode=_this$props.keyboardDismissMode,swipeEnabled=_this$props.swipeEnabled,swipeVelocityImpact=_this$props.swipeVelocityImpact,timingConfig=_this$props.timingConfig,springConfig=_this$props.springConfig,tabBarPosition=_this$props.tabBarPosition,renderTabBar=_this$props.renderTabBar,renderScene=_this$props.renderScene,renderLazyPlaceholder=_this$props.renderLazyPlaceholder,sceneContainerStyle=_this$props.sceneContainerStyle,style=_this$props.style,gestureHandlerProps=_this$props.gestureHandlerProps,springVelocityScale=_this$props.springVelocityScale;var layout=this.state.layout;return React.createElement(_View.default,{onLayout:this.handleLayout,style:[styles.pager,style],__source:{fileName:_jsxFileName,lineNumber:125}},React.createElement(_Pager.default,{navigationState:navigationState,layout:layout,keyboardDismissMode:keyboardDismissMode,swipeEnabled:swipeEnabled,swipeVelocityImpact:swipeVelocityImpact,timingConfig:timingConfig,springConfig:springConfig,onSwipeStart:onSwipeStart,onSwipeEnd:onSwipeEnd,onIndexChange:this.jumpToIndex,springVelocityScale:springVelocityScale,removeClippedSubviews:removeClippedSubviews,gestureHandlerProps:gestureHandlerProps,__source:{fileName:_jsxFileName,lineNumber:126}},function(_ref){var position=_ref.position,render=_ref.render,addListener=_ref.addListener,removeListener=_ref.removeListener,jumpTo=_ref.jumpTo;var sceneRendererProps={position:position,layout:layout,jumpTo:jumpTo};return React.createElement(React.Fragment,{__source:{fileName:_jsxFileName,lineNumber:151}},positionListener?React.createElement(_reactNativeReanimated.default.Code,{exec:_reactNativeReanimated.default.set(positionListener,position),__source:{fileName:_jsxFileName,lineNumber:153}}):null,tabBarPosition==='top'&&renderTabBar((0,_objectSpread2.default)({},sceneRendererProps,{navigationState:navigationState})),render(navigationState.routes.map(function(route,i){return React.createElement(_SceneView.default,(0,_extends2.default)({},sceneRendererProps,{addListener:addListener,removeListener:removeListener,key:route.key,index:i,lazy:lazy,lazyPreloadDistance:lazyPreloadDistance,navigationState:navigationState,style:sceneContainerStyle,__source:{fileName:_jsxFileName,lineNumber:165}}),function(_ref2){var loading=_ref2.loading;return loading?renderLazyPlaceholder({route:route}):renderScene((0,_objectSpread2.default)({},sceneRendererProps,{route:route}));});})),tabBarPosition==='bottom'&&renderTabBar((0,_objectSpread2.default)({},sceneRendererProps,{navigationState:navigationState})));}));}}]);return TabView;}(React.Component);exports.default=TabView;TabView.defaultProps={tabBarPosition:'top',renderTabBar:function renderTabBar(props){return React.createElement(_TabBar.default,(0,_extends2.default)({},props,{__source:{fileName:_jsxFileName,lineNumber:58}}));},renderLazyPlaceholder:function renderLazyPlaceholder(){return null;},keyboardDismissMode:'auto',swipeEnabled:true,lazy:false,lazyPreloadDistance:0,removeClippedSubviews:false,springConfig:{},timingConfig:{},gestureHandlerProps:{}};var styles=_StyleSheet.default.create({pager:{flex:1,overflow:'hidden'}});","map":{"version":3,"sources":["TabView.tsx"],"names":["TabView","React","Component","defaultProps","tabBarPosition","renderTabBar","renderLazyPlaceholder","keyboardDismissMode","swipeEnabled","lazy","lazyPreloadDistance","removeClippedSubviews","springConfig","timingConfig","gestureHandlerProps","state","layout","width","height","jumpToIndex","index","handleLayout","e","positionListener","onSwipeStart","onSwipeEnd","navigationState","swipeVelocityImpact","renderScene","sceneContainerStyle","style","springVelocityScale","styles","position","render","addListener","removeListener","jumpTo","sceneRendererProps","Animated","route","loading","StyleSheet","pager","flex","overflow"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n  StyleSheet,\n  View,\n  StyleProp,\n  ViewStyle,\n  LayoutChangeEvent,\n} from 'react-native';\nimport { PanGestureHandler } from 'react-native-gesture-handler';\nimport Animated from 'react-native-reanimated';\nimport TabBar, { Props as TabBarProps } from './TabBar';\nimport Pager from './Pager';\nimport SceneView from './SceneView';\nimport {\n  Layout,\n  NavigationState,\n  Route,\n  SceneRendererProps,\n  PagerCommonProps,\n} from './types';\n\ntype Props<T extends Route> = PagerCommonProps & {\n  position?: Animated.Value<number>;\n  onIndexChange: (index: number) => void;\n  navigationState: NavigationState<T>;\n  renderScene: (\n    props: SceneRendererProps & {\n      route: T;\n    }\n  ) => React.ReactNode;\n  renderLazyPlaceholder: (props: { route: T }) => React.ReactNode;\n  renderTabBar: (\n    props: SceneRendererProps & {\n      navigationState: NavigationState<T>;\n    }\n  ) => React.ReactNode;\n  tabBarPosition: 'top' | 'bottom';\n  initialLayout?: { width?: number; height?: number };\n  lazy: boolean;\n  lazyPreloadDistance: number;\n  removeClippedSubviews?: boolean;\n  sceneContainerStyle?: StyleProp<ViewStyle>;\n  style?: StyleProp<ViewStyle>;\n  gestureHandlerProps: React.ComponentProps<typeof PanGestureHandler>;\n};\n\ntype State = {\n  layout: Layout;\n};\n\nexport default class TabView<T extends Route> extends React.Component<\n  Props<T>,\n  State\n> {\n  static defaultProps = {\n    tabBarPosition: 'top',\n    renderTabBar: <P extends Route>(props: TabBarProps<P>) => (\n      <TabBar {...props} />\n    ),\n    renderLazyPlaceholder: () => null,\n    keyboardDismissMode: 'auto',\n    swipeEnabled: true,\n    lazy: false,\n    lazyPreloadDistance: 0,\n    removeClippedSubviews: false,\n    springConfig: {},\n    timingConfig: {},\n    gestureHandlerProps: {},\n  };\n\n  state = {\n    layout: { width: 0, height: 0, ...this.props.initialLayout },\n  };\n\n  private jumpToIndex = (index: number) => {\n    if (index !== this.props.navigationState.index) {\n      this.props.onIndexChange(index);\n    }\n  };\n\n  private handleLayout = (e: LayoutChangeEvent) => {\n    const { height, width } = e.nativeEvent.layout;\n\n    if (\n      this.state.layout.width === width &&\n      this.state.layout.height === height\n    ) {\n      return;\n    }\n\n    this.setState({\n      layout: {\n        height,\n        width,\n      },\n    });\n  };\n\n  render() {\n    const {\n      position: positionListener,\n      onSwipeStart,\n      onSwipeEnd,\n      navigationState,\n      lazy,\n      lazyPreloadDistance,\n      removeClippedSubviews,\n      keyboardDismissMode,\n      swipeEnabled,\n      swipeVelocityImpact,\n      timingConfig,\n      springConfig,\n      tabBarPosition,\n      renderTabBar,\n      renderScene,\n      renderLazyPlaceholder,\n      sceneContainerStyle,\n      style,\n      gestureHandlerProps,\n      springVelocityScale,\n    } = this.props;\n    const { layout } = this.state;\n\n    return (\n      <View onLayout={this.handleLayout} style={[styles.pager, style]}>\n        <Pager\n          navigationState={navigationState}\n          layout={layout}\n          keyboardDismissMode={keyboardDismissMode}\n          swipeEnabled={swipeEnabled}\n          swipeVelocityImpact={swipeVelocityImpact}\n          timingConfig={timingConfig}\n          springConfig={springConfig}\n          onSwipeStart={onSwipeStart}\n          onSwipeEnd={onSwipeEnd}\n          onIndexChange={this.jumpToIndex}\n          springVelocityScale={springVelocityScale}\n          removeClippedSubviews={removeClippedSubviews}\n          gestureHandlerProps={gestureHandlerProps}\n        >\n          {({ position, render, addListener, removeListener, jumpTo }) => {\n            // All of the props here must not change between re-renders\n            // This is crucial to optimizing the routes with PureComponent\n            const sceneRendererProps = {\n              position,\n              layout,\n              jumpTo,\n            };\n\n            return (\n              <React.Fragment>\n                {positionListener ? (\n                  <Animated.Code\n                    exec={Animated.set(positionListener, position)}\n                  />\n                ) : null}\n                {tabBarPosition === 'top' &&\n                  renderTabBar({\n                    ...sceneRendererProps,\n                    navigationState,\n                  })}\n                {render(\n                  navigationState.routes.map((route, i) => {\n                    return (\n                      <SceneView\n                        {...sceneRendererProps}\n                        addListener={addListener}\n                        removeListener={removeListener}\n                        key={route.key}\n                        index={i}\n                        lazy={lazy}\n                        lazyPreloadDistance={lazyPreloadDistance}\n                        navigationState={navigationState}\n                        style={sceneContainerStyle}\n                      >\n                        {({ loading }) =>\n                          loading\n                            ? renderLazyPlaceholder({ route })\n                            : renderScene({\n                                ...sceneRendererProps,\n                                route,\n                              })\n                        }\n                      </SceneView>\n                    );\n                  })\n                )}\n                {tabBarPosition === 'bottom' &&\n                  renderTabBar({\n                    ...sceneRendererProps,\n                    navigationState,\n                  })}\n              </React.Fragment>\n            );\n          }}\n        </Pager>\n      </View>\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  pager: {\n    flex: 1,\n    overflow: 'hidden',\n  },\n});\n"]},"metadata":{},"sourceType":"script"}