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

package/src/Pagination/LegacyPagination.tsx

@@ -1,168 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import { times } from '@fountain-ui/utils';
-import { ChevronLeft, ChevronRight } from '../internal/icons';
-import { css, useTheme } from '../styles';
-import IconButton from '../IconButton';
-import PaginationItem from '../PaginationItem/LegacyPaginationItem';
-import type PaginationProps from './LegacyPaginationProps';
-
-type PaginationStyleKeys =
-    | 'root'
-    | 'rootInline'
-    | 'rootAnchor'
-    | 'items'
-    | 'arrowContainer'
-    | 'prevInline'
-    | 'prevAnchor'
-    | 'nextInline'
-    | 'nextAnchor';
-
-type PaginationStyles = NamedStylesStringUnion<PaginationStyleKeys>;
-
-const useStyles: UseStyles<PaginationStyles> = function (): PaginationStyles {
-    const theme = useTheme();
-
-    return {
-        root: {},
-        rootInline: {
-            flexDirection: 'row',
-            alignItems: 'center',
-        },
-        rootAnchor: {
-            flexDirection: 'column',
-        },
-        items: {
-            flexDirection: 'row',
-            justifyContent: 'center',
-            marginTop: theme.spacing(2),
-        },
-        arrowContainer: {
-            flexDirection: 'column',
-            justifyContent: 'center',
-        },
-        prevInline: {
-            marginRight: theme.spacing(1),
-        },
-        prevAnchor: {
-            position: 'absolute',
-            left: -24,
-        },
-        nextInline: {
-            marginLeft: theme.spacing(1),
-        },
-        nextAnchor: {
-            position: 'absolute',
-            right: -24,
-        },
-    };
-};
-
-export default function Pagination(props: PaginationProps) {
-    const {
-        bundleSize = 1,
-        children,
-        count,
-        disabled = false,
-        hideIndicator = false,
-        hideNextButton = false,
-        hidePrevButton = false,
-        infinite = false,
-        onChange,
-        page,
-        renderItem = ({ index, ...rest }) => <PaginationItem key={`${index}`} {...rest}/>,
-        style,
-        ...otherProps
-    } = props;
-
-    const styles = useStyles();
-
-    const firstPage = 0;
-    const lastPage = count - 1;
-
-    const handleChange = (nextPage: number) => {
-        if (nextPage >= firstPage && nextPage <= lastPage) {
-            if (onChange) {
-                onChange(nextPage);
-            }
-        }
-    };
-
-    const handlePrevPress = () => {
-        const prevPage = page - bundleSize >= firstPage
-            ? page - bundleSize
-            : (infinite ? count - bundleSize + page : firstPage);
-
-        handleChange(prevPage);
-    };
-
-    const handleNextPress = () => {
-        const nextPage = page + bundleSize <= lastPage
-            ? page + bundleSize
-            : (infinite ? page + bundleSize - count : lastPage);
-
-        handleChange(nextPage);
-    };
-
-    const prevButton = !hidePrevButton ? (
-        <IconButton
-            color={'tertiary'}
-            disabled={disabled || (!infinite && page <= firstPage)}
-            onPress={handlePrevPress}
-            size={'small'}
-            style={children ? styles.prevAnchor : styles.prevInline}
-        >
-            <ChevronLeft/>
-        </IconButton>
-    ) : null;
-
-    const nextButton = !hideNextButton ? (
-        <IconButton
-            color={'tertiary'}
-            disabled={disabled || (!infinite && page + bundleSize > lastPage)}
-            onPress={handleNextPress}
-            size={'small'}
-            style={children ? styles.nextAnchor : styles.nextInline}
-        >
-            <ChevronRight/>
-        </IconButton>
-    ) : null;
-
-    const items = !hideIndicator ? (
-        times(i => renderItem({ index: i, disabled, selected: i === page }), count)
-    ) : null;
-
-    const containerProps = {
-        style: css([
-            styles.root,
-            children ? styles.rootAnchor : styles.rootInline,
-            style,
-        ]),
-        ...otherProps,
-    };
-
-    if (children) {
-        return (
-            <View {...containerProps}>
-                <View style={css(styles.arrowContainer)}>
-                    {children}
-                    {prevButton}
-                    {nextButton}
-                </View>
-
-                <View style={css(styles.items)}>
-                    {items}
-                </View>
-            </View>
-        );
-    }
-
-    return (
-        <View {...containerProps}>
-            {prevButton}
-            {items}
-            {nextButton}
-        </View>
-    );
-};

package/src/Pagination/LegacyPaginationProps.ts

@@ -1,85 +0,0 @@
-import React from 'react';
-import type { ViewProps } from 'react-native';
-import type { OverridableComponentProps } from '../types';
-
-export interface PaginationRenderItemParams {
-    /**
-     * Index of the pagination item.
-     */
-    index: number;
-
-    /**
-     * If `true`, the pagination item is disabled.
-     */
-    disabled: boolean;
-
-    /**
-     * If `true` the pagination item is selected.
-     */
-    selected: boolean;
-}
-
-export default interface PaginationProps extends OverridableComponentProps<ViewProps, {
-    /**
-     * The Number of pages that change when the button is pressed
-     * @default 1
-     */
-    bundleSize?: number,
-
-    /**
-     * The pagination will be added relative to this node.
-     */
-    children?: React.ReactNode;
-
-    /**
-     * The total number of pages.
-     */
-    count: number,
-
-    /**
-     * If `true`, the pagination is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-
-
-    /**
-     * If `true`, hide the page indicator.
-     * @default false
-     */
-    hideIndicator?: boolean,
-
-    /**
-     * If `true`, hide the next-page button.
-     * @default false
-     */
-    hideNextButton?: boolean,
-
-    /**
-     * If `true`, hide the previous-page button.
-     * @default false
-     */
-    hidePrevButton?: boolean,
-
-    /**
-     * If `true`, pagination is infinite.
-     * @default false
-     */
-    infinite?: boolean,
-
-    /**
-     * Callback fired when the page is changed.
-     */
-    onChange?: (page: number) => void,
-
-    /**
-     * The current page number.
-     */
-    page: number;
-
-    /**
-     * Render the item.
-     * @default (item) => <PaginationItem {...item} />
-     */
-    renderItem?: (params: PaginationRenderItemParams) => React.ReactNode;
-}> {}

package/src/PaginationItem/LegacyPaginationItem.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import { css, useTheme } from '../styles';
-import type PaginationItemProps from './PaginationItemProps';
-
-type PaginationItemStyles = NamedStylesStringUnion<'root' | 'selected' | 'unselected'>;
-
-const useStyles: UseStyles<PaginationItemStyles> = function (): PaginationItemStyles {
-    const theme = useTheme();
-
-    const size = 6;
-
-    return {
-        root: {
-            width: size,
-            height: size,
-            borderRadius: size * 0.5,
-            marginHorizontal: theme.spacing(1),
-        },
-        selected: {
-            backgroundColor: theme.palette.secondary.main,
-        },
-        unselected: {
-            backgroundColor: '#D1D1D1',
-        },
-    };
-};
-
-function PaginationItem(props: PaginationItemProps) {
-    const {
-        disabled,
-        selected,
-        style,
-        ...otherProps
-    } = props;
-
-    const styles = useStyles();
-
-    return (
-        <View
-            style={css([
-                styles.root,
-                selected ? styles.selected : styles.unselected,
-                style,
-            ])}
-            {...otherProps}
-        />
-    );
-}
-
-export default React.memo(PaginationItem);

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