@fountain-ui/lab 2.0.0-beta.10 → 2.0.0-beta.11

package/build/commonjs/ViewPager/ChildrenMemoizedPage.js

@@ -5,44 +5,112 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _reactNativeReanimated = require("react-native-reanimated");
 
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _core = require("@fountain-ui/core");
 
-const Page = function Page(props) {
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const OFFSCREEN_RERENDER_LIMIT = 1;
+
+const styles = _core.StyleSheet.create({
+  none: {
+    display: 'none'
+  }
+});
+
+function Page(props) {
   const {
-    isVisible,
-    ...otherProps
+    index,
+    children,
+    loading,
+    sharedIndex
   } = props;
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
-    collapsable: false
-  }, otherProps));
-};
 
-var _default = /*#__PURE__*/_react.default.memo(Page, (prevProps, nextProps) => {
-  if (prevProps.children === null && nextProps.children === null) {
-    return true;
-  } // isVisible is an important condition for determining memos on the web.
-  // Reference ViewPagerWeb's return.
+  const assumeInitialPageState = () => {
+    const activeIndex = sharedIndex.value;
+    const active = index === activeIndex;
 
+    if (_reactNative.Platform.OS === 'web') {
+      return {
+        active,
+        visited: active
+      };
+    }
 
-  if (prevProps.isVisible !== nextProps.isVisible) {
-    return false;
-  }
+    if (loading === 'eager') {
+      return {
+        active,
+        visited: true
+      };
+    }
 
-  if (nextProps.isVisible || nextProps.isNeighbor) {
-    return false;
-  }
+    const visited = index >= activeIndex - OFFSCREEN_RERENDER_LIMIT && index <= activeIndex + OFFSCREEN_RERENDER_LIMIT;
+    return {
+      active,
+      visited
+    };
+  };
+
+  const [pageState, setPageState] = (0, _react.useState)(assumeInitialPageState);
+  const content = pageState.visited ? children : null;
+
+  const updatePageState = (active, neighbor) => {
+    setPageState(prevState => {
+      if (prevState.active !== active) {
+        return {
+          active,
+          visited: active || prevState.visited
+        };
+      }
+
+      if (neighbor && !prevState.visited) {
+        return { ...prevState,
+          visited: true
+        };
+      }
+
+      return prevState;
+    });
+  };
+
+  (0, _reactNativeReanimated.useAnimatedReaction)(() => {
+    const activeIndex = sharedIndex.value;
+    const willVisible = index >= activeIndex - OFFSCREEN_RERENDER_LIMIT && index <= activeIndex + OFFSCREEN_RERENDER_LIMIT;
+    const willActive = index === activeIndex;
+    const willNeighbor = _reactNative.Platform.OS === 'web' ? false : willVisible && !willActive;
+    return {
+      willActive,
+      willNeighbor
+    };
+  }, (nextState, prevState) => {
+    const activeStateChanged = nextState.willActive !== (prevState === null || prevState === void 0 ? void 0 : prevState.willActive);
+    const willNewNeighbor = nextState.willNeighbor && !(prevState !== null && prevState !== void 0 && prevState.willNeighbor);
+
+    if (activeStateChanged || willNewNeighbor) {
+      (0, _reactNativeReanimated.runOnJS)(updatePageState)(nextState.willActive, nextState.willNeighbor);
+    }
+  }, [index]);
+  const style = _reactNative.Platform.OS === 'web' ? pageState.active ? _core.StyleSheet.absoluteFill : styles.none : undefined;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    children: content,
+    collapsable: false,
+    style: style
+  });
+}
 
+var _default = /*#__PURE__*/(0, _react.memo)(Page, (prevProps, nextProps) => {
   if (prevProps.rerenderKey !== nextProps.rerenderKey) {
     return false;
   }
 
-  return prevProps.children !== null && nextProps.children !== null;
+  return prevProps.index !== nextProps.index;
 });
 
 exports.default = _default;

package/build/commonjs/ViewPager/ChildrenMemoizedPage.js.map

