@fountain-ui/lab 2.0.0-beta.42 → 2.0.0-beta.43

package/build/module/BottomSheet/useDynamicSnapPoints.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useState","useWindowDimensions","convertHeightAsPixel","windowHeight","value","percentageRegex","RegExp","test","percentage","parseFloat","isNaN","Math","round","useDynamicSnapPoints","props","index","currentIndex","initialSnapPoints","height","WINDOW_HEIGHT","snapPoints","setSnapPoints","map","snapPoint","handleContentLayout","event","contentHeight","min","nativeEvent","layout","prevState"],"sources":["useDynamicSnapPoints.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions } from 'react-native';\n\ninterface UseDynamicSnapPointsParams {\n    index: number;\n    initialSnapPoints: (number | string)[];\n}\n\ninterface UseDynamicSnapPointsReturns {\n    handleContentLayout: (e: LayoutChangeEvent) => void;\n    snapPoints: number[];\n}\n\nconst convertHeightAsPixel = (windowHeight: number, value: number | string): number => {\n    if (typeof value === 'number') {\n        return value;\n    }\n\n    const percentageRegex = new RegExp(/^[0-9]+%$/);\n    if (percentageRegex.test(value)) {\n        const percentage = parseFloat(value) / 100;\n        return isNaN(percentage) ? 0 : Math.round(windowHeight * percentage);\n    }\n\n    return 0;\n};\n\nexport default function useDynamicSnapPoints(props: UseDynamicSnapPointsParams): UseDynamicSnapPointsReturns {\n    const {\n        index: currentIndex,\n        initialSnapPoints,\n    } = props;\n\n    const { height: WINDOW_HEIGHT } = useWindowDimensions();\n\n    const [snapPoints, setSnapPoints] = useState(initialSnapPoints.map((snapPoint) => convertHeightAsPixel(WINDOW_HEIGHT, snapPoint)));\n\n    const handleContentLayout = useCallback((event: LayoutChangeEvent) => {\n        if (initialSnapPoints[currentIndex] === 'CONTENT_HEIGHT') {\n            const contentHeight = Math.min(Math.round(WINDOW_HEIGHT * 0.9), event.nativeEvent.layout.height);\n            \n            setSnapPoints(prevState => prevState.map((snapPoint, index) => {\n                return currentIndex === index ? contentHeight : snapPoint;\n            }));\n        }\n    }, [currentIndex, initialSnapPoints]);\n\n    return {\n        handleContentLayout,\n        snapPoints,\n    };\n}\n"],"mappings":"AAAA,SAASA,WAAT,EAAsBC,QAAtB,QAAsC,OAAtC;AACA,SAA4BC,mBAA5B,QAAuD,cAAvD;;AAYA,MAAMC,oBAAoB,GAAG,CAACC,YAAD,EAAuBC,KAAvB,KAA0D;EACnF,IAAI,OAAOA,KAAP,KAAiB,QAArB,EAA+B;IAC3B,OAAOA,KAAP;EACH;;EAED,MAAMC,eAAe,GAAG,IAAIC,MAAJ,CAAW,WAAX,CAAxB;;EACA,IAAID,eAAe,CAACE,IAAhB,CAAqBH,KAArB,CAAJ,EAAiC;IAC7B,MAAMI,UAAU,GAAGC,UAAU,CAACL,KAAD,CAAV,GAAoB,GAAvC;IACA,OAAOM,KAAK,CAACF,UAAD,CAAL,GAAoB,CAApB,GAAwBG,IAAI,CAACC,KAAL,CAAWT,YAAY,GAAGK,UAA1B,CAA/B;EACH;;EAED,OAAO,CAAP;AACH,CAZD;;AAcA,eAAe,SAASK,oBAAT,CAA8BC,KAA9B,EAA8F;EACzG,MAAM;IACFC,KAAK,EAAEC,YADL;IAEFC;EAFE,IAGFH,KAHJ;EAKA,MAAM;IAAEI,MAAM,EAAEC;EAAV,IAA4BlB,mBAAmB,EAArD;EAEA,MAAM,CAACmB,UAAD,EAAaC,aAAb,IAA8BrB,QAAQ,CAACiB,iBAAiB,CAACK,GAAlB,CAAuBC,SAAD,IAAerB,oBAAoB,CAACiB,aAAD,EAAgBI,SAAhB,CAAzD,CAAD,CAA5C;EAEA,MAAMC,mBAAmB,GAAGzB,WAAW,CAAE0B,KAAD,IAA8B;IAClE,IAAIR,iBAAiB,CAACD,YAAD,CAAjB,KAAoC,gBAAxC,EAA0D;MACtD,MAAMU,aAAa,GAAGf,IAAI,CAACgB,GAAL,CAAShB,IAAI,CAACC,KAAL,CAAWO,aAAa,GAAG,GAA3B,CAAT,EAA0CM,KAAK,CAACG,WAAN,CAAkBC,MAAlB,CAAyBX,MAAnE,CAAtB;MAEAG,aAAa,CAACS,SAAS,IAAIA,SAAS,CAACR,GAAV,CAAc,CAACC,SAAD,EAAYR,KAAZ,KAAsB;QAC3D,OAAOC,YAAY,KAAKD,KAAjB,GAAyBW,aAAzB,GAAyCH,SAAhD;MACH,CAF0B,CAAd,CAAb;IAGH;EACJ,CARsC,EAQpC,CAACP,YAAD,EAAeC,iBAAf,CARoC,CAAvC;EAUA,OAAO;IACHO,mBADG;IAEHJ;EAFG,CAAP;AAIH"}
+{"version":3,"names":["R","useCallback","useMemo","useState","useWindowDimensions","convertSnapPoint","snapPoint","windowHeight","maxDynamicContentSize","Math","min","percentageRegex","RegExp","test","percentage","parseFloat","isNaN","round","useDynamicSnapPoints","params","enableDynamicSizing","maxHeightNormalizedRatio","snapPoints","height","contentHeight","setContentHeight","convertedSnapPoints","map","push","Array","from","Set","sort","a","b","highestSnapPoint","last","handleContentSizeChange","_"],"sources":["useDynamicSnapPoints.ts"],"sourcesContent":["import * as R from 'ramda';\nimport { useCallback, useMemo, useState } from 'react';\nimport { useWindowDimensions } from 'react-native';\n\ninterface UseDynamicSnapPointsParams {\n    enableDynamicSizing: boolean;\n    maxHeightNormalizedRatio: number;\n    snapPoints: (number | string)[];\n}\n\ninterface UseDynamicSnapPointsReturns {\n    convertedSnapPoints: number[];\n    handleContentSizeChange: (w: number, h: number) => void;\n    highestSnapPoint: number;\n}\n\nconst convertSnapPoint = (snapPoint: number | string, windowHeight: number, maxDynamicContentSize: number): number => {\n    if (typeof snapPoint === 'number') {\n        return Math.min(maxDynamicContentSize, snapPoint);\n    }\n\n    const percentageRegex = new RegExp(/^[0-9]+%$/);\n    if (percentageRegex.test(snapPoint)) {\n        const percentage = parseFloat(snapPoint) / 100;\n        return isNaN(percentage) ? 0 : Math.min(maxDynamicContentSize, Math.round(windowHeight * percentage));\n    }\n\n    return 0;\n};\n\nexport default function useDynamicSnapPoints(params: UseDynamicSnapPointsParams): UseDynamicSnapPointsReturns {\n    const {\n        enableDynamicSizing,\n        maxHeightNormalizedRatio,\n        snapPoints,\n    } = params;\n\n    const { height: windowHeight } = useWindowDimensions();\n\n    const [contentHeight, setContentHeight] = useState<number>(0);\n\n    const convertedSnapPoints = useMemo(() => {\n        const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio);\n\n        const convertedSnapPoints = snapPoints.map((snapPoint) => {\n            return convertSnapPoint(snapPoint, windowHeight, maxDynamicContentSize);\n        });\n\n        if (enableDynamicSizing && contentHeight !== 0) {\n            convertedSnapPoints.push(\n                convertSnapPoint(contentHeight, windowHeight, maxDynamicContentSize),\n            );\n        }\n\n        return Array.from(new Set(convertedSnapPoints)).sort((a, b) => a - b);\n    }, [\n        contentHeight,\n        snapPoints,\n        windowHeight,\n    ]);\n\n    const highestSnapPoint = R.last(convertedSnapPoints) ?? 0;\n\n    const handleContentSizeChange = useCallback((_: number, height: number) => {\n        setContentHeight(height);\n    }, []);\n\n    return {\n        convertedSnapPoints,\n        handleContentSizeChange,\n        highestSnapPoint,\n    };\n}\n"],"mappings":"AAAA,OAAO,KAAKA,CAAZ,MAAmB,OAAnB;AACA,SAASC,WAAT,EAAsBC,OAAtB,EAA+BC,QAA/B,QAA+C,OAA/C;AACA,SAASC,mBAAT,QAAoC,cAApC;;AAcA,MAAMC,gBAAgB,GAAG,CAACC,SAAD,EAA6BC,YAA7B,EAAmDC,qBAAnD,KAA6F;EAClH,IAAI,OAAOF,SAAP,KAAqB,QAAzB,EAAmC;IAC/B,OAAOG,IAAI,CAACC,GAAL,CAASF,qBAAT,EAAgCF,SAAhC,CAAP;EACH;;EAED,MAAMK,eAAe,GAAG,IAAIC,MAAJ,CAAW,WAAX,CAAxB;;EACA,IAAID,eAAe,CAACE,IAAhB,CAAqBP,SAArB,CAAJ,EAAqC;IACjC,MAAMQ,UAAU,GAAGC,UAAU,CAACT,SAAD,CAAV,GAAwB,GAA3C;IACA,OAAOU,KAAK,CAACF,UAAD,CAAL,GAAoB,CAApB,GAAwBL,IAAI,CAACC,GAAL,CAASF,qBAAT,EAAgCC,IAAI,CAACQ,KAAL,CAAWV,YAAY,GAAGO,UAA1B,CAAhC,CAA/B;EACH;;EAED,OAAO,CAAP;AACH,CAZD;;AAcA,eAAe,SAASI,oBAAT,CAA8BC,MAA9B,EAA+F;EAC1G,MAAM;IACFC,mBADE;IAEFC,wBAFE;IAGFC;EAHE,IAIFH,MAJJ;EAMA,MAAM;IAAEI,MAAM,EAAEhB;EAAV,IAA2BH,mBAAmB,EAApD;EAEA,MAAM,CAACoB,aAAD,EAAgBC,gBAAhB,IAAoCtB,QAAQ,CAAS,CAAT,CAAlD;EAEA,MAAMuB,mBAAmB,GAAGxB,OAAO,CAAC,MAAM;IACtC,MAAMM,qBAAqB,GAAGC,IAAI,CAACQ,KAAL,CAAWV,YAAY,GAAGc,wBAA1B,CAA9B;IAEA,MAAMK,mBAAmB,GAAGJ,UAAU,CAACK,GAAX,CAAgBrB,SAAD,IAAe;MACtD,OAAOD,gBAAgB,CAACC,SAAD,EAAYC,YAAZ,EAA0BC,qBAA1B,CAAvB;IACH,CAF2B,CAA5B;;IAIA,IAAIY,mBAAmB,IAAII,aAAa,KAAK,CAA7C,EAAgD;MAC5CE,mBAAmB,CAACE,IAApB,CACIvB,gBAAgB,CAACmB,aAAD,EAAgBjB,YAAhB,EAA8BC,qBAA9B,CADpB;IAGH;;IAED,OAAOqB,KAAK,CAACC,IAAN,CAAW,IAAIC,GAAJ,CAAQL,mBAAR,CAAX,EAAyCM,IAAzC,CAA8C,CAACC,CAAD,EAAIC,CAAJ,KAAUD,CAAC,GAAGC,CAA5D,CAAP;EACH,CAdkC,EAchC,CACCV,aADD,EAECF,UAFD,EAGCf,YAHD,CAdgC,CAAnC;EAoBA,MAAM4B,gBAAgB,GAAGnC,CAAC,CAACoC,IAAF,CAAOV,mBAAP,KAA+B,CAAxD;EAEA,MAAMW,uBAAuB,GAAGpC,WAAW,CAAC,CAACqC,CAAD,EAAYf,MAAZ,KAA+B;IACvEE,gBAAgB,CAACF,MAAD,CAAhB;EACH,CAF0C,EAExC,EAFwC,CAA3C;EAIA,OAAO;IACHG,mBADG;IAEHW,uBAFG;IAGHF;EAHG,CAAP;AAKH"}

