@fountain-ui/lab 2.0.0-beta.5 → 2.0.0-beta.50

package/build/commonjs/hooks/useDeferredExecutor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useDeferredExecutor","isMounted","useIsMounted","timeoutIdRef","useRef","cancel","useCallback","current","clearTimeout","useEffect","execute","runnable","delay","Number","isFinite","setTimeout"],"sources":["useDeferredExecutor.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport useIsMounted from './useIsMounted';\n\nexport interface Runnable {\n    (): void;\n}\n\nexport interface DeferredExecute {\n    (runnable: Runnable, delay?: number): void;\n}\n\nexport interface DeferredExecutor {\n    cancel: () => void;\n    execute: DeferredExecute;\n}\n\nexport default function useDeferredExecutor(): DeferredExecutor {\n    const isMounted = useIsMounted();\n    const timeoutIdRef = useRef<NodeJS.Timer | null>(null);\n\n    const cancel = useCallback(() => {\n        if (timeoutIdRef.current) {\n            clearTimeout(timeoutIdRef.current);\n        }\n    }, []);\n\n    useEffect(() => {\n        return cancel;\n    }, []);\n\n    const execute = useCallback<DeferredExecute>((runnable, delay) => {\n        if (!isMounted()) {\n            return;\n        }\n\n        cancel();\n\n        if (Number.isFinite(delay)) {\n            timeoutIdRef.current = setTimeout(() => runnable(), delay);\n        } else {\n            runnable();\n        }\n    }, []);\n\n    return { cancel, execute };\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;;;AAee,SAASA,mBAAT,GAAiD;EAC5D,MAAMC,SAAS,GAAG,IAAAC,qBAAA,GAAlB;EACA,MAAMC,YAAY,GAAG,IAAAC,aAAA,EAA4B,IAA5B,CAArB;EAEA,MAAMC,MAAM,GAAG,IAAAC,kBAAA,EAAY,MAAM;IAC7B,IAAIH,YAAY,CAACI,OAAjB,EAA0B;MACtBC,YAAY,CAACL,YAAY,CAACI,OAAd,CAAZ;IACH;EACJ,CAJc,EAIZ,EAJY,CAAf;EAMA,IAAAE,gBAAA,EAAU,MAAM;IACZ,OAAOJ,MAAP;EACH,CAFD,EAEG,EAFH;EAIA,MAAMK,OAAO,GAAG,IAAAJ,kBAAA,EAA6B,CAACK,QAAD,EAAWC,KAAX,KAAqB;IAC9D,IAAI,CAACX,SAAS,EAAd,EAAkB;MACd;IACH;;IAEDI,MAAM;;IAEN,IAAIQ,MAAM,CAACC,QAAP,CAAgBF,KAAhB,CAAJ,EAA4B;MACxBT,YAAY,CAACI,OAAb,GAAuBQ,UAAU,CAAC,MAAMJ,QAAQ,EAAf,EAAmBC,KAAnB,CAAjC;IACH,CAFD,MAEO;MACHD,QAAQ;IACX;EACJ,CAZe,EAYb,EAZa,CAAhB;EAcA,OAAO;IAAEN,MAAF;IAAUK;EAAV,CAAP;AACH;;AAAA"}

package/build/commonjs/hooks/useElevationStyle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useElevationStyle.ts"],"names":["useElevationStyle","elevation","theme","shadow","Platform","select","android","ios","web","boxShadow"],"mappings":";;;;;;;AAAA;;AAEA;;AAEe,SAASA,iBAAT,CAA2BC,SAA3B,EAAiD;AAC5D,QAAMC,KAAK,GAAG,uBAAd;AACA,QAAMC,MAAM,GAAGD,KAAK,CAACC,MAAN,CAAaF,SAAb,CAAf;AAEA,SAAOG,sBAASC,MAAT,CAAqB;AACxBC,IAAAA,OAAO,EAAEH,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAEF,SADO;AAExBM,IAAAA,GAAG,EAAEJ,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAEA,MAFW;AAGxBK,IAAAA,GAAG,EAAEL,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAEM;AAHW,GAArB,CAAP;AAKH;;AAAA","sourcesContent":["import { Platform } from 'react-native';\nimport type { Elevation } from '@fountain-ui/styles';\nimport { useTheme } from '@fountain-ui/styles';\n\nexport default function useElevationStyle(elevation: Elevation) {\n    const theme = useTheme();\n    const shadow = theme.shadow[elevation];\n\n    return Platform.select<any>({\n        android: shadow?.elevation,\n        ios: shadow?.shadow,\n        web: shadow?.boxShadow,\n    });\n};\n"]}
+{"version":3,"names":["useElevationStyle","elevation","theme","useTheme","shadow","Platform","select","android","ios","web","boxShadow"],"sources":["useElevationStyle.ts"],"sourcesContent":["import { Platform } from 'react-native';\nimport type { Elevation } from '@fountain-ui/styles';\nimport { useTheme } from '@fountain-ui/styles';\n\nexport default function useElevationStyle(elevation: Elevation) {\n    const theme = useTheme();\n    const shadow = theme.shadow[elevation];\n\n    return Platform.select<any>({\n        android: shadow?.elevation,\n        ios: shadow?.shadow,\n        web: shadow?.boxShadow,\n    });\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAEe,SAASA,iBAAT,CAA2BC,SAA3B,EAAiD;EAC5D,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EACA,MAAMC,MAAM,GAAGF,KAAK,CAACE,MAAN,CAAaH,SAAb,CAAf;EAEA,OAAOI,qBAAA,CAASC,MAAT,CAAqB;IACxBC,OAAO,EAAEH,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAEH,SADO;IAExBO,GAAG,EAAEJ,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAEA,MAFW;IAGxBK,GAAG,EAAEL,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAEM;EAHW,CAArB,CAAP;AAKH;;AAAA"}

package/build/commonjs/hooks/useHeight.js

@@ -5,19 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = useHeight;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanimated"));
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 useHeight() {
+  let initialHeight = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
 
-function useHeight(initialHeight = 0) {
   const [height, setHeight] = _react.default.useState(initialHeight);
 
-  const onLayout = _reactNativeReanimated.default.useWorkletCallback(e => {
+  const onLayout = (0, _react.useCallback)(e => {
     setHeight(e.nativeEvent.layout.height);
   }, []);
-
   return [height, onLayout];
 }
 

package/build/commonjs/hooks/useHeight.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useHeight.ts"],"names":["useHeight","initialHeight","height","setHeight","React","useState","onLayout","Animated","useWorkletCallback","e","nativeEvent","layout"],"mappings":";;;;;;;AAAA;;AAEA;;;;AAIe,SAASA,SAAT,CAAmBC,aAAa,GAAG,CAAnC,EAAkE;AAC7E,QAAM,CAACC,MAAD,EAASC,SAAT,IAAsBC,eAAMC,QAAN,CAAuBJ,aAAvB,CAA5B;;AAEA,QAAMK,QAAQ,GAAGC,+BAASC,kBAAT,CAA6BC,CAAD,IAAO;AAChDN,IAAAA,SAAS,CAACM,CAAC,CAACC,WAAF,CAAcC,MAAd,CAAqBT,MAAtB,CAAT;AACH,GAFgB,EAEd,EAFc,CAAjB;;AAIA,SAAO,CAACA,MAAD,EAASI,QAAT,CAAP;AACH;;AAAA","sourcesContent":["import React from 'react';\nimport { ViewProps } from 'react-native';\nimport Animated from 'react-native-reanimated';\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport default function useHeight(initialHeight = 0): [number, OnLayoutCallback] {\n    const [height, setHeight] = React.useState<number>(initialHeight);\n\n    const onLayout = Animated.useWorkletCallback((e) => {\n        setHeight(e.nativeEvent.layout.height);\n    }, []);\n\n    return [height, onLayout];\n};\n"]}
+{"version":3,"names":["useHeight","initialHeight","height","setHeight","React","useState","onLayout","useCallback","e","nativeEvent","layout"],"sources":["useHeight.ts"],"sourcesContent":["import React, { useCallback } from 'react';\nimport { LayoutChangeEvent, ViewProps } from 'react-native';\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport default function useHeight(initialHeight = 0): [number, OnLayoutCallback] {\n    const [height, setHeight] = React.useState<number>(initialHeight);\n\n    const onLayout = useCallback((e: LayoutChangeEvent) => {\n        setHeight(e.nativeEvent.layout.height);\n    }, []);\n\n    return [height, onLayout];\n};\n"],"mappings":";;;;;;;AAAA;;;;;;AAKe,SAASA,SAAT,GAAkE;EAAA,IAA/CC,aAA+C,uEAA/B,CAA+B;;EAC7E,MAAM,CAACC,MAAD,EAASC,SAAT,IAAsBC,cAAA,CAAMC,QAAN,CAAuBJ,aAAvB,CAA5B;;EAEA,MAAMK,QAAQ,GAAG,IAAAC,kBAAA,EAAaC,CAAD,IAA0B;IACnDL,SAAS,CAACK,CAAC,CAACC,WAAF,CAAcC,MAAd,CAAqBR,MAAtB,CAAT;EACH,CAFgB,EAEd,EAFc,CAAjB;EAIA,OAAO,CAACA,MAAD,EAASI,QAAT,CAAP;AACH;;AAAA"}

package/build/commonjs/hooks/useIsMounted.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useIsMounted;
+
+var _react = require("react");
+
+function useIsMounted() {
+  const mountedRef = (0, _react.useRef)(false);
+  (0, _react.useEffect)(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  return (0, _react.useCallback)(() => mountedRef.current, []);
+}
+
+;
+//# sourceMappingURL=useIsMounted.js.map

package/build/commonjs/hooks/useIsMounted.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useIsMounted","mountedRef","useRef","useEffect","current","useCallback"],"sources":["useIsMounted.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\n\nexport interface UseIsMounted {\n    (): boolean;\n}\n\nexport default function useIsMounted(): UseIsMounted {\n    const mountedRef = useRef<boolean>(false);\n\n    useEffect(() => {\n        mountedRef.current = true;\n\n        return () => {\n            mountedRef.current = false;\n        };\n    }, []);\n\n    return useCallback(() => mountedRef.current, []);\n};\n"],"mappings":";;;;;;;AAAA;;AAMe,SAASA,YAAT,GAAsC;EACjD,MAAMC,UAAU,GAAG,IAAAC,aAAA,EAAgB,KAAhB,CAAnB;EAEA,IAAAC,gBAAA,EAAU,MAAM;IACZF,UAAU,CAACG,OAAX,GAAqB,IAArB;IAEA,OAAO,MAAM;MACTH,UAAU,CAACG,OAAX,GAAqB,KAArB;IACH,CAFD;EAGH,CAND,EAMG,EANH;EAQA,OAAO,IAAAC,kBAAA,EAAY,MAAMJ,UAAU,CAACG,OAA7B,EAAsC,EAAtC,CAAP;AACH;;AAAA"}

package/build/commonjs/hooks/useUnstableCollapsibleAppBar.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = useUnstableCollapsibleAppBar;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _reactNative = require("react-native");
 
-var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanimated"));
+var _reactNativeReanimated = require("react-native-reanimated");
 
 var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
 
@@ -21,12 +21,7 @@ var _useHeight = _interopRequireDefault(require("./useHeight"));
 
 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); }
-
-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 defaultOptions = {
-  translucent: false,
   shouldTranslateYReset: false
 };
 const ANIMATION_DURATION_MILLIS = 100;
@@ -39,9 +34,9 @@ function useLargerValueOfLastTwoValues(value) {
   return Math.max(...refLatestTwoValues.current);
 }
 
-function useUnstableCollapsibleAppBar(userOptions = defaultOptions) {
+function useUnstableCollapsibleAppBar() {
+  let userOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultOptions;
   const {
-    translucent,
     shouldTranslateYReset
   } = { ...defaultOptions,
     ...userOptions
@@ -51,53 +46,57 @@ function useUnstableCollapsibleAppBar(userOptions = defaultOptions) {
   const [appBarHeight, onAppBarLayout] = (0, _useHeight.default)();
   const appBarMaxHeight = useLargerValueOfLastTwoValues(appBarHeight);
   const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = (0, _useHeight.default)();
-
-  const maxTranslateY = _reactNativeReanimated.default.useDerivedValue(() => -collapsibleToolbarHeight);
-
-  const translateY = _reactNativeReanimated.default.useSharedValue(0);
-
-  const lastTranslateY = _reactNativeReanimated.default.useSharedValue(0);
-
-  const lastOffsetY = _reactNativeReanimated.default.useSharedValue(0);
-
-  const prevOffsetY = _reactNativeReanimated.default.useSharedValue(0);
-
-  const overlapped = _reactNativeReanimated.default.useSharedValue(false);
-
-  const vectorY = _reactNativeReanimated.default.useSharedValue(0);
-
+  const maxTranslateY = (0, _reactNativeReanimated.useDerivedValue)(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);
+  const translateY = (0, _reactNativeReanimated.useSharedValue)(0);
+  const lastTranslateY = (0, _reactNativeReanimated.useSharedValue)(0);
+  const lastOffsetY = (0, _reactNativeReanimated.useSharedValue)(0);
+  const prevOffsetY = (0, _reactNativeReanimated.useSharedValue)(0);
+  const overlapped = (0, _reactNativeReanimated.useSharedValue)(false);
+  const vectorY = (0, _reactNativeReanimated.useSharedValue)(0);
   const elevationStyle = (0, _useElevationStyle.default)(4);
+  const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const transform = [{
+      translateY: translateY.value
+    }];
+
+    if (_reactNative.Platform.OS === 'web') {
+      return {
+        transform,
+        boxShadow: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.boxShadow : 0
+      };
+    }
+
+    if (_reactNative.Platform.OS === 'android') {
+      return {
+        transform,
+        elevation: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.elevation : 0
+      };
+    }
 
-  const animatedStyle = _reactNativeReanimated.default.useAnimatedStyle(() => {
-    return _reactNative.Platform.OS === 'web' ? {
-      transform: [{
-        translateY: translateY.value
-      }],
-      boxShadow: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.boxShadow : 0
-    } : {
-      transform: [{
-        translateY: translateY.value
-      }],
-      elevation: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.elevation : 0,
-      shadowColor: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowColor,
-      shadowOffset: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowOffset,
-      shadowRadius: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowRadius,
-      shadowOpacity: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowOpacity : 0
-    };
-  });
-
-  const indexRef = _react.default.useRef(0);
-
-  const offsetsRef = _react.default.useRef([]);
-
-  const onScrollViewChanged = nextIndex => {
-    var _offsetsRef$current$n;
+    if (_reactNative.Platform.OS === 'ios') {
+      return {
+        transform,
+        shadowColor: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowColor,
+        shadowOffset: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowOffset,
+        shadowRadius: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowRadius,
+        shadowOpacity: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowOpacity : 0
+      };
+    }
 
+    return {};
+  }, [
+    /**
+     * FIXME: Consider add `elevationStyle` to dependencies.
+     */
+  ]);
+  const indexRef = (0, _react.useRef)(0);
+  const offsetsRef = (0, _react.useRef)([]);
+  const onScrollViewChanged = (0, _react.useCallback)(nextIndex => {
     const prevIndex = indexRef.current;
 
     if (prevIndex === nextIndex) {
       if (shouldTranslateYReset) {
-        translateY.value = _reactNativeReanimated.default.withTiming(0, {
+        translateY.value = (0, _reactNativeReanimated.withTiming)(0, {
           duration: ANIMATION_DURATION_MILLIS
         });
         vectorY.value = 0;
@@ -109,21 +108,20 @@ function useUnstableCollapsibleAppBar(userOptions = defaultOptions) {
     }
 
     offsetsRef.current[prevIndex] = lastOffsetY.value;
-    const savedOffsetY = (_offsetsRef$current$n = offsetsRef.current[nextIndex]) !== null && _offsetsRef$current$n !== void 0 ? _offsetsRef$current$n : 0;
+    const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;
     lastOffsetY.value = savedOffsetY;
     indexRef.current = nextIndex; // Determine whether to overlap every time index is changed.
 
     overlapped.value = savedOffsetY > 0; // If next ScrollView's offset is too short, expand app bar.
 
     if (translateY.value < 0 && savedOffsetY < appBarHeight) {
-      translateY.value = _reactNativeReanimated.default.withTiming(0, {
+      translateY.value = (0, _reactNativeReanimated.withTiming)(0, {
         duration: ANIMATION_DURATION_MILLIS
       });
       vectorY.value = 0;
     }
-  };
-
-  const scrollHandler = _reactNativeReanimated.default.useAnimatedScrollHandler({
+  }, [appBarHeight]);
+  const scrollHandler = (0, _reactNativeReanimated.useAnimatedScrollHandler)({
     onBeginDrag: () => {
       lastTranslateY.value = translateY.value;
     },
@@ -145,13 +143,13 @@ function useUnstableCollapsibleAppBar(userOptions = defaultOptions) {
       } else {
         if (offsetY > -maxTy) {
           if (ty === 0) {
-            translateY.value = _reactNativeReanimated.default.withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {
+            translateY.value = (0, _reactNativeReanimated.withTiming)(Math.min(Math.max(-offsetY, maxTy), 0), {
               duration: ANIMATION_DURATION_MILLIS
             });
           }
         } else {
           if (ty === maxTy) {
-            translateY.value = _reactNativeReanimated.default.withTiming(0, {
+            translateY.value = (0, _reactNativeReanimated.withTiming)(0, {
               duration: ANIMATION_DURATION_MILLIS
             });
           }
@@ -177,16 +175,15 @@ function useUnstableCollapsibleAppBar(userOptions = defaultOptions) {
       const threshold = maxTy * 0.5;
       const nextTranslateY = ty > threshold || offsetY < appBarHeight ? 0 : maxTy;
       overlapped.value = offsetY + nextTranslateY > 0;
-      translateY.value = _reactNativeReanimated.default.withTiming(nextTranslateY, {
+      translateY.value = (0, _reactNativeReanimated.withTiming)(nextTranslateY, {
         duration: ANIMATION_DURATION_MILLIS
       });
     }
-  });
-
+  }, [appBarHeight]);
   const hasCollapsible = collapsibleToolbarHeight > 0;
-  const appBarStyle = [animatedStyle, translucent ? {
+  const appBarStyle = [animatedStyle, {
     paddingTop: safeAreaInsets.top
-  } : undefined, hasCollapsible ? styles.floating : undefined];
+  }, hasCollapsible ? styles.floating : undefined];
   return {
     appBarStyle,
     vectorY,

package/build/commonjs/hooks/useUnstableCollapsibleAppBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useUnstableCollapsibleAppBar.ts"],"names":["defaultOptions","translucent","shouldTranslateYReset","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","Platform","OS","useLargerValueOfLastTwoValues","value","refLatestTwoValues","current","shift","push","Math","max","useUnstableCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","appBarMaxHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","Animated","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","prevOffsetY","overlapped","vectorY","elevationStyle","animatedStyle","useAnimatedStyle","transform","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","React","useRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","withTiming","duration","savedOffsetY","scrollHandler","useAnimatedScrollHandler","onBeginDrag","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","deltaY","dy","min","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","undefined","floating","scrollContentInsets"],"mappings":"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","sourcesContent":["import React, { useRef } from 'react';\nimport { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport Animated from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport useAppbarStyles from './useAppbarStyles';\nimport useElevationStyle from './useElevationStyle';\nimport useHeight from './useHeight';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n    top?: number;\n    bottom?: number;\n    left?: number;\n    right?: number;\n}\n\nexport interface Options {\n    translucent?: boolean;\n    shouldTranslateYReset?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n    appBarStyle: ViewStyleProp;\n    vectorY: Animated.SharedValue<number>;\n    onAppBarLayout: OnLayoutCallback;\n    onCollapsibleToolbarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    onScrollViewChanged: (index: number) => void;\n    scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n    translucent: false,\n    shouldTranslateYReset: false,\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\n\nfunction useLargerValueOfLastTwoValues(value: number) {\n    const refLatestTwoValues = useRef([0, 0]);\n\n    refLatestTwoValues.current.shift();\n    refLatestTwoValues.current.push(value);\n\n    return Math.max(...refLatestTwoValues.current);\n}\n\n\nexport default function useUnstableCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n    const {\n        translucent,\n        shouldTranslateYReset,\n    }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n    const appBarMaxHeight = useLargerValueOfLastTwoValues(appBarHeight);\n    const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n    const maxTranslateY = Animated.useDerivedValue(() => -collapsibleToolbarHeight);\n\n    const translateY = Animated.useSharedValue<number>(0);\n    const lastTranslateY = Animated.useSharedValue<number>(0);\n    const lastOffsetY = Animated.useSharedValue<number>(0);\n    const prevOffsetY = Animated.useSharedValue<number>(0);\n    const overlapped = Animated.useSharedValue<boolean>(false);\n    const vectorY = Animated.useSharedValue<number>(0);\n\n    const elevationStyle = useElevationStyle(4);\n    const animatedStyle = Animated.useAnimatedStyle(() => {\n        return Platform.OS === 'web' ? ({\n            transform: [{ translateY: translateY.value }],\n            boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n        }) : ({\n            transform: [{ translateY: translateY.value }],\n            elevation: overlapped.value ? elevationStyle?.elevation : 0,\n            shadowColor: elevationStyle?.shadowColor,\n            shadowOffset: elevationStyle?.shadowOffset,\n            shadowRadius: elevationStyle?.shadowRadius,\n            shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n        });\n    });\n\n    const indexRef = React.useRef<number>(0);\n    const offsetsRef = React.useRef<Array<number>>([]);\n\n    const onScrollViewChanged = (nextIndex: number) => {\n        const prevIndex = indexRef.current;\n        if (prevIndex === nextIndex) {\n            if (shouldTranslateYReset) {\n                translateY.value = Animated.withTiming(0, {\n                    duration: ANIMATION_DURATION_MILLIS,\n                });\n\n                vectorY.value = 0;\n                offsetsRef.current = [];\n                overlapped.value = false;\n            }\n\n            return;\n        }\n\n        offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n        const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n        lastOffsetY.value = savedOffsetY;\n\n        indexRef.current = nextIndex;\n\n        // Determine whether to overlap every time index is changed.\n        overlapped.value = savedOffsetY > 0;\n\n        // If next ScrollView's offset is too short, expand app bar.\n        if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n            translateY.value = Animated.withTiming(0, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n\n            vectorY.value = 0;\n        }\n    };\n\n    const scrollHandler = Animated.useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onMomentumBegin: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            const deltaY = offsetY - prevOffsetY.value;\n            vectorY.value = (vectorY.value * deltaY >= 0 && offsetY > 0) ? vectorY.value + deltaY : deltaY;\n            prevOffsetY.value = offsetY;\n\n            if (SUPPORTS_DRAG_DETECTION) {\n                const dy = offsetY - lastOffsetY.value;\n\n                translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n                overlapped.value = offsetY + translateY.value > 0;\n            } else {\n                if (offsetY > -maxTy) {\n                    if (ty === 0) {\n                        translateY.value = Animated.withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                } else {\n                    if (ty === maxTy) {\n                        translateY.value = Animated.withTiming(0, {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                }\n\n                overlapped.value = offsetY > 0;\n\n                lastOffsetY.value = offsetY;\n            }\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            lastOffsetY.value = offsetY;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            // If toolbar is already positioned on edge, do nothing.\n            if (ty <= maxTy || ty >= 0) {\n                return;\n            }\n\n            const threshold = maxTy * 0.5;\n\n            const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n            overlapped.value = offsetY + nextTranslateY > 0;\n\n            translateY.value = Animated.withTiming(nextTranslateY, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        },\n    });\n\n    const hasCollapsible = collapsibleToolbarHeight > 0;\n\n    const appBarStyle = [\n        animatedStyle,\n        translucent ? { paddingTop: safeAreaInsets.top } : undefined,\n        hasCollapsible ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        vectorY,\n        onAppBarLayout,\n        onCollapsibleToolbarLayout,\n        onScroll: scrollHandler,\n        onScrollViewChanged,\n        scrollContentInsets: { top: hasCollapsible ? appBarMaxHeight : 0 },\n    };\n};\n"]}
+{"version":3,"names":["defaultOptions","shouldTranslateYReset","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","Platform","OS","useLargerValueOfLastTwoValues","value","refLatestTwoValues","useRef","current","shift","push","Math","max","useUnstableCollapsibleAppBar","userOptions","styles","useAppbarStyles","safeAreaInsets","useSafeAreaInsets","appBarHeight","onAppBarLayout","useHeight","appBarMaxHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","prevOffsetY","overlapped","vectorY","elevationStyle","useElevationStyle","animatedStyle","useAnimatedStyle","transform","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","offsetsRef","onScrollViewChanged","useCallback","nextIndex","prevIndex","withTiming","duration","savedOffsetY","scrollHandler","useAnimatedScrollHandler","onBeginDrag","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","deltaY","dy","min","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"sources":["useUnstableCollapsibleAppBar.ts"],"sourcesContent":["import { useCallback, useRef } from 'react';\nimport { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport {\n    useAnimatedScrollHandler,\n    useAnimatedStyle,\n    useDerivedValue,\n    useSharedValue,\n    withTiming,\n} from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport useAppbarStyles from './useAppbarStyles';\nimport useElevationStyle from './useElevationStyle';\nimport useHeight from './useHeight';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n    top?: number;\n    bottom?: number;\n    left?: number;\n    right?: number;\n}\n\nexport interface Options {\n    shouldTranslateYReset?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n    appBarStyle: ViewStyleProp;\n    vectorY: SharedValue<number>;\n    onAppBarLayout: OnLayoutCallback;\n    onCollapsibleToolbarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    onScrollViewChanged: (index: number) => void;\n    scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n    shouldTranslateYReset: false,\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nfunction useLargerValueOfLastTwoValues(value: number) {\n    const refLatestTwoValues = useRef([0, 0]);\n\n    refLatestTwoValues.current.shift();\n    refLatestTwoValues.current.push(value);\n\n    return Math.max(...refLatestTwoValues.current);\n}\n\nexport default function useUnstableCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n    const { shouldTranslateYReset }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n    const appBarMaxHeight = useLargerValueOfLastTwoValues(appBarHeight);\n    const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n    const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);\n\n    const translateY = useSharedValue<number>(0);\n    const lastTranslateY = useSharedValue<number>(0);\n    const lastOffsetY = useSharedValue<number>(0);\n    const prevOffsetY = useSharedValue<number>(0);\n    const overlapped = useSharedValue<boolean>(false);\n    const vectorY = useSharedValue<number>(0);\n\n    const elevationStyle = useElevationStyle(4);\n    const animatedStyle = useAnimatedStyle(() => {\n        const transform = [{ translateY: translateY.value }];\n\n        if (Platform.OS === 'web') {\n            return {\n                transform,\n                boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n            };\n        }\n        if (Platform.OS === 'android') {\n            return {\n                transform,\n                elevation: overlapped.value ? elevationStyle?.elevation : 0,\n            };\n        }\n        if (Platform.OS === 'ios') {\n            return {\n                transform,\n                shadowColor: elevationStyle?.shadowColor,\n                shadowOffset: elevationStyle?.shadowOffset,\n                shadowRadius: elevationStyle?.shadowRadius,\n                shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n            };\n        }\n        return {};\n    }, [\n        /**\n         * FIXME: Consider add `elevationStyle` to dependencies.\n         */\n    ]);\n\n    const indexRef = useRef<number>(0);\n    const offsetsRef = useRef<Array<number>>([]);\n\n    const onScrollViewChanged = useCallback((nextIndex: number) => {\n        const prevIndex = indexRef.current;\n        if (prevIndex === nextIndex) {\n            if (shouldTranslateYReset) {\n                translateY.value = withTiming(0, {\n                    duration: ANIMATION_DURATION_MILLIS,\n                });\n\n                vectorY.value = 0;\n                offsetsRef.current = [];\n                overlapped.value = false;\n            }\n\n            return;\n        }\n\n        offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n        const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n        lastOffsetY.value = savedOffsetY;\n\n        indexRef.current = nextIndex;\n\n        // Determine whether to overlap every time index is changed.\n        overlapped.value = savedOffsetY > 0;\n\n        // If next ScrollView's offset is too short, expand app bar.\n        if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n            translateY.value = withTiming(0, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n\n            vectorY.value = 0;\n        }\n    }, [appBarHeight]);\n\n    const scrollHandler = useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onMomentumBegin: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            const deltaY = offsetY - prevOffsetY.value;\n            vectorY.value = (vectorY.value * deltaY >= 0 && offsetY > 0) ? vectorY.value + deltaY : deltaY;\n            prevOffsetY.value = offsetY;\n\n            if (SUPPORTS_DRAG_DETECTION) {\n                const dy = offsetY - lastOffsetY.value;\n\n                translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n                overlapped.value = offsetY + translateY.value > 0;\n            } else {\n                if (offsetY > -maxTy) {\n                    if (ty === 0) {\n                        translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                } else {\n                    if (ty === maxTy) {\n                        translateY.value = withTiming(0, {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                }\n\n                overlapped.value = offsetY > 0;\n\n                lastOffsetY.value = offsetY;\n            }\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            lastOffsetY.value = offsetY;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            // If toolbar is already positioned on edge, do nothing.\n            if (ty <= maxTy || ty >= 0) {\n                return;\n            }\n\n            const threshold = maxTy * 0.5;\n\n            const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n            overlapped.value = offsetY + nextTranslateY > 0;\n\n            translateY.value = withTiming(nextTranslateY, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        },\n    }, [appBarHeight]);\n\n    const hasCollapsible = collapsibleToolbarHeight > 0;\n\n    const appBarStyle = [\n        animatedStyle,\n        { paddingTop: safeAreaInsets.top },\n        hasCollapsible ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        vectorY,\n        onAppBarLayout,\n        onCollapsibleToolbarLayout,\n        onScroll: scrollHandler,\n        onScrollViewChanged,\n        scrollContentInsets: { top: hasCollapsible ? appBarMaxHeight : 0 },\n    };\n};\n"],"mappings":"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"}

package/build/commonjs/hooks/useUnstableToggleDisplayStyle.js

@@ -5,24 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = useAnimatedDisplayStyle;
 
-var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanimated"));
+var _reactNativeReanimated = require("react-native-reanimated");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function useAnimatedDisplayStyle(vectorY, threshold = 200, defaultDisplay = 'flex') {
-  const display = _reactNativeReanimated.default.useSharedValue(defaultDisplay);
-
-  _reactNativeReanimated.default.useAnimatedReaction(() => vectorY.value, vy => {
+function useAnimatedDisplayStyle(vectorY) {
+  let threshold = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 200;
+  let defaultDisplay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'flex';
+  const display = (0, _reactNativeReanimated.useSharedValue)(defaultDisplay);
+  (0, _reactNativeReanimated.useAnimatedReaction)(() => vectorY.value, vy => {
     if (vy >= threshold) {
       display.value = 'none';
     } else if (vy < threshold) {
       display.value = 'flex';
     }
-  });
-
-  return _reactNativeReanimated.default.useAnimatedStyle(() => ({
+  }, [threshold]);
+  return (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
     display: display.value
-  }));
+  }), []);
 }
 
 ;

package/build/commonjs/hooks/useUnstableToggleDisplayStyle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useUnstableToggleDisplayStyle.ts"],"names":["useAnimatedDisplayStyle","vectorY","threshold","defaultDisplay","display","Animated","useSharedValue","useAnimatedReaction","value","vy","useAnimatedStyle"],"mappings":";;;;;;;AAAA;;;;AAEe,SAASA,uBAAT,CACXC,OADW,EAEXC,SAAiB,GAAG,GAFT,EAGXC,cAA+B,GAAG,MAHvB,EAIb;AACE,QAAMC,OAAO,GAAGC,+BAASC,cAAT,CAAwBH,cAAxB,CAAhB;;AAEAE,iCAASE,mBAAT,CACI,MAAMN,OAAO,CAACO,KADlB,EAEKC,EAAD,IAAQ;AACJ,QAAIA,EAAE,IAAIP,SAAV,EAAqB;AACjBE,MAAAA,OAAO,CAACI,KAAR,GAAgB,MAAhB;AACH,KAFD,MAEO,IAAIC,EAAE,GAAGP,SAAT,EAAoB;AACvBE,MAAAA,OAAO,CAACI,KAAR,GAAgB,MAAhB;AACH;AACJ,GARL;;AAWA,SAAOH,+BAASK,gBAAT,CAA0B,OAAO;AACpCN,IAAAA,OAAO,EAAEA,OAAO,CAACI;AADmB,GAAP,CAA1B,CAAP;AAGH;;AAAA","sourcesContent":["import Animated from 'react-native-reanimated';\n\nexport default function useAnimatedDisplayStyle(\n    vectorY: Animated.SharedValue<number>,\n    threshold: number = 200,\n    defaultDisplay: 'flex' | 'none' = 'flex',\n) {\n    const display = Animated.useSharedValue(defaultDisplay);\n\n    Animated.useAnimatedReaction(\n        () => vectorY.value,\n        (vy) => {\n            if (vy >= threshold) {\n                display.value = 'none';\n            } else if (vy < threshold) {\n                display.value = 'flex';\n            }\n        },\n    );\n\n    return Animated.useAnimatedStyle(() => ({\n        display: display.value,\n    }));\n};\n"]}
+{"version":3,"names":["useAnimatedDisplayStyle","vectorY","threshold","defaultDisplay","display","useSharedValue","useAnimatedReaction","value","vy","useAnimatedStyle"],"sources":["useUnstableToggleDisplayStyle.ts"],"sourcesContent":["import type { SharedValue } from 'react-native-reanimated';\nimport { useAnimatedReaction, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';\n\nexport default function useAnimatedDisplayStyle(\n    vectorY: SharedValue<number>,\n    threshold: number = 200,\n    defaultDisplay: 'flex' | 'none' = 'flex',\n) {\n    const display = useSharedValue(defaultDisplay);\n\n    useAnimatedReaction(\n        () => vectorY.value,\n        (vy) => {\n            if (vy >= threshold) {\n                display.value = 'none';\n            } else if (vy < threshold) {\n                display.value = 'flex';\n            }\n        },\n        [threshold],\n    );\n\n    return useAnimatedStyle(() => ({\n        display: display.value,\n    }), []);\n};\n"],"mappings":";;;;;;;AACA;;AAEe,SAASA,uBAAT,CACXC,OADW,EAIb;EAAA,IAFEC,SAEF,uEAFsB,GAEtB;EAAA,IADEC,cACF,uEADoC,MACpC;EACE,MAAMC,OAAO,GAAG,IAAAC,qCAAA,EAAeF,cAAf,CAAhB;EAEA,IAAAG,0CAAA,EACI,MAAML,OAAO,CAACM,KADlB,EAEKC,EAAD,IAAQ;IACJ,IAAIA,EAAE,IAAIN,SAAV,EAAqB;MACjBE,OAAO,CAACG,KAAR,GAAgB,MAAhB;IACH,CAFD,MAEO,IAAIC,EAAE,GAAGN,SAAT,EAAoB;MACvBE,OAAO,CAACG,KAAR,GAAgB,MAAhB;IACH;EACJ,CARL,EASI,CAACL,SAAD,CATJ;EAYA,OAAO,IAAAO,uCAAA,EAAiB,OAAO;IAC3BL,OAAO,EAAEA,OAAO,CAACG;EADU,CAAP,CAAjB,EAEH,EAFG,CAAP;AAGH;;AAAA"}

package/build/commonjs/index.js

@@ -11,7 +11,8 @@ var _exportNames = {
   ViewPager: true,
   ComicViewer: true,
   StatusBarProvider: true,
-  useStatusBarContext: true
+  useStatusBarContext: true,
+  ViewabilityTrackerView: true
 };
 Object.defineProperty(exports, "BottomSheet", {
   enumerable: true,
@@ -25,6 +26,12 @@ Object.defineProperty(exports, "Carousel", {
     return _Carousel.default;
   }
 });
+Object.defineProperty(exports, "ComicViewer", {
+  enumerable: true,
+  get: function () {
+    return _ComicViewer.default;
+  }
+});
 Object.defineProperty(exports, "DateTimePicker", {
   enumerable: true,
   get: function () {
@@ -37,22 +44,22 @@ Object.defineProperty(exports, "FlipCard", {
     return _FlipCard.default;
   }
 });
-Object.defineProperty(exports, "ViewPager", {
+Object.defineProperty(exports, "StatusBarProvider", {
   enumerable: true,
   get: function () {
-    return _ViewPager.default;
+    return _StatusBarProvider.default;
   }
 });
-Object.defineProperty(exports, "ComicViewer", {
+Object.defineProperty(exports, "ViewPager", {
   enumerable: true,
   get: function () {
-    return _ComicViewer.default;
+    return _ViewPager.default;
   }
 });
-Object.defineProperty(exports, "StatusBarProvider", {
+Object.defineProperty(exports, "ViewabilityTrackerView", {
   enumerable: true,
   get: function () {
-    return _StatusBarProvider.default;
+    return _ViewabilityTrackerView.default;
   }
 });
 Object.defineProperty(exports, "useStatusBarContext", {
@@ -160,6 +167,20 @@ Object.keys(_StatusBarProvider).forEach(function (key) {
   });
 });
 
+var _ViewabilityTrackerView = _interopRequireWildcard(require("./ViewabilityTrackerView"));
+
+Object.keys(_ViewabilityTrackerView).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ViewabilityTrackerView[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ViewabilityTrackerView[key];
+    }
+  });
+});
+
 var _hooks = require("./hooks");
 
 Object.keys(_hooks).forEach(function (key) {

package/build/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { default as BottomSheet } from './BottomSheet';\nexport * from './BottomSheet';\n\nexport { default as Carousel } from './Carousel';\nexport * from './Carousel';\n\nexport { default as DateTimePicker } from './DateTimePicker';\nexport * from './DateTimePicker';\n\nexport { default as FlipCard } from './FlipCard';\nexport * from './FlipCard';\n\nexport { default as ViewPager } from './ViewPager';\nexport * from './ViewPager';\n\nexport { default as ComicViewer } from './ComicViewer';\nexport * from './ComicViewer';\n\nexport { default as StatusBarProvider, useStatusBarContext } from './StatusBarProvider';\nexport * from './StatusBarProvider';\n\nexport * from './hooks';\n"]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as BottomSheet } from './BottomSheet';\nexport * from './BottomSheet';\n\nexport { default as Carousel } from './Carousel';\nexport * from './Carousel';\n\nexport { default as DateTimePicker } from './DateTimePicker';\nexport * from './DateTimePicker';\n\nexport { default as FlipCard } from './FlipCard';\nexport * from './FlipCard';\n\nexport { default as ViewPager } from './ViewPager';\nexport * from './ViewPager';\n\nexport { default as ComicViewer } from './ComicViewer';\nexport * from './ComicViewer';\n\nexport { default as StatusBarProvider, useStatusBarContext } from './StatusBarProvider';\nexport * from './StatusBarProvider';\n\nexport { default as ViewabilityTrackerView } from './ViewabilityTrackerView';\nexport * from './ViewabilityTrackerView';\n\nexport * from './hooks';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/build/module/AnimatedY/AnimatedY.js

@@ -1,23 +1,24 @@
-import React from 'react';
-import Animated, { Easing } from 'react-native-reanimated';
+import React, { useEffect } from 'react';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+const ANIMATION_CONFIG = {
+  duration: 150,
+  easing: Easing.out(Easing.exp)
+};
 export default function AnimatedY(props) {
   const {
     children,
     translateY,
     style
   } = props;
-  const animatedY = Animated.useSharedValue(translateY);
-  const animatedStyle = Animated.useAnimatedStyle(() => ({
+  const animatedY = useSharedValue(translateY);
+  const animatedStyle = useAnimatedStyle(() => ({
     transform: [{
       translateY: animatedY.value
     }]
-  }));
-  React.useEffect(() => {
+  }), []);
+  useEffect(() => {
     if (translateY >= 0) {
-      animatedY.value = Animated.withTiming(translateY, {
-        duration: 150,
-        easing: Easing.out(Easing.exp)
-      });
+      animatedY.value = withTiming(translateY, ANIMATION_CONFIG);
     }
   }, [translateY]);
   return /*#__PURE__*/React.createElement(Animated.View, {

package/build/module/AnimatedY/AnimatedY.js.map

@@ -1 +1 @@
-{"version":3,"sources":["AnimatedY.tsx"],"names":["React","Animated","Easing","AnimatedY","props","children","translateY","style","animatedY","useSharedValue","animatedStyle","useAnimatedStyle","transform","value","useEffect","withTiming","duration","easing","out","exp"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,QAAP,IAAmBC,MAAnB,QAAiC,yBAAjC;AAGA,eAAe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;AACrD,QAAM;AACFC,IAAAA,QADE;AAEFC,IAAAA,UAFE;AAGFC,IAAAA;AAHE,MAIFH,KAJJ;AAMA,QAAMI,SAAS,GAAGP,QAAQ,CAACQ,cAAT,CAAwBH,UAAxB,CAAlB;AACA,QAAMI,aAAa,GAAGT,QAAQ,CAACU,gBAAT,CAA0B,OAAO;AACnDC,IAAAA,SAAS,EAAE,CAAC;AAAEN,MAAAA,UAAU,EAAEE,SAAS,CAACK;AAAxB,KAAD;AADwC,GAAP,CAA1B,CAAtB;AAIAb,EAAAA,KAAK,CAACc,SAAN,CAAgB,MAAM;AAClB,QAAIR,UAAU,IAAI,CAAlB,EAAqB;AACjBE,MAAAA,SAAS,CAACK,KAAV,GAAkBZ,QAAQ,CAACc,UAAT,CAAoBT,UAApB,EAAgC;AAC9CU,QAAAA,QAAQ,EAAE,GADoC;AAE9CC,QAAAA,MAAM,EAAEf,MAAM,CAACgB,GAAP,CAAWhB,MAAM,CAACiB,GAAlB;AAFsC,OAAhC,CAAlB;AAIH;AACJ,GAPD,EAOG,CAACb,UAAD,CAPH;AASA,sBACI,oBAAC,QAAD,CAAU,IAAV;AACI,IAAA,QAAQ,EAAED,QADd;AAEI,IAAA,KAAK,EAAE,CACHK,aADG,EAEHH,KAFG;AAFX,IADJ;AASH;AAAA","sourcesContent":["import React from 'react';\nimport Animated, { Easing } from 'react-native-reanimated';\nimport type AnimatedYProps from './AnimatedYProps';\n\nexport default function AnimatedY(props: AnimatedYProps) {\n    const {\n        children,\n        translateY,\n        style,\n    } = props;\n\n    const animatedY = Animated.useSharedValue(translateY);\n    const animatedStyle = Animated.useAnimatedStyle(() => ({\n        transform: [{ translateY: animatedY.value }],\n    }));\n\n    React.useEffect(() => {\n        if (translateY >= 0) {\n            animatedY.value = Animated.withTiming(translateY, {\n                duration: 150,\n                easing: Easing.out(Easing.exp),\n            });\n        }\n    }, [translateY]);\n\n    return (\n        <Animated.View\n            children={children}\n            style={[\n                animatedStyle,\n                style,\n            ]}\n        />\n    );\n};\n"]}
+{"version":3,"names":["React","useEffect","Animated","Easing","useAnimatedStyle","useSharedValue","withTiming","ANIMATION_CONFIG","duration","easing","out","exp","AnimatedY","props","children","translateY","style","animatedY","animatedStyle","transform","value"],"sources":["AnimatedY.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport type AnimatedYProps from './AnimatedYProps';\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = {\n    duration: 150,\n    easing: Easing.out(Easing.exp),\n};\n\nexport default function AnimatedY(props: AnimatedYProps) {\n    const {\n        children,\n        translateY,\n        style,\n    } = props;\n\n    const animatedY = useSharedValue(translateY);\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ translateY: animatedY.value }],\n    }), []);\n\n    useEffect(() => {\n        if (translateY >= 0) {\n            animatedY.value = withTiming(translateY, ANIMATION_CONFIG);\n        }\n    }, [translateY]);\n\n    return (\n        <Animated.View\n            children={children}\n            style={[\n                animatedStyle,\n                style,\n            ]}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,SAAhB,QAAiC,OAAjC;AAEA,OAAOC,QAAP,IAAmBC,MAAnB,EAA2BC,gBAA3B,EAA6CC,cAA7C,EAA6DC,UAA7D,QAA+E,yBAA/E;AAGA,MAAMC,gBAA4C,GAAG;EACjDC,QAAQ,EAAE,GADuC;EAEjDC,MAAM,EAAEN,MAAM,CAACO,GAAP,CAAWP,MAAM,CAACQ,GAAlB;AAFyC,CAArD;AAKA,eAAe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,QADE;IAEFC,UAFE;IAGFC;EAHE,IAIFH,KAJJ;EAMA,MAAMI,SAAS,GAAGZ,cAAc,CAACU,UAAD,CAAhC;EACA,MAAMG,aAAa,GAAGd,gBAAgB,CAAC,OAAO;IAC1Ce,SAAS,EAAE,CAAC;MAAEJ,UAAU,EAAEE,SAAS,CAACG;IAAxB,CAAD;EAD+B,CAAP,CAAD,EAElC,EAFkC,CAAtC;EAIAnB,SAAS,CAAC,MAAM;IACZ,IAAIc,UAAU,IAAI,CAAlB,EAAqB;MACjBE,SAAS,CAACG,KAAV,GAAkBd,UAAU,CAACS,UAAD,EAAaR,gBAAb,CAA5B;IACH;EACJ,CAJQ,EAIN,CAACQ,UAAD,CAJM,CAAT;EAMA,oBACI,oBAAC,QAAD,CAAU,IAAV;IACI,QAAQ,EAAED,QADd;IAEI,KAAK,EAAE,CACHI,aADG,EAEHF,KAFG;EAFX,EADJ;AASH;AAAA"}

package/build/module/AnimatedY/AnimatedYProps.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
+{"version":3,"names":[],"sources":["AnimatedYProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ComponentProps } from '@fountain-ui/core';\n\nexport default interface AnimatedYProps extends ComponentProps<{\n    /**\n     * The content of the component.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * The translate y value of the component.\n     */\n    translateY: number;\n}> {}\n"],"mappings":""}

package/build/module/AnimatedY/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,aAAxB","sourcesContent":["export { default } from './AnimatedY';\nexport type { default as AnimatedYProps } from './AnimatedYProps';\n"]}
+{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './AnimatedY';\nexport type { default as AnimatedYProps } from './AnimatedYProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,aAAxB"}

package/build/module/BottomSheet/BottomSheetNative.js

@@ -1,9 +1,9 @@
-function _extends() { _extends = Object.assign || 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); }
+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 { Platform } from 'react-native';
+import { Platform, useWindowDimensions, View } from 'react-native';
 import { useTheme } from '@fountain-ui/styles';
-import { BottomSheetBackdrop, BottomSheetModal, BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+import { BottomSheetBackdrop, BottomSheetModal, BottomSheetModalProvider, BottomSheetScrollView } from '@gorhom/bottom-sheet';
 import TransparentBackdrop from './TransparentBackdrop';
 
 const NoHandle = () => null;
@@ -12,12 +12,19 @@ export default function BottomSheet(props) {
   const {
     backdropOpacity = 0.5,
     children,
+    enableDynamicSizing = true,
+    header,
     index,
+    maxHeightNormalizedRatio = 0.9,
     onChange,
-    snapPoints
+    snapPoints = []
   } = props;
   const indexRef = React.useRef(-1);
   const bottomSheetRef = React.useRef(null);
+  const {
+    height: windowHeight
+  } = useWindowDimensions();
+  const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio);
   const handleChange = React.useCallback(newIndex => {
     indexRef.current = newIndex;
 
@@ -61,12 +68,19 @@ export default function BottomSheet(props) {
   const backgroundStyle = {
     backgroundColor: theme.palette.paper.default
   };
+  const contentWrapperStyle = {
+    flex: 1,
+    borderTopLeftRadius: 15,
+    borderTopRightRadius: 15,
+    overflow: 'hidden'
+  };
   const isBackdropTransparent = backdropOpacity <= 0;
 
   const OpacityAwareBackdrop = props => /*#__PURE__*/React.createElement(BottomSheetBackdrop, _extends({}, props, {
     appearsOnIndex: 0,
     disappearsOnIndex: -1,
-    opacity: backdropOpacity
+    opacity: backdropOpacity,
+    pressBehavior: onChange ? 'close' : 'none'
   }));
 
   return /*#__PURE__*/React.createElement(BottomSheetModalProvider, null, /*#__PURE__*/React.createElement(BottomSheetModal, {
@@ -79,8 +93,16 @@ export default function BottomSheet(props) {
     onDismiss: handleDismiss,
     ref: bottomSheetRef,
     snapPoints: snapPoints,
-    style: modalStyle
-  }, children));
+    style: modalStyle,
+    enablePanDownToClose: Boolean(onChange),
+    enableDynamicSizing: enableDynamicSizing,
+    maxDynamicContentSize: maxDynamicContentSize
+  }, /*#__PURE__*/React.createElement(View, {
+    style: contentWrapperStyle
+  }, /*#__PURE__*/React.createElement(BottomSheetScrollView, {
+    bounces: false,
+    stickyHeaderIndices: header ? [0] : undefined
+  }, header, children))));
 }
 ;
 //# sourceMappingURL=BottomSheetNative.js.map