@@ -1 +1 @@
-{"version":3,"names":["Page","props","isVisible","otherProps","React","memo","prevProps","nextProps","children","isNeighbor","rerenderKey"],"sources":["ChildrenMemoizedPage.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport type { PageProps } from './ViewPagerProps';\n\nconst Page = function Page(props: PageProps) {\n    const { isVisible, ...otherProps } = props;\n\n    return (\n        <View\n            collapsable={false}\n            {...otherProps}\n        />\n    );\n};\n\nexport default React.memo(Page, (prevProps, nextProps) => {\n    if (prevProps.children === null && nextProps.children === null) {\n        return true;\n    }\n\n    // isVisible is an important condition for determining memos on the web.\n    // Reference ViewPagerWeb's return.\n    if (prevProps.isVisible !== nextProps.isVisible) {\n        return false;\n    }\n\n    if (nextProps.isVisible || nextProps.isNeighbor) {\n        return false;\n    }\n\n    if (prevProps.rerenderKey !== nextProps.rerenderKey) {\n        return false;\n    }\n\n    return prevProps.children !== null && nextProps.children !== null;\n});\n"],"mappings":";;;;;;;AAAA;;AACA;;;;;;AAGA,MAAMA,IAAI,GAAG,SAASA,IAAT,CAAcC,KAAd,EAAgC;EACzC,MAAM;IAAEC,SAAF;IAAa,GAAGC;EAAhB,IAA+BF,KAArC;EAEA,oBACI,6BAAC,iBAAD;IACI,WAAW,EAAE;EADjB,GAEQE,UAFR,EADJ;AAMH,CATD;;4BAWeC,cAAA,CAAMC,IAAN,CAAWL,IAAX,EAAiB,CAACM,SAAD,EAAYC,SAAZ,KAA0B;EACtD,IAAID,SAAS,CAACE,QAAV,KAAuB,IAAvB,IAA+BD,SAAS,CAACC,QAAV,KAAuB,IAA1D,EAAgE;IAC5D,OAAO,IAAP;EACH,CAHqD,CAKtD;EACA;;;EACA,IAAIF,SAAS,CAACJ,SAAV,KAAwBK,SAAS,CAACL,SAAtC,EAAiD;IAC7C,OAAO,KAAP;EACH;;EAED,IAAIK,SAAS,CAACL,SAAV,IAAuBK,SAAS,CAACE,UAArC,EAAiD;IAC7C,OAAO,KAAP;EACH;;EAED,IAAIH,SAAS,CAACI,WAAV,KAA0BH,SAAS,CAACG,WAAxC,EAAqD;IACjD,OAAO,KAAP;EACH;;EAED,OAAOJ,SAAS,CAACE,QAAV,KAAuB,IAAvB,IAA+BD,SAAS,CAACC,QAAV,KAAuB,IAA7D;AACH,CApBc,C"}
+{"version":3,"names":["OFFSCREEN_RERENDER_LIMIT","styles","StyleSheet","create","none","display","Page","props","index","children","loading","sharedIndex","assumeInitialPageState","activeIndex","value","active","Platform","OS","visited","pageState","setPageState","useState","content","updatePageState","neighbor","prevState","useAnimatedReaction","willVisible","willActive","willNeighbor","nextState","activeStateChanged","willNewNeighbor","runOnJS","style","absoluteFill","undefined","memo","prevProps","nextProps","rerenderKey"],"sources":["ChildrenMemoizedPage.tsx"],"sourcesContent":["import React, { memo, useState } from 'react';\nimport { Platform, View } from 'react-native';\nimport { runOnJS, useAnimatedReaction } from 'react-native-reanimated';\nimport { StyleSheet } from '@fountain-ui/core';\nimport type { PageProps } from './ViewPagerProps';\n\nconst OFFSCREEN_RERENDER_LIMIT = 1;\n\nconst styles = StyleSheet.create({\n    none: { display: 'none' },\n});\n\ninterface PageState {\n    active: boolean;\n    visited: boolean;\n}\n\nfunction Page(props: PageProps) {\n    const {\n        index,\n        children,\n        loading,\n        sharedIndex,\n    } = props;\n\n    const assumeInitialPageState = (): PageState => {\n        const activeIndex = sharedIndex.value;\n\n        const active = index === activeIndex;\n\n        if (Platform.OS === 'web') {\n            return { active, visited: active };\n        }\n\n        if (loading === 'eager') {\n            return { active, visited: true };\n        }\n\n        const visited = index >= activeIndex - OFFSCREEN_RERENDER_LIMIT\n            && index <= activeIndex + OFFSCREEN_RERENDER_LIMIT;\n\n        return { active, visited };\n    };\n\n    const [pageState, setPageState] = useState<PageState>(assumeInitialPageState);\n\n    const content = pageState.visited ? children : null;\n\n    const updatePageState = (active: boolean, neighbor: boolean) => {\n        setPageState(prevState => {\n            if (prevState.active !== active) {\n                return { active, visited: active || prevState.visited };\n            }\n\n            if (neighbor && !prevState.visited) {\n                return { ...prevState, visited: true };\n            }\n\n            return prevState;\n        });\n    };\n\n    useAnimatedReaction(\n        () => {\n            const activeIndex = sharedIndex.value;\n\n            const willVisible = index >= activeIndex - OFFSCREEN_RERENDER_LIMIT\n                && index <= activeIndex + OFFSCREEN_RERENDER_LIMIT;\n\n            const willActive = index === activeIndex;\n            const willNeighbor = Platform.OS === 'web' ? false : (willVisible && !willActive);\n\n            return { willActive, willNeighbor };\n        },\n        (nextState, prevState) => {\n            const activeStateChanged = nextState.willActive !== prevState?.willActive;\n            const willNewNeighbor = nextState.willNeighbor && !prevState?.willNeighbor;\n\n            if (activeStateChanged || willNewNeighbor) {\n                runOnJS(updatePageState)(nextState.willActive, nextState.willNeighbor);\n            }\n        },\n        [index],\n    );\n\n    const style = Platform.OS === 'web'\n        ? (pageState.active ? StyleSheet.absoluteFill : styles.none)\n        : undefined;\n\n    return (\n        <View\n            children={content}\n            collapsable={false}\n            style={style}\n        />\n    );\n}\n\nexport default memo(Page, (prevProps, nextProps) => {\n    if (prevProps.rerenderKey !== nextProps.rerenderKey) {\n        return false;\n    }\n\n    return prevProps.index !== nextProps.index;\n});\n"],"mappings":"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"}

package/build/commonjs/ViewPager/ViewPagerNative.js

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = ViewPager;
+exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _reactNativePagerView = _interopRequireDefault(require("react-native-pager-view"));
 
+var _reactNativeReanimated = require("react-native-reanimated");
+
 var _utils = require("./utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -17,59 +19,64 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ViewPager(props) {
+const ViewPager = /*#__PURE__*/(0, _react.forwardRef)(function ViewPager(props, ref) {
   const {
     children,
-    enableVisibleHint = _utils.defaultEnableVisibleHint,
-    index,
+    initialPage = _utils.defaultInitialPage,
     keyboardDismissMode = 'on-drag',
     loading = _utils.defaultLoading,
     onChange,
     pageComponent = _utils.defaultPageComponent,
-    enableNeighborPageRerender = _utils.defaultEnableNeighborPageRerender,
     pageForceRerenderKey,
     scrollEnabled = true,
     style
   } = props;
-  const indexRef = (0, _react.useRef)(index);
+  const sharedIndex = (0, _reactNativeReanimated.useSharedValue)(initialPage);
   const pagerRef = (0, _react.useRef)(null);
-  const renderer = (0, _utils.usePageRenderer)({
-    enableVisibleHint,
-    index,
-    loading,
-    pageComponent,
-    pageForceRerenderKey,
-    enableNeighborPageRerender
-  });
+
+  const setPage = newIndex => {
+    requestAnimationFrame(() => {
+      var _pagerRef$current;
+
+      (_pagerRef$current = pagerRef.current) === null || _pagerRef$current === void 0 ? void 0 : _pagerRef$current.setPage(newIndex);
+    });
+  };
+
+  (0, _react.useImperativeHandle)(ref, () => ({
+    setPage
+  }), []);
   const handlePageSelected = (0, _react.useCallback)(e => {
-    indexRef.current = e.nativeEvent.position;
+    const currentIndex = sharedIndex.value;
+    const nextIndex = e.nativeEvent.position;
+
+    if (currentIndex === nextIndex) {
+      return;
+    }
+
+    sharedIndex.value = nextIndex;
 
     if (onChange) {
-      onChange(indexRef.current);
+      onChange(nextIndex);
     }
   }, [onChange]);
-  (0, _react.useEffect)(() => {
-    const handleNumber = index !== indexRef.current ? requestAnimationFrame(() => {
-      var _pagerRef$current;
-
-      return (_pagerRef$current = pagerRef.current) === null || _pagerRef$current === void 0 ? void 0 : _pagerRef$current.setPage(index);
-    }) : undefined;
-    return () => {
-      if (handleNumber) {
-        cancelAnimationFrame(handleNumber);
-      }
-    };
-  }, [index]);
+  const PageComponent = pageComponent;
   return /*#__PURE__*/_react.default.createElement(_reactNativePagerView.default, {
-    initialPage: index,
+    ref: pagerRef,
+    initialPage: initialPage,
     keyboardDismissMode: keyboardDismissMode,
     onPageSelected: handlePageSelected,
     pageMargin: 8,
-    ref: pagerRef,
     scrollEnabled: scrollEnabled,
     style: style
-  }, renderer(children));
-}
-
-;
+  }, _react.Children.map(children, (child, index) => /*#__PURE__*/_react.default.createElement(PageComponent, {
+    key: index,
+    children: child,
+    index: index,
+    loading: loading,
+    rerenderKey: pageForceRerenderKey,
+    sharedIndex: sharedIndex
+  })));
+});
+var _default = ViewPager;
+exports.default = _default;
 //# sourceMappingURL=ViewPagerNative.js.map

