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

package/src/Radio/LegacyRadio.tsx

@@ -1,72 +0,0 @@
-import React from 'react';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import ButtonBase from '../ButtonBase';
-import { Radio as RadioIcon, RadioChecked as RadioCheckedIcon } from '../internal';
-import { css } from '../styles';
-import { RadioContext } from '../RadioGroup/RadioContextProvider';
-import type RadioProps from './LegacyRadioProps';
-
-type RadioStyles = NamedStylesStringUnion<'root'>;
-
-const ICON_SIZE = 20;
-
-const useStyles: UseStyles<RadioStyles> = function (): RadioStyles {
-    return {
-        root: {
-            alignItems: 'center',
-            flexDirection: 'row',
-        },
-    };
-};
-
-export default function Radio(props: RadioProps) {
-    const {
-        checked = false,
-        children,
-        checkedIcon: checkIconProp,
-        uncheckedIcon: uncheckedIconProp,
-        disabled = false,
-        iconPlacement = 'left',
-        onChange: onChangeProp,
-        style,
-        value,
-        ...otherProps
-    } = props;
-
-    const styles = useStyles();
-
-    const context = React.useContext(RadioContext);
-
-    const handlePress = () => {
-        const onChange = context?.onChange ?? onChangeProp;
-        if (onChange) {
-            onChange(value);
-        }
-    };
-
-    const isChecked = context?.value === value ?? checked;
-
-    const checkedIcon = checkIconProp ?? <RadioCheckedIcon width={ICON_SIZE} height={ICON_SIZE} color={'primary'}/>;
-    const uncheckedIcon = uncheckedIconProp ?? <RadioIcon width={ICON_SIZE} height={ICON_SIZE} color={'tertiary'}/>;
-    const icon = isChecked ? checkedIcon : uncheckedIcon;
-
-    const rootStyle = css([
-        styles.root,
-        style,
-    ]);
-
-    return (
-        <ButtonBase
-            disabled={disabled}
-            onPress={handlePress}
-            style={rootStyle}
-            {...otherProps}
-        >
-            {iconPlacement === 'left' ? icon : null}
-
-            {children ? children : null}
-
-            {iconPlacement === 'right' ? icon : null}
-        </ButtonBase>
-    );
-};

package/src/Radio/LegacyRadioProps.ts

@@ -1,50 +0,0 @@
-import React from 'react';
-import type { OverridableComponentProps } from '../types';
-import type { ButtonBaseProps } from '../ButtonBase';
-
-type BaseProps = Omit<ButtonBaseProps, 'onPress' | 'children'>;
-
-export default interface RadioProps extends OverridableComponentProps<BaseProps, {
-    /**
-     * If `true`, the component is checked.
-     * @default false
-     */
-    checked?: boolean;
-
-    /**
-     * Content which is sharing pressable next to radio.
-     */
-    children?: React.ReactNode;
-
-    /**
-     * If `true`, the radio is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Callback fired when the component is pressed.
-     */
-    onChange?: (newValue: string) => void;
-
-    /**
-     * Value of the component.
-     */
-    value: string;
-
-    /**
-     * Determines the placement of the icon relative to the children.
-     * @default 'left'
-     */
-    iconPlacement?: 'right' | 'left';
-
-    /**
-     * Custom icon element to display when the radio is unchecked.
-     */
-    uncheckedIcon?: React.ReactNode;
-
-    /**
-     * Custom icon element to display when the radio is checked.
-     */
-    checkedIcon?: React.ReactNode;
-}> {}

package/src/RadioGroup/LegacyRadioGroup.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import RadioContextProvider from './RadioContextProvider';
-import type RadioGroupProps from './RadioGroupProps';
-
-export default function RadioGroup(props: RadioGroupProps) {
-    const {
-        value,
-        onChange,
-        ...otherProps
-    } = props;
-
-    return (
-        <RadioContextProvider value={{ value, onChange }}>
-            <View
-                {...otherProps}
-            />
-        </RadioContextProvider>
-    );
-};

package/src/Snackbar/LegacySnackbar.tsx

