@react-native-ohos/react-native-pager-view 6.7.2-rc.1

package/lib/module/PagerView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Platform","Keyboard","I18nManager","childrenWithOverriddenStyle","PagerViewNativeComponent","Commands","PagerViewNativeCommands","PagerView","Component","constructor","args","_defineProperty","e","props","onPageScroll","OS","keyboardDismissMode","dismiss","onPageScrollStateChanged","isScrolling","nativeEvent","pageScrollState","onPageSelected","selectedPage","pagerView","setPage","setPageWithoutAnimation","scrollEnabled","setScrollEnabledImperatively","deducedLayoutDirection","layoutDirection","isRTL","render","createElement","_extends","ref","style","_onPageScroll","_onPageScrollStateChanged","_onPageSelected","onMoveShouldSetResponderCapture","_onMoveShouldSetResponderCapture","children"],"sources":["PagerView.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Platform, Keyboard } from 'react-native';\r\nimport { I18nManager } from 'react-native';\r\nimport type * as ReactNative from 'react-native';\r\n\r\nimport {\r\n  childrenWithOverriddenStyle,\r\n} from './utils';\r\n\r\nimport PagerViewNativeComponent, {\r\n  Commands as PagerViewNativeCommands,\r\n  OnPageScrollEventData,\r\n  OnPageScrollStateChangedEventData,\r\n  OnPageSelectedEventData,\r\n  NativeProps,\r\n} from './PagerViewNativeComponent';\r\n\r\n\r\n/**\r\n * Container that allows to flip left and right between child views. Each\r\n * child view of the `PagerView` will be treated as a separate page\r\n * and will be stretched to fill the `PagerView`.\r\n *\r\n * It is important all children are `<View>`s and not composite components.\r\n * You can set style properties like `padding` or `backgroundColor` for each\r\n * child. It is also important that each child have a `key` prop.\r\n *\r\n * Example:\r\n *\r\n * ```\r\n * render: function() {\r\n *   return (\r\n *     <PagerView\r\n *       style={styles.PagerView}\r\n *       initialPage={0}>\r\n *       <View style={styles.pageStyle} key=\"1\">\r\n *         <Text>First page</Text>\r\n *       </View>\r\n *       <View style={styles.pageStyle} key=\"2\">\r\n *         <Text>Second page</Text>\r\n *       </View>\r\n *     </PagerView>\r\n *   );\r\n * }\r\n *\r\n * ...\r\n *\r\n * var styles = {\r\n *   ...\r\n *   PagerView: {\r\n *     flex: 1\r\n *   },\r\n *   pageStyle: {\r\n *     alignItems: 'center',\r\n *     padding: 20,\r\n *   }\r\n * }\r\n * ```\r\n */\r\n\r\nexport class PagerView extends React.Component<NativeProps> {\r\n  private isScrolling = false;\r\n  pagerView: React.ElementRef<typeof PagerViewNativeComponent> | null = null;\r\n\r\n\r\n  private get deducedLayoutDirection() {\r\n    if (\r\n      !this.props.layoutDirection ||\r\n      //@ts-ignore fix it\r\n      this.props.layoutDirection === 'locale'\r\n    ) {\r\n      return I18nManager.isRTL ? 'rtl' : 'ltr';\r\n    } else {\r\n      return this.props.layoutDirection;\r\n    }\r\n  }\r\n\r\n  private _onPageScroll = (\r\n    e: ReactNative.NativeSyntheticEvent<OnPageScrollEventData>\r\n  ) => {\r\n    if (this.props.onPageScroll) {\r\n      this.props.onPageScroll(e);\r\n    }\r\n\r\n    // Not implemented on iOS yet\r\n    // @ts-ignore\r\n    if (Platform.OS === 'android' || Platform.OS === 'harmony') {\r\n      if (this.props.keyboardDismissMode === 'on-drag') {\r\n        Keyboard.dismiss();\r\n      }\r\n    }\r\n  };\r\n\r\n  private _onPageScrollStateChanged = (\r\n    e: ReactNative.NativeSyntheticEvent<OnPageScrollStateChangedEventData>\r\n  ) => {\r\n    if (this.props.onPageScrollStateChanged) {\r\n      this.props.onPageScrollStateChanged(e);\r\n    }\r\n    this.isScrolling = e.nativeEvent.pageScrollState === 'dragging';\r\n  };\r\n\r\n  private _onPageSelected = (\r\n    e: ReactNative.NativeSyntheticEvent<OnPageSelectedEventData>\r\n  ) => {\r\n    if (this.props.onPageSelected) {\r\n      this.props.onPageSelected(e);\r\n    }\r\n  };\r\n\r\n  private _onMoveShouldSetResponderCapture = () => {\r\n    return this.isScrolling;\r\n  };\r\n\r\n  /**\r\n   * A helper function to scroll to a specific page in the PagerView.\r\n   * The transition between pages will be animated.\r\n   */\r\n  public setPage = (selectedPage: number) => {\r\n    if (this.pagerView) {\r\n      PagerViewNativeCommands.setPage(this.pagerView, selectedPage);\r\n    }\r\n  };\r\n\r\n  /**\r\n   * A helper function to scroll to a specific page in the PagerView.\r\n   * The transition between pages will *not* be animated.\r\n   */\r\n  public setPageWithoutAnimation = (selectedPage: number) => {\r\n    if (this.pagerView) {\r\n      PagerViewNativeCommands.setPageWithoutAnimation(\r\n        this.pagerView,\r\n        selectedPage\r\n      );\r\n    }\r\n  };\r\n\r\n  /**\r\n   * A helper function to enable/disable scroll imperatively\r\n   * The recommended way is using the scrollEnabled prop, however, there might be a case where a\r\n   * imperative solution is more useful (e.g. for not blocking an animation)\r\n   */\r\n  public setScrollEnabled = (scrollEnabled: boolean) => {\r\n    if (this.pagerView) {\r\n      PagerViewNativeCommands.setScrollEnabledImperatively(\r\n        this.pagerView,\r\n        scrollEnabled\r\n      );\r\n    }\r\n  };\r\n\r\n  render() {\r\n      return (\r\n        <PagerViewNativeComponent\r\n          {...this.props}\r\n          ref={(ref) => {\r\n            this.pagerView = ref;\r\n          }}\r\n          style={this.props.style}\r\n          layoutDirection={this.deducedLayoutDirection}\r\n          onPageScroll={this._onPageScroll}\r\n          onPageScrollStateChanged={this._onPageScrollStateChanged}\r\n          onPageSelected={this._onPageSelected}\r\n          onMoveShouldSetResponderCapture={\r\n            this._onMoveShouldSetResponderCapture\r\n          }\r\n          children={childrenWithOverriddenStyle(this.props.children)}\r\n        />\r\n      );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/lib/module/PagerViewNativeComponent.js

@@ -0,0 +1,7 @@
+import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+export const Commands = codegenNativeCommands({
+  supportedCommands: ['setPage', 'setPageWithoutAnimation', 'setScrollEnabledImperatively']
+});
+export default codegenNativeComponent('RNCViewPager');
+//# sourceMappingURL=PagerViewNativeComponent.js.map

package/lib/module/PagerViewNativeComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["codegenNativeCommands","codegenNativeComponent","Commands","supportedCommands"],"sources":["PagerViewNativeComponent.ts"],"sourcesContent":["import type * as React from 'react';\r\nimport type { HostComponent, ViewProps } from 'react-native';\r\nimport codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';\r\nimport codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';\r\n\r\nimport type {\r\n  DirectEventHandler,\r\n  Double,\r\n  Int32,\r\n  WithDefault,\r\n} from 'react-native/Libraries/Types/CodegenTypes';\r\n\r\nexport type OnPageScrollEventData = Readonly<{\r\n  position: Double;\r\n  offset: Double;\r\n}>;\r\n\r\nexport type OnPageSelectedEventData = Readonly<{\r\n  position: Double;\r\n}>;\r\n\r\nexport type OnPageScrollStateChangedEventData = Readonly<{\r\n  pageScrollState: 'idle' | 'dragging' | 'settling';\r\n}>;\r\n\r\nexport interface NativeProps extends ViewProps {\r\n  scrollEnabled?: WithDefault<boolean, true>;\r\n  layoutDirection?: WithDefault<'ltr' | 'rtl', 'ltr'>;\r\n  initialPage?: Int32;\r\n  orientation?: WithDefault<'horizontal' | 'vertical', 'horizontal'>;\r\n  offscreenPageLimit?: Int32;\r\n  pageMargin?: Int32;\r\n  overScrollMode?: WithDefault<'auto' | 'always' | 'never', 'auto'>;\r\n  overdrag?: WithDefault<boolean, false>;\r\n  keyboardDismissMode?: WithDefault<'none' | 'on-drag', 'none'>;\r\n  onPageScroll?: DirectEventHandler<OnPageScrollEventData>;\r\n  onPageSelected?: DirectEventHandler<OnPageSelectedEventData>;\r\n  onPageScrollStateChanged?: DirectEventHandler<OnPageScrollStateChangedEventData>;\r\n}\r\n\r\ntype PagerViewViewType = HostComponent<NativeProps>;\r\n\r\nexport interface NativeCommands {\r\n  setPage: (\r\n    viewRef: React.ElementRef<PagerViewViewType>,\r\n    selectedPage: Int32\r\n  ) => void;\r\n  setPageWithoutAnimation: (\r\n    viewRef: React.ElementRef<PagerViewViewType>,\r\n    selectedPage: Int32\r\n  ) => void;\r\n  setScrollEnabledImperatively: (\r\n    viewRef: React.ElementRef<PagerViewViewType>,\r\n    scrollEnabled: boolean\r\n  ) => void;\r\n}\r\n\r\nexport const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({\r\n  supportedCommands: [\r\n    'setPage',\r\n    'setPageWithoutAnimation',\r\n    'setScrollEnabledImperatively',\r\n  ],\r\n});\r\n\r\nexport default codegenNativeComponent<NativeProps>(\r\n  'RNCViewPager'\r\n) as HostComponent<NativeProps>;\r\n"],"mappings":"AAEA,OAAOA,qBAAqB,MAAM,wDAAwD;AAC1F,OAAOC,sBAAsB,MAAM,yDAAyD;AAsD5F,OAAO,MAAMC,QAAwB,GAAGF,qBAAqB,CAAiB;EAC5EG,iBAAiB,EAAE,CACjB,SAAS,EACT,yBAAyB,EACzB,8BAA8B;AAElC,CAAC,CAAC;AAEF,eAAeF,sBAAsB,CACnC,cACF,CAAC","ignoreList":[]}

package/lib/module/index.js

@@ -0,0 +1,4 @@
+import { PagerView } from './PagerView';
+export default PagerView;
+export * from './usePagerView';
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["PagerView"],"sources":["index.tsx"],"sourcesContent":["import type * as ReactNative from 'react-native';\r\nimport { PagerView } from './PagerView';\r\nexport default PagerView;\r\nexport * from './usePagerView';\r\n\r\nimport type {\r\n  OnPageScrollEventData as PagerViewOnPageScrollEventData,\r\n  OnPageSelectedEventData as PagerViewOnPageSelectedEventData,\r\n  OnPageScrollStateChangedEventData as PageScrollStateChangedNativeEventData,\r\n  NativeProps,\r\n} from './PagerViewNativeComponent';\r\n\r\nexport type {\r\n  PagerViewOnPageScrollEventData,\r\n  PagerViewOnPageSelectedEventData,\r\n  PageScrollStateChangedNativeEventData,\r\n  NativeProps as PagerViewProps,\r\n};\r\n\r\nexport type PagerViewOnPageScrollEvent =\r\n  ReactNative.NativeSyntheticEvent<PagerViewOnPageScrollEventData>;\r\n\r\nexport type PagerViewOnPageSelectedEvent =\r\n  ReactNative.NativeSyntheticEvent<PagerViewOnPageSelectedEventData>;\r\n\r\nexport type PageScrollStateChangedNativeEvent =\r\n  ReactNative.NativeSyntheticEvent<PageScrollStateChangedNativeEventData>;\r\n"],"mappings":"AACA,SAASA,SAAS,QAAQ,aAAa;AACvC,eAAeA,SAAS;AACxB,cAAc,gBAAgB","ignoreList":[]}

package/lib/module/usePagerView.js

@@ -0,0 +1,107 @@
+import { PagerView } from './PagerView';
+import { Animated } from 'react-native';
+import { useCallback, useMemo, useRef, useState } from 'react';
+const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
+export function usePagerView({
+  pagesAmount
+} = {
+  pagesAmount: 0
+}) {
+  const ref = useRef(null);
+  const [pages, setPages] = useState(new Array(pagesAmount).fill('').map((_v, index) => index));
+  const [activePage, setActivePage] = useState(0);
+  const [isAnimated, setIsAnimated] = useState(true);
+  const [overdragEnabled, setOverdragEnabled] = useState(false);
+  const [scrollEnabled, setScrollEnabled] = useState(true);
+  const [scrollState, setScrollState] = useState('idle');
+  const [progress, setProgress] = useState({
+    position: 0,
+    offset: 0
+  });
+  const onPageScrollOffset = useRef(new Animated.Value(0)).current;
+  const onPageScrollPosition = useRef(new Animated.Value(0)).current;
+  const onPageSelectedPosition = useRef(new Animated.Value(0)).current;
+  const setPage = useCallback(page => {
+    var _ref$current, _ref$current2;
+    return isAnimated ? (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.setPage(page) : (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.setPageWithoutAnimation(page);
+  }, [isAnimated]);
+  const addPage = useCallback(() => {
+    setPages(prevPages => {
+      return [...prevPages, prevPages.length];
+    });
+  }, []);
+  const removePage = useCallback(() => {
+    setPages(prevPages => {
+      if (prevPages.length === 1) {
+        return prevPages;
+      }
+      return prevPages.slice(0, prevPages.length - 1);
+    });
+  }, []);
+  const toggleAnimation = useCallback(() => setIsAnimated(animated => !animated), []);
+  const toggleScroll = useCallback(() => setScrollEnabled(enabled => !enabled), []);
+  const toggleOverdrag = useCallback(() => setOverdragEnabled(enabled => !enabled), []);
+  const onPageScroll = useMemo(() => Animated.event([{
+    nativeEvent: {
+      offset: onPageScrollOffset,
+      position: onPageScrollPosition
+    }
+  }], {
+    listener: ({
+      nativeEvent: {
+        offset,
+        position
+      }
+    }) => {
+      setProgress({
+        position,
+        offset
+      });
+    },
+    useNativeDriver: true
+  }),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  const onPageSelected = useMemo(() => Animated.event([{
+    nativeEvent: {
+      position: onPageSelectedPosition
+    }
+  }], {
+    listener: ({
+      nativeEvent: {
+        position
+      }
+    }) => {
+      setActivePage(position);
+    },
+    useNativeDriver: true
+  }),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  const onPageScrollStateChanged = useCallback(e => {
+    setScrollState(e.nativeEvent.pageScrollState);
+  }, []);
+  return {
+    ref,
+    activePage,
+    isAnimated,
+    pages,
+    scrollState,
+    scrollEnabled,
+    progress,
+    overdragEnabled,
+    setPage,
+    addPage,
+    removePage,
+    toggleScroll,
+    toggleAnimation,
+    setProgress,
+    onPageScroll,
+    onPageSelected,
+    onPageScrollStateChanged,
+    toggleOverdrag,
+    AnimatedPagerView,
+    PagerView
+  };
+}
+//# sourceMappingURL=usePagerView.js.map

package/lib/module/usePagerView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["PagerView","Animated","useCallback","useMemo","useRef","useState","AnimatedPagerView","createAnimatedComponent","usePagerView","pagesAmount","ref","pages","setPages","Array","fill","map","_v","index","activePage","setActivePage","isAnimated","setIsAnimated","overdragEnabled","setOverdragEnabled","scrollEnabled","setScrollEnabled","scrollState","setScrollState","progress","setProgress","position","offset","onPageScrollOffset","Value","current","onPageScrollPosition","onPageSelectedPosition","setPage","page","_ref$current","_ref$current2","setPageWithoutAnimation","addPage","prevPages","length","removePage","slice","toggleAnimation","animated","toggleScroll","enabled","toggleOverdrag","onPageScroll","event","nativeEvent","listener","useNativeDriver","onPageSelected","onPageScrollStateChanged","e","pageScrollState"],"sources":["usePagerView.ts"],"sourcesContent":["import type * as ReactNative from 'react-native';\r\nimport type {\r\n  OnPageScrollEventData as PagerViewOnPageScrollEventData,\r\n  OnPageSelectedEventData as PagerViewOnPageSelectedEventData,\r\n  OnPageScrollStateChangedEventData as PageScrollStateChangedNativeEventData,\r\n} from './PagerViewNativeComponent';\r\n\r\ntype PageScrollStateChangedNativeEvent =\r\n  ReactNative.NativeSyntheticEvent<PageScrollStateChangedNativeEventData>;\r\n\r\nimport { PagerView } from './PagerView';\r\n\r\nimport { Animated } from 'react-native';\r\nimport { useCallback, useMemo, useRef, useState } from 'react';\r\n\r\nexport type UsePagerViewProps = ReturnType<typeof usePagerView>;\r\n\r\nconst AnimatedPagerView = Animated.createAnimatedComponent(PagerView);\r\n\r\ntype UsePagerViewParams = {\r\n  pagesAmount: number;\r\n};\r\n\r\nexport function usePagerView(\r\n  { pagesAmount }: UsePagerViewParams = { pagesAmount: 0 }\r\n) {\r\n  const ref = useRef<PagerView>(null);\r\n  const [pages, setPages] = useState<number[]>(\r\n    new Array(pagesAmount).fill('').map((_v, index) => index)\r\n  );\r\n  const [activePage, setActivePage] = useState(0);\r\n  const [isAnimated, setIsAnimated] = useState(true);\r\n  const [overdragEnabled, setOverdragEnabled] = useState(false);\r\n  const [scrollEnabled, setScrollEnabled] = useState(true);\r\n  const [scrollState, setScrollState] = useState('idle');\r\n  const [progress, setProgress] = useState({ position: 0, offset: 0 });\r\n  const onPageScrollOffset = useRef(new Animated.Value(0)).current;\r\n  const onPageScrollPosition = useRef(new Animated.Value(0)).current;\r\n  const onPageSelectedPosition = useRef(new Animated.Value(0)).current;\r\n\r\n  const setPage = useCallback(\r\n    (page: number) =>\r\n      isAnimated\r\n        ? ref.current?.setPage(page)\r\n        : ref.current?.setPageWithoutAnimation(page),\r\n    [isAnimated]\r\n  );\r\n\r\n  const addPage = useCallback(() => {\r\n    setPages((prevPages) => {\r\n      return [...prevPages, prevPages.length];\r\n    });\r\n  }, []);\r\n\r\n  const removePage = useCallback(() => {\r\n    setPages((prevPages) => {\r\n      if (prevPages.length === 1) {\r\n        return prevPages;\r\n      }\r\n      return prevPages.slice(0, prevPages.length - 1);\r\n    });\r\n  }, []);\r\n\r\n  const toggleAnimation = useCallback(\r\n    () => setIsAnimated((animated) => !animated),\r\n    []\r\n  );\r\n\r\n  const toggleScroll = useCallback(\r\n    () => setScrollEnabled((enabled) => !enabled),\r\n    []\r\n  );\r\n\r\n  const toggleOverdrag = useCallback(\r\n    () => setOverdragEnabled((enabled) => !enabled),\r\n    []\r\n  );\r\n\r\n  const onPageScroll = useMemo(\r\n    () =>\r\n      Animated.event<PagerViewOnPageScrollEventData>(\r\n        [\r\n          {\r\n            nativeEvent: {\r\n              offset: onPageScrollOffset,\r\n              position: onPageScrollPosition,\r\n            },\r\n          },\r\n        ],\r\n        {\r\n          listener: ({ nativeEvent: { offset, position } }) => {\r\n            setProgress({\r\n              position,\r\n              offset,\r\n            });\r\n          },\r\n          useNativeDriver: true,\r\n        }\r\n      ),\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n    []\r\n  );\r\n\r\n  const onPageSelected = useMemo(\r\n    () =>\r\n      Animated.event<PagerViewOnPageSelectedEventData>(\r\n        [{ nativeEvent: { position: onPageSelectedPosition } }],\r\n        {\r\n          listener: ({ nativeEvent: { position } }) => {\r\n            setActivePage(position);\r\n          },\r\n          useNativeDriver: true,\r\n        }\r\n      ),\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n    []\r\n  );\r\n\r\n  const onPageScrollStateChanged = useCallback(\r\n    (e: PageScrollStateChangedNativeEvent) => {\r\n      setScrollState(e.nativeEvent.pageScrollState);\r\n    },\r\n    []\r\n  );\r\n\r\n  return {\r\n    ref,\r\n    activePage,\r\n    isAnimated,\r\n    pages,\r\n    scrollState,\r\n    scrollEnabled,\r\n    progress,\r\n    overdragEnabled,\r\n    setPage,\r\n    addPage,\r\n    removePage,\r\n    toggleScroll,\r\n    toggleAnimation,\r\n    setProgress,\r\n    onPageScroll,\r\n    onPageSelected,\r\n    onPageScrollStateChanged,\r\n    toggleOverdrag,\r\n    AnimatedPagerView,\r\n    PagerView,\r\n  };\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/lib/module/utils.js

@@ -0,0 +1,20 @@
+import React, { Children } from 'react';
+import { StyleSheet, View } from 'react-native';
+export const childrenWithOverriddenStyle = children => {
+  return Children.map(children, child => {
+    const element = child;
+    return (
+      /*#__PURE__*/
+      // Add a wrapper to ensure layout is calculated correctly
+      React.createElement(View, {
+        style: StyleSheet.absoluteFill,
+        collapsable: false
+      }, /*#__PURE__*/React.cloneElement(element, {
+        ...element.props,
+        // Override styles so that each page will fill the parent.
+        style: [element.props.style, StyleSheet.absoluteFill]
+      }))
+    );
+  });
+};
+//# sourceMappingURL=utils.js.map

package/lib/module/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Children","StyleSheet","View","childrenWithOverriddenStyle","children","map","child","element","createElement","style","absoluteFill","collapsable","cloneElement","props"],"sources":["utils.tsx"],"sourcesContent":["import React, { Children, ReactNode } from 'react';\r\nimport { StyleSheet, View } from 'react-native';\r\n\r\nexport const childrenWithOverriddenStyle = (children?: ReactNode) => {\r\n  return Children.map(children, (child) => {\r\n    const element = child as React.ReactElement;\r\n    return (\r\n      // Add a wrapper to ensure layout is calculated correctly\r\n      <View style={StyleSheet.absoluteFill} collapsable={false}>\r\n        {/* @ts-ignore */}\r\n        {React.cloneElement(element, {\r\n          ...element.props,\r\n          // Override styles so that each page will fill the parent.\r\n          style: [element.props.style, StyleSheet.absoluteFill],\r\n        })}\r\n      </View>\r\n    );\r\n  });\r\n};\r\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAmB,OAAO;AAClD,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAE/C,OAAO,MAAMC,2BAA2B,GAAIC,QAAoB,IAAK;EACnE,OAAOJ,QAAQ,CAACK,GAAG,CAACD,QAAQ,EAAGE,KAAK,IAAK;IACvC,MAAMC,OAAO,GAAGD,KAA2B;IAC3C;MAAA;MACE;MACAP,KAAA,CAAAS,aAAA,CAACN,IAAI;QAACO,KAAK,EAAER,UAAU,CAACS,YAAa;QAACC,WAAW,EAAE;MAAM,gBAEtDZ,KAAK,CAACa,YAAY,CAACL,OAAO,EAAE;QAC3B,GAAGA,OAAO,CAACM,KAAK;QAChB;QACAJ,KAAK,EAAE,CAACF,OAAO,CAACM,KAAK,CAACJ,KAAK,EAAER,UAAU,CAACS,YAAY;MACtD,CAAC,CACG;IAAC;EAEX,CAAC,CAAC;AACJ,CAAC","ignoreList":[]}

package/lib/typescript/PagerView.d.ts

@@ -0,0 +1,69 @@
+import React from 'react';
+import PagerViewNativeComponent, { NativeProps } from './PagerViewNativeComponent';
+/**
+ * Container that allows to flip left and right between child views. Each
+ * child view of the `PagerView` will be treated as a separate page
+ * and will be stretched to fill the `PagerView`.
+ *
+ * It is important all children are `<View>`s and not composite components.
+ * You can set style properties like `padding` or `backgroundColor` for each
+ * child. It is also important that each child have a `key` prop.
+ *
+ * Example:
+ *
+ * ```
+ * render: function() {
+ *   return (
+ *     <PagerView
+ *       style={styles.PagerView}
+ *       initialPage={0}>
+ *       <View style={styles.pageStyle} key="1">
+ *         <Text>First page</Text>
+ *       </View>
+ *       <View style={styles.pageStyle} key="2">
+ *         <Text>Second page</Text>
+ *       </View>
+ *     </PagerView>
+ *   );
+ * }
+ *
+ * ...
+ *
+ * var styles = {
+ *   ...
+ *   PagerView: {
+ *     flex: 1
+ *   },
+ *   pageStyle: {
+ *     alignItems: 'center',
+ *     padding: 20,
+ *   }
+ * }
+ * ```
+ */
+export declare class PagerView extends React.Component<NativeProps> {
+    private isScrolling;
+    pagerView: React.ElementRef<typeof PagerViewNativeComponent> | null;
+    private get deducedLayoutDirection();
+    private _onPageScroll;
+    private _onPageScrollStateChanged;
+    private _onPageSelected;
+    private _onMoveShouldSetResponderCapture;
+    /**
+     * A helper function to scroll to a specific page in the PagerView.
+     * The transition between pages will be animated.
+     */
+    setPage: (selectedPage: number) => void;
+    /**
+     * A helper function to scroll to a specific page in the PagerView.
+     * The transition between pages will *not* be animated.
+     */
+    setPageWithoutAnimation: (selectedPage: number) => void;
+    /**
+     * A helper function to enable/disable scroll imperatively
+     * The recommended way is using the scrollEnabled prop, however, there might be a case where a
+     * imperative solution is more useful (e.g. for not blocking an animation)
+     */
+    setScrollEnabled: (scrollEnabled: boolean) => void;
+    render(): React.JSX.Element;
+}

package/lib/typescript/PagerViewNativeComponent.d.ts

@@ -0,0 +1,36 @@
+import type * as React from 'react';
+import type { HostComponent, ViewProps } from 'react-native';
+import type { DirectEventHandler, Double, Int32, WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
+export type OnPageScrollEventData = Readonly<{
+    position: Double;
+    offset: Double;
+}>;
+export type OnPageSelectedEventData = Readonly<{
+    position: Double;
+}>;
+export type OnPageScrollStateChangedEventData = Readonly<{
+    pageScrollState: 'idle' | 'dragging' | 'settling';
+}>;
+export interface NativeProps extends ViewProps {
+    scrollEnabled?: WithDefault<boolean, true>;
+    layoutDirection?: WithDefault<'ltr' | 'rtl', 'ltr'>;
+    initialPage?: Int32;
+    orientation?: WithDefault<'horizontal' | 'vertical', 'horizontal'>;
+    offscreenPageLimit?: Int32;
+    pageMargin?: Int32;
+    overScrollMode?: WithDefault<'auto' | 'always' | 'never', 'auto'>;
+    overdrag?: WithDefault<boolean, false>;
+    keyboardDismissMode?: WithDefault<'none' | 'on-drag', 'none'>;
+    onPageScroll?: DirectEventHandler<OnPageScrollEventData>;
+    onPageSelected?: DirectEventHandler<OnPageSelectedEventData>;
+    onPageScrollStateChanged?: DirectEventHandler<OnPageScrollStateChangedEventData>;
+}
+type PagerViewViewType = HostComponent<NativeProps>;
+export interface NativeCommands {
+    setPage: (viewRef: React.ElementRef<PagerViewViewType>, selectedPage: Int32) => void;
+    setPageWithoutAnimation: (viewRef: React.ElementRef<PagerViewViewType>, selectedPage: Int32) => void;
+    setScrollEnabledImperatively: (viewRef: React.ElementRef<PagerViewViewType>, scrollEnabled: boolean) => void;
+}
+export declare const Commands: NativeCommands;
+declare const _default: HostComponent<NativeProps>;
+export default _default;

package/lib/typescript/index.d.ts

@@ -0,0 +1,9 @@
+import type * as ReactNative from 'react-native';
+import { PagerView } from './PagerView';
+export default PagerView;
+export * from './usePagerView';
+import type { OnPageScrollEventData as PagerViewOnPageScrollEventData, OnPageSelectedEventData as PagerViewOnPageSelectedEventData, OnPageScrollStateChangedEventData as PageScrollStateChangedNativeEventData, NativeProps } from './PagerViewNativeComponent';
+export type { PagerViewOnPageScrollEventData, PagerViewOnPageSelectedEventData, PageScrollStateChangedNativeEventData, NativeProps as PagerViewProps, };
+export type PagerViewOnPageScrollEvent = ReactNative.NativeSyntheticEvent<PagerViewOnPageScrollEventData>;
+export type PagerViewOnPageSelectedEvent = ReactNative.NativeSyntheticEvent<PagerViewOnPageSelectedEventData>;
+export type PageScrollStateChangedNativeEvent = ReactNative.NativeSyntheticEvent<PageScrollStateChangedNativeEventData>;

package/lib/typescript/usePagerView.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import type * as ReactNative from 'react-native';
+import type { OnPageScrollStateChangedEventData as PageScrollStateChangedNativeEventData } from './PagerViewNativeComponent';
+type PageScrollStateChangedNativeEvent = ReactNative.NativeSyntheticEvent<PageScrollStateChangedNativeEventData>;
+import { PagerView } from './PagerView';
+import { Animated } from 'react-native';
+export type UsePagerViewProps = ReturnType<typeof usePagerView>;
+type UsePagerViewParams = {
+    pagesAmount: number;
+};
+export declare function usePagerView({ pagesAmount }?: UsePagerViewParams): {
+    ref: import("react").RefObject<PagerView>;
+    activePage: number;
+    isAnimated: boolean;
+    pages: number[];
+    scrollState: string;
+    scrollEnabled: boolean;
+    progress: {
+        position: number;
+        offset: number;
+    };
+    overdragEnabled: boolean;
+    setPage: (page: number) => void;
+    addPage: () => void;
+    removePage: () => void;
+    toggleScroll: () => void;
+    toggleAnimation: () => void;
+    setProgress: import("react").Dispatch<import("react").SetStateAction<{
+        position: number;
+        offset: number;
+    }>>;
+    onPageScroll: (...args: any[]) => void;
+    onPageSelected: (...args: any[]) => void;
+    onPageScrollStateChanged: (e: PageScrollStateChangedNativeEvent) => void;
+    toggleOverdrag: () => void;
+    AnimatedPagerView: Animated.AnimatedComponent<typeof PagerView>;
+    PagerView: typeof PagerView;
+};
+export {};

package/lib/typescript/utils.d.ts

@@ -0,0 +1,2 @@
+import React, { ReactNode } from 'react';
+export declare const childrenWithOverriddenStyle: (children?: ReactNode) => React.JSX.Element[] | null | undefined;

package/package.json

@@ -0,0 +1,139 @@
+{
+  "name": "@react-native-ohos/react-native-pager-view",
+  "version": "6.7.2-rc.1",
+  "description": "React Native wrapper for Harmony ViewPager",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "harmony": {
+    "alias":"react-native-pager-view"
+  },
+  "files": [
+    "src",
+    "lib",
+    "harmony",
+    "!lib/typescript/example",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!harmony/oh_modules",
+    "!harmony/**/build",
+    "!harmony/**/oh_modules"
+  ],
+  "scripts": {
+    "test": "jest",
+    "typescript": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "prepare": "bob build",
+    "release": "release-it",
+    "release:next": "release-it --npm.tag=next --preRelease=rc"
+  },
+  "keywords": [
+    "react-native",
+    "harmony"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/react-native-oh-library/react-native-pager-view.git"
+  },
+  "author": "troZee <hello@callstack.com> (https://github.com/callstack)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/callstack/react-native-pager-view/issues"
+  },
+  "homepage": "https://github.com/callstack/react-native-pager-view#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+     "access": "public"
+  },
+  "dependencies": {
+    "react-native-pager-view": "6.7.1"
+  },
+  "devDependencies": {
+    "@babel/eslint-parser": "^7.20.0",
+    "@react-native/babel-preset": "0.76.3",
+    "@react-native/eslint-config": "0.76.3",
+    "@react-native/metro-config": "0.76.3",
+    "@react-native/typescript-config": "0.76.3",
+    "@react-native-community/cli": "15.0.1",
+    "@react-native-community/cli-platform-android": "15.0.1",
+    "@react-native-community/cli-platform-ios": "15.0.1",
+    "@release-it/conventional-changelog": "^2.0.0",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.2.6",
+    "eslint": "^8.19.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-ft-flow": "^3.0.1",
+    "eslint-plugin-jest": "^28.9.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "jest": "^29.6.3",
+    "metro-react-native-babel-preset": "^0.77.0",
+    "prettier": "^2.4.1",
+    "react": "18.3.1",
+    "react-native": "0.77.1",
+    "react-native-builder-bob": "^0.18.3",
+    "release-it": "^14.2.2",
+    "typescript": "5.0.4"
+  },
+  "resolutions": {
+    "@types/react": "18.0.29"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "eslintConfig": {
+    "root": true,
+    "parser": "@babel/eslint-parser",
+    "extends": [
+      "@react-native-community",
+      "prettier"
+    ],
+    "rules": {
+      "prettier/prettier": [
+        "error",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "es5",
+          "useTabs": false
+        }
+      ]
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  }
+}