@fountain-ui/lab 2.0.0-beta.87 → 3.0.0-alpha.1

package/build/commonjs/DateTimePicker/DateTimePicker.js.map

@@ -1 +1 @@
-{"version":3,"names":["useDateTimePicker","React","useContext","DateTimePickerContext","DateTimePicker","props","currentMonth","Date","locale","markedDate","markedDateProp","maxDate","minDate","onDayPress","onYearPress","onYearPressProp","theme","useTheme","textDayFontStyle","createFontStyle","selector","typo","body2","yearPickerVisible","setYearPickerVisible","useState","locales","LeftArrow","RightArrow","date","LocaleConfig","defaultLocale","format","direction","selected","disableTouchEvent","selectedColor","palette","primary","main","selectedTextColor","contrastTextColor","formatDate","toDate","backgroundColor","paper","default","calendarBackground","dayTextColor","text","textDisabledColor","hint","textDayFontFamily","fontFamily","textDayFontSize","fontSize","textDayFontWeight","fontWeight","textDayHeaderFontFamily","textDayHeaderFontSize","textDayHeaderFontWeight"],"sources":["DateTimePicker.tsx"],"sourcesContent":["import React from 'react';\nimport { format } from 'date-fns';\n//@ts-ignore\nimport { Calendar, LocaleConfig } from 'react-native-calendars';\nimport { Button, createFontStyle, Typography } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport YearPicker from './YearPicker';\nimport { DateTimePickerContext } from './DateTimePickerProvider';\nimport type DateTimePickerProps from './DateTimePickerProps';\nimport { formatDate } from './utils';\n\nconst useDateTimePicker = () => {\n    return React.useContext(DateTimePickerContext);\n};\n\nexport default function DateTimePicker(props: DateTimePickerProps) {\n    const {\n        currentMonth = new Date(),\n        locale,\n        markedDate: markedDateProp,\n        maxDate,\n        minDate,\n        onDayPress,\n        onYearPress: onYearPressProp,\n    } = props;\n\n    const theme = useTheme();\n\n    const textDayFontStyle = createFontStyle(theme, { selector: (typo) => typo.body2 });\n\n    const [yearPickerVisible, setYearPickerVisible] = React.useState(false);\n    const { locales } = useDateTimePicker();\n\n    //TODO: Need to update arrow components\n    const LeftArrow = <Typography children={'<'} color={'textPrimary'}/>;\n    const RightArrow = <Typography children={'>'} color={'textPrimary'}/>;\n\n    const onYearPress = (date: Date) => {\n        setYearPickerVisible(false);\n        onYearPressProp && onYearPressProp(date);\n    };\n\n    if (locale) {\n        LocaleConfig.locales = locales;\n        LocaleConfig.defaultLocale = locale;\n    }\n\n    const markedDate = markedDateProp ? format(markedDateProp, 'yyyy-MM-dd') : '';\n\n    if (yearPickerVisible) {\n        return (\n            <YearPicker\n                date={currentMonth}\n                locale={locale}\n                maxDate={maxDate}\n                minDate={minDate}\n                onYearPress={onYearPress}\n            />\n        );\n    }\n\n    return (\n        <Calendar\n            current={currentMonth}\n            onDayPress={onDayPress}\n            maxDate={maxDate}\n            minDate={minDate}\n            renderArrow={(direction: string) => direction === 'left' ? LeftArrow : RightArrow}\n            markedDates={{\n                [markedDate]: {\n                    selected: true,\n                    disableTouchEvent: true,\n                    selectedColor: theme.palette.primary.main,\n                    selectedTextColor: theme.palette.primary.contrastTextColor,\n                },\n            }}\n            // @ts-ignore\n            renderHeader={(date) => (\n                <Button\n                    children={formatDate(date.toDate(), locale)}\n                    variant={'text'}\n                    size={'small'}\n                    onPress={() => setYearPickerVisible(true)}\n                />\n            )}\n            theme={{\n                backgroundColor: theme.palette.paper.default,\n                calendarBackground: theme.palette.paper.default,\n                dayTextColor: theme.palette.text.primary,\n                textDisabledColor: theme.palette.text.hint,\n                textDayFontFamily: textDayFontStyle.fontFamily,\n                textDayFontSize: textDayFontStyle.fontSize,\n                textDayFontWeight: textDayFontStyle.fontWeight,\n                textDayHeaderFontFamily: textDayFontStyle.fontFamily,\n                textDayHeaderFontSize: textDayFontStyle.fontSize,\n                textDayHeaderFontWeight: textDayFontStyle.fontWeight,\n            }}\n        />\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["useDateTimePicker","React","useContext","DateTimePickerContext","DateTimePicker","props","currentMonth","Date","locale","markedDate","markedDateProp","maxDate","minDate","onDayPress","onYearPress","onYearPressProp","theme","useTheme","textDayFontStyle","createFontStyle","selector","typo","body2","yearPickerVisible","setYearPickerVisible","useState","locales","LeftArrow","RightArrow","date","LocaleConfig","defaultLocale","format","direction","selected","disableTouchEvent","selectedColor","palette","primary","main","selectedTextColor","contrastTextColor","formatDate","toDate","backgroundColor","paper","default","calendarBackground","dayTextColor","text","textDisabledColor","hint","textDayFontFamily","fontFamily","textDayFontSize","fontSize","textDayFontWeight","fontWeight","textDayHeaderFontFamily","textDayHeaderFontSize","textDayHeaderFontWeight"],"sources":["DateTimePicker.tsx"],"sourcesContent":["import React from 'react';\nimport { format } from 'date-fns';\n//@ts-ignore\nimport { Calendar, LocaleConfig } from 'react-native-calendars';\nimport { Button, createFontStyle, Typography } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport YearPicker from './YearPicker';\nimport { DateTimePickerContext } from './DateTimePickerProvider';\nimport type DateTimePickerProps from './DateTimePickerProps';\nimport { formatDate } from './utils';\n\nconst useDateTimePicker = () => {\n    return React.useContext(DateTimePickerContext);\n};\n\nexport default function DateTimePicker(props: DateTimePickerProps) {\n    const {\n        currentMonth = new Date(),\n        locale,\n        markedDate: markedDateProp,\n        maxDate,\n        minDate,\n        onDayPress,\n        onYearPress: onYearPressProp,\n    } = props;\n\n    const theme = useTheme();\n\n    const textDayFontStyle = createFontStyle(theme, { selector: (typo) => typo.body2 });\n\n    const [yearPickerVisible, setYearPickerVisible] = React.useState(false);\n    const { locales } = useDateTimePicker();\n\n    //TODO: Need to update arrow components\n    const LeftArrow = <Typography children={'<'} color={'strong'}/>;\n    const RightArrow = <Typography children={'>'} color={'strong'}/>;\n\n    const onYearPress = (date: Date) => {\n        setYearPickerVisible(false);\n        onYearPressProp && onYearPressProp(date);\n    };\n\n    if (locale) {\n        LocaleConfig.locales = locales;\n        LocaleConfig.defaultLocale = locale;\n    }\n\n    const markedDate = markedDateProp ? format(markedDateProp, 'yyyy-MM-dd') : '';\n\n    if (yearPickerVisible) {\n        return (\n            <YearPicker\n                date={currentMonth}\n                locale={locale}\n                maxDate={maxDate}\n                minDate={minDate}\n                onYearPress={onYearPress}\n            />\n        );\n    }\n\n    return (\n        <Calendar\n            current={currentMonth}\n            onDayPress={onDayPress}\n            maxDate={maxDate}\n            minDate={minDate}\n            renderArrow={(direction: string) => direction === 'left' ? LeftArrow : RightArrow}\n            markedDates={{\n                [markedDate]: {\n                    selected: true,\n                    disableTouchEvent: true,\n                    selectedColor: theme.palette.primary.main,\n                    selectedTextColor: theme.palette.primary.contrastTextColor,\n                },\n            }}\n            // @ts-ignore\n            renderHeader={(date) => (\n                <Button\n                    children={formatDate(date.toDate(), locale)}\n                    variant={'text'}\n                    size={'small'}\n                    onPress={() => setYearPickerVisible(true)}\n                />\n            )}\n            theme={{\n                backgroundColor: theme.palette.paper.default,\n                calendarBackground: theme.palette.paper.default,\n                dayTextColor: theme.palette.text.primary,\n                textDisabledColor: theme.palette.text.hint,\n                textDayFontFamily: textDayFontStyle.fontFamily,\n                textDayFontSize: textDayFontStyle.fontSize,\n                textDayFontWeight: textDayFontStyle.fontWeight,\n                textDayHeaderFontFamily: textDayFontStyle.fontFamily,\n                textDayHeaderFontSize: textDayFontStyle.fontSize,\n                textDayHeaderFontWeight: textDayFontStyle.fontWeight,\n            }}\n        />\n    );\n};\n"],"mappings":"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"}

package/build/commonjs/DateTimePicker/YearPicker.js

@@ -63,8 +63,8 @@ const YearPicker = _ref => {
 
   return /*#__PURE__*/_react.default.createElement(_core.Column, null, /*#__PURE__*/_react.default.createElement(_core.Typography, {
     children: (0, _utils.formatDate)(date, locale),
-    color: 'textPrimary',
-    variant: 'subtitle2'
+    color: 'strong',
+    variant: 'body3'
   }), /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
     data: years,
     keyExtractor: item => item.toString(),

package/build/commonjs/DateTimePicker/YearPicker.js.map

@@ -1 +1 @@
-{"version":3,"names":["initYear","itemHeight","useStyles","theme","useTheme","list","marginTop","spacing","maxHeight","YearPicker","date","locale","maxDate","minDate","onYearPress","styles","ref","React","useRef","minYear","getYear","maxYear","Date","years","Array","fill","map","v","i","useEffect","current","scrollToItem","animated","item","getItemLayout","data","index","length","offset","formatDate","toString","newDate","setYear"],"sources":["YearPicker.tsx"],"sourcesContent":["import React from 'react';\nimport { FlatList } from 'react-native';\nimport { getYear, setYear } from 'date-fns';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { Button, Column, Typography, useTheme } from '@fountain-ui/core';\nimport { formatDate } from './utils';\n\nconst initYear = 1901;\nconst itemHeight = 40;\n\ninterface YearPickerProps {\n    date: Date;\n    locale?: string,\n    maxDate?: Date;\n    minDate?: Date;\n    onYearPress: (date: Date) => void;\n}\n\ntype YearPickerStyles = NamedStylesStringUnion<'list'>;\n\nconst useStyles: UseStyles<YearPickerStyles> = function (): YearPickerStyles {\n    const theme = useTheme();\n\n    return {\n        list: {\n            marginTop: theme.spacing(1),\n            maxHeight: 270,\n        },\n    };\n};\n\nconst YearPicker = ({\n    date,\n    locale,\n    maxDate,\n    minDate,\n    onYearPress,\n}: YearPickerProps) => {\n    const styles = useStyles();\n\n    const ref = React.useRef<FlatList | null>(null);\n\n    const minYear = minDate ? getYear(minDate) : initYear;\n    const maxYear = maxDate ? getYear(maxDate) : getYear(new Date());\n    const years = Array(maxYear - minYear + 1).fill(minYear).map((v, i) => v + i);\n\n    React.useEffect(() => {\n        ref.current?.scrollToItem({\n            animated: false,\n            item: getYear(date),\n        });\n    }, [date]);\n\n    const getItemLayout = (data: Array<number> | null | undefined, index: number) => ({\n        length: itemHeight,\n        offset: itemHeight * index,\n        index,\n    });\n\n    return (\n        <Column>\n            <Typography\n                children={formatDate(date, locale)}\n                color={'textPrimary'}\n                variant={'subtitle2'}\n            />\n            <FlatList\n                data={years}\n                keyExtractor={item => item.toString()}\n                renderItem={({ item }) => (\n                    <Button\n                        children={item.toString()}\n                        variant={'text'}\n                        onPress={() => {\n                            const newDate = setYear(date, item);\n                            onYearPress(newDate);\n                        }}\n                    />\n                )}\n                getItemLayout={getItemLayout}\n                style={styles.list}\n                ref={ref}\n            />\n        </Column>\n    );\n};\n\nexport default YearPicker;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;;;AAEA,MAAMA,QAAQ,GAAG,IAAjB;AACA,MAAMC,UAAU,GAAG,EAAnB;;AAYA,MAAMC,SAAsC,GAAG,YAA8B;EACzE,MAAMC,KAAK,GAAG,IAAAC,cAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,SAAS,EAAEH,KAAK,CAACI,OAAN,CAAc,CAAd,CADT;MAEFC,SAAS,EAAE;IAFT;EADH,CAAP;AAMH,CATD;;AAWA,MAAMC,UAAU,GAAG,QAMI;EAAA,IANH;IAChBC,IADgB;IAEhBC,MAFgB;IAGhBC,OAHgB;IAIhBC,OAJgB;IAKhBC;EALgB,CAMG;EACnB,MAAMC,MAAM,GAAGb,SAAS,EAAxB;;EAEA,MAAMc,GAAG,GAAGC,cAAA,CAAMC,MAAN,CAA8B,IAA9B,CAAZ;;EAEA,MAAMC,OAAO,GAAGN,OAAO,GAAG,IAAAO,gBAAA,EAAQP,OAAR,CAAH,GAAsBb,QAA7C;EACA,MAAMqB,OAAO,GAAGT,OAAO,GAAG,IAAAQ,gBAAA,EAAQR,OAAR,CAAH,GAAsB,IAAAQ,gBAAA,EAAQ,IAAIE,IAAJ,EAAR,CAA7C;EACA,MAAMC,KAAK,GAAGC,KAAK,CAACH,OAAO,GAAGF,OAAV,GAAoB,CAArB,CAAL,CAA6BM,IAA7B,CAAkCN,OAAlC,EAA2CO,GAA3C,CAA+C,CAACC,CAAD,EAAIC,CAAJ,KAAUD,CAAC,GAAGC,CAA7D,CAAd;;EAEAX,cAAA,CAAMY,SAAN,CAAgB,MAAM;IAAA;;IAClB,gBAAAb,GAAG,CAACc,OAAJ,8DAAaC,YAAb,CAA0B;MACtBC,QAAQ,EAAE,KADY;MAEtBC,IAAI,EAAE,IAAAb,gBAAA,EAAQV,IAAR;IAFgB,CAA1B;EAIH,CALD,EAKG,CAACA,IAAD,CALH;;EAOA,MAAMwB,aAAa,GAAG,CAACC,IAAD,EAAyCC,KAAzC,MAA4D;IAC9EC,MAAM,EAAEpC,UADsE;IAE9EqC,MAAM,EAAErC,UAAU,GAAGmC,KAFyD;IAG9EA;EAH8E,CAA5D,CAAtB;;EAMA,oBACI,6BAAC,YAAD,qBACI,6BAAC,gBAAD;IACI,QAAQ,EAAE,IAAAG,iBAAA,EAAW7B,IAAX,EAAiBC,MAAjB,CADd;IAEI,KAAK,EAAE,aAFX;IAGI,OAAO,EAAE;EAHb,EADJ,eAMI,6BAAC,qBAAD;IACI,IAAI,EAAEY,KADV;IAEI,YAAY,EAAEU,IAAI,IAAIA,IAAI,CAACO,QAAL,EAF1B;IAGI,UAAU,EAAE;MAAA,IAAC;QAAEP;MAAF,CAAD;MAAA,oBACR,6BAAC,YAAD;QACI,QAAQ,EAAEA,IAAI,CAACO,QAAL,EADd;QAEI,OAAO,EAAE,MAFb;QAGI,OAAO,EAAE,MAAM;UACX,MAAMC,OAAO,GAAG,IAAAC,gBAAA,EAAQhC,IAAR,EAAcuB,IAAd,CAAhB;UACAnB,WAAW,CAAC2B,OAAD,CAAX;QACH;MANL,EADQ;IAAA,CAHhB;IAaI,aAAa,EAAEP,aAbnB;IAcI,KAAK,EAAEnB,MAAM,CAACV,IAdlB;IAeI,GAAG,EAAEW;EAfT,EANJ,CADJ;AA0BH,CAtDD;;eAwDeP,U"}
+{"version":3,"names":["initYear","itemHeight","useStyles","theme","useTheme","list","marginTop","spacing","maxHeight","YearPicker","date","locale","maxDate","minDate","onYearPress","styles","ref","React","useRef","minYear","getYear","maxYear","Date","years","Array","fill","map","v","i","useEffect","current","scrollToItem","animated","item","getItemLayout","data","index","length","offset","formatDate","toString","newDate","setYear"],"sources":["YearPicker.tsx"],"sourcesContent":["import React from 'react';\nimport { FlatList } from 'react-native';\nimport { getYear, setYear } from 'date-fns';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { Button, Column, Typography, useTheme } from '@fountain-ui/core';\nimport { formatDate } from './utils';\n\nconst initYear = 1901;\nconst itemHeight = 40;\n\ninterface YearPickerProps {\n    date: Date;\n    locale?: string,\n    maxDate?: Date;\n    minDate?: Date;\n    onYearPress: (date: Date) => void;\n}\n\ntype YearPickerStyles = NamedStylesStringUnion<'list'>;\n\nconst useStyles: UseStyles<YearPickerStyles> = function (): YearPickerStyles {\n    const theme = useTheme();\n\n    return {\n        list: {\n            marginTop: theme.spacing(1),\n            maxHeight: 270,\n        },\n    };\n};\n\nconst YearPicker = ({\n    date,\n    locale,\n    maxDate,\n    minDate,\n    onYearPress,\n}: YearPickerProps) => {\n    const styles = useStyles();\n\n    const ref = React.useRef<FlatList | null>(null);\n\n    const minYear = minDate ? getYear(minDate) : initYear;\n    const maxYear = maxDate ? getYear(maxDate) : getYear(new Date());\n    const years = Array(maxYear - minYear + 1).fill(minYear).map((v, i) => v + i);\n\n    React.useEffect(() => {\n        ref.current?.scrollToItem({\n            animated: false,\n            item: getYear(date),\n        });\n    }, [date]);\n\n    const getItemLayout = (data: Array<number> | null | undefined, index: number) => ({\n        length: itemHeight,\n        offset: itemHeight * index,\n        index,\n    });\n\n    return (\n        <Column>\n            <Typography\n                children={formatDate(date, locale)}\n                color={'strong'}\n                variant={'body3'}\n            />\n            <FlatList\n                data={years}\n                keyExtractor={item => item.toString()}\n                renderItem={({ item }) => (\n                    <Button\n                        children={item.toString()}\n                        variant={'text'}\n                        onPress={() => {\n                            const newDate = setYear(date, item);\n                            onYearPress(newDate);\n                        }}\n                    />\n                )}\n                getItemLayout={getItemLayout}\n                style={styles.list}\n                ref={ref}\n            />\n        </Column>\n    );\n};\n\nexport default YearPicker;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;;;AAEA,MAAMA,QAAQ,GAAG,IAAjB;AACA,MAAMC,UAAU,GAAG,EAAnB;;AAYA,MAAMC,SAAsC,GAAG,YAA8B;EACzE,MAAMC,KAAK,GAAG,IAAAC,cAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,SAAS,EAAEH,KAAK,CAACI,OAAN,CAAc,CAAd,CADT;MAEFC,SAAS,EAAE;IAFT;EADH,CAAP;AAMH,CATD;;AAWA,MAAMC,UAAU,GAAG,QAMI;EAAA,IANH;IAChBC,IADgB;IAEhBC,MAFgB;IAGhBC,OAHgB;IAIhBC,OAJgB;IAKhBC;EALgB,CAMG;EACnB,MAAMC,MAAM,GAAGb,SAAS,EAAxB;;EAEA,MAAMc,GAAG,GAAGC,cAAA,CAAMC,MAAN,CAA8B,IAA9B,CAAZ;;EAEA,MAAMC,OAAO,GAAGN,OAAO,GAAG,IAAAO,gBAAA,EAAQP,OAAR,CAAH,GAAsBb,QAA7C;EACA,MAAMqB,OAAO,GAAGT,OAAO,GAAG,IAAAQ,gBAAA,EAAQR,OAAR,CAAH,GAAsB,IAAAQ,gBAAA,EAAQ,IAAIE,IAAJ,EAAR,CAA7C;EACA,MAAMC,KAAK,GAAGC,KAAK,CAACH,OAAO,GAAGF,OAAV,GAAoB,CAArB,CAAL,CAA6BM,IAA7B,CAAkCN,OAAlC,EAA2CO,GAA3C,CAA+C,CAACC,CAAD,EAAIC,CAAJ,KAAUD,CAAC,GAAGC,CAA7D,CAAd;;EAEAX,cAAA,CAAMY,SAAN,CAAgB,MAAM;IAAA;;IAClB,gBAAAb,GAAG,CAACc,OAAJ,8DAAaC,YAAb,CAA0B;MACtBC,QAAQ,EAAE,KADY;MAEtBC,IAAI,EAAE,IAAAb,gBAAA,EAAQV,IAAR;IAFgB,CAA1B;EAIH,CALD,EAKG,CAACA,IAAD,CALH;;EAOA,MAAMwB,aAAa,GAAG,CAACC,IAAD,EAAyCC,KAAzC,MAA4D;IAC9EC,MAAM,EAAEpC,UADsE;IAE9EqC,MAAM,EAAErC,UAAU,GAAGmC,KAFyD;IAG9EA;EAH8E,CAA5D,CAAtB;;EAMA,oBACI,6BAAC,YAAD,qBACI,6BAAC,gBAAD;IACI,QAAQ,EAAE,IAAAG,iBAAA,EAAW7B,IAAX,EAAiBC,MAAjB,CADd;IAEI,KAAK,EAAE,QAFX;IAGI,OAAO,EAAE;EAHb,EADJ,eAMI,6BAAC,qBAAD;IACI,IAAI,EAAEY,KADV;IAEI,YAAY,EAAEU,IAAI,IAAIA,IAAI,CAACO,QAAL,EAF1B;IAGI,UAAU,EAAE;MAAA,IAAC;QAAEP;MAAF,CAAD;MAAA,oBACR,6BAAC,YAAD;QACI,QAAQ,EAAEA,IAAI,CAACO,QAAL,EADd;QAEI,OAAO,EAAE,MAFb;QAGI,OAAO,EAAE,MAAM;UACX,MAAMC,OAAO,GAAG,IAAAC,gBAAA,EAAQhC,IAAR,EAAcuB,IAAd,CAAhB;UACAnB,WAAW,CAAC2B,OAAD,CAAX;QACH;MANL,EADQ;IAAA,CAHhB;IAaI,aAAa,EAAEP,aAbnB;IAcI,KAAK,EAAEnB,MAAM,CAACV,IAdlB;IAeI,GAAG,EAAEW;EAfT,EANJ,CADJ;AA0BH,CAtDD;;eAwDeP,U"}

package/build/module/BottomSheet/BottomSheetNative.js

@@ -1,60 +1,52 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React from 'react';
-import { Animated, Platform, useWindowDimensions, View } from 'react-native';
-import { BottomSheetBackdrop, BottomSheetFooter, BottomSheetModal, BottomSheetModalProvider, BottomSheetScrollView } from '@gorhom/bottom-sheet';
-import { Column, isNotAndroid12, useAnimatedValue, useElevationStyle } from '@fountain-ui/core';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Animated, useWindowDimensions } from 'react-native';
+import { BottomSheetBackdrop, BottomSheetModal, BottomSheetModalProvider, BottomSheetView } from '@gorhom/bottom-sheet';
+import { Column, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';
 import { useTheme } from '@fountain-ui/styles';
 import TransparentBackdrop from './TransparentBackdrop';
 
 const NoHandle = () => null;
 
-const createHeightLayoutHandler = setHeight => {
-  return event => {
-    const {
-      height
-    } = event.nativeEvent.layout;
-    setHeight(height);
-  };
-};
-
 export default function BottomSheet(props) {
   const {
     backdropOpacity = 0.5,
     borderRadius: borderRadiusProp,
     children,
     enableDynamicSizing = true,
-    header,
-    stickyBottomElement,
     topElement,
     index,
-    maxHeightNormalizedRatio = 0.9,
+    maxHeightNormalizedRatio = 0.8,
     onChange,
-    snapPoints = [],
-    enableScrollableHeaderBorder = false
+    snapPoints = []
   } = props;
-  const indexRef = React.useRef(-1);
-  const bottomSheetRef = React.useRef(null);
+  const indexRef = useRef(-1);
+  const bottomSheetRef = useRef(null);
   const {
     height: windowHeight
   } = useWindowDimensions();
-  const [isScrollable, setIsScrollable] = React.useState(false);
-  const [topElementHeight, setTopElementHeight] = React.useState(0);
-  const [stickyBottomElementHeight, setStickyBottomElementHeight] = React.useState(0);
+  const [topElementHeight, setTopElementHeight] = useState(0);
   const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;
-  const handleTopElementLayout = createHeightLayoutHandler(setTopElementHeight);
-  const handleStickyBottomElementLayout = createHeightLayoutHandler(setStickyBottomElementHeight);
-  const handleChange = React.useCallback(newIndex => {
+
+  const handleTopElementLayout = event => {
+    const {
+      height
+    } = event.nativeEvent.layout;
+    setTopElementHeight(height);
+  };
+
+  const handleChange = useCallback(newIndex => {
     indexRef.current = newIndex;
 
     if (onChange) {
       onChange(newIndex);
     }
   }, [onChange]);
-  const handleDismiss = React.useCallback(() => {
+  const handleDismiss = useCallback(() => {
     handleChange(-1);
   }, [handleChange]);
-  React.useEffect(() => {
+  useEffect(() => {
     if (index === indexRef.current) {
       return;
     }
@@ -75,29 +67,19 @@ export default function BottomSheet(props) {
     }
   }, [index]);
   const theme = useTheme();
-  const shadow = theme.shadow[12];
-  const borderRadius = borderRadiusProp ?? theme.shape.roundnessExtra;
-  const modalStyle = {
-    backgroundColor: '#ffffff00',
-    borderTopLeftRadius: borderRadius,
-    borderTopRightRadius: borderRadius,
-    ...Platform.select({
-      android: shadow === null || shadow === void 0 ? void 0 : shadow.elevation,
-      ios: shadow === null || shadow === void 0 ? void 0 : shadow.shadow,
-      web: shadow === null || shadow === void 0 ? void 0 : shadow.boxShadow
-    })
-  };
-  const backgroundColor = theme.palette.paper.default;
+  const borderRadius = borderRadiusProp ?? theme.shape.radius.xxl;
   const backgroundStyle = {
-    backgroundColor,
+    backgroundColor: theme.palette.surface.base,
     borderTopLeftRadius: borderRadius,
     borderTopRightRadius: borderRadius
   };
   const contentWrapperStyle = {
     flex: 1,
-    borderTopLeftRadius: borderRadius,
-    borderTopRightRadius: borderRadius,
-    overflow: 'hidden'
+    maxHeight: maxDynamicContentSize,
+    minHeight: 300,
+    overflow: 'hidden',
+    paddingBottom: theme.spacing(6),
+    paddingTop: theme.spacing(5.5)
   };
   const isBackdropTransparent = backdropOpacity <= 0;
 
@@ -127,32 +109,6 @@ export default function BottomSheet(props) {
     }).start();
   };
 
-  const handleContentSizeChange = (_, contentHeight) => {
-    setIsScrollable(contentHeight > maxDynamicContentSize);
-  };
-
-  const headerStyle = {
-    backgroundColor,
-    ...(isScrollable && enableScrollableHeaderBorder ? {
-      borderBottomWidth: 0.5,
-      borderBottomColor: theme.palette.divider
-    } : {})
-  };
-  const childrenStyle = {
-    backgroundColor,
-    paddingBottom: stickyBottomElementHeight
-  };
-  const stickyBottomElementShadow = useElevationStyle(8);
-  const stickyBottomElementStyle = {
-    backgroundColor: theme.palette.paper.default,
-    ...(isScrollable ? stickyBottomElementShadow : {})
-  };
-
-  const renderFooter = props => /*#__PURE__*/React.createElement(BottomSheetFooter, props, /*#__PURE__*/React.createElement(View, {
-    onLayout: handleStickyBottomElementLayout,
-    style: stickyBottomElementStyle
-  }, stickyBottomElement));
-
   return /*#__PURE__*/React.createElement(BottomSheetModalProvider, null, /*#__PURE__*/React.createElement(BottomSheetModal, {
     backdropComponent: isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop // @ts-ignore
     ,
@@ -163,29 +119,19 @@ export default function BottomSheet(props) {
     onDismiss: handleDismiss,
     ref: bottomSheetRef,
     snapPoints: snapPoints,
-    style: modalStyle,
     enablePanDownToClose: Boolean(onChange),
     enableDynamicSizing: enableDynamicSizing,
     maxDynamicContentSize: maxDynamicContentSize,
     detached: Boolean(topElement),
-    onAnimate: topElement ? onAnimate : undefined,
-    footerComponent: stickyBottomElement ? renderFooter : undefined
+    onAnimate: topElement ? onAnimate : undefined
   }, topElement ? /*#__PURE__*/React.createElement(Animated.View, {
     style: topElementAnimationStyle
   }, /*#__PURE__*/React.createElement(Column, {
     onLayout: handleTopElementLayout,
     style: topElementLocationStyle
-  }, topElement)) : null, /*#__PURE__*/React.createElement(View, {
+  }, topElement)) : null, /*#__PURE__*/React.createElement(BottomSheetView, {
     style: contentWrapperStyle
-  }, /*#__PURE__*/React.createElement(BottomSheetScrollView, {
-    bounces: false,
-    stickyHeaderIndices: header ? [0] : undefined,
-    onContentSizeChange: handleContentSizeChange
-  }, /*#__PURE__*/React.createElement(View, {
-    style: headerStyle
-  }, header), /*#__PURE__*/React.createElement(View, {
-    style: childrenStyle
-  }, children)))));
+  }, children)));
 }
 ;
 //# sourceMappingURL=BottomSheetNative.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","Animated","Platform","useWindowDimensions","View","BottomSheetBackdrop","BottomSheetFooter","BottomSheetModal","BottomSheetModalProvider","BottomSheetScrollView","Column","isNotAndroid12","useAnimatedValue","useElevationStyle","useTheme","TransparentBackdrop","NoHandle","createHeightLayoutHandler","setHeight","event","height","nativeEvent","layout","BottomSheet","props","backdropOpacity","borderRadius","borderRadiusProp","children","enableDynamicSizing","header","stickyBottomElement","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","enableScrollableHeaderBorder","indexRef","useRef","bottomSheetRef","windowHeight","isScrollable","setIsScrollable","useState","topElementHeight","setTopElementHeight","stickyBottomElementHeight","setStickyBottomElementHeight","maxDynamicContentSize","Math","round","handleTopElementLayout","handleStickyBottomElementLayout","handleChange","useCallback","newIndex","current","handleDismiss","useEffect","present","dismiss","snapToIndex","theme","shadow","shape","roundnessExtra","modalStyle","backgroundColor","borderTopLeftRadius","borderTopRightRadius","select","android","elevation","ios","web","boxShadow","palette","paper","default","backgroundStyle","contentWrapperStyle","flex","overflow","isBackdropTransparent","OpacityAwareBackdrop","topElementOpacity","topElementAnimationStyle","opacity","topElementLocationStyle","position","width","bottom","onAnimate","fromIndex","toIndex","isVisible","timing","toValue","duration","useNativeDriver","start","handleContentSizeChange","_","contentHeight","headerStyle","borderBottomWidth","borderBottomColor","divider","childrenStyle","paddingBottom","stickyBottomElementShadow","stickyBottomElementStyle","renderFooter","Boolean","undefined"],"sources":["BottomSheetNative.tsx"],"sourcesContent":["import React from 'react';\nimport { Animated, LayoutChangeEvent, Platform, useWindowDimensions, View, ViewStyle } from 'react-native';\nimport {\n    BottomSheetBackdrop,\n    BottomSheetBackdropProps,\n    BottomSheetFooter,\n    BottomSheetFooterProps,\n    BottomSheetModal,\n    BottomSheetModalProvider,\n    BottomSheetScrollView,\n} from '@gorhom/bottom-sheet';\nimport { Column, ExtendedStyle, isNotAndroid12, useAnimatedValue, useElevationStyle } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport type BottomSheetProps from './BottomSheetProps';\nimport TransparentBackdrop from './TransparentBackdrop';\n\nconst NoHandle = () => null;\n\nconst createHeightLayoutHandler = (setHeight: React.Dispatch<React.SetStateAction<number>>) => {\n    return (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setHeight(height);\n    };\n}\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity = 0.5,\n        borderRadius: borderRadiusProp,\n        children,\n        enableDynamicSizing = true,\n        header,\n        stickyBottomElement,\n        topElement,\n        index,\n        maxHeightNormalizedRatio = 0.9,\n        onChange,\n        snapPoints = [],\n        enableScrollableHeaderBorder = false,\n    } = props;\n\n    const indexRef = React.useRef<number>(-1);\n    const bottomSheetRef = React.useRef<BottomSheetModal | null>(null);\n\n    const { height: windowHeight } = useWindowDimensions();\n    const [isScrollable, setIsScrollable] = React.useState(false);\n    const [topElementHeight, setTopElementHeight] = React.useState(0);\n    const [stickyBottomElementHeight, setStickyBottomElementHeight] = React.useState(0);\n\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;\n\n    const handleTopElementLayout = createHeightLayoutHandler(setTopElementHeight);\n    const handleStickyBottomElementLayout = createHeightLayoutHandler(setStickyBottomElementHeight);\n\n    const handleChange = React.useCallback((newIndex: number) => {\n        indexRef.current = newIndex;\n\n        if (onChange) {\n            onChange(newIndex);\n        }\n    }, [onChange]);\n\n    const handleDismiss = React.useCallback(() => {\n        handleChange(-1);\n    }, [handleChange]);\n\n    React.useEffect(() => {\n        if (index === indexRef.current) {\n            return;\n        }\n\n        if (indexRef.current < 0 && index >= 0) {\n            bottomSheetRef.current?.present();\n        } else if (indexRef.current >= 0 && index < 0) {\n            bottomSheetRef.current?.dismiss();\n        } else {\n            // @ts-ignore\n            bottomSheetRef.current?.snapToIndex(index);\n        }\n    }, [index]);\n\n    const theme = useTheme();\n    const shadow = theme.shadow[12];\n    const borderRadius = borderRadiusProp ?? theme.shape.roundnessExtra;\n    const modalStyle = {\n        backgroundColor: '#ffffff00',\n        borderTopLeftRadius: borderRadius,\n        borderTopRightRadius: borderRadius,\n        ...Platform.select<object>({\n            android: shadow?.elevation,\n            ios: shadow?.shadow,\n            web: shadow?.boxShadow,\n        }),\n    };\n    const backgroundColor = theme.palette.paper.default;\n    const backgroundStyle = {\n        backgroundColor,\n        borderTopLeftRadius: borderRadius,\n        borderTopRightRadius: borderRadius,\n    };\n    const contentWrapperStyle: ViewStyle = {\n        flex: 1,\n        borderTopLeftRadius: borderRadius,\n        borderTopRightRadius: borderRadius,\n        overflow: 'hidden',\n    };\n\n    const isBackdropTransparent = backdropOpacity <= 0;\n\n    const OpacityAwareBackdrop = (props: BottomSheetBackdropProps) => (\n        <BottomSheetBackdrop\n            {...props}\n            appearsOnIndex={0}\n            disappearsOnIndex={-1}\n            opacity={backdropOpacity}\n            pressBehavior={onChange ? 'close' : 'none'}\n        />\n    );\n\n    const topElementOpacity = useAnimatedValue(0);\n    const topElementAnimationStyle: Animated.WithAnimatedValue<ExtendedStyle> = { opacity: topElementOpacity };\n    const topElementLocationStyle: ExtendedStyle = {\n        position: 'absolute',\n        width: '100%',\n        bottom: 0,\n    };\n    const onAnimate = (fromIndex: number, toIndex: number) => {\n        const isVisible = toIndex > -1;\n\n        Animated.timing(topElementOpacity, {\n            toValue: isVisible ? 1 : 0,\n            duration: 0,\n            useNativeDriver: isNotAndroid12,\n        }).start();\n    };\n\n    const handleContentSizeChange = (_: number, contentHeight: number) => {\n        setIsScrollable(contentHeight > maxDynamicContentSize);\n    };\n\n    const headerStyle = {\n        backgroundColor,\n        ...(isScrollable && enableScrollableHeaderBorder ? {\n            borderBottomWidth: 0.5,\n            borderBottomColor: theme.palette.divider,\n        }: {})\n    }\n\n    const childrenStyle = {\n        backgroundColor,\n        paddingBottom: stickyBottomElementHeight,\n    }\n\n    const stickyBottomElementShadow = useElevationStyle(8);\n\n    const stickyBottomElementStyle = {\n        backgroundColor: theme.palette.paper.default,\n        ...(isScrollable ? stickyBottomElementShadow : {}),\n    }\n\n    const renderFooter = (props: BottomSheetFooterProps) => (\n        <BottomSheetFooter {...props}>\n            <View\n                onLayout={handleStickyBottomElementLayout}\n                style={stickyBottomElementStyle}\n            >\n                {stickyBottomElement}\n            </View>\n        </BottomSheetFooter>\n    );\n\n    return (\n        <BottomSheetModalProvider>\n            <BottomSheetModal\n                backdropComponent={isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop}\n                // @ts-ignore\n                backgroundStyle={backgroundStyle}\n                index={index}\n                handleComponent={NoHandle}\n                onChange={handleChange}\n                onDismiss={handleDismiss}\n                ref={bottomSheetRef}\n                snapPoints={snapPoints}\n                style={modalStyle}\n                enablePanDownToClose={Boolean(onChange)}\n                enableDynamicSizing={enableDynamicSizing}\n                maxDynamicContentSize={maxDynamicContentSize}\n                detached={Boolean(topElement)}\n                onAnimate={topElement ? onAnimate : undefined}\n                footerComponent={stickyBottomElement ? renderFooter : undefined}\n            >\n                {topElement ? (\n                    <Animated.View style={topElementAnimationStyle}>\n                        <Column\n                            onLayout={handleTopElementLayout}\n                            style={topElementLocationStyle}\n                        >\n                            {topElement}\n                        </Column>\n                    </Animated.View>\n                ) : null}\n\n                <View style={contentWrapperStyle}>\n                    <BottomSheetScrollView\n                        bounces={false}\n                        stickyHeaderIndices={header ? [0] : undefined}\n                        onContentSizeChange={handleContentSizeChange}\n                    >\n                        <View style={headerStyle}>\n                            {header}\n                        </View>\n\n                        <View style={childrenStyle}>\n                            {children}\n                        </View>\n                    </BottomSheetScrollView>\n                </View>\n            </BottomSheetModal>\n        </BottomSheetModalProvider>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","useCallback","useEffect","useRef","useState","Animated","useWindowDimensions","BottomSheetBackdrop","BottomSheetModal","BottomSheetModalProvider","BottomSheetView","Column","isNotAndroid12","useAnimatedValue","useTheme","TransparentBackdrop","NoHandle","BottomSheet","props","backdropOpacity","borderRadius","borderRadiusProp","children","enableDynamicSizing","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","indexRef","bottomSheetRef","height","windowHeight","topElementHeight","setTopElementHeight","maxDynamicContentSize","Math","round","handleTopElementLayout","event","nativeEvent","layout","handleChange","newIndex","current","handleDismiss","present","dismiss","snapToIndex","theme","shape","radius","xxl","backgroundStyle","backgroundColor","palette","surface","base","borderTopLeftRadius","borderTopRightRadius","contentWrapperStyle","flex","maxHeight","minHeight","overflow","paddingBottom","spacing","paddingTop","isBackdropTransparent","OpacityAwareBackdrop","topElementOpacity","topElementAnimationStyle","opacity","topElementLocationStyle","position","width","bottom","onAnimate","fromIndex","toIndex","isVisible","timing","toValue","duration","useNativeDriver","start","Boolean","undefined"],"sources":["BottomSheetNative.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Animated, LayoutChangeEvent, useWindowDimensions, ViewStyle } from 'react-native';\nimport {\n    BottomSheetBackdrop,\n    BottomSheetBackdropProps,\n    BottomSheetModal,\n    BottomSheetModalProvider,\n    BottomSheetView,\n} from '@gorhom/bottom-sheet';\nimport { Column, ExtendedStyle, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport type BottomSheetProps from './BottomSheetProps';\nimport TransparentBackdrop from './TransparentBackdrop';\n\nconst NoHandle = () => null;\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity = 0.5,\n        borderRadius: borderRadiusProp,\n        children,\n        enableDynamicSizing = true,\n        topElement,\n        index,\n        maxHeightNormalizedRatio = 0.8,\n        onChange,\n        snapPoints = [],\n    } = props;\n\n    const indexRef = useRef<number>(-1);\n    const bottomSheetRef = useRef<BottomSheetModal | null>(null);\n\n    const { height: windowHeight } = useWindowDimensions();\n    const [topElementHeight, setTopElementHeight] = useState(0);\n\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;\n\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const handleChange = useCallback((newIndex: number) => {\n        indexRef.current = newIndex;\n\n        if (onChange) {\n            onChange(newIndex);\n        }\n    }, [onChange]);\n\n    const handleDismiss = useCallback(() => {\n        handleChange(-1);\n    }, [handleChange]);\n\n    useEffect(() => {\n        if (index === indexRef.current) {\n            return;\n        }\n\n        if (indexRef.current < 0 && index >= 0) {\n            bottomSheetRef.current?.present();\n        } else if (indexRef.current >= 0 && index < 0) {\n            bottomSheetRef.current?.dismiss();\n        } else {\n            // @ts-ignore\n            bottomSheetRef.current?.snapToIndex(index);\n        }\n    }, [index]);\n\n    const theme = useTheme();\n\n    const borderRadius = borderRadiusProp ?? theme.shape.radius.xxl;\n    const backgroundStyle = {\n        backgroundColor: theme.palette.surface.base,\n        borderTopLeftRadius: borderRadius,\n        borderTopRightRadius: borderRadius,\n    };\n\n    const contentWrapperStyle: ViewStyle = {\n        flex: 1,\n        maxHeight: maxDynamicContentSize,\n        minHeight: 300,\n        overflow: 'hidden',\n        paddingBottom: theme.spacing(6),\n        paddingTop: theme.spacing(5.5),\n    };\n\n    const isBackdropTransparent = backdropOpacity <= 0;\n\n    const OpacityAwareBackdrop = (props: BottomSheetBackdropProps) => (\n        <BottomSheetBackdrop\n            {...props}\n            appearsOnIndex={0}\n            disappearsOnIndex={-1}\n            opacity={backdropOpacity}\n            pressBehavior={onChange ? 'close' : 'none'}\n        />\n    );\n\n    const topElementOpacity = useAnimatedValue(0);\n    const topElementAnimationStyle: Animated.WithAnimatedValue<ExtendedStyle> = { opacity: topElementOpacity };\n    const topElementLocationStyle: ExtendedStyle = {\n        position: 'absolute',\n        width: '100%',\n        bottom: 0,\n    };\n    const onAnimate = (fromIndex: number, toIndex: number) => {\n        const isVisible = toIndex > -1;\n\n        Animated.timing(topElementOpacity, {\n            toValue: isVisible ? 1 : 0,\n            duration: 0,\n            useNativeDriver: isNotAndroid12,\n        }).start();\n    };\n\n    return (\n        <BottomSheetModalProvider>\n            <BottomSheetModal\n                backdropComponent={isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop}\n                // @ts-ignore\n                backgroundStyle={backgroundStyle}\n                index={index}\n                handleComponent={NoHandle}\n                onChange={handleChange}\n                onDismiss={handleDismiss}\n                ref={bottomSheetRef}\n                snapPoints={snapPoints}\n                enablePanDownToClose={Boolean(onChange)}\n                enableDynamicSizing={enableDynamicSizing}\n                maxDynamicContentSize={maxDynamicContentSize}\n                detached={Boolean(topElement)}\n                onAnimate={topElement ? onAnimate : undefined}\n            >\n                {topElement ? (\n                    <Animated.View style={topElementAnimationStyle}>\n                        <Column\n                            onLayout={handleTopElementLayout}\n                            style={topElementLocationStyle}\n                        >\n                            {topElement}\n                        </Column>\n                    </Animated.View>\n                ) : null}\n\n                <BottomSheetView style={contentWrapperStyle}>\n                    {children}\n                </BottomSheetView>\n            </BottomSheetModal>\n        </BottomSheetModalProvider>\n    );\n};\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["BottomSheetProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ComponentProps } from '@fountain-ui/core';\n\nexport default interface BottomSheetProps extends ComponentProps<{\n    /**\n     * Opacity for BackdropComponent\n     * @default 0.5\n     */\n    backdropOpacity?: number;\n\n    /**\n     * Border radius for bottom sheet\n     */\n    borderRadius?: number;\n\n    /**\n     * BottomSheet children, usually the included sub-components.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * Enable dynamic sizing for content size.\n     * @default true\n     */\n    enableDynamicSizing?: boolean;\n\n    /**\n     * Area to be fixed on the top of the bottom sheet.\n     */\n    header?: React.ReactNode;\n\n    /**\n     * If set to true, a border will be applied to the header area when the bottom sheet content is scrollable.\n     * This visually separates the header from the scrollable content.\n     */\n    enableScrollableHeaderBorder?: boolean;\n\n    /**\n     * Area to be fixed on the bottom of the bottom sheet.\n     */\n    stickyBottomElement?: React.ReactNode;\n\n    /**\n     * Top element for displaying additional information on the bottom sheet.\n     */\n    topElement?: React.ReactNode;\n\n    /**\n     * Snap index. You could also provide -1 to bottom sheet in closed state.\n     */\n    index: number;\n\n    /**\n     * Maximum height(normalized value) of dialog\n     * ex. 30% => 0.3 / 90% => 0.9\n     * @default 0.9\n     */\n    maxHeightNormalizedRatio?: number;\n\n    /**\n     * Callback fired when the index is changed.\n     * Important! Use memoized value.\n     */\n    onChange?: (newIndex: number) => void;\n\n    /**\n     * Points for the bottom sheet to snap to, points should be sorted from bottom to top.\n     * Important! Use memoized value.\n     * Only number type or string type(~% format) can be used.\n     * @default []\n     */\n    snapPoints?: Array<number | string>;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["BottomSheetProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ComponentProps } from '@fountain-ui/core';\n\nexport default interface BottomSheetProps extends ComponentProps<{\n    /**\n     * Opacity for BackdropComponent\n     * @default 0.5\n     */\n    backdropOpacity?: number;\n\n    /**\n     * Border radius for bottom sheet\n     */\n    borderRadius?: number;\n\n    /**\n     * BottomSheet children, usually the included sub-components.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * Enable dynamic sizing for content size.\n     * @default true\n     */\n    enableDynamicSizing?: boolean;\n\n    /**\n     * Top element for displaying additional information on the bottom sheet.\n     */\n    topElement?: React.ReactNode;\n\n    /**\n     * Snap index. You could also provide -1 to bottom sheet in closed state.\n     */\n    index: number;\n\n    /**\n     * Maximum height(normalized value) of dialog\n     * ex. 30% => 0.3 / 90% => 0.9\n     * @default 0.8\n     */\n    maxHeightNormalizedRatio?: number;\n\n    /**\n     * Callback fired when the index is changed.\n     * Important! Use memoized value.\n     */\n    onChange?: (newIndex: number) => void;\n\n    /**\n     * Points for the bottom sheet to snap to, points should be sorted from bottom to top.\n     * Important! Use memoized value.\n     * Only number type or string type(~% format) can be used.\n     * @default []\n     */\n    snapPoints?: Array<number | string>;\n}> {}\n"],"mappings":""}

package/build/module/BottomSheet/BottomSheetWeb.js

@@ -1,21 +1,11 @@
-import React, { useLayoutEffect, useMemo, useState } from 'react';
-import { ScrollView, useWindowDimensions, View } from 'react-native';
-import { Column, css, Modal, Paper, StyleSheet, useElevationStyle, useTheme } from '@fountain-ui/core';
+import React, { useState } from 'react';
+import { useWindowDimensions, View } from 'react-native';
+import { Column, css, Modal, StyleSheet, useTheme } from '@fountain-ui/core';
 import AnimatedY from '../AnimatedY';
 import useDynamicSnapPoints from './useDynamicSnapPoints';
 
-const createHeightLayoutHandler = setHeight => {
-  return event => {
-    const {
-      height
-    } = event.nativeEvent.layout;
-    setHeight(height);
-  };
-};
-
 const useStyles = function () {
   const theme = useTheme();
-  const stickyBottomElementShadow = useElevationStyle(8);
   return {
     root: {
       justifyContent: 'flex-end',
@@ -27,33 +17,20 @@ const useStyles = function () {
       width: '100%'
     },
     paper: {
-      borderTopLeftRadius: theme.shape.roundnessExtra,
-      borderTopRightRadius: theme.shape.roundnessExtra,
-      borderBottomLeftRadius: 0,
-      borderBottomRightRadius: 0,
+      backgroundColor: theme.palette.surface.base,
+      borderTopLeftRadius: theme.shape.radius.xxl,
+      borderTopRightRadius: theme.shape.radius.xxl,
       flexGrow: 1,
-      overflow: 'hidden'
+      minHeight: 300,
+      overflow: 'hidden',
+      paddingBottom: theme.spacing(6),
+      paddingTop: theme.spacing(5.5)
     },
     topElementLocation: {
       position: 'absolute',
       bottom: 0,
       width: '100%'
-    },
-    headerContainer: {
-      backgroundColor: theme.palette.paper.default
-    },
-    headerBorder: {
-      borderBottomWidth: 0.5,
-      borderBottomColor: theme.palette.divider
-    },
-    stickyBottomElement: {
-      position: 'absolute',
-      bottom: 0,
-      left: 0,
-      right: 0,
-      backgroundColor: theme.palette.paper.default
-    },
-    stickyBottomElementShadow
+    }
   };
 };
 
@@ -63,26 +40,25 @@ export default function BottomSheet(props) {
     borderRadius,
     children,
     enableDynamicSizing = true,
-    header,
-    stickyBottomElement,
     topElement,
     index,
-    maxHeightNormalizedRatio = 0.9,
+    maxHeightNormalizedRatio = 0.8,
     onChange,
-    snapPoints = [],
-    enableScrollableHeaderBorder = false
+    snapPoints = []
   } = props;
   const styles = useStyles();
   const {
     height: windowHeight
   } = useWindowDimensions();
   const [topElementHeight, setTopElementHeight] = useState(0);
-  const [stickyBottomElementHeight, setStickyBottomElementHeight] = useState(0);
-  const [contentHeight, setContentHeight] = useState(0);
-  const [isScrollable, setIsScrollable] = useState(false);
   const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;
-  const handleTopElementLayout = createHeightLayoutHandler(setTopElementHeight);
-  const handleStickyBottomElementLayout = createHeightLayoutHandler(setStickyBottomElementHeight);
+
+  const handleTopElementLayout = event => {
+    const {
+      height
+    } = event.nativeEvent.layout;
+    setTopElementHeight(height);
+  };
 
   const handleClose = () => {
     if (onChange) {
@@ -92,64 +68,37 @@ export default function BottomSheet(props) {
 
   const {
     convertedSnapPoints,
-    handleContentSizeChange,
+    handleLayout,
     highestSnapPoint
   } = useDynamicSnapPoints({
     enableDynamicSizing,
-    maxHeightNormalizedRatio,
+    maxDynamicContentSize,
     snapPoints
   });
   const translateY = highestSnapPoint - (convertedSnapPoints[index] ?? 0);
-  const adjustedContentHeight = useMemo(() => {
-    const adjustedHighestSnapPoint = highestSnapPoint + stickyBottomElementHeight;
-    return Math.min(maxDynamicContentSize, adjustedHighestSnapPoint);
-  }, [highestSnapPoint, stickyBottomElementHeight]);
-  const contentStyles = [styles.paper, borderRadius ? {
-    borderTopLeftRadius: borderRadius,
-    borderTopRightRadius: borderRadius
-  } : {}, {
-    height: adjustedContentHeight,
+  const contentStyles = css([styles.paper, { ...(borderRadius ? {
+      borderTopLeftRadius: borderRadius,
+      borderTopRightRadius: borderRadius
+    } : {}),
+    ...(highestSnapPoint !== maxDynamicContentSize ? {
+      height: highestSnapPoint
+    } : {}),
     maxHeight: maxDynamicContentSize
-  }];
-  const headerStyles = [styles.headerContainer, isScrollable && enableScrollableHeaderBorder ? styles.headerBorder : {}];
-  const stickyBottomElementStyles = [styles.stickyBottomElement, isScrollable ? styles.stickyBottomElementShadow : {}];
-  useLayoutEffect(() => {
-    if (contentHeight === 0 || highestSnapPoint === 0) {
-      return;
-    }
-
-    const adjustedHighestSnapPoint = highestSnapPoint + stickyBottomElementHeight;
-    setIsScrollable(adjustedHighestSnapPoint > maxDynamicContentSize);
-  }, [contentHeight, highestSnapPoint, stickyBottomElementHeight, maxDynamicContentSize]);
+  }]);
   return /*#__PURE__*/React.createElement(Modal, {
     backdropOpacity: backdropOpacity,
     onClose: handleClose,
     visible: index >= 0,
     style: css([StyleSheet.absoluteFill, styles.root])
   }, /*#__PURE__*/React.createElement(AnimatedY, {
-    style: styles.animated,
     translateY: translateY
-  }, topElement ? /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(Column, {
+  }, topElement ? /*#__PURE__*/React.createElement(Column, {
     onLayout: handleTopElementLayout,
     style: styles.topElementLocation
-  }, topElement)) : null, /*#__PURE__*/React.createElement(Paper, {
-    elevation: 12,
+  }, topElement) : null, /*#__PURE__*/React.createElement(View, {
+    onLayout: handleLayout,
     style: contentStyles
-  }, /*#__PURE__*/React.createElement(ScrollView, {
-    onContentSizeChange: (contentWidth, contentHeight) => {
-      setContentHeight(contentHeight);
-      handleContentSizeChange(contentWidth, contentHeight);
-    },
-    stickyHeaderIndices: header ? [0] : undefined,
-    style: {
-      paddingBottom: stickyBottomElementHeight
-    }
-  }, header ? /*#__PURE__*/React.createElement(View, {
-    style: headerStyles
-  }, header) : null, children), stickyBottomElement ? /*#__PURE__*/React.createElement(Column, {
-    style: stickyBottomElementStyles,
-    onLayout: handleStickyBottomElementLayout
-  }, stickyBottomElement) : null)));
+  }, children)));
 }
 ;
 //# sourceMappingURL=BottomSheetWeb.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useLayoutEffect","useMemo","useState","ScrollView","useWindowDimensions","View","Column","css","Modal","Paper","StyleSheet","useElevationStyle","useTheme","AnimatedY","useDynamicSnapPoints","createHeightLayoutHandler","setHeight","event","height","nativeEvent","layout","useStyles","theme","stickyBottomElementShadow","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","borderTopLeftRadius","shape","roundnessExtra","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","flexGrow","overflow","topElementLocation","position","bottom","headerContainer","backgroundColor","palette","default","headerBorder","borderBottomWidth","borderBottomColor","divider","stickyBottomElement","left","right","BottomSheet","props","backdropOpacity","borderRadius","children","enableDynamicSizing","header","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","enableScrollableHeaderBorder","styles","windowHeight","topElementHeight","setTopElementHeight","stickyBottomElementHeight","setStickyBottomElementHeight","contentHeight","setContentHeight","isScrollable","setIsScrollable","maxDynamicContentSize","Math","round","handleTopElementLayout","handleStickyBottomElementLayout","handleClose","convertedSnapPoints","handleContentSizeChange","highestSnapPoint","translateY","adjustedContentHeight","adjustedHighestSnapPoint","min","contentStyles","maxHeight","headerStyles","stickyBottomElementStyles","absoluteFill","contentWidth","undefined","paddingBottom"],"sources":["BottomSheetWeb.tsx"],"sourcesContent":["import React, { useLayoutEffect, useMemo, useState } from 'react';\nimport { LayoutChangeEvent, ScrollView, useWindowDimensions, View } from 'react-native';\nimport { Column, css, Modal, Paper, StyleSheet, useElevationStyle, 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\nconst createHeightLayoutHandler = (setHeight: React.Dispatch<React.SetStateAction<number>>) => {\n    return (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setHeight(height);\n    };\n}\n\ntype BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper' | 'topElementLocation' | 'headerContainer' | 'headerBorder' | 'stickyBottomElement' | 'stickyBottomElementShadow'>;\n\nconst useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {\n    const theme = useTheme();\n    const stickyBottomElementShadow = useElevationStyle(8);\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            borderTopLeftRadius: theme.shape.roundnessExtra,\n            borderTopRightRadius: theme.shape.roundnessExtra,\n            borderBottomLeftRadius: 0,\n            borderBottomRightRadius: 0,\n            flexGrow: 1,\n            overflow: 'hidden',\n        },\n        topElementLocation: {\n            position: 'absolute',\n            bottom: 0,\n            width: '100%',\n        },\n        headerContainer: {\n            backgroundColor: theme.palette.paper.default,\n        },\n        headerBorder: {\n            borderBottomWidth: 0.5,\n            borderBottomColor: theme.palette.divider,\n        },\n        stickyBottomElement: {\n            position: 'absolute',\n            bottom: 0,\n            left: 0,\n            right: 0,\n            backgroundColor: theme.palette.paper.default,\n        },\n        stickyBottomElementShadow,\n    };\n};\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity,\n        borderRadius,\n        children,\n        enableDynamicSizing = true,\n        header,\n        stickyBottomElement,\n        topElement,\n        index,\n        maxHeightNormalizedRatio = 0.9,\n        onChange,\n        snapPoints = [],\n        enableScrollableHeaderBorder = false,\n    } = props;\n\n    const styles = useStyles();\n\n    const { height: windowHeight } = useWindowDimensions();\n\n    const [topElementHeight, setTopElementHeight] = useState(0);\n    const [stickyBottomElementHeight, setStickyBottomElementHeight] = useState(0);\n    const [contentHeight, setContentHeight] = useState(0);\n    const [isScrollable, setIsScrollable] = useState(false);\n\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;\n\n    const handleTopElementLayout = createHeightLayoutHandler(setTopElementHeight);\n    const handleStickyBottomElementLayout = createHeightLayoutHandler(setStickyBottomElementHeight);\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 adjustedContentHeight = useMemo(() => {\n        const adjustedHighestSnapPoint = highestSnapPoint + stickyBottomElementHeight;\n\n        return Math.min(maxDynamicContentSize, adjustedHighestSnapPoint);\n    }, [highestSnapPoint, stickyBottomElementHeight]);\n\n    const contentStyles = [\n        styles.paper,\n        borderRadius ? { borderTopLeftRadius: borderRadius, borderTopRightRadius: borderRadius } : {},\n        { height: adjustedContentHeight, maxHeight: maxDynamicContentSize },\n    ];\n\n    const headerStyles = [\n        styles.headerContainer,\n        isScrollable && enableScrollableHeaderBorder ? styles.headerBorder : {},\n    ];\n\n    const stickyBottomElementStyles = [\n        styles.stickyBottomElement,\n        isScrollable ? styles.stickyBottomElementShadow : {},\n    ];\n\n    useLayoutEffect(() => {\n        if (contentHeight === 0 || highestSnapPoint === 0) {\n            return;\n        }\n\n        const adjustedHighestSnapPoint = highestSnapPoint + stickyBottomElementHeight;\n        setIsScrollable(adjustedHighestSnapPoint > maxDynamicContentSize);\n    }, [contentHeight, highestSnapPoint, stickyBottomElementHeight, maxDynamicContentSize]);\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                {topElement ? (\n                    <Column>\n                        <Column\n                            onLayout={handleTopElementLayout}\n                            style={styles.topElementLocation}\n                        >\n                            {topElement}\n                        </Column>\n                    </Column>\n                ) : null}\n\n                <Paper\n                    elevation={12}\n                    style={contentStyles}\n                >\n                    <ScrollView\n                        onContentSizeChange={(contentWidth: number, contentHeight: number) => {\n                            setContentHeight(contentHeight);\n                            handleContentSizeChange(contentWidth, contentHeight);\n                        }}\n                        stickyHeaderIndices={header ? [0] : undefined}\n                        style={{ paddingBottom: stickyBottomElementHeight }}\n                    >\n                        {header ? (\n                            <View style={headerStyles}>\n                                {header}\n                            </View>\n                        ): null}\n\n                        {children}\n                    </ScrollView>\n\n                    {stickyBottomElement ? (\n                        <Column\n                            style={stickyBottomElementStyles}\n                            onLayout={handleStickyBottomElementLayout}\n                        >\n                            {stickyBottomElement}\n                        </Column>\n                    ): null}\n                </Paper>\n            </AnimatedY>\n        </Modal>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","useState","useWindowDimensions","View","Column","css","Modal","StyleSheet","useTheme","AnimatedY","useDynamicSnapPoints","useStyles","theme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","backgroundColor","palette","surface","base","borderTopLeftRadius","shape","radius","xxl","borderTopRightRadius","flexGrow","minHeight","overflow","paddingBottom","spacing","paddingTop","topElementLocation","position","bottom","BottomSheet","props","backdropOpacity","borderRadius","children","enableDynamicSizing","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","styles","height","windowHeight","topElementHeight","setTopElementHeight","maxDynamicContentSize","Math","round","handleTopElementLayout","event","nativeEvent","layout","handleClose","convertedSnapPoints","handleLayout","highestSnapPoint","translateY","contentStyles","maxHeight","absoluteFill"],"sources":["BottomSheetWeb.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions, View } from 'react-native';\nimport { Column, css, Modal, StyleSheet, 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' | 'topElementLocation'>;\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            backgroundColor: theme.palette.surface.base,\n            borderTopLeftRadius: theme.shape.radius.xxl,\n            borderTopRightRadius: theme.shape.radius.xxl,\n            flexGrow: 1,\n            minHeight: 300,\n            overflow: 'hidden',\n            paddingBottom: theme.spacing(6),\n            paddingTop: theme.spacing(5.5),\n        },\n        topElementLocation: {\n            position: 'absolute',\n            bottom: 0,\n            width: '100%',\n        },\n    };\n};\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity,\n        borderRadius,\n        children,\n        enableDynamicSizing = true,\n        topElement,\n        index,\n        maxHeightNormalizedRatio = 0.8,\n        onChange,\n        snapPoints = [],\n    } = props;\n\n    const styles = useStyles();\n\n    const { height: windowHeight } = useWindowDimensions();\n\n    const [topElementHeight, setTopElementHeight] = useState(0);\n\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;\n\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const handleClose = () => {\n        if (onChange) {\n            onChange(-1);\n        }\n    };\n\n    const {\n        convertedSnapPoints,\n        handleLayout,\n        highestSnapPoint,\n    } = useDynamicSnapPoints({\n        enableDynamicSizing,\n        maxDynamicContentSize,\n        snapPoints,\n    });\n\n    const translateY = highestSnapPoint - (convertedSnapPoints[index] ?? 0);\n\n    const contentStyles = css([\n        styles.paper,\n        {\n            ...(borderRadius ? { borderTopLeftRadius: borderRadius, borderTopRightRadius: borderRadius } : {}),\n            ...(highestSnapPoint !== maxDynamicContentSize ? { height: highestSnapPoint } : {}),\n            maxHeight: maxDynamicContentSize,\n        },\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 translateY={translateY}>\n                {topElement ? (\n                    <Column\n                        onLayout={handleTopElementLayout}\n                        style={styles.topElementLocation}\n                    >\n                        {topElement}\n                    </Column>\n                ) : null}\n\n                <View\n                    onLayout={handleLayout}\n                    style={contentStyles}\n                >\n                    {children}\n                </View>\n            </AnimatedY>\n        </Modal>\n    );\n};\n"],"mappings":"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"}

package/build/module/BottomSheet/useDynamicSnapPoints.js

@@ -1,6 +1,7 @@
-import * as R from 'ramda';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 import { useWindowDimensions } from 'react-native';
+import * as R from 'ramda';
+const INITIAL_CONTAINER_HEIGHT = -999;
 
 const convertSnapPoint = (snapPoint, windowHeight, maxDynamicContentSize) => {
   if (typeof snapPoint === 'number') {
@@ -20,15 +21,19 @@ const convertSnapPoint = (snapPoint, windowHeight, maxDynamicContentSize) => {
 export default function useDynamicSnapPoints(params) {
   const {
     enableDynamicSizing,
-    maxHeightNormalizedRatio,
+    maxDynamicContentSize,
     snapPoints
   } = params;
   const {
     height: windowHeight
   } = useWindowDimensions();
-  const [contentHeight, setContentHeight] = useState(0);
+  const [contentHeight, setContentHeight] = useState(INITIAL_CONTAINER_HEIGHT);
+  const hasMeasureRef = useRef(false);
   const convertedSnapPoints = useMemo(() => {
-    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio);
+    if (contentHeight === INITIAL_CONTAINER_HEIGHT) {
+      return [];
+    }
+
     const convertedSnapPoints = snapPoints.map(snapPoint => {
       return convertSnapPoint(snapPoint, windowHeight, maxDynamicContentSize);
     });
@@ -38,14 +43,22 @@ export default function useDynamicSnapPoints(params) {
     }
 
     return Array.from(new Set(convertedSnapPoints)).sort((a, b) => a - b);
-  }, [contentHeight, snapPoints, windowHeight]);
-  const highestSnapPoint = R.last(convertedSnapPoints) ?? 0;
-  const handleContentSizeChange = useCallback((_, height) => {
+  }, [contentHeight, enableDynamicSizing, maxDynamicContentSize, snapPoints, windowHeight]);
+  const highestSnapPoint = R.last(convertedSnapPoints) ?? maxDynamicContentSize;
+  const handleLayout = useCallback(event => {
+    if (hasMeasureRef.current) {
+      return;
+    }
+
+    hasMeasureRef.current = true;
+    const {
+      height
+    } = event.nativeEvent.layout;
     setContentHeight(height);
   }, []);
   return {
     convertedSnapPoints,
-    handleContentSizeChange,
+    handleLayout,
     highestSnapPoint
   };
 }