@fountain-ui/lab 2.0.0-beta.82 → 2.0.0-beta.84

package/src/BottomSheet/BottomSheetWeb.tsx

@@ -1,15 +1,23 @@
-import React from 'react';
-import { ScrollView } from 'react-native';
-import { Column, Modal, Paper, StyleSheet, css, useTheme } from '@fountain-ui/core';
+import React, { useLayoutEffect, useMemo, useState } from 'react';
+import { LayoutChangeEvent, ScrollView, useWindowDimensions, View } from 'react-native';
+import { Column, css, Modal, Paper, StyleSheet, useElevationStyle, useTheme } from '@fountain-ui/core';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import AnimatedY from '../AnimatedY';
 import type BottomSheetProps from './BottomSheetProps';
 import useDynamicSnapPoints from './useDynamicSnapPoints';
 
-type BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper' | 'topElementLocation'>;
+const createHeightLayoutHandler = (setHeight: React.Dispatch<React.SetStateAction<number>>) => {
+    return (event: LayoutChangeEvent) => {
+        const { height } = event.nativeEvent.layout;
+        setHeight(height);
+    };
+}
+
+type BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper' | 'topElementLocation' | 'headerContainer' | 'headerBorder' | 'stickyBottomElement' | 'stickyBottomElementShadow'>;
 
 const useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {
     const theme = useTheme();
+    const stickyBottomElementShadow = useElevationStyle(8);
 
     return {
         root: {
@@ -34,26 +42,54 @@ const useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {
             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,
     };
 };
 
 export default function BottomSheet(props: BottomSheetProps) {
     const {
         backdropOpacity,
+        borderRadius,
         children,
         enableDynamicSizing = true,
         header,
+        stickyBottomElement,
         topElement,
         index,
         maxHeightNormalizedRatio = 0.9,
         onChange,
         snapPoints = [],
-        disableDefaultBackgroundColor = false,
-        disableDefaultShadow = false,
+        enableScrollableHeaderBorder = false,
     } = 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 handleClose = () => {
         if (onChange) {
             onChange(-1);
@@ -72,11 +108,37 @@ export default function BottomSheet(props: BottomSheetProps) {
 
     const translateY = highestSnapPoint - (convertedSnapPoints[index] ?? 0);
 
-    const paperStyles = [
+    const adjustedContentHeight = useMemo(() => {
+        const adjustedHighestSnapPoint = highestSnapPoint + stickyBottomElementHeight;
+
+        return Math.min(maxDynamicContentSize, adjustedHighestSnapPoint);
+    }, [highestSnapPoint, stickyBottomElementHeight]);
+
+    const contentStyles = [
         styles.paper,
-        { height: highestSnapPoint },
+        borderRadius ? { borderTopLeftRadius: borderRadius, borderTopRightRadius: borderRadius } : {},
+        { height: adjustedContentHeight, 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 (
         <Modal
             backdropOpacity={backdropOpacity}
@@ -90,25 +152,44 @@ export default function BottomSheet(props: BottomSheetProps) {
             >
                 {topElement ? (
                     <Column>
-                        <Column style={styles.topElementLocation}>
+                        <Column
+                            onLayout={handleTopElementLayout}
+                            style={styles.topElementLocation}
+                        >
                             {topElement}
                         </Column>
                     </Column>
                 ) : null}
 
                 <Paper
-                    elevation={disableDefaultShadow ? 0 : 12}
-                    style={paperStyles}
-                    colorValue={disableDefaultBackgroundColor ? '#ffffff00' : undefined}
+                    elevation={12}
+                    style={contentStyles}
                 >
                     <ScrollView
-                        onContentSizeChange={handleContentSizeChange}
+                        onContentSizeChange={(contentWidth: number, contentHeight: number) => {
+                            setContentHeight(contentHeight);
+                            handleContentSizeChange(contentWidth, contentHeight);
+                        }}
                         stickyHeaderIndices={header ? [0] : undefined}
+                        style={{ paddingBottom: stickyBottomElementHeight }}
                     >
-                        {header}
+                        {header ? (
+                            <View style={headerStyles}>
+                                {header}
+                            </View>
+                        ): null}
 
                         {children}
                     </ScrollView>
+
+                    {stickyBottomElement ? (
+                        <Column
+                            style={stickyBottomElementStyles}
+                            onLayout={handleStickyBottomElementLayout}
+                        >
+                            {stickyBottomElement}
+                        </Column>
+                    ): null}
                 </Paper>
             </AnimatedY>
         </Modal>