package/build/typescript/BottomSheet/BottomSheetProps.d.ts

@@ -10,6 +10,11 @@ export default interface BottomSheetProps extends ComponentProps<{
      * BottomSheet children, usually the included sub-components.
      */
     children?: React.ReactNode;
+    /**
+     * Enable dynamic sizing for content size.
+     * @default true
+     */
+    enableDynamicSizing?: boolean;
     /**
      * Area to be fixed on the top of the bottom sheet.
      */
@@ -18,6 +23,12 @@ export default interface BottomSheetProps extends ComponentProps<{
      * Snap index. You could also provide -1 to bottom sheet in closed state.
      */
     index: number;
+    /**
+     * Maximum height(normalized value) of dialog
+     * ex. 30% => 0.3 / 90% => 0.9
+     * @default 0.9
+     */
+    maxHeightNormalizedRatio?: number;
     /**
      * Callback fired when the index is changed.
      * Important! Use memoized value.
@@ -27,7 +38,8 @@ export default interface BottomSheetProps extends ComponentProps<{
      * Points for the bottom sheet to snap to, points should be sorted from bottom to top.
      * Important! Use memoized value.
      * Only number type or string type(~% format) can be used.
+     * @default []
      */
-    snapPoints: Array<number | string>;
+    snapPoints?: Array<number | string>;
 }> {
 }

package/build/typescript/BottomSheet/useDynamicSnapPoints.d.ts

@@ -1,11 +1,12 @@
-import { LayoutChangeEvent } from 'react-native';
 interface UseDynamicSnapPointsParams {
-    index: number;
-    initialSnapPoints: (number | string)[];
+    enableDynamicSizing: boolean;
+    maxHeightNormalizedRatio: number;
+    snapPoints: (number | string)[];
 }
 interface UseDynamicSnapPointsReturns {
-    handleContentLayout: (e: LayoutChangeEvent) => void;
-    snapPoints: number[];
+    convertedSnapPoints: number[];
+    handleContentSizeChange: (w: number, h: number) => void;
+    highestSnapPoint: number;
 }
-export default function useDynamicSnapPoints(props: UseDynamicSnapPointsParams): UseDynamicSnapPointsReturns;
+export default function useDynamicSnapPoints(params: UseDynamicSnapPointsParams): UseDynamicSnapPointsReturns;
 export {};

package/build/typescript/Carousel/Carousel.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type CarouselProps from './CarouselProps';
 import type { CarouselInstance } from './types';
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<CarouselProps<any>, "style" | "data" | "autoplay" | "autoplayInterval" | "createItemStyle" | "createScrollAnimation" | "disableSmartAutoplay" | "initialIndex" | "itemHeight" | "itemWidth" | "loop" | "onIndexChange" | "renderItem" | "scrollEnabled" | "windowSize"> & React.RefAttributes<CarouselInstance>>>;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<CarouselProps<any>, "style" | "data" | "scrollEnabled" | "autoplay" | "autoplayInterval" | "createItemStyle" | "createScrollAnimation" | "disableSmartAutoplay" | "initialIndex" | "itemHeight" | "itemWidth" | "loop" | "onIndexChange" | "renderItem" | "windowSize"> & React.RefAttributes<CarouselInstance>>>;
 export default _default;

package/build/typescript/ViewPager/ViewPager.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type ViewPagerProps from './ViewPagerProps';
 import type { ViewPagerInstance } from './types';
-declare const ViewPager: React.ForwardRefExoticComponent<Pick<ViewPagerProps, "style" | "children" | "onChange" | "scrollEnabled" | "keyboardDismissMode" | "initialPage" | "loading" | "offscreenPageRerenderLimit" | "pageForceRerenderKey" | "UNSTABLE_sharedPage"> & React.RefAttributes<ViewPagerInstance>>;
+declare const ViewPager: React.ForwardRefExoticComponent<Pick<ViewPagerProps, "style" | "children" | "onChange" | "keyboardDismissMode" | "scrollEnabled" | "initialPage" | "loading" | "offscreenPageRerenderLimit" | "pageForceRerenderKey" | "UNSTABLE_sharedPage"> & React.RefAttributes<ViewPagerInstance>>;
 export default ViewPager;

package/build/typescript/ViewPager/ViewPager.native.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type ViewPagerProps from './ViewPagerProps';
 import type { ViewPagerInstance } from './types';
-declare const ViewPager: React.ForwardRefExoticComponent<Pick<ViewPagerProps, "style" | "children" | "onChange" | "scrollEnabled" | "keyboardDismissMode" | "initialPage" | "loading" | "offscreenPageRerenderLimit" | "pageForceRerenderKey" | "UNSTABLE_sharedPage"> & React.RefAttributes<ViewPagerInstance>>;
+declare const ViewPager: React.ForwardRefExoticComponent<Pick<ViewPagerProps, "style" | "children" | "onChange" | "keyboardDismissMode" | "scrollEnabled" | "initialPage" | "loading" | "offscreenPageRerenderLimit" | "pageForceRerenderKey" | "UNSTABLE_sharedPage"> & React.RefAttributes<ViewPagerInstance>>;
 export default ViewPager;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/lab",
-  "version": "2.0.0-beta.42",
+  "version": "2.0.0-beta.43",
   "private": false,
   "author": "Fountain-UI Team",
   "description": "Incubator for Fountain-UI React components.",
@@ -23,7 +23,7 @@
   },
   "peerDependencies": {
     "@fountain-ui/core": "^2.0.0-beta.3",
-    "@gorhom/bottom-sheet": "^4.1.3",
+    "@gorhom/bottom-sheet": "^4.5.0",
     "date-fns": "^2.0.0",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
@@ -43,7 +43,7 @@
     }
   },
   "devDependencies": {
-    "@gorhom/bottom-sheet": "4.1.3",
+    "@gorhom/bottom-sheet": "^4.5.0",
     "date-fns": "^2.23.0",
     "react-native-pager-view": "^4.2.4",
     "react-native-safe-area-context": "^4.0.0"
@@ -70,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "263ed4f4ec14ca755180bad17b877d9ab9658e52"
+  "gitHead": "d6fdcaa8a08a999fd1be2f9be76e47230b32545e"
 }

