@fountain-ui/lab 2.0.0-beta.7 → 2.0.0-beta.70

package/src/BottomSheet/BottomSheetWeb.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
-import { Modal, Paper, StyleSheet, css, useTheme } from '@fountain-ui/core';
+import { ScrollView } from 'react-native';
+import { Column, Modal, Paper, StyleSheet, css, 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'>;
+type BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper' | 'topElementLocation'>;
 
 const useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {
     const theme = useTheme();
@@ -12,7 +14,7 @@ const useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {
     return {
         root: {
             justifyContent: 'flex-end',
-            zIndex: theme.zIndex.dialog
+            zIndex: theme.zIndex.dialog,
         },
         animated: {
             alignSelf: 'center',
@@ -20,25 +22,34 @@ const useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {
             width: '100%',
         },
         paper: {
+            borderTopLeftRadius: theme.shape.roundnessExtra,
+            borderTopRightRadius: theme.shape.roundnessExtra,
             borderBottomLeftRadius: 0,
             borderBottomRightRadius: 0,
             flexGrow: 1,
             overflow: 'hidden',
         },
+        topElementLocation: {
+            position: 'absolute',
+            bottom: 0,
+            width: '100%',
+        },
     };
 };
 
-const calculateHeight = (points: BottomSheetProps['snapPoints']): number => {
-    return points[points.length - 1] ?? 0;
-};
-
 export default function BottomSheet(props: BottomSheetProps) {
     const {
         backdropOpacity,
         children,
+        enableDynamicSizing = true,
+        header,
+        topElement,
         index,
+        maxHeightNormalizedRatio = 0.9,
         onChange,
-        snapPoints,
+        snapPoints = [],
+        disableDefaultBackgroundColor = false,
+        disableDefaultShadow = false,
     } = props;
 
     const styles = useStyles();
@@ -49,8 +60,22 @@ export default function BottomSheet(props: BottomSheetProps) {
         }
     };
 
-    const height = calculateHeight(snapPoints);
-    const translateY = height - (snapPoints[index] ?? 0);
+    const {
+        convertedSnapPoints,
+        handleContentSizeChange,
+        highestSnapPoint,
+    } = useDynamicSnapPoints({
+        enableDynamicSizing,
+        maxHeightNormalizedRatio,
+        snapPoints,
+    });
+
+    const translateY = highestSnapPoint - (convertedSnapPoints[index] ?? 0);
+
+    const paperStyles = [
+        styles.paper,
+        { height: highestSnapPoint },
+    ];
 
     return (
         <Modal
@@ -63,14 +88,27 @@ export default function BottomSheet(props: BottomSheetProps) {
                 style={styles.animated}
                 translateY={translateY}
             >
+                {topElement ? (
+                    <Column>
+                        <Column style={styles.topElementLocation}>
+                            {topElement}
+                        </Column>
+                    </Column>
+                ) : null}
+
                 <Paper
-                    elevation={12}
-                    style={[
-                        styles.paper,
-                        { height },
-                    ]}
+                    elevation={disableDefaultShadow ? 0 : 12}
+                    style={paperStyles}
+                    colorValue={disableDefaultBackgroundColor ? '#ffffff00' : undefined}
                 >
-                    {children}
+                    <ScrollView
+                        onContentSizeChange={handleContentSizeChange}
+                        stickyHeaderIndices={header ? [0] : undefined}
+                    >
+                        {header}
+
+                        {children}
+                    </ScrollView>
                 </Paper>
             </AnimatedY>
         </Modal>

package/src/BottomSheet/useDynamicSnapPoints.ts

@@ -0,0 +1,73 @@
+import * as R from 'ramda';
+import { useCallback, useMemo, useState } from 'react';
+import { useWindowDimensions } from 'react-native';
+
+interface UseDynamicSnapPointsParams {
+    enableDynamicSizing: boolean;
+    maxHeightNormalizedRatio: number;
+    snapPoints: (number | string)[];
+}
+
+interface UseDynamicSnapPointsReturns {
+    convertedSnapPoints: number[];
+    handleContentSizeChange: (w: number, h: number) => void;
+    highestSnapPoint: number;
+}
+
+const convertSnapPoint = (snapPoint: number | string, windowHeight: number, maxDynamicContentSize: number): number => {
+    if (typeof snapPoint === 'number') {
+        return Math.min(maxDynamicContentSize, snapPoint);
+    }
+
+    const percentageRegex = new RegExp(/^[0-9]+%$/);
+    if (percentageRegex.test(snapPoint)) {
+        const percentage = parseFloat(snapPoint) / 100;
+        return isNaN(percentage) ? 0 : Math.min(maxDynamicContentSize, Math.round(windowHeight * percentage));
+    }
+
+    return 0;
+};
+
+export default function useDynamicSnapPoints(params: UseDynamicSnapPointsParams): UseDynamicSnapPointsReturns {
+    const {
+        enableDynamicSizing,
+        maxHeightNormalizedRatio,
+        snapPoints,
+    } = params;
+
+    const { height: windowHeight } = useWindowDimensions();
+
+    const [contentHeight, setContentHeight] = useState<number>(0);
+
+    const convertedSnapPoints = useMemo(() => {
+        const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio);
+
+        const convertedSnapPoints = snapPoints.map((snapPoint) => {
+            return convertSnapPoint(snapPoint, windowHeight, maxDynamicContentSize);
+        });
+
+        if (enableDynamicSizing && contentHeight !== 0) {
+            convertedSnapPoints.push(
+                convertSnapPoint(contentHeight, windowHeight, maxDynamicContentSize),
+            );
+        }
+
+        return Array.from(new Set(convertedSnapPoints)).sort((a, b) => a - b);
+    }, [
+        contentHeight,
+        snapPoints,
+        windowHeight,
+    ]);
+
+    const highestSnapPoint = R.last(convertedSnapPoints) ?? 0;
+
+    const handleContentSizeChange = useCallback((_: number, height: number) => {
+        setContentHeight(height);
+    }, []);
+
+    return {
+        convertedSnapPoints,
+        handleContentSizeChange,
+        highestSnapPoint,
+    };
+}

package/src/Carousel/Carousel.tsx

@@ -0,0 +1,135 @@
+import React, { forwardRef, memo, useImperativeHandle, useMemo } from 'react';
+import ViewabilityTrackerView from '../ViewabilityTrackerView';
+import type CarouselProps from './CarouselProps';
+import type { CarouselInstance } from './types';
+import {
+    useAutoplayController,
+    useIndexController,
+    useItemVisibilityStore,
+    useLoopedData,
+    usePagingAnimator,
+} from './hooks';
+import { createDefaultItemStyle, createDefaultScrollAnimation } from './animation';
+import { InternalContext, RootView, ScrollViewGesture } from './components';
+
+const Carousel = forwardRef<CarouselInstance, CarouselProps>(function Carousel(props, ref) {
+    const {
+        autoplay = false,
+        autoplayInterval = 3000,
+        createItemStyle = createDefaultItemStyle,
+        createScrollAnimation = createDefaultScrollAnimation,
+        data: originalData,
+        disableSmartAutoplay = false,
+        initialIndex = 0,
+        itemHeight,
+        itemWidth,
+        loop = false,
+        onIndexChange,
+        renderItem,
+        scrollEnabled = true,
+        style,
+        windowSize = 5,
+    } = props;
+
+    const data = useLoopedData(originalData, loop);
+
+    const [itemVisibilityStore, onPositionChange] = useItemVisibilityStore({
+        initialIndex,
+        numberOfData: data.length,
+        windowSize,
+    });
+
+    const indexController = useIndexController({
+        initialIndex,
+        itemWidth,
+        numberOfData: data.length,
+        numberOfOriginalData: originalData.length,
+        onIndexChange,
+        onPositionChange,
+    });
+
+    const { getCurrentIndex } = indexController;
+
+    const {
+        gestureTranslationX,
+        globalInterpolation,
+        interruptAnimation,
+        startPagingAnimation,
+    } = usePagingAnimator({
+        createScrollAnimation,
+        itemWidth,
+        indexController,
+        initialIndex,
+        loop,
+        numberOfData: data.length,
+    });
+
+    const autoplayController = useAutoplayController({
+        enabled: autoplay,
+        intervalMillis: autoplayInterval,
+        startPagingAnimation,
+    });
+
+    useImperativeHandle(
+        ref,
+        () => ({
+            getCurrentIndex,
+            next: () => startPagingAnimation('directional', { direction: 'next' }),
+            prev: () => startPagingAnimation('directional', { direction: 'prev' }),
+            scrollTo: (option) => startPagingAnimation('index', option),
+        }),
+        [startPagingAnimation, getCurrentIndex],
+    );
+
+    const contextValue = useMemo(() => ({
+        createItemStyle,
+        data,
+        globalInterpolation,
+        itemHeight,
+        itemWidth,
+        itemVisibilityStore,
+        loop,
+    }), [
+        createItemStyle,
+        data,
+        globalInterpolation,
+        itemHeight,
+        itemWidth,
+        itemVisibilityStore,
+        loop,
+    ]);
+
+    return (
+        <InternalContext.Provider value={contextValue}>
+            <ViewabilityTrackerView
+                enabled={autoplay && !disableSmartAutoplay}
+                measurementIntervalMillis={Math.max(3000, autoplayInterval)}
+                onViewabilityChange={({ visible }) => {
+                    if (visible) {
+                        autoplayController.resume();
+                    } else {
+                        autoplayController.pause();
+                    }
+                }}
+            >
+                <ScrollViewGesture
+                    autoplayController={autoplayController}
+                    gestureTranslationX={gestureTranslationX}
+                    interruptAnimation={interruptAnimation}
+                    scrollEnabled={scrollEnabled}
+                    startPagingAnimation={startPagingAnimation}
+                >
+                    <RootView
+                        data={data}
+                        itemHeight={itemHeight}
+                        originalData={originalData}
+                        renderItem={renderItem}
+                        style={style}
+                    />
+                </ScrollViewGesture>
+            </ViewabilityTrackerView>
+        </InternalContext.Provider>
+    );
+});
+
+export default memo(Carousel);

package/src/Carousel/CarouselProps.ts

@@ -1,8 +1,17 @@
-import React, { RefObject } from 'react';
-import type { ListRenderItemInfo } from 'react-native';
+import type { RefObject } from 'react';
 import type { ComponentProps } from '@fountain-ui/core';
+import type {
+    CarouselInstance,
+    CreateItemStyle,
+    CreateScrollAnimation,
+    ItemHeight,
+    OnIndexChange,
+    RenderItem,
+} from './types';
 
 export default interface CarouselProps<ItemT = any> extends ComponentProps<{
+    ref?: RefObject<CarouselInstance>;
+
     /**
      * If `true`, enable autoplay.
      * @default false
@@ -16,92 +25,72 @@ export default interface CarouselProps<ItemT = any> extends ComponentProps<{
     autoplayInterval?: number;
 
     /**
-     * Padding for center slide. If specified, `slidesToScroll` and `slidesToShow` set to 1.
+     * The item style creator function.
+     * @default createDefaultItemStyle
      */
-    centerSlidePadding?: number;
+    createItemStyle?: CreateItemStyle;
 
     /**
-     * Delay in ms until navigating to the next item.
+     * The scroll animation creator function.
+     * @default createDefaultScrollAnimation
+     */
+    createScrollAnimation?: CreateScrollAnimation;
+
+    /**
+     * Data for render items.
      */
     data: ReadonlyArray<ItemT>;
 
     /**
-     * Value of the opacity effect applied to inactive slides.
-     * @default 0.7
+     * If `true`, carousel will detect its own viewability and control autoplay automatically.
+     * @default false
      */
-    inactiveSlideOpacity?: number;
+    disableSmartAutoplay?: boolean;
 
     /**
-     * Value of the 'scale' transform applied to inactive slides.
-     * @default 0.9
+     * Index of initial item that should be selected.
+     * @default 0
      */
-    inactiveSlideScale?: number;
+    initialIndex?: number;
 
     /**
-     * Web only. Value of the 'scale' transform applied to a active slide.
-     * @default 0.990
+     * The item height.
+     * For a performance reason, always consider to provide a number value.
      */
-    activeSlideScale?: number;
+    itemHeight: ItemHeight;
 
     /**
-     * A number representing the index of the active slide.
+     * The item width.
      */
-    index: number;
+    itemWidth: number;
 
     /**
      * Enable infinite loop mode.
      * @default false
      */
-    infinite?: boolean;
+    loop?: boolean;
 
     /**
      * Callback fired when an index is changed.
      */
-    onChange?: (newIndex: number) => void;
+    onIndexChange?: OnIndexChange;
 
     /**
      * Takes an item from data and renders it into the list.
      */
-    renderItem: (info: Omit<ListRenderItemInfo<ItemT>, 'separators'>) => React.ReactElement | null;
-
-    /**
-     * Web only. Number of slides to scroll at once.
-     * @default 1
-     */
-    slidesToScroll?: number;
-
-    /**
-     * Web only. Number of slides to display.
-     * @default 1
-     */
-    slidesToShow?: number;
+    renderItem: RenderItem<ItemT>;
 
     /**
-     * Web only. Enable items to display at the center.
+     * Whether to enable scroll gesture.
      * @default true
      */
-    centerMode?: boolean;
-
-    /**
-     * Web only. Enable arrows to display.
-     * @default true
-     */
-    arrows?: boolean;
-
-    /**
-     * Web only. Style of arrows
-     * @default true
-     */
-    arrowsStyle?: object;
-
-    /**
-     * Web only. Style of track
-     * @default object
-     */
-    trackStyle?: object;
+    scrollEnabled?: boolean;
 
     /**
-     * Only web. Refer slick object
+     * The maximum number of items that can respond to pan gesture events.
+     * Due to the nature of the `active` item, it accepts only odd number. (e.g. 1, 3, 5...)
+     * 0 means all items will respond to pan gesture events.
+     * @default 5
      */
-    ref?: RefObject<any>;
+    windowSize?: number;
 }> {}

package/src/Carousel/animation/animationUtils.ts

@@ -0,0 +1 @@
+export const itemInterpolationInputRange = [-1, 0, 1];

package/src/Carousel/animation/createDefaultItemStyle.ts

@@ -0,0 +1,3 @@
+import normalItemStyleFactory from './normalItemStyleFactory';
+
+export default normalItemStyleFactory();

package/src/Carousel/animation/createDefaultScrollAnimation.ts

@@ -0,0 +1,14 @@
+import { Animated, Easing, Platform } from 'react-native';
+import * as R from 'ramda';
+
+export default function createDefaultScrollAnimation(
+    animatedValue: Animated.Value,
+    toValue: number,
+): Animated.CompositeAnimation {
+    return Animated.timing(animatedValue, {
+        toValue: toValue,
+        duration: 180,
+        easing: Easing.bezier(0.2, 0.2, 0.2, 1),
+        useNativeDriver: R.not(Platform.OS === 'android' && Platform.Version === 31),
+    });
+};

package/src/Carousel/animation/index.ts

@@ -0,0 +1,4 @@
+export { default as createDefaultItemStyle } from './createDefaultItemStyle';
+export { default as createDefaultScrollAnimation } from './createDefaultScrollAnimation';
+export { default as normalItemStyleFactory } from './normalItemStyleFactory';
+export { default as parallaxItemStyleFactory } from './parallaxItemStyleFactory';

package/src/Carousel/animation/normalItemStyleFactory.ts

@@ -0,0 +1,19 @@
+import type { CreateItemStyle } from '../types';
+import { itemInterpolationInputRange } from './animationUtils';
+
+export default function normalItemStyleFactory() {
+    const createItemStyle: CreateItemStyle = (itemInterpolation, itemWidth) => {
+        const translate = itemInterpolation.interpolate({
+            inputRange: itemInterpolationInputRange,
+            outputRange: [
+                -itemWidth,
+                0,
+                itemWidth,
+            ],
+        });
+
+        return { transform: [{ translateX: translate }] };
+    };
+
+    return createItemStyle;
+};

package/src/Carousel/animation/parallaxItemStyleFactory.ts

@@ -0,0 +1,79 @@
+import type { CreateItemStyle } from '../types';
+import { itemInterpolationInputRange } from './animationUtils';
+
+export interface ParallaxAnimationConfig {
+    activeItemScale?: number;
+    activeItemOpacity?: number;
+    adjacentItemScale?: number;
+    adjacentItemOpacity?: number;
+    scrollingOffset?: number;
+}
+
+const defaultParallaxAnimationConfig: Required<Readonly<ParallaxAnimationConfig>> = {
+    activeItemScale: 0.9,
+    activeItemOpacity: 1,
+    adjacentItemScale: Math.pow(0.9, 2),
+    adjacentItemOpacity: 0.5,
+    scrollingOffset: 50,
+};
+
+export default function parallaxItemStyleFactory(config: ParallaxAnimationConfig = defaultParallaxAnimationConfig) {
+    const {
+        activeItemOpacity,
+        activeItemScale,
+        adjacentItemOpacity,
+        adjacentItemScale,
+        scrollingOffset,
+    }: Required<ParallaxAnimationConfig> = {
+        ...defaultParallaxAnimationConfig,
+        ...config,
+    };
+
+    const createItemStyle: CreateItemStyle = (itemInterpolation, itemWidth) => {
+        const translate = itemInterpolation.interpolate({
+            inputRange: itemInterpolationInputRange,
+            outputRange: [
+                -itemWidth + scrollingOffset,
+                0,
+                itemWidth - scrollingOffset,
+            ],
+        });
+
+        const zIndex = itemInterpolation.interpolate({
+            inputRange: itemInterpolationInputRange,
+            outputRange: [0, itemWidth, 0],
+            extrapolate: 'clamp',
+        });
+
+        const scale = itemInterpolation.interpolate({
+            inputRange: itemInterpolationInputRange,
+            outputRange: [
+                adjacentItemScale,
+                activeItemScale,
+                adjacentItemScale,
+            ],
+            extrapolate: 'clamp',
+        });
+
+        const opacity = itemInterpolation.interpolate({
+            inputRange: itemInterpolationInputRange,
+            outputRange: [
+                adjacentItemOpacity,
+                activeItemOpacity,
+                adjacentItemOpacity,
+            ],
+            extrapolate: 'clamp',
+        });
+
+        return {
+            transform: [
+                { translateX: translate },
+                { scale },
+            ],
+            zIndex,
+            opacity,
+        };
+    };
+
+    return createItemStyle;
+};

package/src/Carousel/components/InternalContext.ts

@@ -0,0 +1,33 @@
+import { createContext } from 'react';
+import { Animated } from 'react-native';
+import type { CreateItemStyle, ItemHeight, ItemVisibilityStore } from '../types';
+
+export interface InternalContextValue<ItemT> {
+    createItemStyle: CreateItemStyle;
+    data: ReadonlyArray<ItemT>;
+    globalInterpolation: Animated.AnimatedInterpolation;
+    itemHeight: ItemHeight;
+    itemWidth: number;
+    itemVisibilityStore: ItemVisibilityStore;
+    loop: boolean;
+}
+
+const mockItemVisibilityStore: ItemVisibilityStore = {
+    dispatch: () => void 0,
+    subscribe: () => () => void 0,
+    removeAllListeners: () => void 0,
+};
+
+const initialValue: Readonly<InternalContextValue<any>> = {
+    createItemStyle: () => ({}),
+    data: [],
+    globalInterpolation: Animated.add(new Animated.Value(0), 0),
+    itemHeight: 0,
+    itemWidth: 0,
+    itemVisibilityStore: mockItemVisibilityStore,
+    loop: false,
+};
+
+const InternalContext = createContext<InternalContextValue<any>>(initialValue);
+
+export default InternalContext;