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

package/src/SnackbarContent/LegacySnackbarContent.tsx

@@ -1,129 +0,0 @@
-import React from 'react';
-import { Text } from 'react-native';
-import { lightTheme, darkTheme } from '@fountain-ui/styles';
-import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import { rgb } from '@fountain-ui/utils';
-import { createFontStyle, css, useTheme } from '../styles';
-import ButtonBase from '../ButtonBase';
-import Column from '../Column';
-import Paper from '../Paper';
-import Spacer from '../Spacer';
-import Typography from '../Typography';
-import type SnackbarContentProps from './LegacySnackbarContentProps';
-
-type SnackBarContentStyles = NamedStylesStringUnion<'root' | 'action'>;
-
-const useStyles: UseStyles<SnackBarContentStyles> = function (): SnackBarContentStyles {
-    const theme = useTheme();
-
-    const backgroundColor = theme.palette.primary.main;
-    const [r, g, b] = React.useMemo(() => rgb(backgroundColor), [backgroundColor]);
-
-    return {
-        root: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            backgroundColor: `rgba(${r}, ${g}, ${b}, .9)`,
-            borderRadius: theme.shape.roundness,
-            paddingHorizontal: theme.spacing(4),
-            paddingVertical: theme.spacing(3),
-        },
-        action: {
-            paddingVertical: theme.spacing(2),
-        },
-    };
-};
-
-export default function SnackbarContent(props: SnackbarContentProps) {
-    const {
-        actionLabel,
-        message,
-        title,
-        onActionPress,
-        style,
-        startIcon,
-        ...otherProps
-    } = props;
-
-    const styles = useStyles();
-
-    const theme = useTheme();
-
-    const titleFontStyle = createFontStyle(theme, {
-        selector: (typo) => typo.subtitle2,
-        color: theme.mode === 'light'
-            ? lightTheme.palette.primary.contrastTextColor
-            : lightTheme.palette.primary.main,
-    });
-
-    const messageFontStyle = createFontStyle(theme, {
-        selector: (typo) => typo.body2,
-        color: title
-            ? theme.mode === 'light'
-                ? darkTheme.palette.text.secondary
-                : lightTheme.palette.text.secondary
-            : theme.palette.primary.contrastTextColor,
-    });
-
-    const labelFontStyle = createFontStyle(theme, {
-        selector: (typo) => typo.button2,
-        color: theme.palette.primary.contrastTextColor,
-    });
-
-    const labelStyle = css([
-        labelFontStyle,
-        { padding: theme.spacing(2) },
-    ]);
-
-    return (
-        <Paper
-            elevation={0}
-            style={css([
-                styles.root,
-                actionLabel ? styles.action : undefined,
-                style,
-            ])}
-            {...otherProps}
-        >
-            {startIcon ? (
-                <React.Fragment>
-                    {startIcon}
-
-                    <Spacer size={3}/>
-                </React.Fragment>
-            ) : null}
-
-            <Column>
-                {title ? (
-                    <Typography
-                        children={title}
-                        style={css([titleFontStyle])}
-                    />
-                ) : null}
-
-                <Text
-                    children={message}
-                    style={css([messageFontStyle])}
-                />
-            </Column>
-
-            {actionLabel ? (
-                <React.Fragment>
-                    <Spacer flex={1}/>
-
-                    <Spacer size={1}/>
-
-                    <ButtonBase
-                        onPress={onActionPress}
-                        pressEffect={'none'}
-                    >
-                        <Text
-                            children={actionLabel}
-                            style={labelStyle}
-                        />
-                    </ButtonBase>
-                </React.Fragment>
-            ) : null}
-        </Paper>
-    );
-};

package/src/SnackbarContent/LegacySnackbarContentProps.ts

@@ -1,30 +0,0 @@
-import React from 'react';
-import type { OverridableComponentProps } from '../types';
-import type { PaperProps } from '../Paper';
-
-export default interface SnackbarContentProps extends OverridableComponentProps<PaperProps, {
-    /**
-     * The text to use for the action component.
-     */
-    actionLabel?: string;
-
-    /**
-     * The message to display.
-     */
-    message?: string;
-
-    /**
-     * Callback fired when the action component pressed.
-     */
-    onActionPress?: () => void;
-
-    /**
-     * Element placed before the title and message.
-     */
-    startIcon?: React.ReactElement;
-
-    /**
-     * The title to display.
-     */
-    title?: string;
-}> {}

package/src/SvgIcon/LegacySvgIcon.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import Svg from 'react-native-svg';
-import { css, useTheme } from '../styles';
-import type SvgIconProps from './LegacySvgIconProps';
-
-export default function SvgIcon(props: SvgIconProps) {
-    const {
-        color: colorProp = 'primary',
-        height = 24,
-        style: styleProp,
-        viewBox = '0 0 24 24',
-        width = 24,
-        ...otherProps
-    }: SvgIconProps = props;
-
-    const theme = useTheme();
-
-    const color = theme.palette[colorProp].main;
-
-    const style = css([
-        { flexShrink: 0 },
-        styleProp,
-    ]);
-
-    return (
-        <Svg
-            color={color}
-            fill={'currentColor'}
-            height={height}
-            style={style}
-            viewBox={viewBox}
-            width={width}
-            {...otherProps}
-        />
-    );
-};

package/src/SvgIcon/LegacySvgIconProps.ts

@@ -1,41 +0,0 @@
-import React from 'react';
-import type { SvgProps } from 'react-native-svg';
-import type { CommonComponentColor, OverridableComponentProps } from '../types';
-
-export type SvgIconColor = CommonComponentColor;
-
-export default interface SvgIconProps extends OverridableComponentProps<SvgProps, {
-    /**
-     * Node passed into the SVG element.
-     */
-    children: React.ReactNode;
-
-    /**
-     * The color of the component. It supports those theme colors that make sense for this component.
-     * @default 'primary'
-     */
-    color?: SvgIconColor;
-
-    /**
-     * The color of the component. It is treated as higher priority than `color` prop if provided.
-     */
-    fill?: SvgProps['fill'];
-
-    /**
-     * The height applied to the icon.
-     * @default 24
-     */
-    height?: SvgProps['height'];
-
-    /**
-     * Allows you to redefine what the coordinates without units mean inside an SVG element.
-     * @default '0 0 20 20'
-     */
-    viewBox?: SvgProps['viewBox'];
-
-    /**
-     * The width applied to the icon.
-     * @default 24
-     */
-    width?: SvgProps['width'];
-}> {}

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;
-}> {}