package/src/BottomSheet/BottomSheetNative.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { Platform } from 'react-native';
+import { Platform, useWindowDimensions } from 'react-native';
 import { useTheme } from '@fountain-ui/styles';
 import {
     BottomSheetBackdrop,
     BottomSheetBackdropProps,
     BottomSheetModal,
     BottomSheetModalProvider,
+    BottomSheetScrollView,
 } from '@gorhom/bottom-sheet';
 import type BottomSheetProps from './BottomSheetProps';
 import TransparentBackdrop from './TransparentBackdrop';
@@ -16,14 +17,20 @@ export default function BottomSheet(props: BottomSheetProps) {
     const {
         backdropOpacity = 0.5,
         children,
+        enableDynamicSizing = true,
+        header,
         index,
+        maxHeightNormalizedRatio = 0.9,
         onChange,
-        snapPoints,
+        snapPoints = [],
     } = props;
 
     const indexRef = React.useRef<number>(-1);
     const bottomSheetRef = React.useRef<BottomSheetModal | null>(null);
 
+    const { height: windowHeight } = useWindowDimensions();
+    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio);
+
     const handleChange = React.useCallback((newIndex: number) => {
         indexRef.current = newIndex;
 
@@ -91,8 +98,14 @@ export default function BottomSheet(props: BottomSheetProps) {
                 snapPoints={snapPoints}
                 style={modalStyle}
                 enablePanDownToClose={Boolean(onChange)}
+                enableDynamicSizing={enableDynamicSizing}
+                maxDynamicContentSize={maxDynamicContentSize}
             >
-                {children}
+                <BottomSheetScrollView stickyHeaderIndices={header ? [0] : undefined}>
+                    {header}
+
+                    {children}
+                </BottomSheetScrollView>
             </BottomSheetModal>
         </BottomSheetModalProvider>
     );

package/src/BottomSheet/BottomSheetProps.ts

@@ -13,6 +13,12 @@ export default interface BottomSheetProps extends ComponentProps<{
      */
     children?: React.ReactNode;
 
+    /**
+     * Enable dynamic sizing for content size.
+     * @default true
+     */
+    enableDynamicSizing?: boolean;
+
     /**
      * Area to be fixed on the top of the bottom sheet.
      */
@@ -23,6 +29,13 @@ export default interface BottomSheetProps extends ComponentProps<{
      */
     index: number;
 
+    /**
+     * Maximum height(normalized value) of dialog
+     * ex. 30% => 0.3 / 90% => 0.9
+     * @default 0.9
+     */
+    maxHeightNormalizedRatio?: number;
+
     /**
      * Callback fired when the index is changed.
      * Important! Use memoized value.
@@ -33,6 +46,7 @@ export default interface BottomSheetProps extends ComponentProps<{
      * Points for the bottom sheet to snap to, points should be sorted from bottom to top.
      * Important! Use memoized value.
      * Only number type or string type(~% format) can be used.
+     * @default []
      */
-    snapPoints: Array<number | string>;
+    snapPoints?: Array<number | string>;
 }> {}

package/src/BottomSheet/BottomSheetWeb.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { useWindowDimensions } from 'react-native';
+import { ScrollView } from 'react-native';
 import { Modal, Paper, StyleSheet, css, useTheme } from '@fountain-ui/core';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import AnimatedY from '../AnimatedY';
 import type BottomSheetProps from './BottomSheetProps';
+import useDynamicSnapPoints from './useDynamicSnapPoints';
 
 type BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper'>;
 
@@ -29,41 +30,42 @@ const useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {
     };
 };
 
-const convertHeightAsPixel = (windowHeight: number, value: number | string): number => {
-    if (typeof value === 'number') {
-        return value;
-    }
-
-    const percentageRegex = new RegExp(/^[0-9]+%$/);
-    if (percentageRegex.test(value)) {
-        const percentage = parseFloat(value) / 100;
-        return isNaN(percentage) ? 0 : Math.round(windowHeight * percentage);
-    }
-
-    return 0;
-};
-
 export default function BottomSheet(props: BottomSheetProps) {
     const {
         backdropOpacity,
         children,
+        enableDynamicSizing = true,
+        header,
         index,
+        maxHeightNormalizedRatio = 0.9,
         onChange,
-        snapPoints,
+        snapPoints = [],
     } = props;
 
     const styles = useStyles();
 
-    const { height: windowHeight } = useWindowDimensions();
-
     const handleClose = () => {
         if (onChange) {
             onChange(-1);
         }
     };
 
-    const height = convertHeightAsPixel(windowHeight, snapPoints[snapPoints.length - 1] ?? 0);
-    const translateY = height - (convertHeightAsPixel(windowHeight, snapPoints[index] ?? 0));
+    const {
+        convertedSnapPoints,
+        handleContentSizeChange,
+        highestSnapPoint,
+    } = useDynamicSnapPoints({
+        enableDynamicSizing,
+        maxHeightNormalizedRatio,
+        snapPoints,
+    });
+
+    const translateY = highestSnapPoint - (convertedSnapPoints[index] ?? 0);
+
+    const paperStyles = [
+        styles.paper,
+        { height: highestSnapPoint },
+    ];
 
     return (
         <Modal
@@ -78,12 +80,16 @@ export default function BottomSheet(props: BottomSheetProps) {
             >
                 <Paper
                     elevation={12}
-                    style={[
-                        styles.paper,
-                        { height },
-                    ]}
+                    style={paperStyles}
                 >
-                    {children}
+                    <ScrollView
+                        onContentSizeChange={handleContentSizeChange}
+                        stickyHeaderIndices={header ? [0] : undefined}
+                    >
+                        {header}
+
+                        {children}
+                    </ScrollView>
                 </Paper>
             </AnimatedY>
         </Modal>

package/src/BottomSheet/useDynamicSnapPoints.ts

@@ -1,52 +1,73 @@
-import { useCallback, useState } from 'react';
-import { LayoutChangeEvent, useWindowDimensions } from 'react-native';
+import * as R from 'ramda';
+import { useCallback, useMemo, useState } from 'react';
+import { useWindowDimensions } from 'react-native';
 
 interface UseDynamicSnapPointsParams {
-    index: number;
-    initialSnapPoints: (number | string)[];
+    enableDynamicSizing: boolean;
+    maxHeightNormalizedRatio: number;
+    snapPoints: (number | string)[];
 }
 
 interface UseDynamicSnapPointsReturns {
-    handleContentLayout: (e: LayoutChangeEvent) => void;
-    snapPoints: number[];
+    convertedSnapPoints: number[];
+    handleContentSizeChange: (w: number, h: number) => void;
+    highestSnapPoint: number;
 }
 
-const convertHeightAsPixel = (windowHeight: number, value: number | string): number => {
-    if (typeof value === 'number') {
-        return value;
+const convertSnapPoint = (snapPoint: number | string, windowHeight: number, maxDynamicContentSize: number): number => {
+    if (typeof snapPoint === 'number') {
+        return Math.min(maxDynamicContentSize, snapPoint);
     }
 
     const percentageRegex = new RegExp(/^[0-9]+%$/);
-    if (percentageRegex.test(value)) {
-        const percentage = parseFloat(value) / 100;
-        return isNaN(percentage) ? 0 : Math.round(windowHeight * percentage);
+    if (percentageRegex.test(snapPoint)) {
+        const percentage = parseFloat(snapPoint) / 100;
+        return isNaN(percentage) ? 0 : Math.min(maxDynamicContentSize, Math.round(windowHeight * percentage));
     }
 
     return 0;
 };
 
-export default function useDynamicSnapPoints(props: UseDynamicSnapPointsParams): UseDynamicSnapPointsReturns {
+export default function useDynamicSnapPoints(params: UseDynamicSnapPointsParams): UseDynamicSnapPointsReturns {
     const {
-        index: currentIndex,
-        initialSnapPoints,
-    } = props;
+        enableDynamicSizing,
+        maxHeightNormalizedRatio,
+        snapPoints,
+    } = params;
+
+    const { height: windowHeight } = useWindowDimensions();
 
-    const { height: WINDOW_HEIGHT } = useWindowDimensions();
+    const [contentHeight, setContentHeight] = useState<number>(0);
 
-    const [snapPoints, setSnapPoints] = useState(initialSnapPoints.map((snapPoint) => convertHeightAsPixel(WINDOW_HEIGHT, snapPoint)));
+    const convertedSnapPoints = useMemo(() => {
+        const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio);
 
-    const handleContentLayout = useCallback((event: LayoutChangeEvent) => {
-        if (initialSnapPoints[currentIndex] === 'CONTENT_HEIGHT') {
-            const contentHeight = Math.min(Math.round(WINDOW_HEIGHT * 0.9), event.nativeEvent.layout.height);
-            
-            setSnapPoints(prevState => prevState.map((snapPoint, index) => {
-                return currentIndex === index ? contentHeight : snapPoint;
-            }));
+        const convertedSnapPoints = snapPoints.map((snapPoint) => {
+            return convertSnapPoint(snapPoint, windowHeight, maxDynamicContentSize);
+        });
+
+        if (enableDynamicSizing && contentHeight !== 0) {
+            convertedSnapPoints.push(
+                convertSnapPoint(contentHeight, windowHeight, maxDynamicContentSize),
+            );
         }
-    }, [currentIndex, initialSnapPoints]);
 
-    return {
-        handleContentLayout,
+        return Array.from(new Set(convertedSnapPoints)).sort((a, b) => a - b);
+    }, [
+        contentHeight,
         snapPoints,
+        windowHeight,
+    ]);
+
+    const highestSnapPoint = R.last(convertedSnapPoints) ?? 0;
+
+    const handleContentSizeChange = useCallback((_: number, height: number) => {
+        setContentHeight(height);
+    }, []);
+
+    return {
+        convertedSnapPoints,
+        handleContentSizeChange,
+        highestSnapPoint,
     };
 }

package/build/commonjs/BottomSheet/BottomSheet.js

@@ -1,177 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = BottomSheet;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _reactNative = require("react-native");
-
-var _core = require("@fountain-ui/core");
-
-var _useDynamicSnapPoints = _interopRequireDefault(require("./useDynamicSnapPoints"));
-
-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; }
-
-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); }
-
-const useStyles = function () {
-  const theme = (0, _core.useTheme)();
-  return {
-    root: {
-      justifyContent: 'flex-end',
-      zIndex: theme.zIndex.dialog
-    },
-    animated: {
-      alignSelf: 'center',
-      maxWidth: 720,
-      width: '100%'
-    },
-    paper: {
-      borderBottomLeftRadius: 0,
-      borderBottomRightRadius: 0,
-      flexGrow: 1,
-      overflow: 'hidden'
-    },
-    scrollView: {
-      flexGrow: 1
-    }
-  };
-};
-
-function BottomSheet(props) {
-  const {
-    backdropOpacity,
-    children,
-    header,
-    index,
-    onChange,
-    snapPoints: initialSnapPoints
-  } = props;
-  const styles = useStyles();
-  const contentLayout = (0, _react.useRef)({
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0
-  });
-  const currentScrollY = (0, _react.useRef)(0);
-  const {
-    snapPoints,
-    handleContentLayout
-  } = (0, _useDynamicSnapPoints.default)({
-    index,
-    initialSnapPoints
-  });
-  const height = snapPoints[snapPoints.length - 1] ?? 0;
-  const translateY = height - (snapPoints[index] ?? 0);
-  const animatedY = (0, _core.useAnimatedValue)(translateY);
-
-  const isInsideScrollView = (locationX, locationY) => {
-    const {
-      current: {
-        x,
-        y,
-        width,
-        height
-      }
-    } = contentLayout;
-    return locationX >= x && locationX <= x + width && locationY >= y && locationY <= y + height;
-  };
-
-  const panResponder = (0, _react.useMemo)(() => _reactNative.PanResponder.create({
-    onMoveShouldSetPanResponder: (event, gestureState) => {
-      const {
-        nativeEvent: {
-          locationX,
-          locationY
-        }
-      } = event;
-
-      if (isInsideScrollView(locationX, locationY)) {
-        return gestureState.dy > 0 && currentScrollY.current === 0;
-      }
-
-      return true;
-    },
-    onPanResponderMove: (_, gestureState) => {
-      if (gestureState.dy > 0) {
-        animatedY.setValue(translateY + gestureState.dy);
-      }
-    },
-    onPanResponderRelease: (_, gestureState) => {
-      if (gestureState.dy > 0 && gestureState.vy > 0.5) {
-        handleClose();
-      } else {
-        _reactNative.Animated.timing(animatedY, {
-          toValue: translateY,
-          useNativeDriver: false,
-          duration: 300
-        }).start();
-      }
-    }
-  }), [translateY]);
-  (0, _react.useEffect)(() => {
-    if (translateY >= 0) {
-      _reactNative.Animated.timing(animatedY, {
-        toValue: translateY,
-        useNativeDriver: false,
-        duration: 300
-      }).start();
-    }
-  }, [translateY]);
-
-  const handleClose = () => {
-    if (onChange) {
-      onChange(-1);
-    }
-  };
-
-  const handleScrollViewLayout = event => {
-    contentLayout.current = event.nativeEvent.layout;
-  };
-
-  const handleScroll = event => {
-    currentScrollY.current = event.nativeEvent.contentOffset.y;
-  };
-
-  const animatedStyles = [styles.animated, {
-    transform: [{
-      translateY: animatedY
-    }]
-  }];
-  const paperStyles = [styles.paper, { ...(height !== 0 ? {
-      height
-    } : {})
-  }];
-  const contentStyle = { ...(snapPoints[index] !== 0 ? {
-      height: snapPoints[index]
-    } : {})
-  };
-  return /*#__PURE__*/_react.default.createElement(_core.Modal, {
-    backdropOpacity: backdropOpacity,
-    onClose: handleClose,
-    visible: index >= 0,
-    style: (0, _core.css)([_core.StyleSheet.absoluteFill, styles.root])
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, _extends({
-    style: animatedStyles
-  }, panResponder.panHandlers), /*#__PURE__*/_react.default.createElement(_core.Paper, {
-    elevation: 12,
-    style: paperStyles
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: contentStyle,
-    onLayout: handleContentLayout
-  }, header, /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
-    onLayout: handleScrollViewLayout,
-    onScroll: handleScroll,
-    scrollEventThrottle: 300,
-    style: styles.scrollView
-  }, children)))));
-}
-//# sourceMappingURL=BottomSheet.js.map

package/build/commonjs/BottomSheet/BottomSheet.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","borderBottomLeftRadius","borderBottomRightRadius","flexGrow","overflow","scrollView","BottomSheet","props","backdropOpacity","children","header","index","onChange","snapPoints","initialSnapPoints","styles","contentLayout","useRef","x","y","height","currentScrollY","handleContentLayout","useDynamicSnapPoints","length","translateY","animatedY","useAnimatedValue","isInsideScrollView","locationX","locationY","current","panResponder","useMemo","PanResponder","create","onMoveShouldSetPanResponder","event","gestureState","nativeEvent","dy","onPanResponderMove","_","setValue","onPanResponderRelease","vy","handleClose","Animated","timing","toValue","useNativeDriver","duration","start","useEffect","handleScrollViewLayout","layout","handleScroll","contentOffset","animatedStyles","transform","paperStyles","contentStyle","css","StyleSheet","absoluteFill","panHandlers"],"sources":["BottomSheet.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from 'react';\nimport {\n    Animated,\n    LayoutChangeEvent,\n    LayoutRectangle,\n    NativeScrollEvent,\n    NativeSyntheticEvent,\n    PanResponder,\n    ScrollView,\n    View,\n} from 'react-native';\nimport { css, Modal, Paper, StyleSheet, useAnimatedValue, useTheme } from '@fountain-ui/core';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport BottomSheetProps from './BottomSheetProps';\nimport useDynamicSnapPoints from './useDynamicSnapPoints';\n\ntype BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper' | 'scrollView'>;\n\nconst useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            justifyContent: 'flex-end',\n            zIndex: theme.zIndex.dialog,\n        },\n        animated: {\n            alignSelf: 'center',\n            maxWidth: 720,\n            width: '100%',\n        },\n        paper: {\n            borderBottomLeftRadius: 0,\n            borderBottomRightRadius: 0,\n            flexGrow: 1,\n            overflow: 'hidden',\n        },\n        scrollView: {\n            flexGrow: 1,\n        },\n    };\n};\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity,\n        children,\n        header,\n        index,\n        onChange,\n        snapPoints: initialSnapPoints,\n    } = props;\n\n    const styles = useStyles();\n\n    const contentLayout = useRef<LayoutRectangle>({ x: 0, y: 0, width: 0, height: 0 });\n    const currentScrollY = useRef<number>(0);\n\n    const {\n        snapPoints,\n        handleContentLayout,\n    } = useDynamicSnapPoints({\n        index,\n        initialSnapPoints,\n    });\n\n    const height = snapPoints[snapPoints.length - 1] ?? 0;\n    const translateY = height - (snapPoints[index] ?? 0);\n\n    const animatedY = useAnimatedValue(translateY);\n\n    const isInsideScrollView = (locationX: number, locationY: number): boolean => {\n        const {\n            current: { x, y, width, height },\n        } = contentLayout;\n\n        return locationX >= x && locationX <= x + width && locationY >= y && locationY <= y + height;\n    };\n\n    const panResponder = useMemo(() => (\n        PanResponder.create({\n            onMoveShouldSetPanResponder: (event, gestureState) => {\n                const {\n                    nativeEvent: { locationX, locationY },\n                } = event;\n\n                if (isInsideScrollView(locationX, locationY)) {\n                    return gestureState.dy > 0 && currentScrollY.current === 0;\n                }\n\n                return true;\n            },\n            onPanResponderMove: (_, gestureState) => {\n                if (gestureState.dy > 0) {\n                    animatedY.setValue(translateY + gestureState.dy);\n                }\n            },\n            onPanResponderRelease: (_, gestureState) => {\n                if (gestureState.dy > 0 && gestureState.vy > 0.5) {\n                    handleClose();\n                } else {\n                    Animated.timing(animatedY, {\n                        toValue: translateY,\n                        useNativeDriver: false,\n                        duration: 300,\n                    }).start();\n                }\n            },\n        })\n    ), [translateY]);\n\n    useEffect(() => {\n        if (translateY >= 0) {\n            Animated.timing(animatedY, {\n                toValue: translateY,\n                useNativeDriver: false,\n                duration: 300,\n            }).start();\n        }\n    }, [translateY]);\n\n    const handleClose = () => {\n        if (onChange) {\n            onChange(-1);\n        }\n    };\n\n    const handleScrollViewLayout = (event: LayoutChangeEvent) => {\n        contentLayout.current = event.nativeEvent.layout;\n    };\n\n    const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {\n        currentScrollY.current = event.nativeEvent.contentOffset.y;\n    };\n\n    const animatedStyles = [\n        styles.animated,\n        { transform: [{ translateY: animatedY }] },\n    ];\n\n    const paperStyles = [\n        styles.paper,\n        { ...(height !== 0 ? { height } : {}) },\n    ];\n\n    const contentStyle = {\n        ...(snapPoints[index] !== 0 ? { height: snapPoints[index] } : {}),\n    };\n\n    return (\n        <Modal\n            backdropOpacity={backdropOpacity}\n            onClose={handleClose}\n            visible={index >= 0}\n            style={css([StyleSheet.absoluteFill, styles.root])}\n        >\n            <Animated.View\n                style={animatedStyles}\n                {...panResponder.panHandlers}\n            >\n                <Paper\n                    elevation={12}\n                    style={paperStyles}\n                >\n                    <View\n                        style={contentStyle}\n                        onLayout={handleContentLayout}\n                    >\n                        {header}\n\n                        <ScrollView\n                            onLayout={handleScrollViewLayout}\n                            onScroll={handleScroll}\n                            scrollEventThrottle={300}\n                            style={styles.scrollView}\n                        >\n                            {children}\n                        </ScrollView>\n                    </View>\n                </Paper>\n            </Animated.View>\n        </Modal>\n    );\n}\n"],"mappings":"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"}