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

package/src/Divider/LegacyDivider.tsx

@@ -1,114 +0,0 @@
-import React from 'react';
-import { Text, View } from 'react-native';
-import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
-import { ExtendedStyle } from '../types';
-import type DividerProps from './LegacyDividerProps';
-
-const styles = StyleSheet.create({
-    container: {
-        alignSelf: 'stretch',
-        alignItems: 'center',
-    },
-    row: {
-        flexDirection: 'row',
-    },
-    column: {
-        flexDirection: 'column',
-    },
-    divider: {
-        flexGrow: 1,
-    },
-});
-
-export default function Divider(props: DividerProps) {
-    const {
-        borderWidth = 1,
-        children: childrenProp,
-        color = 'divider',
-        elementAlign = 'center',
-        inset = 0,
-        marginBetweenChildren = 2,
-        style,
-        vertical = false,
-        ...otherProps
-    } = props;
-
-    const theme = useTheme();
-
-    const fontColor = theme.palette.text.secondary;
-    const borderColor = color === 'divider'
-        ? theme.palette.divider
-        : color === 'border'
-            ? theme.palette.border.default
-            : theme.palette[color].main;
-    const marginSize = theme.spacing(1);
-    const insetSize = theme.spacing(inset);
-
-    const marginLeft = marginSize;
-    const marginRight = marginSize;
-    const marginTop = marginSize;
-    const marginBottom = marginSize;
-
-    const marginStyle = vertical
-        ? { marginLeft, marginRight }
-        : { marginTop, marginBottom };
-
-    const insetStyle = vertical
-        ? { marginTop: insetSize, marginBottom: insetSize }
-        : { marginLeft: insetSize, marginRight: insetSize };
-
-    const borderColorStyle = { borderColor };
-    const borderWidthStyle = (vertical ? { borderRightWidth: borderWidth } : { borderBottomWidth: borderWidth });
-
-    const containerStyle = css([
-        insetStyle,
-        marginStyle,
-        styles.container,
-        vertical ? styles.column : styles.row,
-        childrenProp ? undefined : borderColorStyle,
-        childrenProp ? undefined : borderWidthStyle,
-        style,
-    ]);
-
-    const dividerStyle = css([
-        borderColorStyle,
-        borderWidthStyle,
-        styles.divider,
-    ]);
-
-    const dividerMarginSize = theme.spacing(marginBetweenChildren);
-    const startDividerStyle: ExtendedStyle = {
-        display: elementAlign !== 'start' ? 'flex' : 'none',
-        ...(vertical ? { marginBottom: dividerMarginSize } : { marginRight: dividerMarginSize }),
-    };
-    const endDividerStyle: ExtendedStyle = {
-        display: elementAlign !== 'end' ? 'flex' : 'none',
-        ...(vertical ? { marginTop: dividerMarginSize } : { marginLeft: dividerMarginSize }),
-    };
-
-    const fontStyle = createFontStyle(theme, {
-        selector: (typo) => typo.caption2,
-        color: fontColor,
-    });
-
-    const element = typeof childrenProp === 'string'
-        ? <Text style={css(fontStyle)}>{childrenProp}</Text>
-        : childrenProp;
-
-    const children = childrenProp ? (
-        <React.Fragment>
-            <View style={css([dividerStyle, startDividerStyle])}/>
-            {element}
-            <View style={css([dividerStyle, endDividerStyle])}/>
-        </React.Fragment>
-    ) : null;
-
-    return (
-        <View
-            style={containerStyle}
-            {...otherProps}
-        >
-            {children}
-        </View>
-    );
-};

package/src/Divider/LegacyDividerProps.ts

