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

package/build/module/BottomSheet/BottomSheetWeb.js

@@ -1,7 +1,8 @@
 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 AnimatedY from '../AnimatedY';
+import useDynamicSnapPoints from './useDynamicSnapPoints';
 
 const useStyles = function () {
   const theme = useTheme();
@@ -24,33 +25,18 @@ const useStyles = function () {
   };
 };
 
-const convertHeightAsPixel = (windowHeight, value) => {
-  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) {
   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) {
@@ -58,8 +44,19 @@ export default function BottomSheet(props) {
     }
   };
 
-  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 /*#__PURE__*/React.createElement(Modal, {
     backdropOpacity: backdropOpacity,
     onClose: handleClose,
@@ -70,10 +67,11 @@ export default function BottomSheet(props) {
     translateY: translateY
   }, /*#__PURE__*/React.createElement(Paper, {
     elevation: 12,
-    style: [styles.paper, {
-      height
-    }]
-  }, children)));
+    style: paperStyles
+  }, /*#__PURE__*/React.createElement(ScrollView, {
+    onContentSizeChange: handleContentSizeChange,
+    stickyHeaderIndices: header ? [0] : undefined
+  }, header, children))));
 }
 ;
 //# sourceMappingURL=BottomSheetWeb.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useWindowDimensions","Modal","Paper","StyleSheet","css","useTheme","AnimatedY","useStyles","theme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","borderBottomLeftRadius","borderBottomRightRadius","flexGrow","overflow","convertHeightAsPixel","windowHeight","value","percentageRegex","RegExp","test","percentage","parseFloat","isNaN","Math","round","BottomSheet","props","backdropOpacity","children","index","onChange","snapPoints","styles","height","handleClose","length","translateY","absoluteFill"],"sources":["BottomSheetWeb.tsx"],"sourcesContent":["import React from 'react';\nimport { useWindowDimensions } from 'react-native';\nimport { Modal, Paper, StyleSheet, css, useTheme } from '@fountain-ui/core';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport AnimatedY from '../AnimatedY';\nimport type BottomSheetProps from './BottomSheetProps';\n\ntype BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper'>;\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    };\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 BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity,\n        children,\n        index,\n        onChange,\n        snapPoints,\n    } = props;\n\n    const styles = useStyles();\n\n    const { height: windowHeight } = useWindowDimensions();\n\n    const handleClose = () => {\n        if (onChange) {\n            onChange(-1);\n        }\n    };\n\n    const height = convertHeightAsPixel(windowHeight, snapPoints[snapPoints.length - 1] ?? 0);\n    const translateY = height - (convertHeightAsPixel(windowHeight, snapPoints[index] ?? 0));\n\n    return (\n        <Modal\n            backdropOpacity={backdropOpacity}\n            onClose={handleClose}\n            visible={index >= 0}\n            style={css([StyleSheet.absoluteFill, styles.root])}\n        >\n            <AnimatedY\n                style={styles.animated}\n                translateY={translateY}\n            >\n                <Paper\n                    elevation={12}\n                    style={[\n                        styles.paper,\n                        { height },\n                    ]}\n                >\n                    {children}\n                </Paper>\n            </AnimatedY>\n        </Modal>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,mBAAT,QAAoC,cAApC;AACA,SAASC,KAAT,EAAgBC,KAAhB,EAAuBC,UAAvB,EAAmCC,GAAnC,EAAwCC,QAAxC,QAAwD,mBAAxD;AAEA,OAAOC,SAAP,MAAsB,cAAtB;;AAKA,MAAMC,SAAuC,GAAG,YAA+B;EAC3E,MAAMC,KAAK,GAAGH,QAAQ,EAAtB;EAEA,OAAO;IACHI,IAAI,EAAE;MACFC,cAAc,EAAE,UADd;MAEFC,MAAM,EAAEH,KAAK,CAACG,MAAN,CAAaC;IAFnB,CADH;IAKHC,QAAQ,EAAE;MACNC,SAAS,EAAE,QADL;MAENC,QAAQ,EAAE,GAFJ;MAGNC,KAAK,EAAE;IAHD,CALP;IAUHC,KAAK,EAAE;MACHC,sBAAsB,EAAE,CADrB;MAEHC,uBAAuB,EAAE,CAFtB;MAGHC,QAAQ,EAAE,CAHP;MAIHC,QAAQ,EAAE;IAJP;EAVJ,CAAP;AAiBH,CApBD;;AAsBA,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,WAAT,CAAqBC,KAArB,EAA8C;EACzD,MAAM;IACFC,eADE;IAEFC,QAFE;IAGFC,KAHE;IAIFC,QAJE;IAKFC;EALE,IAMFL,KANJ;EAQA,MAAMM,MAAM,GAAGjC,SAAS,EAAxB;EAEA,MAAM;IAAEkC,MAAM,EAAElB;EAAV,IAA2BvB,mBAAmB,EAApD;;EAEA,MAAM0C,WAAW,GAAG,MAAM;IACtB,IAAIJ,QAAJ,EAAc;MACVA,QAAQ,CAAC,CAAC,CAAF,CAAR;IACH;EACJ,CAJD;;EAMA,MAAMG,MAAM,GAAGnB,oBAAoB,CAACC,YAAD,EAAegB,UAAU,CAACA,UAAU,CAACI,MAAX,GAAoB,CAArB,CAAV,IAAqC,CAApD,CAAnC;EACA,MAAMC,UAAU,GAAGH,MAAM,GAAInB,oBAAoB,CAACC,YAAD,EAAegB,UAAU,CAACF,KAAD,CAAV,IAAqB,CAApC,CAAjD;EAEA,oBACI,oBAAC,KAAD;IACI,eAAe,EAAEF,eADrB;IAEI,OAAO,EAAEO,WAFb;IAGI,OAAO,EAAEL,KAAK,IAAI,CAHtB;IAII,KAAK,EAAEjC,GAAG,CAAC,CAACD,UAAU,CAAC0C,YAAZ,EAA0BL,MAAM,CAAC/B,IAAjC,CAAD;EAJd,gBAMI,oBAAC,SAAD;IACI,KAAK,EAAE+B,MAAM,CAAC3B,QADlB;IAEI,UAAU,EAAE+B;EAFhB,gBAII,oBAAC,KAAD;IACI,SAAS,EAAE,EADf;IAEI,KAAK,EAAE,CACHJ,MAAM,CAACvB,KADJ,EAEH;MAAEwB;IAAF,CAFG;EAFX,GAOKL,QAPL,CAJJ,CANJ,CADJ;AAuBH;AAAA"}
