UNPKG

7.65 kBSource Map (JSON)View Raw
1{"version":3,"sources":["ViewPager.tsx"],"names":["React","Platform","UIManager","Keyboard","ReactNative","childrenWithOverriddenStyle","getViewManagerConfig","ViewpagerViewManager","ViewPager","Component","createRef","viewPager","current","getInnerViewNode","e","props","onPageScroll","OS","keyboardDismissMode","dismiss","onPageScrollStateChanged","isScrolling","nativeEvent","pageScrollState","onPageSelected","selectedPage","dispatchViewManagerCommand","findNodeHandle","Commands","setPage","setPageWithoutAnimation","scrollEnabled","setScrollEnabled","componentDidMount","initialPage","render","style","_onPageScroll","_onPageScrollStateChanged","_onPageSelected","_onMoveShouldSetResponderCapture","children"],"mappings":"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","sourcesContent":["import React, { ReactElement } from 'react';\nimport { Platform, UIManager, Keyboard } from 'react-native';\nimport ReactNative from 'react-native';\nimport type {\n ViewPagerOnPageScrollEvent,\n ViewPagerOnPageSelectedEvent,\n PageScrollStateChangedNativeEvent,\n ViewPagerProps,\n} from './types';\n\nimport { childrenWithOverriddenStyle } from './utils';\nimport { getViewManagerConfig, ViewpagerViewManager } from './ViewPagerNative';\n\n/**\n * Container that allows to flip left and right between child views. Each\n * child view of the `ViewPager` will be treated as a separate page\n * and will be stretched to fill the `ViewPager`.\n *\n * It is important all children are `<View>`s and not composite components.\n * You can set style properties like `padding` or `backgroundColor` for each\n * child. It is also important that each child have a `key` prop.\n *\n * Example:\n *\n * ```\n * render: function() {\n * return (\n * <ViewPager\n * style={styles.viewPager}\n * initialPage={0}>\n * <View style={styles.pageStyle} key=\"1\">\n * <Text>First page</Text>\n * </View>\n * <View style={styles.pageStyle} key=\"2\">\n * <Text>Second page</Text>\n * </View>\n * </ViewPager>\n * );\n * }\n *\n * ...\n *\n * var styles = {\n * ...\n * viewPager: {\n * flex: 1\n * },\n * pageStyle: {\n * alignItems: 'center',\n * padding: 20,\n * }\n * }\n * ```\n */\n\nexport class ViewPager extends React.Component<ViewPagerProps> {\n private isScrolling = false;\n private viewPager = React.createRef<typeof ViewpagerViewManager>();\n\n componentDidMount() {\n // On iOS we do it directly on the native side\n if (Platform.OS === 'android') {\n if (this.props.initialPage != null) {\n this.setPageWithoutAnimation(this.props.initialPage);\n }\n }\n }\n\n public getInnerViewNode = (): ReactElement => {\n return this.viewPager.current!.getInnerViewNode();\n };\n\n private _onPageScroll = (e: ViewPagerOnPageScrollEvent) => {\n if (this.props.onPageScroll) {\n this.props.onPageScroll(e);\n }\n // Not implemented on iOS yet\n if (Platform.OS === 'android') {\n if (this.props.keyboardDismissMode === 'on-drag') {\n Keyboard.dismiss();\n }\n }\n };\n\n private _onPageScrollStateChanged = (\n e: PageScrollStateChangedNativeEvent\n ) => {\n if (this.props.onPageScrollStateChanged) {\n this.props.onPageScrollStateChanged(e);\n }\n this.isScrolling = e.nativeEvent.pageScrollState === 'dragging';\n };\n\n private _onPageSelected = (e: ViewPagerOnPageSelectedEvent) => {\n if (this.props.onPageSelected) {\n this.props.onPageSelected(e);\n }\n };\n\n /**\n * A helper function to scroll to a specific page in the ViewPager.\n * The transition between pages will be animated.\n */\n public setPage = (selectedPage: number) => {\n UIManager.dispatchViewManagerCommand(\n ReactNative.findNodeHandle(this),\n getViewManagerConfig().Commands.setPage,\n [selectedPage]\n );\n };\n\n /**\n * A helper function to scroll to a specific page in the ViewPager.\n * The transition between pages will *not* be animated.\n */\n public setPageWithoutAnimation = (selectedPage: number) => {\n UIManager.dispatchViewManagerCommand(\n ReactNative.findNodeHandle(this),\n getViewManagerConfig().Commands.setPageWithoutAnimation,\n [selectedPage]\n );\n };\n\n /**\n * A helper function to enable/disable scroll imperatively\n * The recommended way is using the scrollEnabled prop, however, there might be a case where a\n * imperative solution is more useful (e.g. for not blocking an animation)\n */\n public setScrollEnabled = (scrollEnabled: boolean) => {\n UIManager.dispatchViewManagerCommand(\n ReactNative.findNodeHandle(this),\n getViewManagerConfig().Commands.setScrollEnabled,\n [scrollEnabled]\n );\n };\n\n private _onMoveShouldSetResponderCapture = () => {\n return this.isScrolling;\n };\n\n render() {\n return (\n <ViewpagerViewManager\n {...this.props}\n ref={this.viewPager as any /** TODO: Fix ref type */}\n style={this.props.style}\n onPageScroll={this._onPageScroll}\n onPageScrollStateChanged={this._onPageScrollStateChanged}\n onPageSelected={this._onPageSelected}\n onMoveShouldSetResponderCapture={this._onMoveShouldSetResponderCapture}\n children={childrenWithOverriddenStyle(this.props.children)}\n />\n );\n }\n}\n"]}
\No newline at end of file