@@ -1,48 +0,0 @@
-import React from 'react';
-import type { ViewProps } from 'react-native';
-import type { CommonComponentColor, OverridableComponentProps } from '../types';
-
-export type DividerColor = 'divider' | 'border' | CommonComponentColor;
-
-export default interface DividerProps extends OverridableComponentProps<ViewProps, {
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-
-    /**
-     * The size of the inset. It works as a multiplier factor based on spacing system.
-     * @default 0
-     */
-    inset?: number;
-
-    /**
-     * If `true`, the divider orientation is set to vertical.
-     * @default false
-     */
-    vertical?: boolean;
-
-    /**
-     * The color of divider. It supports default divider color and those theme colors that make sense for this component.
-     * @default 'divider'
-     */
-    color?: DividerColor;
-
-    /**
-     * The size of margin between child element and the divider. It works as a multiplier factor based on spacing system.
-     * @default 2
-     */
-    marginBetweenChildren?: number;
-
-    /**
-     *  The size of border width. It works as an actual pixel-based border width value of a divider.
-     *  @default 1
-     */
-    borderWidth?: number;
-
-    /**
-     *  Set position of children.
-     *  @default center
-     */
-    elementAlign?: 'start' | 'center' | 'end';
-}> {}

package/src/IconButton/LegacyIconButton.tsx

@@ -1,97 +0,0 @@
-import React from 'react';
-import { Text } from 'react-native';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import ButtonBase from '../ButtonBase';
-import { createFontStyle, css, useTheme } from '../styles';
-import { cloneElementSafely } from '../utils';
-import type IconButtonProps from './LegacyIconButtonProps';
-import type { IconButtonSize } from './LegacyIconButtonProps';
-
-type IconButtonStyles = NamedStylesStringUnion<'root'>;
-
-type IconSizes = { [n in IconButtonSize]: number };
-
-const iconSizes: IconSizes = {
-    tiny: 16,
-    small: 20,
-    medium: 24,
-    large: 28,
-};
-
-const useStyles: UseStyles<IconButtonStyles> = function (): IconButtonStyles {
-    const theme = useTheme();
-
-    return {
-        root: {
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'center',
-            padding: theme.spacing(1),
-        },
-    };
-};
-
-export default function IconButton(props: IconButtonProps) {
-    const {
-        children,
-        color = 'primary',
-        disabled = false,
-        label,
-        onPress,
-        size = 'medium',
-        style,
-        iconSize,
-        ...otherProps
-    } = props;
-
-    const theme = useTheme();
-    const styles = useStyles();
-
-    const icon = cloneElementSafely(children, {
-        width: iconSize ?? iconSizes[size],
-        height: iconSize ?? iconSizes[size],
-        color: color,
-    });
-
-    const fontStyle = createFontStyle(theme, {
-        selector: (typo) => typo.caption1,
-        color: theme.palette[color].main,
-    });
-
-    const labelStyle = css([
-        fontStyle,
-    ]);
-
-    const rootStyle = css([
-        styles.root,
-        style,
-    ]);
-
-    const handlePress = async () => {
-        if (disabled) {
-            return;
-        }
-        if (onPress) {
-            onPress();
-            return;
-        }
-    };
-
-    return (
-        <ButtonBase
-            disabled={disabled}
-            onPress={handlePress}
-            style={rootStyle}
-            {...otherProps}
-        >
-            {icon}
-
-            {label ? (
-                <Text
-                    children={label}
-                    style={labelStyle}
-                />
-            ) : null}
-        </ButtonBase>
-    );
-};

package/src/IconButton/LegacyIconButtonProps.ts

@@ -1,36 +0,0 @@
-import React from 'react';
-import type { ButtonBaseProps } from '../ButtonBase';
-import type { CommonComponentColor, OverridableComponentProps } from '../types';
-
-export type IconButtonColor = CommonComponentColor;
-
-export type IconButtonSize = 'medium' | 'large' | 'small' | 'tiny';
-
-export default interface IconButtonProps extends OverridableComponentProps<ButtonBaseProps, {
-    /**
-     * The icon element.
-     */
-    children: React.ReactElement;
-
-    /**
-     * The color of the component. It supports those theme colors that make sense for this component.
-     * @default 'primary'
-     */
-    color?: IconButtonColor;
-
-    /**
-     *  If present, this is typography displayed at the bottom of the icon.
-     */
-    label?: string;
-
-    /**
-     * The size of the button.
-     * @default 'medium'
-     */
-    size?: IconButtonSize;
-
-    /**
-     * The custom size of the Icon. Not preDefined.
-     */
-    iconSize?: number;
-}> {}

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