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

package/src/BottomSheet/BottomSheetWeb.tsx

@@ -1,23 +1,15 @@
-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 React, { useState } from 'react';
+import { LayoutChangeEvent, useWindowDimensions, View } from 'react-native';
+import { Column, css, Modal, StyleSheet, 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';
 
-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'>;
+type BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper' | 'topElementLocation'>;
 
 const useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {
     const theme = useTheme();
-    const stickyBottomElementShadow = useElevationStyle(8);
 
     return {
         root: {
@@ -30,33 +22,20 @@ const useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {
             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,
+            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,
     };
 };
 
@@ -66,14 +45,11 @@ export default function BottomSheet(props: BottomSheetProps) {
         borderRadius,
         children,
         enableDynamicSizing = true,
-        header,
-        stickyBottomElement,
         topElement,
         index,
-        maxHeightNormalizedRatio = 0.9,
+        maxHeightNormalizedRatio = 0.8,
         onChange,
         snapPoints = [],
-        enableScrollableHeaderBorder = false,
     } = props;
 
     const styles = useStyles();
@@ -81,14 +57,13 @@ export default function BottomSheet(props: BottomSheetProps) {
     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: LayoutChangeEvent) => {
+        const { height } = event.nativeEvent.layout;
+        setTopElementHeight(height);
+    };
 
     const handleClose = () => {
         if (onChange) {
@@ -98,46 +73,24 @@ export default function BottomSheet(props: BottomSheetProps) {
 
     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 = [
+    const contentStyles = css([
         styles.paper,
-        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]);
+        {
+            ...(borderRadius ? { borderTopLeftRadius: borderRadius, borderTopRightRadius: borderRadius } : {}),
+            ...(highestSnapPoint !== maxDynamicContentSize ? { height: highestSnapPoint } : {}),
+            maxHeight: maxDynamicContentSize,
+        },
+    ]);
 
     return (
         <Modal
@@ -146,51 +99,22 @@ export default function BottomSheet(props: BottomSheetProps) {
             visible={index >= 0}
             style={css([StyleSheet.absoluteFill, styles.root])}
         >
-            <AnimatedY
-                style={styles.animated}
-                translateY={translateY}
-            >
+            <AnimatedY translateY={translateY}>
                 {topElement ? (
-                    <Column>
-                        <Column
-                            onLayout={handleTopElementLayout}
-                            style={styles.topElementLocation}
-                        >
-                            {topElement}
-                        </Column>
+                    <Column
+                        onLayout={handleTopElementLayout}
+                        style={styles.topElementLocation}
+                    >
+                        {topElement}
                     </Column>
                 ) : null}
 
-                <Paper
-                    elevation={12}
+                <View
+                    onLayout={handleLayout}
                     style={contentStyles}
                 >
-                    <ScrollView
-                        onContentSizeChange={(contentWidth: number, contentHeight: number) => {
-                            setContentHeight(contentHeight);
-                            handleContentSizeChange(contentWidth, contentHeight);
-                        }}
-                        stickyHeaderIndices={header ? [0] : undefined}
-                        style={{ paddingBottom: stickyBottomElementHeight }}
-                    >
-                        {header ? (
-                            <View style={headerStyles}>
-                                {header}
-                            </View>
-                        ): null}
-
-                        {children}
-                    </ScrollView>
-
-                    {stickyBottomElement ? (
-                        <Column
-                            style={stickyBottomElementStyles}
-                            onLayout={handleStickyBottomElementLayout}
-                        >
-                            {stickyBottomElement}
-                        </Column>
-                    ): null}
-                </Paper>
+                    {children}
+                </View>
             </AnimatedY>
         </Modal>
     );

package/src/BottomSheet/useDynamicSnapPoints.ts

@@ -1,16 +1,18 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { LayoutChangeEvent, useWindowDimensions } from 'react-native';
 import * as R from 'ramda';
-import { useCallback, useMemo, useState } from 'react';
-import { useWindowDimensions } from 'react-native';
+
+const INITIAL_CONTAINER_HEIGHT = -999;
 
 interface UseDynamicSnapPointsParams {
     enableDynamicSizing: boolean;
-    maxHeightNormalizedRatio: number;
+    maxDynamicContentSize: number;
     snapPoints: (number | string)[];
 }
 
 interface UseDynamicSnapPointsReturns {
     convertedSnapPoints: number[];
-    handleContentSizeChange: (w: number, h: number) => void;
+    handleLayout: (e: LayoutChangeEvent) => void;
     highestSnapPoint: number;
 }
 
@@ -31,16 +33,20 @@ const convertSnapPoint = (snapPoint: number | string, windowHeight: number, maxD
 export default function useDynamicSnapPoints(params: UseDynamicSnapPointsParams): UseDynamicSnapPointsReturns {
     const {
         enableDynamicSizing,
-        maxHeightNormalizedRatio,
+        maxDynamicContentSize,
         snapPoints,
     } = params;
 
     const { height: windowHeight } = useWindowDimensions();
 
-    const [contentHeight, setContentHeight] = useState<number>(0);
+    const [contentHeight, setContentHeight] = useState<number>(INITIAL_CONTAINER_HEIGHT);
+
+    const hasMeasureRef = useRef<boolean>(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);
@@ -55,19 +61,27 @@ export default function useDynamicSnapPoints(params: UseDynamicSnapPointsParams)
         return Array.from(new Set(convertedSnapPoints)).sort((a, b) => a - b);
     }, [
         contentHeight,
+        enableDynamicSizing,
+        maxDynamicContentSize,
         snapPoints,
         windowHeight,
     ]);
 
-    const highestSnapPoint = R.last(convertedSnapPoints) ?? 0;
+    const highestSnapPoint = R.last(convertedSnapPoints) ?? maxDynamicContentSize;
+
+    const handleLayout = useCallback((event: LayoutChangeEvent) => {
+        if (hasMeasureRef.current) {
+            return;
+        }
 
-    const handleContentSizeChange = useCallback((_: number, height: number) => {
+        hasMeasureRef.current = true;
+        const { height } = event.nativeEvent.layout;
         setContentHeight(height);
     }, []);
 
     return {
         convertedSnapPoints,
-        handleContentSizeChange,
+        handleLayout,
         highestSnapPoint,
     };
 }

package/src/DateTimePicker/DateTimePicker.tsx

@@ -32,8 +32,8 @@ export default function DateTimePicker(props: DateTimePickerProps) {
     const { locales } = useDateTimePicker();
 
     //TODO: Need to update arrow components
-    const LeftArrow = <Typography children={'<'} color={'textPrimary'}/>;
-    const RightArrow = <Typography children={'>'} color={'textPrimary'}/>;
+    const LeftArrow = <Typography children={'<'} color={'strong'}/>;
+    const RightArrow = <Typography children={'>'} color={'strong'}/>;
 
     const onYearPress = (date: Date) => {
         setYearPickerVisible(false);

package/src/DateTimePicker/YearPicker.tsx

@@ -61,8 +61,8 @@ const YearPicker = ({
         <Column>
             <Typography
                 children={formatDate(date, locale)}
-                color={'textPrimary'}
-                variant={'subtitle2'}
+                color={'strong'}
+                variant={'body3'}
             />
             <FlatList
                 data={years}