@fountain-ui/core 2.0.0-beta.98 → 3.0.0-alpha.1

package/src/Tab/LegacyTab.tsx

@@ -1,141 +0,0 @@
-import React, { cloneElement } from 'react';
-import { Platform, Text, View } from 'react-native';
-import Badge from '../Badge';
-import TabBase from '../TabBase';
-import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
-import type TabProps from './LegacyTabProps';
-import TabIndicator from './TabIndicator';
-
-const styles = StyleSheet.create({
-    root: {
-        // TODO: Remove redundant platform checking
-        ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),
-        minHeight: 40,
-    },
-    bottomNavigation: {
-        minHeight: 56,
-    },
-    filledInner: {
-        justifyContent: 'center',
-    },
-    tertiary: {
-        minHeight: 44,
-    },
-});
-
-export default function Tab(props: TabProps) {
-    const {
-        badgeVisible = false,
-        children,
-        enableIndicator = false,
-        icon: defaultIcon,
-        indicatorColor = 'primary',
-        indicatorSize = 'full',
-        selected = false,
-        selectedIcon,
-        variant = 'primary',
-        style,
-        onTabInnerLayout,
-        ...otherProps
-    } = props;
-
-    const theme = useTheme();
-
-    const vertical = variant === 'bottom-navigation';
-
-    const color = selected
-        ? theme.palette.text.primary
-        : variant === 'contained'
-            ? theme.palette.text.secondary
-            : theme.palette.text.hint;
-
-    const containedStyle = {
-        borderColor: selected ? theme.palette.primary.main : theme.palette.border.default,
-        borderRadius: theme.shape.roundnessExtra,
-        borderWidth: selected ? 1.5 : 1,
-        minHeight: 'auto',
-        paddingHorizontal: theme.spacing(3),
-        paddingVertical: theme.spacing(1.5),
-    };
-
-    const tabBaseStyle = css([
-        styles.root,
-        variant === 'bottom-navigation' && styles.bottomNavigation,
-        variant === 'contained' && containedStyle,
-        variant === 'tertiary' && styles.tertiary,
-        style,
-    ]);
-
-    const tabInnerStyle = css([
-        styles.root,
-        styles.filledInner,
-    ]);
-
-    const fontStyle = createFontStyle(theme, {
-        selector: (typo) => {
-            switch (variant) {
-                case 'primary':
-                    return typo.h2;
-                case 'secondary':
-                    return typo.button2;
-                case 'tertiary':
-                    return typo.h3;
-                case 'contained':
-                    return selected
-                        ? { ...typo.subtitle2, fontWeight: typo.fontWeight.medium }
-                        : typo.body2;
-                default:
-                    return typo.flag;
-            }
-        },
-        color,
-    });
-    const pressEffect = selected ? 'none' : 'opacity';
-
-    const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;
-    const iconElement = icon ? cloneElement(icon, { fill: color }) : null;
-
-    const tabElement = typeof children !== 'string' ? (
-        React.cloneElement(children, {
-            selected,
-        })
-    ) : (
-        <React.Fragment>
-            <Badge
-                children={iconElement}
-                invisible={!badgeVisible}
-            />
-
-            <Text
-                children={children}
-                style={css(fontStyle)}
-            />
-        </React.Fragment>
-    );
-    const tabIndicator = (enableIndicator && selected)
-        ? <TabIndicator indicatorSize={indicatorSize} color={indicatorColor}/>
-        : null;
-
-    return (
-        <TabBase
-            pressEffect={pressEffect}
-            style={tabBaseStyle}
-            vertical={vertical}
-            {...otherProps}
-        >
-            {indicatorSize === 'fit-content' ? (
-                <View onLayout={onTabInnerLayout} style={tabInnerStyle}>
-                    {tabElement}
-
-                    {tabIndicator}
-                </View>
-            ) : (
-                <React.Fragment>
-                    {tabElement}
-
-                    {tabIndicator}
-                </React.Fragment>
-            )}
-        </TabBase>
-    );
-};

package/src/Tab/LegacyTabProps.ts

@@ -1,68 +0,0 @@
-import React from 'react';
-import type { LayoutChangeEvent } from 'react-native';
-import type { TabBaseProps } from '../TabBase';
-import type { OverridableComponentProps } from '../types';
-
-export type TabVariant = 'primary' | 'secondary' | 'tertiary' | 'bottom-navigation' | 'contained';
-export type TabIndicatorColor = 'primary' | 'secondary';
-export type TabIndicatorSize = 'full' | 'fit-content';
-
-export default interface TabProps extends OverridableComponentProps<TabBaseProps, {
-    /**
-     * If `true`, the badge is visible.
-     * @default false
-     */
-    badgeVisible?: boolean;
-
-    /**
-     * The label of the Tab.
-     */
-    children: string | React.ReactElement;
-
-    /**
-     * If `true`, the indicator is enabled.
-     * @default false
-     */
-    enableIndicator?: boolean;
-
-    /**
-     * If `true`, the component is selected.
-     * @default false
-     */
-    selected?: boolean;
-
-    /**
-     * Element placed before the children.
-     */
-    icon?: React.ReactElement;
-
-    /**
-     * Tab indicator color
-     * @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;
-
-    /**
-     * If supplied, use this icon on selected state.
-     */
-    selectedIcon?: React.ReactElement;
-
-    /**
-     * The variant to use.
-     * @default 'primary'
-     */
-    variant?: TabVariant;
-
-    /**
-     * Function to be passed to the child component's onLayout prop.
-     */
-    onTabInnerLayout?: (event: LayoutChangeEvent) => void;
-}> {}