@@ -1,130 +0,0 @@
-import React, { useEffect } from 'react';
-import { Animated, Easing } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import Slide from '../Slide';
-import SnackbarContent from '../SnackbarContent';
-import { useAnimatedValue } from '../hooks';
-import { useTheme } from '../styles';
-import { isNotAndroid12 } from '../utils';
-import type SnackbarProps from './LegacySnackbarProps';
-
-type SnackBarStyles = NamedStylesStringUnion<'root'>;
-
-const fadeDuration = 300;
-const fadeAnimationDelay = 100;
-
-const useStyles: UseStyles<SnackBarStyles> = function (): SnackBarStyles {
-    const theme = useTheme();
-    const insets = useSafeAreaInsets();
-
-    return {
-        root: {
-            alignSelf: 'center',
-            bottom: theme.spacing(2),
-            maxWidth: 480,
-            paddingBottom: insets.bottom,
-            paddingHorizontal: theme.spacing(2),
-            position: 'absolute',
-            width: '100%',
-            // TODO: Need to remove zIndex.
-            zIndex: 32,
-        },
-    };
-};
-
-export default function Snackbar(props: SnackbarProps) {
-    const {
-        actionLabel,
-        animatedY,
-        autoHideDuration = null,
-        children,
-        message,
-        title,
-        startIcon,
-        onActionPress,
-        onClose,
-        style,
-        visible = false,
-        ...otherProps
-    } = props;
-
-    const autoHideTimer = React.useRef<number | null>(null);
-
-    const clearAutoHideTimeout = () => {
-        if (autoHideTimer.current !== null) {
-            clearTimeout(autoHideTimer.current);
-        }
-    };
-
-    React.useEffect(() => {
-        return () => {
-            clearAutoHideTimeout();
-        };
-    }, []);
-
-    React.useEffect(() => {
-        if (visible && autoHideDuration !== null) {
-            clearAutoHideTimeout();
-
-            // @ts-ignore
-            autoHideTimer.current = setTimeout(() => {
-                if (onClose) {
-                    onClose();
-                }
-            }, autoHideDuration);
-        }
-    }, [visible, autoHideDuration, onClose]);
-
-    const styles = useStyles();
-
-    const [exited, setExited] = React.useState(true);
-
-    const animatedOpacity = useAnimatedValue(0);
-
-    const animatedStyle = {
-        opacity: animatedOpacity,
-    };
-
-    useEffect(() => {
-        Animated.timing(animatedOpacity, {
-            toValue: visible ? 1 : 0,
-            duration: fadeDuration,
-            delay: visible ? fadeAnimationDelay : 0,
-            easing: Easing.out(Easing.exp),
-            useNativeDriver: isNotAndroid12,
-        }).start();
-    }, [visible]);
-
-    if (!visible && exited) {
-        return null;
-    }
-
-    return (
-        <Animated.View
-            style={[
-                animatedStyle,
-                styles.root,
-                style,
-            ]}
-            {...otherProps}
-        >
-            <Slide
-                animatedY={animatedY}
-                appear={visible}
-                onEnter={() => setExited(false)}
-                onExited={() => setExited(true)}
-            >
-                {children ? children : (
-                    <SnackbarContent
-                        title={title}
-                        startIcon={startIcon}
-                        actionLabel={actionLabel}
-                        message={message}
-                        onActionPress={onActionPress}
-                    />
-                )}
-            </Slide>
-        </Animated.View>
-    );
-};

package/src/Snackbar/LegacySnackbarProps.ts

@@ -1,61 +0,0 @@
-import React from 'react';
-
-import type { Animated, ViewProps } from 'react-native';
-import type { OverridableComponentProps } from '../types';
-
-export default interface SnackbarProps extends OverridableComponentProps<ViewProps, {
-    /**
-     * The text to use for the action component.
-     */
-    actionLabel?: string;
-
-    /**
-     * y value for animating.
-     */
-    animatedY?: Animated.Value;
-
-    /**
-     * The number of milliseconds to wait before automatically calling the
-     * `onDismiss` function. `onDismiss` should then set the state of the `visible`
-     * prop to hide the `Snackbar`. This behavior is disabled by default with
-     * the `null` value.
-     * @default null
-     */
-    autoHideDuration?: number | null;
-
-    /**
-     * Replace the `SnackbarContent` component.
-     */
-    children?: React.ReactNode;
-
-    /**
-     * The message to display.
-     */
-    message?: string;
-
-    /**
-     * Callback fired when the action component pressed.
-     */
-    onActionPress?: () => void;
-
-    /**
-     * Callback fired when the component requests to be closed.
-     */
-    onClose?: () => void;
-
-    /**
-     * Element placed before the title and message.
-     */
-    startIcon?: React.ReactElement;
-
-    /**
-     * The title to display.
-     */
-    title?: string;
-
-    /**
-     * If `true`, `Snackbar` is shown.
-     * @default false
-     */
-    visible?: boolean;
-}> {}

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