@fountain-ui/lab 3.0.0-alpha.2 → 3.0.0-alpha.20

package/src/BottomSheet/BottomSheetNative.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Animated, LayoutChangeEvent, useWindowDimensions, ViewStyle } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import {
     BottomSheetBackdrop,
     BottomSheetBackdropProps,
@@ -7,16 +8,22 @@ import {
     BottomSheetModalProvider,
     BottomSheetView,
 } from '@gorhom/bottom-sheet';
-import { Column, ExtendedStyle, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';
+import { Column, css, ExtendedStyle, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';
 import { useTheme } from '@fountain-ui/styles';
 import type BottomSheetProps from './BottomSheetProps';
 import TransparentBackdrop from './TransparentBackdrop';
+import useDynamicSnapPoints from './useDynamicSnapPoints.native';
 
 const NoHandle = () => null;
 
+const DEFAULT_PADDING_BOTTOM = 24;
+const DEFAULT_PADDING_TOP = 22;
+const TOP_ELEMENT_HIDDEN_OFFSET = 16;
+
 export default function BottomSheet(props: BottomSheetProps) {
     const {
         backdropOpacity = 0.5,
+        backgroundStyle: backgroundStyleProp,
         borderRadius: borderRadiusProp,
         children,
         enableDynamicSizing = true,
@@ -25,6 +32,7 @@ export default function BottomSheet(props: BottomSheetProps) {
         maxHeightNormalizedRatio = 0.8,
         onChange,
         snapPoints = [],
+        style: styleProp,
     } = props;
 
     const indexRef = useRef<number>(-1);
@@ -33,7 +41,8 @@ export default function BottomSheet(props: BottomSheetProps) {
     const { height: windowHeight } = useWindowDimensions();
     const [topElementHeight, setTopElementHeight] = useState(0);
 
-    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;
+    const topElementHeightWithoutOffset = Math.max(0, topElementHeight - TOP_ELEMENT_HIDDEN_OFFSET);
+    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeightWithoutOffset;
 
     const handleTopElementLayout = (event: LayoutChangeEvent) => {
         const { height } = event.nativeEvent.layout;
@@ -70,20 +79,31 @@ export default function BottomSheet(props: BottomSheetProps) {
     const theme = useTheme();
 
     const borderRadius = borderRadiusProp ?? theme.shape.radius.xxl;
-    const backgroundStyle = {
-        backgroundColor: theme.palette.surface.base,
-        borderTopLeftRadius: borderRadius,
-        borderTopRightRadius: borderRadius,
-    };
-
-    const contentWrapperStyle: ViewStyle = {
-        flex: 1,
-        maxHeight: maxDynamicContentSize,
-        minHeight: 300,
-        overflow: 'hidden',
-        paddingBottom: theme.spacing(6),
-        paddingTop: theme.spacing(5.5),
-    };
+    const backgroundStyle = css([
+        {
+            backgroundColor: theme.palette.surface.base,
+            borderTopLeftRadius: borderRadius,
+            borderTopRightRadius: borderRadius,
+        },
+        backgroundStyleProp,
+    ]);
+
+    const { bottom: bottomSafeInset } = useSafeAreaInsets();
+
+    const contentWrapperStyle: ViewStyle = css([
+        {
+            backgroundColor: theme.palette.surface.base,
+            borderTopLeftRadius: borderRadius,
+            borderTopRightRadius: borderRadius,
+            flexShrink: 1,
+            maxHeight: maxDynamicContentSize,
+            minHeight: 325,
+            overflow: 'hidden',
+            paddingBottom: DEFAULT_PADDING_BOTTOM + bottomSafeInset,
+            paddingTop: DEFAULT_PADDING_TOP,
+        },
+        styleProp,
+    ]);
 
     const isBackdropTransparent = backdropOpacity <= 0;
 
@@ -114,23 +134,33 @@ export default function BottomSheet(props: BottomSheetProps) {
         }).start();
     };
 
+    const {
+        animatedHandleHeight,
+        animatedSnapPoints,
+        animatedContentHeight,
+        handleContentLayout,
+    } = useDynamicSnapPoints(snapPoints);
+
     return (
         <BottomSheetModalProvider>
             <BottomSheetModal
                 backdropComponent={isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop}
                 // @ts-ignore
                 backgroundStyle={backgroundStyle}
+                enableOverDrag={false}
                 index={index}
                 handleComponent={NoHandle}
                 onChange={handleChange}
                 onDismiss={handleDismiss}
                 ref={bottomSheetRef}
-                snapPoints={snapPoints}
                 enablePanDownToClose={Boolean(onChange)}
                 enableDynamicSizing={enableDynamicSizing}
                 maxDynamicContentSize={maxDynamicContentSize}
                 detached={Boolean(topElement)}
                 onAnimate={topElement ? onAnimate : undefined}
+                snapPoints={animatedSnapPoints}
+                handleHeight={animatedHandleHeight}
+                contentHeight={animatedContentHeight}
             >
                 {topElement ? (
                     <Animated.View style={topElementAnimationStyle}>
@@ -143,7 +173,10 @@ export default function BottomSheet(props: BottomSheetProps) {
                     </Animated.View>
                 ) : null}
 
-                <BottomSheetView style={contentWrapperStyle}>
+                <BottomSheetView
+                    onLayout={handleContentLayout}
+                    style={contentWrapperStyle}
+                >
                     {children}
                 </BottomSheetView>
             </BottomSheetModal>

package/src/BottomSheet/BottomSheetProps.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ComponentProps } from '@fountain-ui/core';
+import type { ComponentProps, ExtendedStyle } from '@fountain-ui/core';
 
 export default interface BottomSheetProps extends ComponentProps<{
     /**
@@ -8,6 +8,11 @@ export default interface BottomSheetProps extends ComponentProps<{
      */
     backdropOpacity?: number;
 
+    /**
+     * View style to be applied to the background component. (only native)
+     */
+    backgroundStyle?: ExtendedStyle | ExtendedStyle[];
+
     /**
      * Border radius for bottom sheet
      */
@@ -54,4 +59,9 @@ export default interface BottomSheetProps extends ComponentProps<{
      * @default []
      */
     snapPoints?: Array<number | string>;
+
+    /**
+     * View style to be applied to the content area.
+     */
+    style?: ExtendedStyle | ExtendedStyle[];
 }> {}

package/src/BottomSheet/BottomSheetWeb.tsx

@@ -26,19 +26,20 @@ const useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {
             borderTopLeftRadius: theme.shape.radius.xxl,
             borderTopRightRadius: theme.shape.radius.xxl,
             flexGrow: 1,
-            minHeight: 300,
+            minHeight: 325,
             overflow: 'hidden',
             paddingBottom: theme.spacing(6),
             paddingTop: theme.spacing(5.5),
         },
         topElementLocation: {
             position: 'absolute',
-            bottom: 0,
             width: '100%',
         },
     };
 };
 
+const TOP_ELEMENT_HIDDEN_OFFSET = 16;
+
 export default function BottomSheet(props: BottomSheetProps) {
     const {
         backdropOpacity,
@@ -50,6 +51,7 @@ export default function BottomSheet(props: BottomSheetProps) {
         maxHeightNormalizedRatio = 0.8,
         onChange,
         snapPoints = [],
+        style: styleProp,
     } = props;
 
     const styles = useStyles();
@@ -58,7 +60,8 @@ export default function BottomSheet(props: BottomSheetProps) {
 
     const [topElementHeight, setTopElementHeight] = useState(0);
 
-    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;
+    const topElementHeightWithoutOffset = Math.max(0, topElementHeight - TOP_ELEMENT_HIDDEN_OFFSET);
+    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeightWithoutOffset;
 
     const handleTopElementLayout = (event: LayoutChangeEvent) => {
         const { height } = event.nativeEvent.layout;
@@ -71,6 +74,8 @@ export default function BottomSheet(props: BottomSheetProps) {
         }
     };
 
+    const filteredSnapPoints = snapPoints.filter(point => point !== 'CONTENT_HEIGHT');
+
     const {
         convertedSnapPoints,
         handleLayout,
@@ -78,18 +83,21 @@ export default function BottomSheet(props: BottomSheetProps) {
     } = useDynamicSnapPoints({
         enableDynamicSizing,
         maxDynamicContentSize,
-        snapPoints,
+        snapPoints: filteredSnapPoints,
     });
 
-    const translateY = highestSnapPoint - (convertedSnapPoints[index] ?? 0);
+    const translateY = convertedSnapPoints.length > 0
+        ? highestSnapPoint - (convertedSnapPoints[index] ?? 0)
+        : 0;
 
     const contentStyles = css([
         styles.paper,
         {
             ...(borderRadius ? { borderTopLeftRadius: borderRadius, borderTopRightRadius: borderRadius } : {}),
-            ...(highestSnapPoint !== maxDynamicContentSize ? { height: highestSnapPoint } : {}),
+            ...(!enableDynamicSizing && highestSnapPoint !== maxDynamicContentSize ? { height: highestSnapPoint } : {}),
             maxHeight: maxDynamicContentSize,
         },
+        styleProp,
     ]);
 
     return (
@@ -103,7 +111,7 @@ export default function BottomSheet(props: BottomSheetProps) {
                 {topElement ? (
                     <Column
                         onLayout={handleTopElementLayout}
-                        style={styles.topElementLocation}
+                        style={[styles.topElementLocation, { top: -topElementHeight }]}
                     >
                         {topElement}
                     </Column>

package/src/BottomSheet/useDynamicSnapPoints.native.ts

@@ -0,0 +1,15 @@
+import { useBottomSheetDynamicSnapPoints } from '@gorhom/bottom-sheet';
+import type BottomSheetProps from './BottomSheetProps';
+
+export default function useDynamicSnapPoints(snapPoints: BottomSheetProps['snapPoints']) {
+    if (snapPoints?.includes('CONTENT_HEIGHT')) {
+        return useBottomSheetDynamicSnapPoints(snapPoints);
+    }
+
+    return {
+        animatedHandleHeight: undefined,
+        animatedSnapPoints: snapPoints,
+        animatedContentHeight: undefined,
+        handleContentLayout: undefined,
+    };
+}

package/src/BottomSheet/useDynamicSnapPoints.ts

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { LayoutChangeEvent, useWindowDimensions } from 'react-native';
 import * as R from 'ramda';
 
@@ -41,8 +41,6 @@ export default function useDynamicSnapPoints(params: UseDynamicSnapPointsParams)
 
     const [contentHeight, setContentHeight] = useState<number>(INITIAL_CONTAINER_HEIGHT);
 
-    const hasMeasureRef = useRef<boolean>(false);
-
     const convertedSnapPoints = useMemo(() => {
         if (contentHeight === INITIAL_CONTAINER_HEIGHT) {
             return [];
@@ -70,13 +68,8 @@ export default function useDynamicSnapPoints(params: UseDynamicSnapPointsParams)
     const highestSnapPoint = R.last(convertedSnapPoints) ?? maxDynamicContentSize;
 
     const handleLayout = useCallback((event: LayoutChangeEvent) => {
-        if (hasMeasureRef.current) {
-            return;
-        }
-
-        hasMeasureRef.current = true;
         const { height } = event.nativeEvent.layout;
-        setContentHeight(height);
+        setContentHeight(prev => (Math.abs(prev - height) > 1 ? height : prev));
     }, []);
 
     return {

package/src/Carousel/Carousel.tsx

@@ -24,6 +24,7 @@ const Carousel = forwardRef<CarouselInstance, CarouselProps>(function Carousel(p
         itemHeight,
         itemWidth,
         loop = false,
+        needsOffscreenAlphaCompositingOnItem = false,
         onIndexChange,
         renderItem,
         scrollEnabled = true,
@@ -89,6 +90,7 @@ const Carousel = forwardRef<CarouselInstance, CarouselProps>(function Carousel(p
         itemWidth,
         itemVisibilityStore,
         loop,
+        needsOffscreenAlphaCompositingOnItem,
     }), [
         createItemStyle,
         data,
@@ -97,6 +99,7 @@ const Carousel = forwardRef<CarouselInstance, CarouselProps>(function Carousel(p
         itemWidth,
         itemVisibilityStore,
         loop,
+        needsOffscreenAlphaCompositingOnItem,
     ]);
 
     return (

package/src/Carousel/CarouselProps.ts

@@ -93,4 +93,12 @@ export default interface CarouselProps<ItemT = any> extends ComponentProps<{
      * @default 5
      */
     windowSize?: number;
+
+    /**
+     * Whether item views need to be rendered offscreen and composited with an alpha 
+     * in order to preserve 100% correct colors and blending behavior.
+     * Use this when items have opacity animations and multiple overlapping elements.
+     * @default false
+     */
+    needsOffscreenAlphaCompositingOnItem?: boolean;
 }> {}

package/src/Carousel/components/InternalContext.ts

@@ -10,6 +10,7 @@ export interface InternalContextValue<ItemT> {
     itemWidth: number;
     itemVisibilityStore: ItemVisibilityStore;
     loop: boolean;
+    needsOffscreenAlphaCompositingOnItem: boolean;
 }
 
 const mockItemVisibilityStore: ItemVisibilityStore = {
@@ -26,6 +27,7 @@ const initialValue: Readonly<InternalContextValue<any>> = {
     itemWidth: 0,
     itemVisibilityStore: mockItemVisibilityStore,
     loop: false,
+    needsOffscreenAlphaCompositingOnItem: false,
 };
 
 const InternalContext = createContext<InternalContextValue<any>>(initialValue);

package/src/Carousel/components/ItemView.tsx

@@ -24,6 +24,7 @@ export default function ItemView(props: ItemViewProps) {
         itemHeight,
         itemWidth,
         itemVisibilityStore,
+        needsOffscreenAlphaCompositingOnItem,
     } = useContext(InternalContext);
 
     const [visible, setVisible] = useState(false);
@@ -44,6 +45,7 @@ export default function ItemView(props: ItemViewProps) {
 
     return (
         <Animated.View
+            needsOffscreenAlphaCompositing={needsOffscreenAlphaCompositingOnItem}
             children={visible ? children(interpolation) : null}
             onLayout={onLayout}
             style={[

package/src/ComicViewer/FastScroll.tsx

@@ -3,8 +3,9 @@ import * as R from 'ramda';
 import { NativeScrollEvent, NativeSyntheticEvent, View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';
-import { ChevronDown, ChevronUp } from '@fountain-ui/icons';
+import { ChevronDown, ChevronUp } from '@fountain-ui/icons/src/v2Icons';
 import { StyleSheet } from '@fountain-ui/core';
+import { baseColors, commonColors } from '@fountain-ui/styles';
 import FastScrollProps from './FastScrollProps';
 import { offsetToPercentage, percentageToOffset } from './util';
 
@@ -14,7 +15,7 @@ const styles = StyleSheet.create({
     indicator: {
         width: INDICATOR_WIDTH,
         height: 48,
-        backgroundColor: '#767676',
+        backgroundColor: baseColors.gray['650'],
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
@@ -157,16 +158,9 @@ const FastScroll = React.forwardRef((props: FastScrollProps, ref) => {
                     animatedStyle,
                     styles.indicator,
                 ]}>
-                    <ChevronUp
-                        fill={'#ededed'}
-                        height={20}
-                        width={20}
-                    />
-                    <ChevronDown
-                        fill={'#ededed'}
-                        height={20}
-                        width={20}
-                    />
+                    <ChevronUp fill={commonColors.static.strongInverse}/>
+
+                    <ChevronDown fill={commonColors.static.strongInverse}/>
                 </Animated.View>
             </GestureDetector>
         </View>

package/src/StatusBarProvider/StatusBarProvider.tsx

@@ -30,7 +30,7 @@ export default function StatusBarProvider(props: StatusBarProviderProps) {
     };
 
     const theme = useTheme();
-    const defaultColor = theme.palette.background.default;
+    const defaultColor = theme.palette.background.base;
 
     const [visible, setVisible] = React.useState(initialVisible);
     const [backgroundViewColor, setBackgroundViewColor] = React.useState(defaultColor);
@@ -179,4 +179,4 @@ export default function StatusBarProvider(props: StatusBarProviderProps) {
             {children}
         </Provider>
     );
-}
+}

package/src/hooks/useUnstableCollapsibleAppBar.ts

@@ -222,7 +222,7 @@ export default function useUnstableCollapsibleAppBar(userOptions: Options = defa
                 duration: ANIMATION_DURATION_MILLIS,
             });
         },
-    }, [appBarHeight]);
+    });
 
     const hasCollapsible = collapsibleToolbarHeight > 0;