package/build/commonjs/ViewPager/ViewPagerNative.js.map

@@ -1 +1 @@
-{"version":3,"names":["ViewPager","props","children","enableVisibleHint","defaultEnableVisibleHint","index","keyboardDismissMode","loading","defaultLoading","onChange","pageComponent","defaultPageComponent","enableNeighborPageRerender","defaultEnableNeighborPageRerender","pageForceRerenderKey","scrollEnabled","style","indexRef","useRef","pagerRef","renderer","usePageRenderer","handlePageSelected","useCallback","e","current","nativeEvent","position","useEffect","handleNumber","requestAnimationFrame","setPage","undefined","cancelAnimationFrame"],"sources":["ViewPagerNative.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from 'react';\nimport type { ViewPagerOnPageSelectedEvent } from 'react-native-pager-view';\nimport RNViewPager from 'react-native-pager-view';\nimport type ViewPagerProps from './ViewPagerProps';\nimport {\n    defaultEnableNeighborPageRerender,\n    defaultEnableVisibleHint,\n    defaultLoading,\n    defaultPageComponent,\n    usePageRenderer,\n} from './utils';\n\nexport default function ViewPager(props: ViewPagerProps) {\n    const {\n        children,\n        enableVisibleHint = defaultEnableVisibleHint,\n        index,\n        keyboardDismissMode = 'on-drag',\n        loading = defaultLoading,\n        onChange,\n        pageComponent = defaultPageComponent,\n        enableNeighborPageRerender = defaultEnableNeighborPageRerender,\n        pageForceRerenderKey,\n        scrollEnabled = true,\n        style,\n    } = props;\n\n    const indexRef = useRef<number>(index);\n    const pagerRef = useRef<RNViewPager | null>(null);\n\n    const renderer = usePageRenderer({\n        enableVisibleHint,\n        index,\n        loading,\n        pageComponent,\n        pageForceRerenderKey,\n        enableNeighborPageRerender,\n    });\n\n    const handlePageSelected = useCallback((e: ViewPagerOnPageSelectedEvent) => {\n        indexRef.current = e.nativeEvent.position;\n\n        if (onChange) {\n            onChange(indexRef.current);\n        }\n    }, [onChange]);\n\n    useEffect(() => {\n        const handleNumber = index !== indexRef.current\n            ? requestAnimationFrame(() => pagerRef.current?.setPage(index))\n            : undefined;\n\n        return () => {\n            if (handleNumber) {\n                cancelAnimationFrame(handleNumber);\n            }\n        };\n    }, [index]);\n\n    return (\n        <RNViewPager\n            initialPage={index}\n            keyboardDismissMode={keyboardDismissMode}\n            onPageSelected={handlePageSelected}\n            pageMargin={8}\n            ref={pagerRef}\n            scrollEnabled={scrollEnabled}\n            style={style}\n        >\n            {renderer(children)}\n        </RNViewPager>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;;;;;;;AAQe,SAASA,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,QADE;IAEFC,iBAAiB,GAAGC,+BAFlB;IAGFC,KAHE;IAIFC,mBAAmB,GAAG,SAJpB;IAKFC,OAAO,GAAGC,qBALR;IAMFC,QANE;IAOFC,aAAa,GAAGC,2BAPd;IAQFC,0BAA0B,GAAGC,wCAR3B;IASFC,oBATE;IAUFC,aAAa,GAAG,IAVd;IAWFC;EAXE,IAYFf,KAZJ;EAcA,MAAMgB,QAAQ,GAAG,IAAAC,aAAA,EAAeb,KAAf,CAAjB;EACA,MAAMc,QAAQ,GAAG,IAAAD,aAAA,EAA2B,IAA3B,CAAjB;EAEA,MAAME,QAAQ,GAAG,IAAAC,sBAAA,EAAgB;IAC7BlB,iBAD6B;IAE7BE,KAF6B;IAG7BE,OAH6B;IAI7BG,aAJ6B;IAK7BI,oBAL6B;IAM7BF;EAN6B,CAAhB,CAAjB;EASA,MAAMU,kBAAkB,GAAG,IAAAC,kBAAA,EAAaC,CAAD,IAAqC;IACxEP,QAAQ,CAACQ,OAAT,GAAmBD,CAAC,CAACE,WAAF,CAAcC,QAAjC;;IAEA,IAAIlB,QAAJ,EAAc;MACVA,QAAQ,CAACQ,QAAQ,CAACQ,OAAV,CAAR;IACH;EACJ,CAN0B,EAMxB,CAAChB,QAAD,CANwB,CAA3B;EAQA,IAAAmB,gBAAA,EAAU,MAAM;IACZ,MAAMC,YAAY,GAAGxB,KAAK,KAAKY,QAAQ,CAACQ,OAAnB,GACfK,qBAAqB,CAAC;MAAA;;MAAA,4BAAMX,QAAQ,CAACM,OAAf,sDAAM,kBAAkBM,OAAlB,CAA0B1B,KAA1B,CAAN;IAAA,CAAD,CADN,GAEf2B,SAFN;IAIA,OAAO,MAAM;MACT,IAAIH,YAAJ,EAAkB;QACdI,oBAAoB,CAACJ,YAAD,CAApB;MACH;IACJ,CAJD;EAKH,CAVD,EAUG,CAACxB,KAAD,CAVH;EAYA,oBACI,6BAAC,6BAAD;IACI,WAAW,EAAEA,KADjB;IAEI,mBAAmB,EAAEC,mBAFzB;IAGI,cAAc,EAAEgB,kBAHpB;IAII,UAAU,EAAE,CAJhB;IAKI,GAAG,EAAEH,QALT;IAMI,aAAa,EAAEJ,aANnB;IAOI,KAAK,EAAEC;EAPX,GASKI,QAAQ,CAAClB,QAAD,CATb,CADJ;AAaH;;AAAA"}
+{"version":3,"names":["ViewPager","forwardRef","props","ref","children","initialPage","defaultInitialPage","keyboardDismissMode","loading","defaultLoading","onChange","pageComponent","defaultPageComponent","pageForceRerenderKey","scrollEnabled","style","sharedIndex","useSharedValue","pagerRef","useRef","setPage","newIndex","requestAnimationFrame","current","useImperativeHandle","handlePageSelected","useCallback","e","currentIndex","value","nextIndex","nativeEvent","position","PageComponent","Children","map","child","index"],"sources":["ViewPagerNative.tsx"],"sourcesContent":["import React, { Children, forwardRef, useCallback, useImperativeHandle, useRef } from 'react';\nimport type { ViewPagerOnPageSelectedEvent } from 'react-native-pager-view';\nimport RNViewPager from 'react-native-pager-view';\nimport { useSharedValue } from 'react-native-reanimated';\nimport type ViewPagerProps from './ViewPagerProps';\nimport type { ViewPagerInstance } from './ViewPagerProps';\nimport { defaultInitialPage, defaultLoading, defaultPageComponent } from './utils';\n\nconst ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPager(props, ref) {\n    const {\n        children,\n        initialPage = defaultInitialPage,\n        keyboardDismissMode = 'on-drag',\n        loading = defaultLoading,\n        onChange,\n        pageComponent = defaultPageComponent,\n        pageForceRerenderKey,\n        scrollEnabled = true,\n        style,\n    } = props;\n\n    const sharedIndex = useSharedValue<number>(initialPage);\n    const pagerRef = useRef<RNViewPager | null>(null);\n\n    const setPage = (newIndex: number) => {\n        requestAnimationFrame(() => {\n            pagerRef.current?.setPage(newIndex);\n        });\n    };\n\n    useImperativeHandle(\n        ref,\n        () => ({ setPage }),\n        [],\n    );\n\n    const handlePageSelected = useCallback((e: ViewPagerOnPageSelectedEvent) => {\n        const currentIndex = sharedIndex.value;\n        const nextIndex = e.nativeEvent.position;\n\n        if (currentIndex === nextIndex) {\n            return;\n        }\n\n        sharedIndex.value = nextIndex;\n\n        if (onChange) {\n            onChange(nextIndex);\n        }\n    }, [onChange]);\n\n    const PageComponent = pageComponent;\n\n    return (\n        <RNViewPager\n            ref={pagerRef}\n            initialPage={initialPage}\n            keyboardDismissMode={keyboardDismissMode}\n            onPageSelected={handlePageSelected}\n            pageMargin={8}\n            scrollEnabled={scrollEnabled}\n            style={style}\n        >\n            {Children.map(children, (child, index) => (\n                <PageComponent\n                    key={index}\n                    children={child}\n                    index={index}\n                    loading={loading}\n                    rerenderKey={pageForceRerenderKey}\n                    sharedIndex={sharedIndex}\n                />\n            ))}\n        </RNViewPager>\n    );\n});\n\nexport default ViewPager;\n"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AAGA;;;;;;;;AAEA,MAAMA,SAAS,gBAAG,IAAAC,iBAAA,EAA8C,SAASD,SAAT,CAAmBE,KAAnB,EAA0BC,GAA1B,EAA+B;EAC3F,MAAM;IACFC,QADE;IAEFC,WAAW,GAAGC,yBAFZ;IAGFC,mBAAmB,GAAG,SAHpB;IAIFC,OAAO,GAAGC,qBAJR;IAKFC,QALE;IAMFC,aAAa,GAAGC,2BANd;IAOFC,oBAPE;IAQFC,aAAa,GAAG,IARd;IASFC;EATE,IAUFb,KAVJ;EAYA,MAAMc,WAAW,GAAG,IAAAC,qCAAA,EAAuBZ,WAAvB,CAApB;EACA,MAAMa,QAAQ,GAAG,IAAAC,aAAA,EAA2B,IAA3B,CAAjB;;EAEA,MAAMC,OAAO,GAAIC,QAAD,IAAsB;IAClCC,qBAAqB,CAAC,MAAM;MAAA;;MACxB,qBAAAJ,QAAQ,CAACK,OAAT,wEAAkBH,OAAlB,CAA0BC,QAA1B;IACH,CAFoB,CAArB;EAGH,CAJD;;EAMA,IAAAG,0BAAA,EACIrB,GADJ,EAEI,OAAO;IAAEiB;EAAF,CAAP,CAFJ,EAGI,EAHJ;EAMA,MAAMK,kBAAkB,GAAG,IAAAC,kBAAA,EAAaC,CAAD,IAAqC;IACxE,MAAMC,YAAY,GAAGZ,WAAW,CAACa,KAAjC;IACA,MAAMC,SAAS,GAAGH,CAAC,CAACI,WAAF,CAAcC,QAAhC;;IAEA,IAAIJ,YAAY,KAAKE,SAArB,EAAgC;MAC5B;IACH;;IAEDd,WAAW,CAACa,KAAZ,GAAoBC,SAApB;;IAEA,IAAIpB,QAAJ,EAAc;MACVA,QAAQ,CAACoB,SAAD,CAAR;IACH;EACJ,CAb0B,EAaxB,CAACpB,QAAD,CAbwB,CAA3B;EAeA,MAAMuB,aAAa,GAAGtB,aAAtB;EAEA,oBACI,6BAAC,6BAAD;IACI,GAAG,EAAEO,QADT;IAEI,WAAW,EAAEb,WAFjB;IAGI,mBAAmB,EAAEE,mBAHzB;IAII,cAAc,EAAEkB,kBAJpB;IAKI,UAAU,EAAE,CALhB;IAMI,aAAa,EAAEX,aANnB;IAOI,KAAK,EAAEC;EAPX,GASKmB,eAAA,CAASC,GAAT,CAAa/B,QAAb,EAAuB,CAACgC,KAAD,EAAQC,KAAR,kBACpB,6BAAC,aAAD;IACI,GAAG,EAAEA,KADT;IAEI,QAAQ,EAAED,KAFd;IAGI,KAAK,EAAEC,KAHX;IAII,OAAO,EAAE7B,OAJb;IAKI,WAAW,EAAEK,oBALjB;IAMI,WAAW,EAAEG;EANjB,EADH,CATL,CADJ;AAsBH,CAnEiB,CAAlB;eAqEehB,S"}

package/build/commonjs/ViewPager/ViewPagerProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["ViewPagerProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { ComponentProps } from '@fountain-ui/core';\n\nexport type KeyboardDismissMode = 'none' | 'on-drag';\n\nexport type PageProps = React.PropsWithChildren<ViewProps> & {\n    isNeighbor: boolean;\n    isVisible: boolean;\n    rerenderKey?: any;\n};\n\nexport type PageComponent = React.ComponentType<PageProps>;\n\nexport type Loading = 'lazy' | 'eager';\n\nexport default interface ViewPagerProps extends ComponentProps<{\n    /**\n     * Collection of ViewPager components.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * If `true`, enable page visible hint.\n     * @default false\n     */\n    enableVisibleHint?: boolean;\n\n    /**\n     * If `true`, Based on the current index, the pages on the left and right are also rerender.\n     * @default false\n     */\n    enableNeighborPageRerender?: boolean;\n\n    /**\n     * A number representing the index of the active page.\n     */\n    index: number,\n\n    /**\n     * Whether to load the page immediately (`eager`) or on an as-needed basis (`lazy`).\n     * @default 'lazy'\n     */\n    loading?: Loading;\n\n    /**\n     * Callback fired when an index is changed.\n     */\n    onChange?: (newIndex: number) => void,\n\n    /**\n     * The component used to render the wrapper of the page.\n     * @default 'ChildrenMemoizedPage'\n     */\n    pageComponent?: PageComponent,\n\n    /**\n     * When this value is changed, page will be rerender.\n     */\n    pageForceRerenderKey?: any;\n\n    /**\n     * Mobile only. Should pager view scroll, when scroll enabled.\n     * @default true\n     */\n    scrollEnabled?: boolean;\n\n    /**\n     * Mobile only. Determines whether the keyboard gets dismissed in response to a drag.\n     * @default 'on-drag'\n     */\n    keyboardDismissMode?: KeyboardDismissMode;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["ViewPagerProps.ts"],"sourcesContent":["import type { ComponentType, PropsWithChildren, ReactNode, Ref } from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport type { ComponentProps } from '@fountain-ui/core';\n\nexport type KeyboardDismissMode = 'none' | 'on-drag';\n\nexport type PageProps = PropsWithChildren<ViewProps> & {\n    index: number;\n    loading: ViewPagerProps['loading'];\n    sharedIndex: SharedValue<number>;\n    rerenderKey?: ViewPagerProps['pageForceRerenderKey'];\n};\n\nexport type PageComponent = ComponentType<PageProps>;\n\nexport type Loading = 'lazy' | 'eager';\n\nexport interface ViewPagerInstance {\n    /**\n     * Function to scroll to a specific page in the ViewPager. Invalid index is ignored.\n     * @param index\n     */\n    setPage: (index: number) => void;\n}\n\nexport default interface ViewPagerProps extends ComponentProps<{\n    ref?: Ref<ViewPagerInstance>;\n\n    /**\n     * Collection of ViewPager components.\n     */\n    children?: ReactNode;\n\n    /**\n     * Index of initial page that should be selected.\n     * @default 0\n     */\n    initialPage?: number;\n\n    /**\n     * Whether to load the page immediately (`eager`) or on an as-needed basis (`lazy`).\n     * @default 'lazy'\n     */\n    loading?: Loading;\n\n    /**\n     * Callback fired when an index is changed.\n     */\n    onChange?: (newIndex: number) => void,\n\n    /**\n     * The component used to render the wrapper of the page.\n     * @default 'ChildrenMemoizedPage'\n     */\n    pageComponent?: PageComponent,\n\n    /**\n     * When this value is changed, page will be rerender.\n     */\n    pageForceRerenderKey?: any;\n\n    /**\n     * Mobile only. Should pager view scroll, when scroll enabled.\n     * @default true\n     */\n    scrollEnabled?: boolean;\n\n    /**\n     * Mobile only. Determines whether the keyboard gets dismissed in response to a drag.\n     * @default 'on-drag'\n     */\n    keyboardDismissMode?: KeyboardDismissMode;\n}> {}\n"],"mappings":""}

package/build/commonjs/ViewPager/ViewPagerWeb.js

@@ -3,53 +3,60 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = ViewPager;
+exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
 
+var _reactNativeReanimated = require("react-native-reanimated");
+
+var _core = require("@fountain-ui/core");
+
 var _utils = require("./utils");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-const styles = _reactNative.StyleSheet.create({
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const styles = _core.StyleSheet.create({
   root: {
     // @ts-ignore
     overflow: 'auto',
     position: 'relative'
-  },
-  none: {
-    display: 'none'
   }
 });
 
-function ViewPager(props) {
+const ViewPager = /*#__PURE__*/(0, _react.forwardRef)(function ViewPager(props, ref) {
   const {
     children,
-    enableVisibleHint = _utils.defaultEnableVisibleHint,
-    enableNeighborPageRerender = _utils.defaultEnableNeighborPageRerender,
-    index,
+    initialPage = _utils.defaultInitialPage,
     loading = _utils.defaultLoading,
     pageComponent = _utils.defaultPageComponent,
     pageForceRerenderKey,
     style
   } = props;
-  const renderer = (0, _utils.usePageRenderer)({
-    enableVisibleHint,
-    enableNeighborPageRerender,
-    index,
-    loading,
-    pageComponent,
-    pageForceRerenderKey
-  });
+  const sharedIndex = (0, _reactNativeReanimated.useSharedValue)(initialPage);
+
+  const setPage = newIndex => {
+    sharedIndex.value = newIndex;
+  };
+
+  (0, _react.useImperativeHandle)(ref, () => ({
+    setPage
+  }), []);
+  const PageComponent = pageComponent;
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: [styles.root, style]
-  }, _react.default.Children.map(renderer(children), (child, i) => /*#__PURE__*/_react.default.cloneElement(child, {
-    isVisible: i === index,
-    style: i !== index ? styles.none : _reactNative.StyleSheet.absoluteFill
+  }, _react.Children.map(children, (child, index) => /*#__PURE__*/_react.default.createElement(PageComponent, {
+    key: index,
+    children: child,
+    index: index,
+    loading: loading,
+    rerenderKey: pageForceRerenderKey,
+    sharedIndex: sharedIndex
   })));
-}
-
-;
+});
+var _default = ViewPager;
+exports.default = _default;
 //# sourceMappingURL=ViewPagerWeb.js.map

package/build/commonjs/ViewPager/ViewPagerWeb.js.map

@@ -1 +1 @@
-{"version":3,"names":["styles","StyleSheet","create","root","overflow","position","none","display","ViewPager","props","children","enableVisibleHint","defaultEnableVisibleHint","enableNeighborPageRerender","defaultEnableNeighborPageRerender","index","loading","defaultLoading","pageComponent","defaultPageComponent","pageForceRerenderKey","style","renderer","usePageRenderer","React","Children","map","child","i","cloneElement","isVisible","absoluteFill"],"sources":["ViewPagerWeb.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport type ViewPagerProps from './ViewPagerProps';\nimport {\n    defaultEnableNeighborPageRerender,\n    defaultEnableVisibleHint,\n    defaultLoading,\n    defaultPageComponent,\n    usePageRenderer,\n} from './utils';\n\nconst styles = StyleSheet.create({\n    root: {\n        // @ts-ignore\n        overflow: 'auto',\n        position: 'relative',\n    },\n    none: { display: 'none' },\n});\n\nexport default function ViewPager(props: ViewPagerProps) {\n    const {\n        children,\n        enableVisibleHint = defaultEnableVisibleHint,\n        enableNeighborPageRerender = defaultEnableNeighborPageRerender,\n        index,\n        loading = defaultLoading,\n        pageComponent = defaultPageComponent,\n        pageForceRerenderKey,\n        style,\n    } = props;\n\n    const renderer = usePageRenderer({\n        enableVisibleHint,\n        enableNeighborPageRerender,\n        index,\n        loading,\n        pageComponent,\n        pageForceRerenderKey,\n    });\n\n    return (\n        <View style={[styles.root, style]}>\n            {React.Children.map(renderer(children), (child, i) =>\n                React.cloneElement(child as React.ReactElement, {\n                    isVisible: i === index,\n                    style: i !== index ? styles.none : StyleSheet.absoluteFill,\n                }),\n            )}\n        </View>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;AAQA,MAAMA,MAAM,GAAGC,uBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACF;IACAC,QAAQ,EAAE,MAFR;IAGFC,QAAQ,EAAE;EAHR,CADuB;EAM7BC,IAAI,EAAE;IAAEC,OAAO,EAAE;EAAX;AANuB,CAAlB,CAAf;;AASe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,QADE;IAEFC,iBAAiB,GAAGC,+BAFlB;IAGFC,0BAA0B,GAAGC,wCAH3B;IAIFC,KAJE;IAKFC,OAAO,GAAGC,qBALR;IAMFC,aAAa,GAAGC,2BANd;IAOFC,oBAPE;IAQFC;EARE,IASFZ,KATJ;EAWA,MAAMa,QAAQ,GAAG,IAAAC,sBAAA,EAAgB;IAC7BZ,iBAD6B;IAE7BE,0BAF6B;IAG7BE,KAH6B;IAI7BC,OAJ6B;IAK7BE,aAL6B;IAM7BE;EAN6B,CAAhB,CAAjB;EASA,oBACI,6BAAC,iBAAD;IAAM,KAAK,EAAE,CAACpB,MAAM,CAACG,IAAR,EAAckB,KAAd;EAAb,GACKG,cAAA,CAAMC,QAAN,CAAeC,GAAf,CAAmBJ,QAAQ,CAACZ,QAAD,CAA3B,EAAuC,CAACiB,KAAD,EAAQC,CAAR,kBACpCJ,cAAA,CAAMK,YAAN,CAAmBF,KAAnB,EAAgD;IAC5CG,SAAS,EAAEF,CAAC,KAAKb,KAD2B;IAE5CM,KAAK,EAAEO,CAAC,KAAKb,KAAN,GAAcf,MAAM,CAACM,IAArB,GAA4BL,uBAAA,CAAW8B;EAFF,CAAhD,CADH,CADL,CADJ;AAUH;;AAAA"}
+{"version":3,"names":["styles","StyleSheet","create","root","overflow","position","ViewPager","forwardRef","props","ref","children","initialPage","defaultInitialPage","loading","defaultLoading","pageComponent","defaultPageComponent","pageForceRerenderKey","style","sharedIndex","useSharedValue","setPage","newIndex","value","useImperativeHandle","PageComponent","Children","map","child","index"],"sources":["ViewPagerWeb.tsx"],"sourcesContent":["import React, { Children, forwardRef, useImperativeHandle } from 'react';\nimport { View } from 'react-native';\nimport { useSharedValue } from 'react-native-reanimated';\nimport { StyleSheet } from '@fountain-ui/core';\nimport type ViewPagerProps from './ViewPagerProps';\nimport type { ViewPagerInstance } from './ViewPagerProps';\nimport { defaultInitialPage, defaultLoading, defaultPageComponent } from './utils';\n\nconst styles = StyleSheet.create({\n    root: {\n        // @ts-ignore\n        overflow: 'auto',\n        position: 'relative',\n    },\n});\n\nconst ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPager(props, ref) {\n    const {\n        children,\n        initialPage = defaultInitialPage,\n        loading = defaultLoading,\n        pageComponent = defaultPageComponent,\n        pageForceRerenderKey,\n        style,\n    } = props;\n\n    const sharedIndex = useSharedValue<number>(initialPage);\n\n    const setPage = (newIndex: number) => {\n        sharedIndex.value = newIndex;\n    };\n\n    useImperativeHandle(\n        ref,\n        () => ({ setPage }),\n        [],\n    );\n\n    const PageComponent = pageComponent;\n\n    return (\n        <View style={[styles.root, style]}>\n            {Children.map(children, (child, index) => (\n                <PageComponent\n                    key={index}\n                    children={child}\n                    index={index}\n                    loading={loading}\n                    rerenderKey={pageForceRerenderKey}\n                    sharedIndex={sharedIndex}\n                />\n            ))}\n        </View>\n    );\n});\n\nexport default ViewPager;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAGA;;;;;;AAEA,MAAMA,MAAM,GAAGC,gBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACF;IACAC,QAAQ,EAAE,MAFR;IAGFC,QAAQ,EAAE;EAHR;AADuB,CAAlB,CAAf;;AAQA,MAAMC,SAAS,gBAAG,IAAAC,iBAAA,EAA8C,SAASD,SAAT,CAAmBE,KAAnB,EAA0BC,GAA1B,EAA+B;EAC3F,MAAM;IACFC,QADE;IAEFC,WAAW,GAAGC,yBAFZ;IAGFC,OAAO,GAAGC,qBAHR;IAIFC,aAAa,GAAGC,2BAJd;IAKFC,oBALE;IAMFC;EANE,IAOFV,KAPJ;EASA,MAAMW,WAAW,GAAG,IAAAC,qCAAA,EAAuBT,WAAvB,CAApB;;EAEA,MAAMU,OAAO,GAAIC,QAAD,IAAsB;IAClCH,WAAW,CAACI,KAAZ,GAAoBD,QAApB;EACH,CAFD;;EAIA,IAAAE,0BAAA,EACIf,GADJ,EAEI,OAAO;IAAEY;EAAF,CAAP,CAFJ,EAGI,EAHJ;EAMA,MAAMI,aAAa,GAAGV,aAAtB;EAEA,oBACI,6BAAC,iBAAD;IAAM,KAAK,EAAE,CAACf,MAAM,CAACG,IAAR,EAAce,KAAd;EAAb,GACKQ,eAAA,CAASC,GAAT,CAAajB,QAAb,EAAuB,CAACkB,KAAD,EAAQC,KAAR,kBACpB,6BAAC,aAAD;IACI,GAAG,EAAEA,KADT;IAEI,QAAQ,EAAED,KAFd;IAGI,KAAK,EAAEC,KAHX;IAII,OAAO,EAAEhB,OAJb;IAKI,WAAW,EAAEI,oBALjB;IAMI,WAAW,EAAEE;EANjB,EADH,CADL,CADJ;AAcH,CAtCiB,CAAlB;eAwCeb,S"}

package/build/commonjs/ViewPager/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './ViewPagerWeb';\nexport type { default as ViewPagerProps } from './ViewPagerProps';"],"mappings":";;;;;;;;;;;;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './ViewPagerWeb';\nexport type { default as ViewPagerProps, ViewPagerInstance } from './ViewPagerProps';\n"],"mappings":";;;;;;;;;;;;AAAA"}

package/build/commonjs/ViewPager/utils.js

@@ -3,54 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.usePageRenderer = exports.defaultPageComponent = exports.defaultLoading = exports.defaultEnableVisibleHint = exports.defaultEnableNeighborPageRerender = void 0;
-
-var _react = _interopRequireDefault(require("react"));
+exports.defaultPageComponent = exports.defaultLoading = exports.defaultInitialPage = void 0;
 
 var _ChildrenMemoizedPage = _interopRequireDefault(require("./ChildrenMemoizedPage"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const defaultEnableVisibleHint = false;
-exports.defaultEnableVisibleHint = defaultEnableVisibleHint;
-const defaultEnableNeighborPageRerender = false;
-exports.defaultEnableNeighborPageRerender = defaultEnableNeighborPageRerender;
+const defaultInitialPage = 0;
+exports.defaultInitialPage = defaultInitialPage;
 const defaultLoading = 'lazy';
 exports.defaultLoading = defaultLoading;
 const defaultPageComponent = _ChildrenMemoizedPage.default;
 exports.defaultPageComponent = defaultPageComponent;
-
-const usePageRenderer = _ref => {
-  let {
-    enableVisibleHint,
-    index: currentIndex,
-    loading,
-    pageComponent: PageComponent,
-    pageForceRerenderKey,
-    enableNeighborPageRerender
-  } = _ref;
-
-  const pagesStateRef = _react.default.useRef([]);
-
-  pagesStateRef.current[currentIndex] = { ...pagesStateRef.current[currentIndex],
-    visited: true
-  };
-  return children => _react.default.Children.map(children, (child, index) => {
-    var _pagesStateRef$curren;
-
-    const visited = ((_pagesStateRef$curren = pagesStateRef.current[index]) === null || _pagesStateRef$curren === void 0 ? void 0 : _pagesStateRef$curren.visited) ?? false;
-    const content = loading === 'eager' || visited ? child : null;
-    const isVisible = enableVisibleHint ? index === currentIndex : false;
-    const isNeighborIndex = index === currentIndex - 1 || index === currentIndex + 1;
-    return /*#__PURE__*/_react.default.createElement(PageComponent, {
-      key: index,
-      children: content,
-      isNeighbor: enableNeighborPageRerender && isNeighborIndex,
-      isVisible: isVisible,
-      rerenderKey: pageForceRerenderKey
-    });
-  });
-};
-
-exports.usePageRenderer = usePageRenderer;
 //# sourceMappingURL=utils.js.map

package/build/commonjs/ViewPager/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultEnableVisibleHint","defaultEnableNeighborPageRerender","defaultLoading","defaultPageComponent","ChildrenMemoizedPage","usePageRenderer","enableVisibleHint","index","currentIndex","loading","pageComponent","PageComponent","pageForceRerenderKey","enableNeighborPageRerender","pagesStateRef","React","useRef","current","visited","children","Children","map","child","content","isVisible","isNeighborIndex"],"sources":["utils.tsx"],"sourcesContent":["import React from 'react';\nimport ViewPagerProps, { Loading, PageComponent } from './ViewPagerProps';\nimport ChildrenMemoizedPage from './ChildrenMemoizedPage';\n\nexport interface PageState {\n    visited?: boolean;\n}\n\nexport interface PageRenderOption {\n    enableVisibleHint: boolean;\n    enableNeighborPageRerender: boolean;\n    index: number;\n    loading: Loading;\n    pageComponent: PageComponent;\n    pageForceRerenderKey?: any;\n}\n\nexport interface PageRenderer {\n    (children: ViewPagerProps['children']): React.ReactNode;\n}\n\nexport const defaultEnableVisibleHint: boolean = false;\n\nexport const defaultEnableNeighborPageRerender: boolean = false;\n\nexport const defaultLoading: Loading = 'lazy';\n\nexport const defaultPageComponent: PageComponent = ChildrenMemoizedPage;\n\nexport const usePageRenderer = ({\n    enableVisibleHint,\n    index: currentIndex,\n    loading,\n    pageComponent: PageComponent,\n    pageForceRerenderKey,\n    enableNeighborPageRerender,\n}: PageRenderOption): PageRenderer => {\n    const pagesStateRef = React.useRef<Array<PageState>>([]);\n\n    pagesStateRef.current[currentIndex] = {\n        ...pagesStateRef.current[currentIndex],\n        visited: true,\n    };\n\n    return (children => React.Children.map(children, (child, index) => {\n        const visited = pagesStateRef.current[index]?.visited ?? false;\n        const content = (loading === 'eager' || visited) ? child : null;\n\n        const isVisible = enableVisibleHint ? (index === currentIndex) : false;\n        const isNeighborIndex = index === currentIndex - 1 || index === currentIndex + 1;\n\n        return (\n            <PageComponent\n                key={index}\n                children={content}\n                isNeighbor={enableNeighborPageRerender && isNeighborIndex}\n                isVisible={isVisible}\n                rerenderKey={pageForceRerenderKey}\n            />\n        );\n    }));\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;;;AAmBO,MAAMA,wBAAiC,GAAG,KAA1C;;AAEA,MAAMC,iCAA0C,GAAG,KAAnD;;AAEA,MAAMC,cAAuB,GAAG,MAAhC;;AAEA,MAAMC,oBAAmC,GAAGC,6BAA5C;;;AAEA,MAAMC,eAAe,GAAG,QAOO;EAAA,IAPN;IAC5BC,iBAD4B;IAE5BC,KAAK,EAAEC,YAFqB;IAG5BC,OAH4B;IAI5BC,aAAa,EAAEC,aAJa;IAK5BC,oBAL4B;IAM5BC;EAN4B,CAOM;;EAClC,MAAMC,aAAa,GAAGC,cAAA,CAAMC,MAAN,CAA+B,EAA/B,CAAtB;;EAEAF,aAAa,CAACG,OAAd,CAAsBT,YAAtB,IAAsC,EAClC,GAAGM,aAAa,CAACG,OAAd,CAAsBT,YAAtB,CAD+B;IAElCU,OAAO,EAAE;EAFyB,CAAtC;EAKA,OAAQC,QAAQ,IAAIJ,cAAA,CAAMK,QAAN,CAAeC,GAAf,CAAmBF,QAAnB,EAA6B,CAACG,KAAD,EAAQf,KAAR,KAAkB;IAAA;;IAC/D,MAAMW,OAAO,GAAG,0BAAAJ,aAAa,CAACG,OAAd,CAAsBV,KAAtB,iFAA8BW,OAA9B,KAAyC,KAAzD;IACA,MAAMK,OAAO,GAAId,OAAO,KAAK,OAAZ,IAAuBS,OAAxB,GAAmCI,KAAnC,GAA2C,IAA3D;IAEA,MAAME,SAAS,GAAGlB,iBAAiB,GAAIC,KAAK,KAAKC,YAAd,GAA8B,KAAjE;IACA,MAAMiB,eAAe,GAAGlB,KAAK,KAAKC,YAAY,GAAG,CAAzB,IAA8BD,KAAK,KAAKC,YAAY,GAAG,CAA/E;IAEA,oBACI,6BAAC,aAAD;MACI,GAAG,EAAED,KADT;MAEI,QAAQ,EAAEgB,OAFd;MAGI,UAAU,EAAEV,0BAA0B,IAAIY,eAH9C;MAII,SAAS,EAAED,SAJf;MAKI,WAAW,EAAEZ;IALjB,EADJ;EASH,CAhBmB,CAApB;AAiBH,CAhCM"}
+{"version":3,"names":["defaultInitialPage","defaultLoading","defaultPageComponent","ChildrenMemoizedPage"],"sources":["utils.tsx"],"sourcesContent":["import React from 'react';\nimport { Loading, PageComponent } from './ViewPagerProps';\nimport ChildrenMemoizedPage from './ChildrenMemoizedPage';\n\nexport const defaultInitialPage: number = 0;\n\nexport const defaultLoading: Loading = 'lazy';\n\nexport const defaultPageComponent: PageComponent = ChildrenMemoizedPage;\n"],"mappings":";;;;;;;AAEA;;;;AAEO,MAAMA,kBAA0B,GAAG,CAAnC;;AAEA,MAAMC,cAAuB,GAAG,MAAhC;;AAEA,MAAMC,oBAAmC,GAAGC,6BAA5C"}

package/build/module/ViewPager/ChildrenMemoizedPage.js

@@ -1,37 +1,99 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-import React from 'react';
-import { View } from 'react-native';
+import React, { memo, useState } from 'react';
+import { Platform, View } from 'react-native';
+import { runOnJS, useAnimatedReaction } from 'react-native-reanimated';
+import { StyleSheet } from '@fountain-ui/core';
+const OFFSCREEN_RERENDER_LIMIT = 1;
+const styles = StyleSheet.create({
+  none: {
+    display: 'none'
+  }
+});
 
-const Page = function Page(props) {
+function Page(props) {
   const {
-    isVisible,
-    ...otherProps
+    index,
+    children,
+    loading,
+    sharedIndex
   } = props;
-  return /*#__PURE__*/React.createElement(View, _extends({
-    collapsable: false
-  }, otherProps));
-};
 
-export default /*#__PURE__*/React.memo(Page, (prevProps, nextProps) => {
-  if (prevProps.children === null && nextProps.children === null) {
-    return true;
-  } // isVisible is an important condition for determining memos on the web.
-  // Reference ViewPagerWeb's return.
+  const assumeInitialPageState = () => {
+    const activeIndex = sharedIndex.value;
+    const active = index === activeIndex;
 
+    if (Platform.OS === 'web') {
+      return {
+        active,
+        visited: active
+      };
+    }
 
-  if (prevProps.isVisible !== nextProps.isVisible) {
-    return false;
-  }
+    if (loading === 'eager') {
+      return {
+        active,
+        visited: true
+      };
+    }
 
-  if (nextProps.isVisible || nextProps.isNeighbor) {
-    return false;
-  }
+    const visited = index >= activeIndex - OFFSCREEN_RERENDER_LIMIT && index <= activeIndex + OFFSCREEN_RERENDER_LIMIT;
+    return {
+      active,
+      visited
+    };
+  };
+
+  const [pageState, setPageState] = useState(assumeInitialPageState);
+  const content = pageState.visited ? children : null;
+
+  const updatePageState = (active, neighbor) => {
+    setPageState(prevState => {
+      if (prevState.active !== active) {
+        return {
+          active,
+          visited: active || prevState.visited
+        };
+      }
+
+      if (neighbor && !prevState.visited) {
+        return { ...prevState,
+          visited: true
+        };
+      }
+
+      return prevState;
+    });
+  };
+
+  useAnimatedReaction(() => {
+    const activeIndex = sharedIndex.value;
+    const willVisible = index >= activeIndex - OFFSCREEN_RERENDER_LIMIT && index <= activeIndex + OFFSCREEN_RERENDER_LIMIT;
+    const willActive = index === activeIndex;
+    const willNeighbor = Platform.OS === 'web' ? false : willVisible && !willActive;
+    return {
+      willActive,
+      willNeighbor
+    };
+  }, (nextState, prevState) => {
+    const activeStateChanged = nextState.willActive !== (prevState === null || prevState === void 0 ? void 0 : prevState.willActive);
+    const willNewNeighbor = nextState.willNeighbor && !(prevState !== null && prevState !== void 0 && prevState.willNeighbor);
+
+    if (activeStateChanged || willNewNeighbor) {
+      runOnJS(updatePageState)(nextState.willActive, nextState.willNeighbor);
+    }
+  }, [index]);
+  const style = Platform.OS === 'web' ? pageState.active ? StyleSheet.absoluteFill : styles.none : undefined;
+  return /*#__PURE__*/React.createElement(View, {
+    children: content,
+    collapsable: false,
+    style: style
+  });
+}
 
+export default /*#__PURE__*/memo(Page, (prevProps, nextProps) => {
   if (prevProps.rerenderKey !== nextProps.rerenderKey) {
     return false;
   }
 
-  return prevProps.children !== null && nextProps.children !== null;
+  return prevProps.index !== nextProps.index;
 });
 //# sourceMappingURL=ChildrenMemoizedPage.js.map