+{"version":3,"names":["React","ScrollView","Modal","Paper","StyleSheet","css","useTheme","AnimatedY","useDynamicSnapPoints","useStyles","theme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","borderBottomLeftRadius","borderBottomRightRadius","flexGrow","overflow","BottomSheet","props","backdropOpacity","children","enableDynamicSizing","header","index","maxHeightNormalizedRatio","onChange","snapPoints","styles","handleClose","convertedSnapPoints","handleContentSizeChange","highestSnapPoint","translateY","paperStyles","height","absoluteFill","undefined"],"sources":["BottomSheetWeb.tsx"],"sourcesContent":["import React from 'react';\nimport { ScrollView } from 'react-native';\nimport { Modal, Paper, StyleSheet, css, useTheme } from '@fountain-ui/core';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport AnimatedY from '../AnimatedY';\nimport type BottomSheetProps from './BottomSheetProps';\nimport useDynamicSnapPoints from './useDynamicSnapPoints';\n\ntype BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper'>;\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    };\n};\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity,\n        children,\n        enableDynamicSizing = true,\n        header,\n        index,\n        maxHeightNormalizedRatio = 0.9,\n        onChange,\n        snapPoints = [],\n    } = props;\n\n    const styles = useStyles();\n\n    const handleClose = () => {\n        if (onChange) {\n            onChange(-1);\n        }\n    };\n\n    const {\n        convertedSnapPoints,\n        handleContentSizeChange,\n        highestSnapPoint,\n    } = useDynamicSnapPoints({\n        enableDynamicSizing,\n        maxHeightNormalizedRatio,\n        snapPoints,\n    });\n\n    const translateY = highestSnapPoint - (convertedSnapPoints[index] ?? 0);\n\n    const paperStyles = [\n        styles.paper,\n        { height: highestSnapPoint },\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            <AnimatedY\n                style={styles.animated}\n                translateY={translateY}\n            >\n                <Paper\n                    elevation={12}\n                    style={paperStyles}\n                >\n                    <ScrollView\n                        onContentSizeChange={handleContentSizeChange}\n                        stickyHeaderIndices={header ? [0] : undefined}\n                    >\n                        {header}\n\n                        {children}\n                    </ScrollView>\n                </Paper>\n            </AnimatedY>\n        </Modal>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,QAA2B,cAA3B;AACA,SAASC,KAAT,EAAgBC,KAAhB,EAAuBC,UAAvB,EAAmCC,GAAnC,EAAwCC,QAAxC,QAAwD,mBAAxD;AAEA,OAAOC,SAAP,MAAsB,cAAtB;AAEA,OAAOC,oBAAP,MAAiC,wBAAjC;;AAIA,MAAMC,SAAuC,GAAG,YAA+B;EAC3E,MAAMC,KAAK,GAAGJ,QAAQ,EAAtB;EAEA,OAAO;IACHK,IAAI,EAAE;MACFC,cAAc,EAAE,UADd;MAEFC,MAAM,EAAEH,KAAK,CAACG,MAAN,CAAaC;IAFnB,CADH;IAKHC,QAAQ,EAAE;MACNC,SAAS,EAAE,QADL;MAENC,QAAQ,EAAE,GAFJ;MAGNC,KAAK,EAAE;IAHD,CALP;IAUHC,KAAK,EAAE;MACHC,sBAAsB,EAAE,CADrB;MAEHC,uBAAuB,EAAE,CAFtB;MAGHC,QAAQ,EAAE,CAHP;MAIHC,QAAQ,EAAE;IAJP;EAVJ,CAAP;AAiBH,CApBD;;AAsBA,eAAe,SAASC,WAAT,CAAqBC,KAArB,EAA8C;EACzD,MAAM;IACFC,eADE;IAEFC,QAFE;IAGFC,mBAAmB,GAAG,IAHpB;IAIFC,MAJE;IAKFC,KALE;IAMFC,wBAAwB,GAAG,GANzB;IAOFC,QAPE;IAQFC,UAAU,GAAG;EARX,IASFR,KATJ;EAWA,MAAMS,MAAM,GAAGzB,SAAS,EAAxB;;EAEA,MAAM0B,WAAW,GAAG,MAAM;IACtB,IAAIH,QAAJ,EAAc;MACVA,QAAQ,CAAC,CAAC,CAAF,CAAR;IACH;EACJ,CAJD;;EAMA,MAAM;IACFI,mBADE;IAEFC,uBAFE;IAGFC;EAHE,IAIF9B,oBAAoB,CAAC;IACrBoB,mBADqB;IAErBG,wBAFqB;IAGrBE;EAHqB,CAAD,CAJxB;EAUA,MAAMM,UAAU,GAAGD,gBAAgB,IAAIF,mBAAmB,CAACN,KAAD,CAAnB,IAA8B,CAAlC,CAAnC;EAEA,MAAMU,WAAW,GAAG,CAChBN,MAAM,CAACf,KADS,EAEhB;IAAEsB,MAAM,EAAEH;EAAV,CAFgB,CAApB;EAKA,oBACI,oBAAC,KAAD;IACI,eAAe,EAAEZ,eADrB;IAEI,OAAO,EAAES,WAFb;IAGI,OAAO,EAAEL,KAAK,IAAI,CAHtB;IAII,KAAK,EAAEzB,GAAG,CAAC,CAACD,UAAU,CAACsC,YAAZ,EAA0BR,MAAM,CAACvB,IAAjC,CAAD;EAJd,gBAMI,oBAAC,SAAD;IACI,KAAK,EAAEuB,MAAM,CAACnB,QADlB;IAEI,UAAU,EAAEwB;EAFhB,gBAII,oBAAC,KAAD;IACI,SAAS,EAAE,EADf;IAEI,KAAK,EAAEC;EAFX,gBAII,oBAAC,UAAD;IACI,mBAAmB,EAAEH,uBADzB;IAEI,mBAAmB,EAAER,MAAM,GAAG,CAAC,CAAD,CAAH,GAASc;EAFxC,GAIKd,MAJL,EAMKF,QANL,CAJJ,CAJJ,CANJ,CADJ;AA2BH;AAAA"}

package/build/module/BottomSheet/useDynamicSnapPoints.js

@@ -1,41 +1,52 @@
-import { useCallback, useState } from 'react';
+import * as R from 'ramda';
+import { useCallback, useMemo, useState } from 'react';
 import { useWindowDimensions } from 'react-native';
 
-const convertHeightAsPixel = (windowHeight, value) => {
-  if (typeof value === 'number') {
-    return value;
+const convertSnapPoint = (snapPoint, windowHeight, maxDynamicContentSize) => {
+  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) {
+export default function useDynamicSnapPoints(params) {
   const {
-    index: currentIndex,
-    initialSnapPoints
-  } = props;
+    enableDynamicSizing,
+    maxHeightNormalizedRatio,
+    snapPoints
+  } = params;
   const {
-    height: WINDOW_HEIGHT
+    height: windowHeight
   } = useWindowDimensions();
-  const [snapPoints, setSnapPoints] = useState(initialSnapPoints.map(snapPoint => convertHeightAsPixel(WINDOW_HEIGHT, snapPoint)));
-  const handleContentLayout = useCallback(event => {
-    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 [contentHeight, setContentHeight] = useState(0);
+  const convertedSnapPoints = useMemo(() => {
+    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio);
+    const convertedSnapPoints = snapPoints.map(snapPoint => {
+      return convertSnapPoint(snapPoint, windowHeight, maxDynamicContentSize);
+    });
+
+    if (enableDynamicSizing && contentHeight !== 0) {
+      convertedSnapPoints.push(convertSnapPoint(contentHeight, windowHeight, maxDynamicContentSize));
     }
-  }, [currentIndex, initialSnapPoints]);
+
+    return Array.from(new Set(convertedSnapPoints)).sort((a, b) => a - b);
+  }, [contentHeight, snapPoints, windowHeight]);
+  const highestSnapPoint = R.last(convertedSnapPoints) ?? 0;
+  const handleContentSizeChange = useCallback((_, height) => {
+    setContentHeight(height);
+  }, []);
   return {
-    handleContentLayout,
-    snapPoints
+    convertedSnapPoints,
+    handleContentSizeChange,
+    highestSnapPoint
   };
 }
 //# sourceMappingURL=useDynamicSnapPoints.js.map

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/module/ComicViewer/ComicViewer.js

@@ -40,6 +40,7 @@ export default function ComicViewer(props) {
     initialScrollPercentage = 0,
     itemVisiblePercentThreshold = 0,
     intrinsicDimensions,
+    maxContentWidth = MAXIMUM_WIDTH,
     onItemPress,
     viewportWidth,
     windowSize = 3,
@@ -47,7 +48,7 @@ export default function ComicViewer(props) {
   } = props;
   const flatListRef = useRef(null);
   const maybeLoadableItemsIndexRange = useRef([-1, 0]);
-  const actualImageWidth = Math.min(viewportWidth, MAXIMUM_WIDTH);
+  const actualImageWidth = Math.min(viewportWidth, maxContentWidth);
   const initialImageStates = useMemo(() => R.map(createInitialImageState, intrinsicDimensions), []);
   const imageStatesRef = useRef(initialImageStates);
 

package/build/module/ComicViewer/ComicViewer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useMemo","useRef","useState","FlatList","R","useDebounce","ViewerItem","appender","left","right","getHeightAccum","heights","mapAccum","keyExtractor","item","String","index","createInitialImageState","dimension","isNewUrlIncoming","totalErrorCount","mapImageStateToItemState","imageState","autoHandleErrorCount","url","urlState","reloadButtonVisible","validity","MAXIMUM_WIDTH","NUMBER_OF_ADJACENT_ITEM","ComicViewer","props","debounceMillis","getUrlByIndex","initialNumToRender","initialScrollPercentage","itemVisiblePercentThreshold","intrinsicDimensions","onItemPress","viewportWidth","windowSize","otherProps","flatListRef","maybeLoadableItemsIndexRange","actualImageWidth","Math","min","initialImageStates","map","imageStatesRef","mapImageStatesToItemStates","imageStates","image","itemStates","setItemStates","current","renderedDimensions","intrinsicDimension","width","height","layoutFromDimensions","itemHeights","totalHeight","heightAccum","itemOffsets","prepend","getItemLayout","data","length","offset","viewabilityConfig","updateImageState","updateFunction","prevImageStates","newImageStates","prevItemStates","newItemStates","equals","loadUrlByIndex","indexes","filteredIndexes","filter","state","isNil","i","includes","urls","newUrl","get","undefined","loadMaybeLoadableItems","startIndex","endIndex","affectedIndexes","range","loadItemsDebounce","onViewableItemsChanged","viewableItems","orderedViewableItems","sort","a","b","firstViewableIndex","head","lastViewableItemIndex","last","max","renderItem","onError","onReloadPress","onLoad","floor","scrollToOffset","animated"],"sources":["ComicViewer.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { FlatList, ListRenderItem, ViewToken } from 'react-native';\nimport * as R from 'ramda';\nimport { useDebounce } from '@fountain-ui/core';\nimport { default as ComicViewerProps, Dimension } from './ComicViewerProps';\nimport ViewerItem from './ViewerItem';\n\nconst appender = (left: number, right: number): [number, number] => [left + right, left + right];\nconst getHeightAccum = (heights: number[]): [number, number[]] => R.mapAccum(appender, 0, heights);\n\nconst keyExtractor = <T, >(item: ItemState) => String(item.index);\n\ninterface UrlState {\n    url: string;\n    validity: 'valid' | 'invalid' | 'unknown';\n}\n\ninterface ImageState {\n    urlState?: UrlState;\n    isNewUrlIncoming: boolean;\n    totalErrorCount: number;\n    dimension: Dimension;\n}\n\ninterface ItemState {\n    index: number;\n    url?: string;\n    reloadButtonVisible: boolean;\n    dimension: Dimension;\n}\n\nconst createInitialImageState = (dimension: Dimension): ImageState => ({\n    isNewUrlIncoming: false,\n    totalErrorCount: 0,\n    dimension,\n});\n\nconst mapImageStateToItemState = (\n    index: number,\n    imageState: ImageState,\n    autoHandleErrorCount: number,\n): ItemState => ({\n    index,\n    url: imageState.urlState?.url,\n    reloadButtonVisible: (imageState.urlState?.validity !== 'valid') && imageState.totalErrorCount >= autoHandleErrorCount,\n    dimension: imageState.dimension,\n});\n\nconst MAXIMUM_WIDTH = 720;\n\nconst NUMBER_OF_ADJACENT_ITEM = 5;\n\nexport default function ComicViewer(props: ComicViewerProps) {\n    const {\n        debounceMillis = 100,\n        autoHandleErrorCount = 3,\n        getUrlByIndex,\n        initialNumToRender = 1,\n        initialScrollPercentage = 0,\n        itemVisiblePercentThreshold = 0,\n        intrinsicDimensions,\n        onItemPress,\n        viewportWidth,\n        windowSize = 3,\n        ...otherProps\n    } = props;\n\n    const flatListRef = useRef<FlatList>(null);\n\n    const maybeLoadableItemsIndexRange = useRef<[number, number]>([-1, 0]);\n\n    const actualImageWidth = Math.min(viewportWidth, MAXIMUM_WIDTH);\n\n    const initialImageStates = useMemo<Array<ImageState>>(() => R.map(createInitialImageState, intrinsicDimensions), []);\n    const imageStatesRef = useRef<Array<ImageState>>(initialImageStates);\n\n    const mapImageStatesToItemStates = (imageStates: Array<ImageState>): Array<ItemState> => {\n        return imageStates.map((image, index) => mapImageStateToItemState(\n            index, image, autoHandleErrorCount,\n        ));\n    };\n\n    const [itemStates, setItemStates] = useState<Array<ItemState>>(() => {\n        return mapImageStatesToItemStates(imageStatesRef.current);\n    });\n\n    const renderedDimensions = useMemo<Array<Dimension>>(() => {\n        return R.map(intrinsicDimension => ({\n            width: actualImageWidth,\n            height: (intrinsicDimension.height * actualImageWidth) / intrinsicDimension.width,\n        }), intrinsicDimensions);\n    }, [actualImageWidth]);\n\n    const layoutFromDimensions = useCallback(() => {\n        const itemHeights = R.map(dimension => dimension.height, renderedDimensions);\n        const [totalHeight, heightAccum] = getHeightAccum(itemHeights);\n        const itemOffsets = R.prepend(0, heightAccum);\n\n        const getItemLayout = (data: any, index: number) => ({\n            index,\n            length: itemHeights[index],\n            offset: itemOffsets[index],\n        });\n\n        return {\n            totalHeight,\n            getItemLayout,\n        };\n    }, [renderedDimensions]);\n\n    const { totalHeight, getItemLayout } = layoutFromDimensions();\n\n    const viewabilityConfig = useMemo(() => ({\n        itemVisiblePercentThreshold,\n    }), [itemVisiblePercentThreshold]);\n\n    const updateImageState = (updateFunction: (prev: ImageState, index: number) => ImageState) => {\n        const prevImageStates = imageStatesRef.current;\n        const newImageStates = prevImageStates.map(updateFunction);\n\n        imageStatesRef.current = newImageStates;\n\n        setItemStates(prevItemStates => {\n            const newItemStates = mapImageStatesToItemStates(newImageStates);\n\n            return R.equals(prevItemStates, newItemStates) ? prevItemStates : newItemStates;\n        });\n    };\n\n    const loadUrlByIndex = async (indexes: number[]) => {\n        const filteredIndexes = R.filter(index => {\n            const state = imageStatesRef.current[index];\n\n            return R.isNil(state.urlState)\n                || (state.urlState?.validity === 'invalid' && !state.isNewUrlIncoming);\n        }, indexes);\n\n        updateImageState((imageState, i) => {\n            return R.includes(i, filteredIndexes)\n                ? { ...imageState, isNewUrlIncoming: true }\n                : imageState;\n        });\n\n        try {\n            const urls = await getUrlByIndex(filteredIndexes);\n\n            updateImageState((imageState, i) => {\n                const newUrl = urls?.get(i);\n                const urlState = imageState.urlState;\n\n                if (newUrl !== undefined && urlState?.validity !== 'valid') {\n                    return {\n                        ...imageState,\n                        urlState: {\n                            url: newUrl,\n                            validity: 'unknown',\n                        },\n                    };\n                }\n\n                return imageState;\n            });\n        } finally {\n            updateImageState((imageState, i) => {\n                return R.includes(i, filteredIndexes)\n                    ? { ...imageState, isNewUrlIncoming: false }\n                    : imageState;\n            });\n        }\n    };\n\n    const loadMaybeLoadableItems = async () => {\n        const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;\n        const affectedIndexes = R.range(startIndex, endIndex);\n\n        await loadUrlByIndex(affectedIndexes);\n    };\n\n    const loadItemsDebounce = useDebounce(loadMaybeLoadableItems, debounceMillis);\n\n    const onViewableItemsChanged = useRef(({ viewableItems }: { viewableItems: Array<ViewToken> }) => {\n        const orderedViewableItems = R.sort((a, b) => (a.index || 0) - (b.index || 0), viewableItems);\n\n        const firstViewableIndex = R.head(orderedViewableItems)?.index;\n        const lastViewableItemIndex = R.last(orderedViewableItems)?.index;\n\n        if (R.isNil(firstViewableIndex) || R.isNil(lastViewableItemIndex)) {\n            return;\n        }\n\n        const startIndex = R.max(firstViewableIndex - NUMBER_OF_ADJACENT_ITEM, 0);\n        const endIndex = R.min(lastViewableItemIndex + NUMBER_OF_ADJACENT_ITEM, itemStates.length - 1);\n\n        maybeLoadableItemsIndexRange.current = [startIndex, endIndex + 1];\n\n        loadItemsDebounce();\n    });\n\n    const renderItem: ListRenderItem<ItemState> = useCallback(({ item, index }) => {\n        const onError = () => {\n            updateImageState((imageState, i) => {\n                const urlState = imageState.urlState;\n\n                if (i === index && urlState !== undefined) {\n                    return {\n                        ...imageState,\n                        totalErrorCount: imageState.totalErrorCount + 1,\n                        urlState: {\n                            ...urlState,\n                            validity: 'invalid',\n                        },\n                    };\n                }\n\n                return imageState;\n            });\n\n            if (item.reloadButtonVisible) {\n                return;\n            }\n\n            const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;\n            if (index >= startIndex || index < endIndex) {\n                loadItemsDebounce();\n            }\n        };\n\n        const onReloadPress = () => {\n            const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;\n            if (index >= startIndex || index < endIndex) {\n                loadUrlByIndex([index]);\n            }\n        };\n\n        const onLoad = () => {\n            updateImageState((imageState, i) => {\n                const urlState = imageState.urlState;\n\n                if (i === index && urlState !== undefined) {\n                    return {\n                        ...imageState,\n                        urlState: {\n                            ...urlState,\n                            validity: 'valid',\n                        },\n                    };\n                }\n\n                return imageState;\n            });\n        };\n\n        return (\n            <ViewerItem\n                onError={onError}\n                onLoad={onLoad}\n                onPress={onItemPress}\n                onReloadPress={onReloadPress}\n                url={item.url}\n                width={renderedDimensions[index]?.width ?? 0}\n                height={renderedDimensions[index]?.height ?? 0}\n                reloadButtonVisible={item.reloadButtonVisible}\n            />\n        );\n    }, [onItemPress, renderedDimensions]);\n\n    useEffect(() => {\n        const offset = Math.floor((initialScrollPercentage / 100) * totalHeight);\n\n        if (flatListRef.current) {\n            flatListRef.current.scrollToOffset({ offset, animated: false });\n        }\n    }, []);\n\n    return (\n        <FlatList\n            data={itemStates}\n            getItemLayout={getItemLayout}\n            initialNumToRender={initialNumToRender}\n            keyExtractor={keyExtractor}\n            onViewableItemsChanged={onViewableItemsChanged.current}\n            ref={flatListRef}\n            renderItem={renderItem}\n            viewabilityConfig={viewabilityConfig}\n            windowSize={windowSize}\n            {...otherProps}\n        />\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","useCallback","useEffect","useMemo","useRef","useState","FlatList","R","useDebounce","ViewerItem","appender","left","right","getHeightAccum","heights","mapAccum","keyExtractor","item","String","index","createInitialImageState","dimension","isNewUrlIncoming","totalErrorCount","mapImageStateToItemState","imageState","autoHandleErrorCount","url","urlState","reloadButtonVisible","validity","MAXIMUM_WIDTH","NUMBER_OF_ADJACENT_ITEM","ComicViewer","props","debounceMillis","getUrlByIndex","initialNumToRender","initialScrollPercentage","itemVisiblePercentThreshold","intrinsicDimensions","maxContentWidth","onItemPress","viewportWidth","windowSize","otherProps","flatListRef","maybeLoadableItemsIndexRange","actualImageWidth","Math","min","initialImageStates","map","imageStatesRef","mapImageStatesToItemStates","imageStates","image","itemStates","setItemStates","current","renderedDimensions","intrinsicDimension","width","height","layoutFromDimensions","itemHeights","totalHeight","heightAccum","itemOffsets","prepend","getItemLayout","data","length","offset","viewabilityConfig","updateImageState","updateFunction","prevImageStates","newImageStates","prevItemStates","newItemStates","equals","loadUrlByIndex","indexes","filteredIndexes","filter","state","isNil","i","includes","urls","newUrl","get","undefined","loadMaybeLoadableItems","startIndex","endIndex","affectedIndexes","range","loadItemsDebounce","onViewableItemsChanged","viewableItems","orderedViewableItems","sort","a","b","firstViewableIndex","head","lastViewableItemIndex","last","max","renderItem","onError","onReloadPress","onLoad","floor","scrollToOffset","animated"],"sources":["ComicViewer.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { FlatList, ListRenderItem, ViewToken } from 'react-native';\nimport * as R from 'ramda';\nimport { useDebounce } from '@fountain-ui/core';\nimport { default as ComicViewerProps, Dimension } from './ComicViewerProps';\nimport ViewerItem from './ViewerItem';\n\nconst appender = (left: number, right: number): [number, number] => [left + right, left + right];\nconst getHeightAccum = (heights: number[]): [number, number[]] => R.mapAccum(appender, 0, heights);\n\nconst keyExtractor = <T, >(item: ItemState) => String(item.index);\n\ninterface UrlState {\n    url: string;\n    validity: 'valid' | 'invalid' | 'unknown';\n}\n\ninterface ImageState {\n    urlState?: UrlState;\n    isNewUrlIncoming: boolean;\n    totalErrorCount: number;\n    dimension: Dimension;\n}\n\ninterface ItemState {\n    index: number;\n    url?: string;\n    reloadButtonVisible: boolean;\n    dimension: Dimension;\n}\n\nconst createInitialImageState = (dimension: Dimension): ImageState => ({\n    isNewUrlIncoming: false,\n    totalErrorCount: 0,\n    dimension,\n});\n\nconst mapImageStateToItemState = (\n    index: number,\n    imageState: ImageState,\n    autoHandleErrorCount: number,\n): ItemState => ({\n    index,\n    url: imageState.urlState?.url,\n    reloadButtonVisible: (imageState.urlState?.validity !== 'valid') && imageState.totalErrorCount >= autoHandleErrorCount,\n    dimension: imageState.dimension,\n});\n\nconst MAXIMUM_WIDTH = 720;\n\nconst NUMBER_OF_ADJACENT_ITEM = 5;\n\nexport default function ComicViewer(props: ComicViewerProps) {\n    const {\n        debounceMillis = 100,\n        autoHandleErrorCount = 3,\n        getUrlByIndex,\n        initialNumToRender = 1,\n        initialScrollPercentage = 0,\n        itemVisiblePercentThreshold = 0,\n        intrinsicDimensions,\n        maxContentWidth = MAXIMUM_WIDTH,\n        onItemPress,\n        viewportWidth,\n        windowSize = 3,\n        ...otherProps\n    } = props;\n\n    const flatListRef = useRef<FlatList>(null);\n\n    const maybeLoadableItemsIndexRange = useRef<[number, number]>([-1, 0]);\n\n    const actualImageWidth = Math.min(viewportWidth, maxContentWidth);\n\n    const initialImageStates = useMemo<Array<ImageState>>(() => R.map(createInitialImageState, intrinsicDimensions), []);\n    const imageStatesRef = useRef<Array<ImageState>>(initialImageStates);\n\n    const mapImageStatesToItemStates = (imageStates: Array<ImageState>): Array<ItemState> => {\n        return imageStates.map((image, index) => mapImageStateToItemState(\n            index, image, autoHandleErrorCount,\n        ));\n    };\n\n    const [itemStates, setItemStates] = useState<Array<ItemState>>(() => {\n        return mapImageStatesToItemStates(imageStatesRef.current);\n    });\n\n    const renderedDimensions = useMemo<Array<Dimension>>(() => {\n        return R.map(intrinsicDimension => ({\n            width: actualImageWidth,\n            height: (intrinsicDimension.height * actualImageWidth) / intrinsicDimension.width,\n        }), intrinsicDimensions);\n    }, [actualImageWidth]);\n\n    const layoutFromDimensions = useCallback(() => {\n        const itemHeights = R.map(dimension => dimension.height, renderedDimensions);\n        const [totalHeight, heightAccum] = getHeightAccum(itemHeights);\n        const itemOffsets = R.prepend(0, heightAccum);\n\n        const getItemLayout = (data: any, index: number) => ({\n            index,\n            length: itemHeights[index],\n            offset: itemOffsets[index],\n        });\n\n        return {\n            totalHeight,\n            getItemLayout,\n        };\n    }, [renderedDimensions]);\n\n    const { totalHeight, getItemLayout } = layoutFromDimensions();\n\n    const viewabilityConfig = useMemo(() => ({\n        itemVisiblePercentThreshold,\n    }), [itemVisiblePercentThreshold]);\n\n    const updateImageState = (updateFunction: (prev: ImageState, index: number) => ImageState) => {\n        const prevImageStates = imageStatesRef.current;\n        const newImageStates = prevImageStates.map(updateFunction);\n\n        imageStatesRef.current = newImageStates;\n\n        setItemStates(prevItemStates => {\n            const newItemStates = mapImageStatesToItemStates(newImageStates);\n\n            return R.equals(prevItemStates, newItemStates) ? prevItemStates : newItemStates;\n        });\n    };\n\n    const loadUrlByIndex = async (indexes: number[]) => {\n        const filteredIndexes = R.filter(index => {\n            const state = imageStatesRef.current[index];\n\n            return R.isNil(state.urlState)\n                || (state.urlState?.validity === 'invalid' && !state.isNewUrlIncoming);\n        }, indexes);\n\n        updateImageState((imageState, i) => {\n            return R.includes(i, filteredIndexes)\n                ? { ...imageState, isNewUrlIncoming: true }\n                : imageState;\n        });\n\n        try {\n            const urls = await getUrlByIndex(filteredIndexes);\n\n            updateImageState((imageState, i) => {\n                const newUrl = urls?.get(i);\n                const urlState = imageState.urlState;\n\n                if (newUrl !== undefined && urlState?.validity !== 'valid') {\n                    return {\n                        ...imageState,\n                        urlState: {\n                            url: newUrl,\n                            validity: 'unknown',\n                        },\n                    };\n                }\n\n                return imageState;\n            });\n        } finally {\n            updateImageState((imageState, i) => {\n                return R.includes(i, filteredIndexes)\n                    ? { ...imageState, isNewUrlIncoming: false }\n                    : imageState;\n            });\n        }\n    };\n\n    const loadMaybeLoadableItems = async () => {\n        const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;\n        const affectedIndexes = R.range(startIndex, endIndex);\n\n        await loadUrlByIndex(affectedIndexes);\n    };\n\n    const loadItemsDebounce = useDebounce(loadMaybeLoadableItems, debounceMillis);\n\n    const onViewableItemsChanged = useRef(({ viewableItems }: { viewableItems: Array<ViewToken> }) => {\n        const orderedViewableItems = R.sort((a, b) => (a.index || 0) - (b.index || 0), viewableItems);\n\n        const firstViewableIndex = R.head(orderedViewableItems)?.index;\n        const lastViewableItemIndex = R.last(orderedViewableItems)?.index;\n\n        if (R.isNil(firstViewableIndex) || R.isNil(lastViewableItemIndex)) {\n            return;\n        }\n\n        const startIndex = R.max(firstViewableIndex - NUMBER_OF_ADJACENT_ITEM, 0);\n        const endIndex = R.min(lastViewableItemIndex + NUMBER_OF_ADJACENT_ITEM, itemStates.length - 1);\n\n        maybeLoadableItemsIndexRange.current = [startIndex, endIndex + 1];\n\n        loadItemsDebounce();\n    });\n\n    const renderItem: ListRenderItem<ItemState> = useCallback(({ item, index }) => {\n        const onError = () => {\n            updateImageState((imageState, i) => {\n                const urlState = imageState.urlState;\n\n                if (i === index && urlState !== undefined) {\n                    return {\n                        ...imageState,\n                        totalErrorCount: imageState.totalErrorCount + 1,\n                        urlState: {\n                            ...urlState,\n                            validity: 'invalid',\n                        },\n                    };\n                }\n\n                return imageState;\n            });\n\n            if (item.reloadButtonVisible) {\n                return;\n            }\n\n            const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;\n            if (index >= startIndex || index < endIndex) {\n                loadItemsDebounce();\n            }\n        };\n\n        const onReloadPress = () => {\n            const [startIndex, endIndex] = maybeLoadableItemsIndexRange.current;\n            if (index >= startIndex || index < endIndex) {\n                loadUrlByIndex([index]);\n            }\n        };\n\n        const onLoad = () => {\n            updateImageState((imageState, i) => {\n                const urlState = imageState.urlState;\n\n                if (i === index && urlState !== undefined) {\n                    return {\n                        ...imageState,\n                        urlState: {\n                            ...urlState,\n                            validity: 'valid',\n                        },\n                    };\n                }\n\n                return imageState;\n            });\n        };\n\n        return (\n            <ViewerItem\n                onError={onError}\n                onLoad={onLoad}\n                onPress={onItemPress}\n                onReloadPress={onReloadPress}\n                url={item.url}\n                width={renderedDimensions[index]?.width ?? 0}\n                height={renderedDimensions[index]?.height ?? 0}\n                reloadButtonVisible={item.reloadButtonVisible}\n            />\n        );\n    }, [onItemPress, renderedDimensions]);\n\n    useEffect(() => {\n        const offset = Math.floor((initialScrollPercentage / 100) * totalHeight);\n\n        if (flatListRef.current) {\n            flatListRef.current.scrollToOffset({ offset, animated: false });\n        }\n    }, []);\n\n    return (\n        <FlatList\n            data={itemStates}\n            getItemLayout={getItemLayout}\n            initialNumToRender={initialNumToRender}\n            keyExtractor={keyExtractor}\n            onViewableItemsChanged={onViewableItemsChanged.current}\n            ref={flatListRef}\n            renderItem={renderItem}\n            viewabilityConfig={viewabilityConfig}\n            windowSize={windowSize}\n            {...otherProps}\n        />\n    );\n};\n"],"mappings":"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"}

package/build/module/ComicViewer/ComicViewerProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["ComicViewerProps.ts"],"sourcesContent":["import React from 'react';\nimport { ComponentProps } from '@fountain-ui/core';\nimport { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';\n\nexport interface Dimension {\n    width: number;\n    height: number;\n}\n\nexport default interface ComicViewerProps extends ComponentProps <{\n    /**\n     * Delay Time to call the error handler.\n     * @default 100\n     */\n    debounceMillis?: number;\n\n    /**\n     * How many times handle onError directly when item error occur\n     * @default 3\n     */\n    autoHandleErrorCount?: number;\n\n    /**\n     * How many items to render in the initial batch.\n     * @default 1\n     */\n    initialNumToRender?: number;\n\n    /**\n     * Start at initialScrollPercentage.\n     * If over 100, scroll to end.\n     * @default 0\n     */\n    initialScrollPercentage?: number;\n\n    /**\n     * The value for FlatList viewabilityConfig.itemVisiblePercentThreshold.\n     * @default 0\n     */\n    itemVisiblePercentThreshold?: number;\n\n    /**\n     * Dimensions of each Image considering viewport.\n     */\n    intrinsicDimensions: Array<Dimension>;\n\n    /**\n     * Width of viewport.\n     */\n    viewportWidth: number;\n\n    /**\n     * The value for FlatList windowSize.\n     * @default 3\n     */\n    windowSize?: number;\n\n    /**\n     * Get contents urls by indexes.\n     */\n    getUrlByIndex: (indexes: Array<number>) => Promise<Map<number, string> | undefined> ;\n\n    /**\n     * Handle scroll event.\n     * @param event Scroll event.\n     */\n    onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;\n\n    /**\n     * Handle item press event.\n     */\n    onItemPress?: () => void;\n\n    /**\n     * Component for comic viewer footer.\n     */\n    ListFooterComponent?: React.ReactElement;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["ComicViewerProps.ts"],"sourcesContent":["import React from 'react';\nimport { ComponentProps } from '@fountain-ui/core';\nimport { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';\n\nexport interface Dimension {\n    width: number;\n    height: number;\n}\n\nexport default interface ComicViewerProps extends ComponentProps <{\n    /**\n     * Delay Time to call the error handler.\n     * @default 100\n     */\n    debounceMillis?: number;\n\n    /**\n     * How many times handle onError directly when item error occur\n     * @default 3\n     */\n    autoHandleErrorCount?: number;\n\n    /**\n     * How many items to render in the initial batch.\n     * @default 1\n     */\n    initialNumToRender?: number;\n\n    /**\n     * Start at initialScrollPercentage.\n     * If over 100, scroll to end.\n     * @default 0\n     */\n    initialScrollPercentage?: number;\n\n    /**\n     * The value for FlatList viewabilityConfig.itemVisiblePercentThreshold.\n     * @default 0\n     */\n    itemVisiblePercentThreshold?: number;\n\n    /**\n     * Dimensions of each Image considering viewport.\n     */\n    intrinsicDimensions: Array<Dimension>;\n\n    /**\n     * Max value of contents image width size.\n     * @default 720\n     */\n    maxContentWidth?: number;\n\n    /**\n     * Width of viewport.\n     */\n    viewportWidth: number;\n\n    /**\n     * The value for FlatList windowSize.\n     * @default 3\n     */\n    windowSize?: number;\n\n    /**\n     * Get contents urls by indexes.\n     */\n    getUrlByIndex: (indexes: Array<number>) => Promise<Map<number, string> | undefined> ;\n\n    /**\n     * Handle scroll event.\n     * @param event Scroll event.\n     */\n    onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;\n\n    /**\n     * Handle item press event.\n     */\n    onItemPress?: () => void;\n\n    /**\n     * Component for comic viewer footer.\n     */\n    ListFooterComponent?: React.ReactElement;\n}> {}\n"],"mappings":""}

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/ComicViewer/ComicViewerProps.d.ts

@@ -36,6 +36,11 @@ export default interface ComicViewerProps extends ComponentProps<{
      * Dimensions of each Image considering viewport.
      */
     intrinsicDimensions: Array<Dimension>;
+    /**
+     * Max value of contents image width size.
+     * @default 720
+     */
+    maxContentWidth?: number;
     /**
      * Width of viewport.
      */

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.41",
+  "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": "496c17e2592a14dae520a43297537c3273e98426"
+  "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>;
 }> {}