package/src/Tab/TabIndicator.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import { NamedStylesStringUnion } from '@fountain-ui/styles';
-import { useTheme } from '../styles';
-import type { TabIndicatorColor, TabIndicatorSize } from './LegacyTabProps';
-
-type TabIndicatorStyles = NamedStylesStringUnion<'root'>;
-
-const useStyles: (color: TabIndicatorColor, indicatorSize: TabIndicatorSize) => TabIndicatorStyles =
-    function (color: TabIndicatorColor, indicatorSize): TabIndicatorStyles {
-        const theme = useTheme();
-
-        return {
-            root: {
-                backgroundColor: theme.palette[color].main,
-                bottom: 0,
-                height: 2,
-                left: indicatorSize === 'fit-content' ? 0 : 12,
-                right: indicatorSize === 'fit-content' ? 0 : 12,
-                position: 'absolute',
-            },
-        };
-    };
-
-const TabIndicator = function TabIndicator({
-    indicatorSize,
-    color,
-}: { indicatorSize: TabIndicatorSize; color: TabIndicatorColor }) {
-    const styles = useStyles(color, indicatorSize);
-
-    return (
-        <View
-            style={styles.root}
-        />
-    );
-};
-
-export default React.memo(TabIndicator);

package/src/TabBase/LegacyTabBase.tsx

@@ -1,55 +0,0 @@
-import React from 'react';
-import { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import { useTheme } from '../styles';
-import ButtonBase from '../ButtonBase';
-import type TabBaseProps from './TabBaseProps';
-
-type TabBaseStyles = NamedStylesStringUnion<'root' | 'row' | 'column'>;
-
-const useStyles: UseStyles<TabBaseStyles> = function (): TabBaseStyles {
-    const theme = useTheme();
-
-    return {
-        root: {
-            alignItems: 'center',
-            justifyContent: 'center',
-            paddingHorizontal: theme.spacing(3),
-            minHeight: 48,
-        },
-        row: {
-            flexDirection: 'row',
-        },
-        column: {
-            flexDirection: 'column',
-        },
-    };
-};
-
-export default function TabBase(props: TabBaseProps) {
-    const {
-        children,
-        disabled = false,
-        onPress,
-        selected = false,
-        vertical = false,
-        style,
-        ...otherProps
-    } = props;
-
-    const styles = useStyles();
-
-    return (
-        <ButtonBase
-            onPress={onPress}
-            disabled={disabled}
-            style={css([
-                styles.root,
-                vertical ? styles.column : styles.row,
-                style,
-            ])}
-            {...otherProps}
-        >
-            {children}
-        </ButtonBase>
-    );
-};

package/src/Tabs/LegacyTabIndicator.tsx

@@ -1,112 +0,0 @@
-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, animationDisabled: boolean) => {
-    Animated.timing(value, {
-        toValue: toValue,
-        duration: !animationDisabled ? 300: 0,
-        easing: Easing.bezier(0.25, 1, 0.5, 1),
-        useNativeDriver: isNotAndroid12,
-    }).start();
-};
-
-export default function TabIndicator(props: TabIndicatorProps) {
-    const {
-        animationDisabled = false,
-        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, animationDisabled);
-            startAnimation(scaleX, sx, animationDisabled);
-        };
-
-        scrollToIndex(indexStore.getState());
-
-        return indexStore.subscribe(scrollToIndex);
-    }, [
-        computeAnimationValues,
-        animationDisabled,
-        indexStore,
-    ]);
-
-    return (
-        <Animated.View
-            style={[
-                styles.root,
-                disabled ? styles.disabled : undefined,
-                { transform: [{ translateX }, { scaleX }] },
-                style,
-            ]}
-            {...otherProps}
-        />
-    );
-};

package/src/Tabs/LegacyTabIndicatorProps.ts

@@ -1,37 +0,0 @@
-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, {
-    /**
-     * If `true`, tab shifting animation will be disabled
-     */
-    animationDisabled?: boolean;
-    /**
-     * 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

@@ -1,227 +0,0 @@
-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,
-        indicatorAnimationDisabled = 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
-            animationDisabled={indicatorAnimationDisabled}
-            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;