@fountain-ui/core 2.0.0-beta.92 → 2.0.0-beta.94

package/src/Tabs/LegacyTabIndicator.tsx

@@ -0,0 +1,111 @@
+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 './LegacyTabIndicatorProps';
+import type { TabIndicatorColor } from './LegacyTabIndicatorProps';
+import { defaultCoordinate } from './TabCoordinate';
+import InternalContext from './InternalContext';
+
+type TabIndicatorStyles = NamedStylesStringUnion<'root' | 'disabled'>;
+
+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,
+        style,
+        ...otherProps
+    } = props;
+
+    const styles = useStyles(color);
+
+    const computeAnimationValues = useCallback((currentIndex: number) => {
+        const { x1, x2 } = coordinates[currentIndex] ?? defaultCoordinate;
+
+        const tabWidth = x2 - x1;
+
+        const nextTranslateX = x1 + (tabWidth - INDICATOR_WIDTH) / 2;
+
+        const inset = scrollable ? SCROLLABLE_TABS_INSET : 0;
+        const nextScaleX = (tabWidth - inset) / INDICATOR_WIDTH;
+
+        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);
+        };
+
+        scrollToIndex(indexStore.getState());
+
+        return indexStore.subscribe(scrollToIndex);
+    }, [
+        computeAnimationValues,
+        coordinates,
+        indexStore,
+    ]);
+
+    return (
+        <Animated.View
+            style={[
+                styles.root,
+                disabled ? styles.disabled : undefined,
+                { transform: [{ translateX }, { scaleX }] },
+                style,
+            ]}
+            {...otherProps}
+        />
+    );
+};

package/src/Tabs/LegacyTabIndicatorProps.ts

@@ -0,0 +1,33 @@
+import type { ViewProps } from 'react-native';
+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;
+
+    /**
+     * Initial index.
+     */
+    initialIndex: number;
+
+    /**
+     * If `true`, the tab will be able to scroll.
+     */
+    scrollable: boolean;
+}> {}

package/src/Tabs/LegacyTabs.tsx

