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

package/src/Dialog/LegacyDialog.tsx

@@ -1,198 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import { LayoutChangeEvent, useWindowDimensions } from 'react-native';
-import { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import Column from '../Column';
-import Modal, { ANIMATION_TYPE, AnimationUnit } from '../Modal';
-import Paper from '../Paper';
-import { useTheme } from '../styles';
-import type DialogProps from './LegacyDialogProps';
-
-type DialogStyleKeys =
-    | 'root'
-    | 'paper'
-    | 'paperFullScreen'
-    | 'animation'
-    | 'animationFullScreen'
-    | 'topElementSize'
-    | 'topElementPosition';
-
-type DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;
-
-const DIALOG_MAX_WIDTH = 328;
-
-const TOP_ELEMENT_OFFSET = 20;
-
-const useStyles: UseStyles<DialogStyles> = function (): DialogStyles {
-    const theme = useTheme();
-
-    const { width } = useWindowDimensions();
-
-    const margin = theme.spacing(4);
-    const dialogWidth = width - margin * 2;
-
-    return {
-        root: {
-            alignItems: 'center',
-            justifyContent: 'center',
-            zIndex: theme.zIndex.dialog,
-        },
-        paper: {
-            borderRadius: theme.shape.roundnessExtra,
-            margin,
-            maxWidth: DIALOG_MAX_WIDTH,
-            overflow: 'hidden',
-            width: dialogWidth,
-        },
-        paperFullScreen: {
-            flexGrow: 1,
-        },
-        animation: {},
-        animationFullScreen: {
-            width: '100%',
-            height: '100%',
-        },
-        topElementSize: {
-            marginHorizontal: margin,
-            maxWidth: DIALOG_MAX_WIDTH,
-            width: dialogWidth,
-        },
-        topElementPosition: {
-            position: 'absolute',
-            bottom: -1 * theme.spacing(4),
-            width: '100%',
-        },
-    };
-};
-
-export default function Dialog(props: DialogProps) {
-    const {
-        animationType = ANIMATION_TYPE.SLIDE,
-        children,
-        fullScreen = false,
-        hideBackdrop,
-        onClose,
-        style = {},
-        visible,
-        topElement,
-        ...otherProps
-    } = props;
-
-    const styles = useStyles();
-
-    const { height: screenHeight } = useWindowDimensions();
-
-    const [topElementHeight, setTopElementHeight] = useState(0);
-    const handleTopElementLayout = (event: LayoutChangeEvent) => {
-        const { height } = event.nativeEvent.layout;
-        setTopElementHeight(height);
-    };
-
-    const offsetAnimation = useMemo<AnimationUnit[]>(() => {
-        if (topElementHeight === 0) {
-            return [];
-        }
-
-        return [{
-            toValue: (topElementHeight - TOP_ELEMENT_OFFSET) / 2,
-            type: ANIMATION_TYPE.SLIDE,
-        }];
-    }, [topElementHeight]);
-
-    const closeAnimation = useMemo<AnimationUnit[]>(() => {
-        if (animationType === ANIMATION_TYPE.FADE) {
-            return [{
-                toValue: 0,
-                type: ANIMATION_TYPE.FADE,
-            }];
-        } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {
-            return [
-                {
-                    toValue: screenHeight,
-                    type: ANIMATION_TYPE.SLIDE,
-                },
-                {
-                    duration: 150,
-                    toValue: 0,
-                    type: ANIMATION_TYPE.FADE,
-                },
-            ];
-        }
-
-        return [{
-            duration: 150,
-            toValue: screenHeight,
-            type: ANIMATION_TYPE.SLIDE,
-        }];
-    }, [animationType, fullScreen, screenHeight]);
-
-    const openAnimation = useMemo<AnimationUnit[]>(() => {
-        if (animationType === ANIMATION_TYPE.FADE) {
-            return [{
-                toValue: 1,
-                type: ANIMATION_TYPE.FADE,
-            }];
-        } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {
-            return [
-                {
-                    toValue: 0,
-                    type: ANIMATION_TYPE.SLIDE,
-                },
-                {
-                    delay: 50,
-                    duration: 150,
-                    toValue: 1,
-                    type: ANIMATION_TYPE.FADE,
-                },
-            ];
-        }
-
-        return [{
-            toValue: 0,
-            type: ANIMATION_TYPE.SLIDE,
-        }];
-    }, [animationType, fullScreen]);
-
-    const initialOpacity = animationType === ANIMATION_TYPE.SLIDE && fullScreen ? 1 : undefined;
-
-    const initialTranslateY = animationType === ANIMATION_TYPE.FADE ? 0 : undefined;
-
-    return (
-        <Modal
-            animationStyle={fullScreen ? styles.animationFullScreen : styles.animation}
-            closeAnimation={closeAnimation}
-            hideBackdrop={hideBackdrop || animationType === ANIMATION_TYPE.FADE}
-            initialOpacity={initialOpacity}
-            initialTranslateY={initialTranslateY}
-            onClose={onClose}
-            openAnimation={openAnimation}
-            offsetAnimation={offsetAnimation}
-            visible={visible}
-            style={styles.root}
-            {...otherProps}
-        >
-            <React.Fragment>
-                {topElement ? (
-                    <Column style={fullScreen ? undefined : styles.topElementSize}>
-                        <Column
-                            style={styles.topElementPosition}
-                            onLayout={handleTopElementLayout}
-                        >
-                            {topElement}
-                        </Column>
-                    </Column>
-                ) : null}
-
-                <Paper
-                    elevation={6}
-                    square={fullScreen}
-                    style={css([
-                        fullScreen ? styles.paperFullScreen : styles.paper,
-                        style,
-                    ])}
-                >
-                    {children}
-                </Paper>
-            </React.Fragment>
-        </Modal>
-    );
-};

package/src/Dialog/LegacyDialogProps.ts

@@ -1,28 +0,0 @@
-import React from 'react';
-import type { ModalProps } from '../Modal';
-import type { OverridableComponentProps } from '../types';
-import { ANIMATION_TYPE } from '../Modal';
-
-export default interface DialogProps extends OverridableComponentProps<ModalProps, {
-    /**
-     * Type of animation used when the dialog opens and closes.
-     * @default 'slide'
-     */
-    animationType?: ANIMATION_TYPE;
-
-    /**
-     * Dialog children, usually the included sub-components.
-     */
-    children?: React.ReactNode;
-
-    /**
-     * If `true`, the dialog is full-screen.
-     * @default false
-     */
-    fullScreen?: boolean;
-
-    /**
-     * Top element for displaying additional information on the dialog.
-     */
-    topElement?: React.ReactNode;
-}> {}

package/src/DialogActions/LegacyDialogActions.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import Column from '../Column';
-import { EdgeInsets } from '../styles';
-import type DialogActionsProps from './DialogActionsProps';
-
-export default function DialogActions(props: DialogActionsProps) {
-    const {
-        children,
-        ...otherProps
-    } = props;
-
-    return (
-        <Column
-            alignItems={'center'}
-            insets={EdgeInsets.all(6)}
-            {...otherProps}
-        >
-            <Column>
-                {children}
-            </Column>
-        </Column>
-    );
-};

package/src/DialogContent/LegacyDialogContent.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import Column from '../Column';
-import Typography from '../Typography';
-import { EdgeInsets } from '../styles';
-import type DialogContentProps from './LegacyDialogContentProps';
-
-export default function DialogContent(props: DialogContentProps) {
-    const {
-        children,
-        disableTypography = false,
-        ...otherProps
-    } = props;
-
-    return (
-        <Column
-            insets={EdgeInsets.fromVH(2, 6)}
-            {...otherProps}
-        >
-            {disableTypography ? (
-                children
-            ) : (
-                <Typography
-                    children={children}
-                    color={'textSecondary'}
-                    variant={'body2'}
-                />
-            )}
-        </Column>
-    );
-};

package/src/DialogContent/LegacyDialogContentProps.ts

@@ -1,10 +0,0 @@
-import type { OverridableComponentProps } from '../types';
-import type { ColumnProps } from '../Column';
-
-export default interface DialogContentProps extends OverridableComponentProps<ColumnProps, {
-    /**
-     * If `true`, the children won't be wrapped by a typography component.
-     * @default false
-     */
-    disableTypography?: boolean;
-}> {}

package/src/DialogMedia/LegacyDialogMedia.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import Image from '../Image';
-import type DialogMediaProps from './LegacyDialogMediaProps';
-
-export default function DialogMedia(props: DialogMediaProps) {
-    const {
-        children,
-        image,
-        ...otherProps
-    } = props;
-
-    return (
-        <Image
-            disableOutline={true}
-            loading={'eager'}
-            overlaidChildren={children}
-            source={{ uri: image }}
-            {...otherProps}
-        />
-    );
-};

package/src/DialogMedia/LegacyDialogMediaProps.ts

@@ -1,16 +0,0 @@
-import type { ImageProps } from '../Image';
-import type { OverridableComponentProps } from '../types';
-
-type BaseProps = Omit<ImageProps, 'source' | 'overlaidChildren'>;
-
-export default interface DialogMediaProps extends OverridableComponentProps<BaseProps, {
-    /**
-     * The content of the component.
-     */
-    children?: ImageProps['overlaidChildren'];
-
-    /**
-     * Image to be displayed as a background image.
-     */
-    image: string;
-}> {}

package/src/DialogTitle/LegacyDialogTitle.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import Row from '../Row';
-import Typography from '../Typography';
-import { EdgeInsets } from '../styles';
-import type DialogTitleProps from './LegacyDialogTitleProps';
-
-export default function DialogTitle(props: DialogTitleProps) {
-    const {
-        children,
-        disableTypography = false,
-        ...otherProps
-    } = props;
-
-    return (
-        <Row
-            insets={EdgeInsets.fromLTRB(6, 6, 6, 2)}
-            {...otherProps}
-        >
-            {disableTypography ? (
-                children
-            ) : (
-                <Typography
-                    children={children}
-                    color={'textPrimary'}
-                    variant={'h2'}
-                />
-            )}
-        </Row>
-    );
-};

package/src/DialogTitle/LegacyDialogTitleProps.ts

@@ -1,16 +0,0 @@
-import type { TypographyProps } from '../Typography';
-import type { OverridableComponentProps } from '../types';
-import type { RowProps } from '../Row';
-
-export default interface DialogTitleProps extends OverridableComponentProps<RowProps, {
-    /**
-     * The content of the component.
-     */
-    children?: TypographyProps['children'];
-
-    /**
-     * If `true`, the children won't be wrapped by a typography component.
-     * @default false
-     */
-    disableTypography?: boolean;
-}> {}

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