@fountain-ui/core 2.0.0-beta.8 → 2.0.0-beta.81

package/src/Tabs/TabIndicator.tsx

@@ -1,71 +1,108 @@
-import React from 'react';
-import Animated from 'react-native-reanimated';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import React, { useCallback, useContext, useEffect } from 'react';
+import { Animated, Easing } from 'react-native';
+import { NamedStylesStringUnion } from '@fountain-ui/styles';
 import { useTheme } from '../styles';
+import { useAnimatedValue } from '../hooks';
+import { isNotAndroid12 } from '../utils';
 import type TabIndicatorProps from './TabIndicatorProps';
+import type { TabIndicatorColor } from './TabIndicatorProps';
 import { defaultCoordinate } from './TabCoordinate';
+import InternalContext from './InternalContext';
 
 type TabIndicatorStyles = NamedStylesStringUnion<'root' | 'disabled'>;
 
-const useStyles: UseStyles<TabIndicatorStyles> = function (): TabIndicatorStyles {
-    const theme = useTheme();
-
-    return {
-        root: {
-            backgroundColor: theme.palette.secondary.main,
-            bottom: 0,
-            height: 4,
-            position: 'absolute',
-        },
-        disabled: {
-            height: 0,
-        },
+const INDICATOR_WIDTH = 10;
+const INDICATOR_HEIGHT = 2;
+
+const SCROLLABLE_TABS_INSET = 12 * 2;
+
+const useStyles: (color: TabIndicatorColor) => TabIndicatorStyles =
+    function (color: TabIndicatorColor): TabIndicatorStyles {
+        const theme = useTheme();
+
+        return {
+            root: {
+                backgroundColor: theme.palette[color].main,
+                left: 0,
+                bottom: 0,
+                width: INDICATOR_WIDTH,
+                height: INDICATOR_HEIGHT,
+                position: 'absolute',
+            },
+            disabled: {
+                height: 0,
+            },
+        };
     };
+
+const startAnimation = (value: Animated.Value, toValue: number) => {
+    Animated.timing(value, {
+        toValue: toValue,
+        duration: 300,
+        easing: Easing.bezier(0.25, 1, 0.5, 1),
+        useNativeDriver: isNotAndroid12,
+    }).start();
 };
 
 export default function TabIndicator(props: TabIndicatorProps) {
     const {
+        color = 'primary',
         coordinates,
         disabled,
+        initialIndex,
         scrollable,
-        scrollValue,
         style,
         ...otherProps
     } = props;
 
-    const styles = useStyles();
+    const styles = useStyles(color);
 
-    const layout = Animated.useDerivedValue(() => {
-        const rawScrollValue = scrollValue.value;
-        const index = Math.floor(rawScrollValue);
-        const offset = rawScrollValue % 1;
+    const computeAnimationValues = useCallback((currentIndex: number) => {
+        const { x1, x2 } = coordinates[currentIndex] ?? defaultCoordinate;
 
-        const coordinate = coordinates[index] ?? defaultCoordinate;
-        const nextCoordinate = coordinates[index + 1] ?? defaultCoordinate;
+        const tabWidth = x2 - x1;
 
-        const x1 = (offset * nextCoordinate.x1 + (1 - offset) * coordinate.x1);
-        const x2 = (offset * nextCoordinate.x2 + (1 - offset) * coordinate.x2);
+        const nextTranslateX = x1 + (tabWidth - INDICATOR_WIDTH) / 2;
 
-        const leftInset = scrollable ? 12 : 0;
-        const rightInset = scrollable ? 24 : 0;
+        const inset = scrollable ? SCROLLABLE_TABS_INSET : 0;
+        const nextScaleX = (tabWidth - inset) / INDICATOR_WIDTH;
 
-        return {
-            left: x1 + leftInset,
-            width: Math.max(x2 - x1 - rightInset, 0),
+        return { tx: nextTranslateX, sx: nextScaleX };
+    }, [coordinates, scrollable]);
+
+    const {
+        tx: initialTx,
+        sx: initialSx,
+    } = computeAnimationValues(initialIndex);
+
+    const translateX = useAnimatedValue(initialTx);
+    const scaleX = useAnimatedValue(initialSx);
+
+    const { indexStore } = useContext(InternalContext);
+
+    useEffect(() => {
+        const scrollToIndex = (index: number) => {
+            const { tx, sx } = computeAnimationValues(index);
+
+            startAnimation(translateX, tx);
+            startAnimation(scaleX, sx);
         };
-    });
 
-    const animatedStyle = Animated.useAnimatedStyle(() => ({
-        left: layout.value.left,
-        width: layout.value.width,
-    }));
+        scrollToIndex(indexStore.getState());
+
+        return indexStore.subscribe(scrollToIndex);
+    }, [
+        computeAnimationValues,
+        coordinates,
+        indexStore,
+    ]);
 
     return (
         <Animated.View
             style={[
                 styles.root,
                 disabled ? styles.disabled : undefined,
-                animatedStyle,
+                { transform: [{ translateX }, { scaleX }] },
                 style,
             ]}
             {...otherProps}

package/src/Tabs/TabIndicatorProps.ts

@@ -1,26 +1,33 @@
 import type { ViewProps } from 'react-native';
-import Animated from 'react-native-reanimated';
 import type { OverridableComponentProps } from '../types';
 import type TabCoordinate from './TabCoordinate';
 
+export type TabIndicatorColor = 'primary' | 'secondary';
+
 export default interface TabIndicatorProps extends OverridableComponentProps<ViewProps, {
     /**
      * Tab item coordinates.
      */
     coordinates: TabCoordinate[];
 
+    /**
+     * Indicator color.
+     * @default: 'primary'
+     */
+    color?: TabIndicatorColor;
+
     /**
      * If `true`, the indicator is disabled.
      */
     disabled: boolean;
 
     /**
-     * If `true`, the tab will be able to scroll.
+     * Initial index.
      */
-    scrollable: boolean;
+    initialIndex: number;
 
     /**
-     * Scrollable value for using animated interpolation.
+     * If `true`, the tab will be able to scroll.
      */
-    scrollValue: Animated.SharedValue<number>;
+    scrollable: boolean;
 }> {}

package/src/Tabs/Tabs.tsx

@@ -1,13 +1,19 @@
-import React from 'react';
-import { GestureResponderEvent, LayoutChangeEvent, ScrollView, View } from 'react-native';
-import Animated, { Easing } from 'react-native-reanimated';
+import React, { cloneElement, forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import type { GestureResponderEvent, LayoutChangeEvent } from 'react-native';
+import { View } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import { isEveryDefined } from '@fountain-ui/utils';
 import { css, useTheme } from '../styles';
-import { useWidth } from '../internal/hooks';
+import { useSyncAnimatedValue } from '../hooks';
 import type TabsProps from './TabsProps';
-import TabCoordinate, { defaultCoordinate } from './TabCoordinate';
+import type { TabsInstance } from './types';
 import TabIndicator from './TabIndicator';
+import ScrollableTabsView from './ScrollableTabsView';
+import IndexAwareTab from './IndexAwareTab';
+import useTabCoordinates from './useTabCoordinates';
+import useTabInnerContentsWidth from './useTabInnerContentsWidth';
+import useIndexStore from './useIndexStore';
+import InternalContext from './InternalContext';
+import { isEveryTabCoordinatesDefined } from './utils';
 
 type TabsStyleKeys =
     | 'root'
@@ -34,73 +40,99 @@ const useStyles: UseStyles<TabsStyles> = function (): TabsStyles {
     };
 };
 
-export default function Tabs(props: TabsProps) {
+const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
     const {
         children,
-        index: indexProp,
+        indicatorColor = 'primary',
+        initialIndex = 0,
         disableIndicator = false,
+        indicatorSize = 'full',
         keyboardDismissMode = 'none',
         keyboardShouldPersistTaps = 'never',
         onChange,
         scrollable = false,
-        scrollValue: scrollValueProp,
         style,
         variant = 'primary',
-        ...otherProps
+        UNSTABLE_sharedIndex,
+        onTabSelected,
     } = props;
 
-    const styles = useStyles();
+    const fallbackSharedIndex = useSyncAnimatedValue({ initialValue: initialIndex });
+    const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;
+    const realInitialIndex = sharedIndex.initialValue;
+
+    const currentIndexRef = useRef(initialIndex);
 
-    const [containerWidth, handleLayout] = useWidth();
+    const setTab = (newIndex: number) => {
+        const currentIndex = currentIndexRef.current;
+        onTabSelected?.(newIndex, currentIndex);
 
-    const scrollViewRef = React.useRef<ScrollView | null>(null);
+        sharedIndex.animatedValue.setValue(newIndex);
+    };
 
-    const tabCount = React.Children.count(children);
-    const [coordinates, setCoordinates] = React.useState<TabCoordinate[]>(() => new Array(tabCount));
+    useImperativeHandle(
+        ref,
+        () => ({
+            setTab,
+        }),
+        [sharedIndex],
+    );
 
-    const internalScrollValue = Animated.useSharedValue(0);
-    const scrollValue = scrollValueProp || internalScrollValue;
+    const styles = useStyles();
 
-    const isReadyToRenderIndicator = isEveryDefined(coordinates);
+    const [outerCoordinates, updateCoordinate] = useTabCoordinates(children);
+    const [innerContentsWidthList, updateInnerContentsWidth] = useTabInnerContentsWidth(children);
 
-    React.useEffect(() => {
-        const animateTab = (index: number) => {
-            internalScrollValue.value = Animated.withTiming(index, {
-                duration: 200,
-                easing: Easing.out(Easing.exp),
-            });
-        };
+    const canRenderIndicator = indicatorSize === 'fit-content'
+        ? isEveryTabCoordinatesDefined(innerContentsWidthList, children)
+        : isEveryTabCoordinatesDefined(outerCoordinates, children);
 
-        if (scrollValueProp === undefined) {
-            animateTab(indexProp);
+    const indexStore = useIndexStore(sharedIndex);
+
+    const coordinates = useMemo(() => {
+        if (indicatorSize !== 'fit-content') {
+            return outerCoordinates;
         }
-    }, [indexProp, scrollValueProp, internalScrollValue]);
 
-    React.useEffect(() => {
-        const snapTab = (index: number) => {
-            const scrollView = scrollViewRef.current;
-            const coordinate: TabCoordinate = coordinates[index - 1] || defaultCoordinate;
+        return innerContentsWidthList.map((innerContentWidth, idx) => {
+            const { x1: outerX1, x2: outerX2 } = outerCoordinates[idx];
 
-            if (scrollView) {
-                const tabWidth = coordinate.x2 - coordinate.x1;
-                const x = coordinate.x1 + tabWidth / 2;
+            const tabWidth = outerX2 - outerX1;
+            const distanceFromParent = (tabWidth - innerContentWidth) / 2;
+            const indicatorStartCoordinate = outerX1 + distanceFromParent;
 
-                scrollView.scrollTo({ x, y: 0, animated: true });
-            }
-        };
+            return {
+                x1: indicatorStartCoordinate,
+                x2: indicatorStartCoordinate + innerContentWidth,
+            };
+        });
+    }, [outerCoordinates, innerContentsWidthList, variant]);
 
-        snapTab(indexProp);
-    }, [indexProp, containerWidth, coordinates]);
+    useEffect(() => {
+        return indexStore.subscribe(newIndex => {
+            onChange?.(newIndex);
+            currentIndexRef.current = newIndex;
+        });
+    }, [indexStore, onChange]);
 
     const tabElements = React.Children.map(children, (child, index) => {
+        if (!child) {
+            return null;
+        }
+
+        const onTabInnerLayout = (event: LayoutChangeEvent) => {
+            const { width } = event.nativeEvent.layout;
+
+            updateInnerContentsWidth(index, width);
+        };
+
         const onLayout = (event: LayoutChangeEvent) => {
             const { x, width } = event.nativeEvent.layout;
 
-            setCoordinates(prev => ([
-                ...prev.slice(0, index),
-                { x1: x, x2: x + width },
-                ...prev.slice(index + 1),
-            ]));
+            updateCoordinate(index, x, width);
+
+            // @ts-ignore
+            child.props.onLayout?.(event);
         };
 
         const onMouseDown = (e: GestureResponderEvent) => {
@@ -110,70 +142,80 @@ export default function Tabs(props: TabsProps) {
         };
 
         const onPress = () => {
-            onChange?.(index);
+            setTab(index);
+
             // @ts-ignore
             child.props.onPress?.();
         };
 
-        const selected = index === indexProp;
-        const enableIndicatorPlaceholder = disableIndicator
-            ? false
-            : (isReadyToRenderIndicator ? false : selected);
-
-        //@ts-ignore
-        return React.cloneElement(child, {
-            enableIndicator: enableIndicatorPlaceholder,
+        // @ts-ignore
+        const tabElement = cloneElement(child, {
+            enableIndicator: !disableIndicator && !canRenderIndicator,
+            indicatorColor,
+            onTabInnerLayout,
             onLayout,
             onPress,
             onMouseDown,
             variant,
-            selected,
+            indicatorSize,
             style: scrollable ? undefined : styles.fixedTab,
         });
-    });
 
-    const indicator = (
+        return (
+            <IndexAwareTab
+                children={tabElement}
+                index={index}
+                initialIndex={realInitialIndex}
+            />
+        );
+    })?.filter(Boolean);
+
+    const tabIndicator = canRenderIndicator ? (
         <TabIndicator
+            color={indicatorColor}
             coordinates={coordinates}
             disabled={disableIndicator}
+            initialIndex={realInitialIndex}
             scrollable={scrollable}
-            scrollValue={scrollValue}
         />
-    );
+    ) : null;
 
     return (
-        <View
-            onLayout={handleLayout}
-            style={css([
-                styles.root,
-                scrollable ? undefined : styles.fixedRoot,
-                style,
-            ])}
-            {...otherProps}
-        >
-            {scrollable ? (
-                <ScrollView
-                    automaticallyAdjustContentInsets={false}
-                    bounces={false}
-                    contentContainerStyle={styles.scrollableContainer}
-                    directionalLockEnabled={true}
-                    horizontal={true}
-                    ref={scrollViewRef}
-                    scrollsToTop={false}
-                    showsHorizontalScrollIndicator={false}
-                    showsVerticalScrollIndicator={false}
-                    keyboardDismissMode={keyboardDismissMode}
-                    keyboardShouldPersistTaps={keyboardShouldPersistTaps}
-                >
-                    {tabElements}
-                    {indicator}
-                </ScrollView>
-            ) : (
-                <>
-                    {tabElements}
-                    {indicator}
-                </>
-            )}
-        </View>
+        <InternalContext.Provider value={{ indexStore }}>
+            <View
+                style={css([
+                    styles.root,
+                    scrollable ? undefined : styles.fixedRoot,
+                    style,
+                ])}
+            >
+                {scrollable ? (
+                    <ScrollableTabsView
+                        automaticallyAdjustContentInsets={false}
+                        bounces={false}
+                        contentContainerStyle={styles.scrollableContainer}
+                        coordinates={coordinates}
+                        directionalLockEnabled={true}
+                        horizontal={true}
+                        initialIndex={realInitialIndex}
+                        scrollsToTop={false}
+                        showsHorizontalScrollIndicator={false}
+                        showsVerticalScrollIndicator={false}
+                        keyboardDismissMode={keyboardDismissMode}
+                        keyboardShouldPersistTaps={keyboardShouldPersistTaps}
+                    >
+                        {tabElements}
+                        {tabIndicator}
+                    </ScrollableTabsView>
+                ) : (
+                    <React.Fragment>
+                        {tabElements}
+                        {tabIndicator}
+                    </React.Fragment>
+                )}
+            </View>
+        </InternalContext.Provider>
     );
-};
+});
+
+export default Tabs;

package/src/Tabs/TabsProps.ts

@@ -1,30 +1,17 @@
-import React from 'react';
+import type { ReactNode, Ref } from 'react';
 import type { ViewProps } from 'react-native';
-import Animated from 'react-native-reanimated';
-import type { TabVariant } from '../Tab';
-import type { OverridableComponentProps } from '../types';
-
-export type KeyboardDismissMode =
-    'none'
-    | 'on-drag'
-    | 'interactive'; // ios only
-
-export type KeyboardShouldPersistTaps =
-    'never'
-    | boolean
-    | 'always'
-    | 'handled'; // app only
+import type { TabIndicatorColor } from './TabIndicatorProps';
+import type { TabVariant, TabIndicatorSize } from '../Tab';
+import type { OverridableComponentProps, SyncAnimatedValue } from '../types';
+import type { KeyboardDismissMode, KeyboardShouldPersistTaps, TabsInstance } from './types';
 
 export default interface TabsProps extends OverridableComponentProps<ViewProps, {
-    /**
-     * Collection of Tab components.
-     */
-    children: React.ReactNode;
+    ref?: Ref<TabsInstance>;
 
     /**
-     * Selected index.
+     * Collection of Tab components.
      */
-    index: number;
+    children: ReactNode;
 
     /**
      * If `true`, the indicator is disabled.
@@ -32,6 +19,26 @@ export default interface TabsProps extends OverridableComponentProps<ViewProps,
      */
     disableIndicator?: boolean;
 
+    /**
+     * The color of tab indicator
+     * @default 'primary'
+     */
+    indicatorColor?: TabIndicatorColor;
+
+    /**
+     * The size of tab indicator.
+     * 'full' adjusts the indicator to the size of the Tab,
+     * while 'fit-content' adjusts the indicator to the size of the content inside the Tab.
+     * @default 'full'
+     */
+    indicatorSize?: TabIndicatorSize;
+
+    /**
+     * Index of initial tab that should be selected.
+     * @default 0
+     */
+    initialIndex?: number;
+
     /**
      * keyboard dismissing condition of dragging.
      * @default 'none'
@@ -56,13 +63,20 @@ export default interface TabsProps extends OverridableComponentProps<ViewProps,
     scrollable?: boolean;
 
     /**
-     * Scrollable value for using animated interpolation.
+     * Unstable API.
      */
-    scrollValue?: Animated.SharedValue<number>;
+    UNSTABLE_sharedIndex?: SyncAnimatedValue;
 
     /**
      * The variant to use.
      * @default 'primary'
      */
     variant?: TabVariant;
+
+    /**
+     * Callback function executed when a Tab is selected.
+     * Executed even if the index does not change when a Tab is pressed.
+     * Receives the next tab index and the current tab index as parameters.
+     */
+    onTabSelected?: (newIndex: number, currentIndex: number) => void;
 }> {}

package/src/Tabs/index.ts

@@ -1,2 +1,3 @@
 export { default } from './Tabs';
-export type { default as TabsProps } from './TabsProps';
+export type { default as TabsProps } from './TabsProps';
+export type { TabsInstance } from './types';

package/src/Tabs/types.ts

@@ -0,0 +1,18 @@
+export type KeyboardDismissMode =
+    'none'
+    | 'on-drag'
+    | 'interactive'; // ios only
+
+export type KeyboardShouldPersistTaps =
+    'never'
+    | boolean
+    | 'always'
+    | 'handled'; // app only
+
+export interface TabsInstance {
+    /**
+     * Function to scroll to a specific tab. Invalid index is ignored.
+     * @param index
+     */
+    setTab: (index: number) => void;
+}

package/src/Tabs/useIndexStore.ts

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from 'react';
+import type { MonoStore } from '../store';
+import { SimpleStore } from '../store';
+import type { SyncAnimatedValue } from '../types';
+
+export default function useIndexStore(value: SyncAnimatedValue): MonoStore<number> {
+    const {
+        animatedValue,
+        initialValue,
+    } = value;
+
+    const store = useRef(new SimpleStore(initialValue)).current;
+
+    useEffect(() => {
+        const id = animatedValue.addListener((newIndex) => {
+            store.dispatch(newIndex.value);
+        });
+
+        return () => {
+            animatedValue.removeListener(id);
+        };
+    }, [animatedValue]);
+
+    useEffect(() => {
+        return () => {
+            store.removeAllListeners();
+        };
+    }, [store]);
+
+    return store;
+};