@@ -0,0 +1,225 @@
+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 { css, useTheme } from '../styles';
+import { useSyncAnimatedValue } from '../hooks';
+import type TabsProps from './LegacyTabsProps';
+import type { TabsInstance } from './types';
+import TabIndicator from './LegacyTabIndicator';
+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'
+    | 'fixedRoot'
+    | 'fixedTab'
+    | 'scrollableContainer';
+
+type TabsStyles = NamedStylesStringUnion<TabsStyleKeys>;
+
+const useStyles: UseStyles<TabsStyles> = function (): TabsStyles {
+    const theme = useTheme();
+
+    return {
+        root: {},
+        fixedRoot: {
+            flexDirection: 'row',
+        },
+        fixedTab: {
+            flex: 1,
+        },
+        scrollableContainer: {
+            paddingHorizontal: theme.spacing(1),
+        },
+    };
+};
+
+const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
+    const {
+        children,
+        indicatorColor = 'primary',
+        initialIndex = 0,
+        disableIndicator = false,
+        indicatorSize = 'full',
+        keyboardDismissMode = 'none',
+        keyboardShouldPersistTaps = 'never',
+        onChange,
+        scrollable = false,
+        scrollViewContentContainerStyle,
+        style,
+        variant = 'primary',
+        UNSTABLE_sharedIndex,
+        onTabSelected,
+    } = props;
+
+    const fallbackSharedIndex = useSyncAnimatedValue({ initialValue: initialIndex });
+    const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;
+    const realInitialIndex = sharedIndex.initialValue;
+
+    const currentIndexRef = useRef(initialIndex);
+
+    const setTab = (newIndex: number) => {
+        const currentIndex = currentIndexRef.current;
+        onTabSelected?.(newIndex, currentIndex);
+
+        sharedIndex.animatedValue.setValue(newIndex);
+    };
+
+    useImperativeHandle(
+        ref,
+        () => ({
+            setTab,
+        }),
+        [sharedIndex],
+    );
+
+    const styles = useStyles();
+
+    const [outerCoordinates, updateCoordinate] = useTabCoordinates(children);
+    const [innerContentsWidthList, updateInnerContentsWidth] = useTabInnerContentsWidth(children);
+
+    const canRenderIndicator = indicatorSize === 'fit-content'
+        ? isEveryTabCoordinatesDefined(innerContentsWidthList, children)
+        : isEveryTabCoordinatesDefined(outerCoordinates, children);
+
+    const indexStore = useIndexStore(sharedIndex);
+
+    const coordinates = useMemo(() => {
+        if (indicatorSize !== 'fit-content') {
+            return outerCoordinates;
+        }
+
+        return innerContentsWidthList.map((innerContentWidth, idx) => {
+            const { x1: outerX1, x2: outerX2 } = outerCoordinates[idx];
+
+            const tabWidth = outerX2 - outerX1;
+            const distanceFromParent = (tabWidth - innerContentWidth) / 2;
+            const indicatorStartCoordinate = outerX1 + distanceFromParent;
+
+            return {
+                x1: indicatorStartCoordinate,
+                x2: indicatorStartCoordinate + innerContentWidth,
+            };
+        });
+    }, [outerCoordinates, innerContentsWidthList, variant]);
+
+    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;
+
+            updateCoordinate(index, x, width);
+
+            // @ts-ignore
+            child.props.onLayout?.(event);
+        };
+
+        const onMouseDown = (e: GestureResponderEvent) => {
+            if (keyboardShouldPersistTaps === 'always') {
+                e.preventDefault();
+            }
+        };
+
+        const onPress = () => {
+            setTab(index);
+
+            // @ts-ignore
+            child.props.onPress?.();
+        };
+
+        // @ts-ignore
+        const tabElement = cloneElement(child, {
+            enableIndicator: !disableIndicator && !canRenderIndicator,
+            indicatorColor,
+            onTabInnerLayout,
+            onLayout,
+            onPress,
+            onMouseDown,
+            variant,
+            indicatorSize,
+            style: scrollable ? undefined : styles.fixedTab,
+        });
+
+        return (
+            <IndexAwareTab
+                children={tabElement}
+                index={index}
+                initialIndex={realInitialIndex}
+            />
+        );
+    })?.filter(Boolean);
+
+    const tabIndicator = canRenderIndicator ? (
+        <TabIndicator
+            color={indicatorColor}
+            coordinates={coordinates}
+            disabled={disableIndicator}
+            initialIndex={realInitialIndex}
+            scrollable={scrollable}
+        />
+    ) : null;
+
+    return (
+        <InternalContext.Provider value={{ indexStore }}>
+            <View
+                style={css([
+                    styles.root,
+                    scrollable ? undefined : styles.fixedRoot,
+                    style,
+                ])}
+            >
+                {scrollable ? (
+                    <ScrollableTabsView
+                        automaticallyAdjustContentInsets={false}
+                        bounces={false}
+                        contentContainerStyle={css([
+                            styles.scrollableContainer,
+                            scrollViewContentContainerStyle,
+                        ])}
+                        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/LegacyTabsProps.ts

@@ -0,0 +1,87 @@
+import type { ReactNode, Ref } from 'react';
+import type { ViewProps } from 'react-native';
+import type { TabVariant, TabIndicatorSize } from '../Tab';
+import type { ExtendedStyle, OverridableComponentProps, SyncAnimatedValue } from '../types';
+import type { TabIndicatorColor } from './LegacyTabIndicatorProps';
+import type { KeyboardDismissMode, KeyboardShouldPersistTaps, TabsInstance } from './types';
+
+export default interface TabsProps extends OverridableComponentProps<ViewProps, {
+    ref?: Ref<TabsInstance>;
+
+    /**
+     * Collection of Tab components.
+     */
+    children: ReactNode;
+
+    /**
+     * If `true`, the indicator is disabled.
+     * @default false
+     */
+    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'
+     */
+    keyboardDismissMode?: KeyboardDismissMode,
+
+    /**
+     * keyboard persisting condition of tapping.
+     * @default 'never'
+     */
+    keyboardShouldPersistTaps?: KeyboardShouldPersistTaps,
+
+    /**
+     * Callback fired when a tab is selected.
+     */
+    onChange?: (newIndex: number) => void;
+
+    /**
+     * If `true`, the component will be able to scroll.
+     * @default false
+     */
+    scrollable?: boolean;
+
+    /**
+     * These styles will be applied to the scroll view content container which wraps all of the child views.
+     */
+    scrollViewContentContainerStyle?: ExtendedStyle | ExtendedStyle[];
+
+    /**
+     * Unstable API.
+     */
+    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/TabIndicator.tsx

@@ -5,7 +5,6 @@ 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';
 
@@ -14,15 +13,13 @@ type TabIndicatorStyles = NamedStylesStringUnion<'root' | 'disabled'>;
 const INDICATOR_WIDTH = 10;
 const INDICATOR_HEIGHT = 2;
 
-const SCROLLABLE_TABS_INSET = 12 * 2;
-
-const useStyles: (color: TabIndicatorColor) => TabIndicatorStyles =
-    function (color: TabIndicatorColor): TabIndicatorStyles {
+const useStyles: () => TabIndicatorStyles =
+    function (): TabIndicatorStyles {
         const theme = useTheme();
 
         return {
             root: {
-                backgroundColor: theme.palette[color].main,
+                backgroundColor: theme.palette.icon.strong,
                 left: 0,
                 bottom: 0,
                 width: INDICATOR_WIDTH,
@@ -46,16 +43,14 @@ const startAnimation = (value: Animated.Value, toValue: number) => {
 
 export default function TabIndicator(props: TabIndicatorProps) {
     const {
-        color = 'primary',
         coordinates,
         disabled,
         initialIndex,
-        scrollable,
         style,
         ...otherProps
     } = props;
 
-    const styles = useStyles(color);
+    const styles = useStyles();
 
     const computeAnimationValues = useCallback((currentIndex: number) => {
         const { x1, x2 } = coordinates[currentIndex] ?? defaultCoordinate;
@@ -64,11 +59,10 @@ export default function TabIndicator(props: TabIndicatorProps) {
 
         const nextTranslateX = x1 + (tabWidth - INDICATOR_WIDTH) / 2;
 
-        const inset = scrollable ? SCROLLABLE_TABS_INSET : 0;
-        const nextScaleX = (tabWidth - inset) / INDICATOR_WIDTH;
+        const nextScaleX = tabWidth / INDICATOR_WIDTH;
 
         return { tx: nextTranslateX, sx: nextScaleX };
-    }, [coordinates, scrollable]);
+    }, [coordinates]);
 
     const {
         tx: initialTx,

package/src/Tabs/TabIndicatorProps.ts

@@ -2,20 +2,12 @@ import type { ViewProps } from 'react-native';
 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.
      */
@@ -25,9 +17,4 @@ export default interface TabIndicatorProps extends OverridableComponentProps<Vie
      * Initial index.
      */
     initialIndex: number;
-
-    /**
-     * If `true`, the tab will be able to scroll.
-     */
-    scrollable: boolean;
 }> {}

package/src/Tabs/Tabs.tsx

@@ -4,6 +4,7 @@ import { View } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { css, useTheme } from '../styles';
 import { useSyncAnimatedValue } from '../hooks';
+import type { TabVariant } from '../Tab/TabProps';
 import type TabsProps from './TabsProps';
 import type { TabsInstance } from './types';
 import TabIndicator from './TabIndicator';
@@ -19,7 +20,8 @@ type TabsStyleKeys =
     | 'root'
     | 'fixedRoot'
     | 'fixedTab'
-    | 'scrollableContainer';
+    | 'scrollableContainer'
+    | 'bottomDivider';
 
 type TabsStyles = NamedStylesStringUnion<TabsStyleKeys>;
 
@@ -37,23 +39,27 @@ const useStyles: UseStyles<TabsStyles> = function (): TabsStyles {
         scrollableContainer: {
             paddingHorizontal: theme.spacing(1),
         },
+        bottomDivider: {
+            borderBottomColor: theme.palette.border.base,
+            borderBottomWidth: 1,
+        },
     };
 };
 
 const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
     const {
         children,
-        indicatorColor = 'primary',
         initialIndex = 0,
         disableIndicator = false,
-        indicatorSize = 'full',
+        indicatorSize = 'fit-content',
         keyboardDismissMode = 'none',
         keyboardShouldPersistTaps = 'never',
         onChange,
         scrollable = false,
         scrollViewContentContainerStyle,
+        showDivider = false,
         style,
-        variant = 'primary',
+        variant = 'default' as TabVariant,
         UNSTABLE_sharedIndex,
         onTabSelected,
     } = props;
@@ -107,7 +113,7 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
                 x2: indicatorStartCoordinate + innerContentWidth,
             };
         });
-    }, [outerCoordinates, innerContentsWidthList, variant]);
+    }, [outerCoordinates, innerContentsWidthList, indicatorSize]);
 
     useEffect(() => {
         return indexStore.subscribe(newIndex => {
@@ -152,7 +158,6 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
         // @ts-ignore
         const tabElement = cloneElement(child, {
             enableIndicator: !disableIndicator && !canRenderIndicator,
-            indicatorColor,
             onTabInnerLayout,
             onLayout,
             onPress,
@@ -173,11 +178,9 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
 
     const tabIndicator = canRenderIndicator ? (
         <TabIndicator
-            color={indicatorColor}
             coordinates={coordinates}
             disabled={disableIndicator}
             initialIndex={realInitialIndex}
-            scrollable={scrollable}
         />
     ) : null;
 
@@ -186,6 +189,7 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
             <View
                 style={css([
                     styles.root,
+                    showDivider ? styles.bottomDivider : undefined,
                     scrollable ? undefined : styles.fixedRoot,
                     style,
                 ])}

package/src/Tabs/TabsProps.ts

@@ -1,10 +1,11 @@
 import type { ReactNode, Ref } from 'react';
 import type { ViewProps } from 'react-native';
-import type { TabIndicatorColor } from './TabIndicatorProps';
-import type { TabVariant, TabIndicatorSize } from '../Tab';
-import type { OverridableComponentProps, SyncAnimatedValue } from '../types';
+import type { TabVariant } from '../Tab/TabProps';
+import type { ExtendedStyle, OverridableComponentProps, SyncAnimatedValue } from '../types';
 import type { KeyboardDismissMode, KeyboardShouldPersistTaps, TabsInstance } from './types';
-import type { ExtendedStyle } from '../types';
+
+export const tabIndicatorSizes = ['fit-content', 'full'] as const;
+export type TabIndicatorSize = typeof tabIndicatorSizes[number];
 
 export default interface TabsProps extends OverridableComponentProps<ViewProps, {
     ref?: Ref<TabsInstance>;
@@ -20,17 +21,11 @@ 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'
+     * @default 'fit-content'
      */
     indicatorSize?: TabIndicatorSize;
 
@@ -68,6 +63,12 @@ export default interface TabsProps extends OverridableComponentProps<ViewProps,
      */
     scrollViewContentContainerStyle?: ExtendedStyle | ExtendedStyle[];
 
+    /**
+     * Determines whether to display the bottom border.
+     * @default false
+     */
+    showDivider?: boolean;
+
     /**
      * Unstable API.
      */

package/src/Tabs/index.ts

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