@fountain-ui/core 2.0.0-beta.5 → 2.0.0-beta.50

package/src/ButtonBase/ButtonBase.tsx

@@ -1,10 +1,12 @@
-import React from 'react';
-import Animated from 'react-native-reanimated';
-import { useThrottle } from '../hooks';
+import React, { useCallback, useEffect } from 'react';
+import { Animated } from 'react-native';
+import { useAnimatedValue, useThrottle } from '../hooks';
 import { AnimatedPressable } from '../animated';
-import { StyleSheet } from '../styles';
 import type ButtonBaseProps from './ButtonBaseProps';
-import useDisabledReaction from './useDisabledReaction';
+
+interface StartPressAnimation {
+    (pressIn: boolean, isHover: boolean): void;
+}
 
 export const ORIGINAL_OPACITY = 1;
 export const DISABLED_OPACITY = .3;
@@ -13,14 +15,24 @@ const ACTIVE_OPACITY = .65;
 const ORIGINAL_SCALE = 1;
 const MINIFIED_SCALE = .96;
 
-const animationTimingConfig: Animated.WithTimingConfig = { duration: 150 };
+// at "node_modules/react-native/Libraries/Pressability.js"
+// const DEFAULT_MIN_PRESS_DURATION = 130;
+const SCALE_EFFECT_PRESS_IN_DELAY = 130;
+const OPACITY_EFFECT_PRESS_IN_DELAY = 0;
+
+type TimingAnimationValue = Animated.Value | Animated.ValueXY;
+type TimingAnimationToValue = Animated.TimingAnimationConfig['toValue'];
 
-const styles = StyleSheet.create({
-    disabled: {
-        opacity: DISABLED_OPACITY,
-        transform: [{ scale: ORIGINAL_SCALE }],
-    },
-});
+const startTimingAnimationWithDefaults = (
+    value: TimingAnimationValue,
+    toValue: TimingAnimationToValue,
+) => {
+    Animated.timing(value, {
+        toValue,
+        duration: 150,
+        useNativeDriver: true,
+    }).start();
+};
 
 export default function ButtonBase(props: ButtonBaseProps) {
     const {
@@ -29,7 +41,8 @@ export default function ButtonBase(props: ButtonBaseProps) {
         disableThrottle = false,
         onPress,
         pressEffect = 'opacity',
-        style,
+        pressDelay: pressDelayOrNil,
+        style: styleProp,
         throttleMillis = 650,
         ...otherProps
     } = props;
@@ -39,56 +52,73 @@ export default function ButtonBase(props: ButtonBaseProps) {
         callback: onPress,
     });
 
-    const opacity = Animated.useSharedValue(ORIGINAL_OPACITY);
-    const scale = Animated.useSharedValue(ORIGINAL_SCALE);
+    const opacity = useAnimatedValue(ORIGINAL_OPACITY);
+    const scale = useAnimatedValue(ORIGINAL_SCALE);
 
-    const animatedStyle = Animated.useAnimatedStyle(() => ({
-        opacity: opacity.value,
-        transform: [{ scale: scale.value }],
-    }));
+    useEffect(() => {
+        opacity.setValue(disabled ? DISABLED_OPACITY : ORIGINAL_OPACITY);
+    }, [disabled, pressEffect]);
 
-    useDisabledReaction(disabled, opacity);
+    const startScaleAnimation = useCallback<StartPressAnimation>((pressIn, isHover) => {
+        if (!isHover) {
+            startTimingAnimationWithDefaults(
+                scale,
+                pressIn ? MINIFIED_SCALE : ORIGINAL_SCALE,
+            );
+        }
+    }, []);
 
-    const startAnimation = (pressIn: boolean, isHovered: boolean = false) => {
-        if (pressEffect === 'none') {
-            return;
+    const startOpacityAnimation = useCallback<StartPressAnimation>((pressIn) => {
+        if (pressIn) {
+            opacity.setValue(ACTIVE_OPACITY);
+        } else {
+            startTimingAnimationWithDefaults(opacity, ORIGINAL_OPACITY);
         }
+    }, []);
 
-        if (pressEffect === 'opacity') {
-            if (pressIn) {
-                opacity.value = ACTIVE_OPACITY;
-            } else {
-                opacity.value = Animated.withTiming(ORIGINAL_OPACITY, animationTimingConfig);
-            }
-        } else if (!isHovered) {
-            if (pressIn) {
-                scale.value = Animated.withDelay(
-                    100,
-                    Animated.withTiming(MINIFIED_SCALE, animationTimingConfig),
-                );
-            } else {
-                scale.value = Animated.withTiming(ORIGINAL_SCALE, animationTimingConfig);
-            }
+    const startPressAnimation = useCallback<StartPressAnimation>((pressIn, isHover = false) => {
+        if (pressEffect === 'scale') {
+            startScaleAnimation(pressIn, isHover);
+        } else if (pressEffect === 'opacity') {
+            startOpacityAnimation(pressIn, isHover);
         }
+    }, [pressEffect]);
+
+    const handlePressIn = useCallback(() => {
+        startPressAnimation(true, false);
+    }, [startPressAnimation]);
+
+    const handlePressOut = useCallback(() => {
+        startPressAnimation(false, false);
+    }, [startPressAnimation]);
+
+    const animatedStyle = {
+        opacity,
+        transform: [{ scale }],
     };
 
+    const defaultPressDelay = pressEffect === 'scale'
+        ? SCALE_EFFECT_PRESS_IN_DELAY
+        : OPACITY_EFFECT_PRESS_IN_DELAY;
+    const pressDelay = pressDelayOrNil ?? defaultPressDelay;
+
     return (
         <AnimatedPressable
             disabled={disabled}
             onPress={handlePress}
-            onPressIn={() => startAnimation(true)}
-            onPressOut={() => startAnimation(false)}
+            onPressIn={handlePressIn}
+            onPressOut={handlePressOut}
             style={[
                 animatedStyle,
-                disabled ? styles.disabled : undefined,
-                style,
+                styleProp,
             ]}
+            unstable_pressDelay={pressDelay}
             {...otherProps}
         >
             {typeof children !== 'function' ? (
                 ({ hovered }) => {
                     if (hovered !== undefined && !disabled) {
-                        startAnimation(hovered, true);
+                        startPressAnimation(hovered, true);
                     }
 
                     return children;

package/src/ButtonBase/ButtonBaseProps.ts

@@ -32,6 +32,11 @@ export default interface ButtonBaseProps extends OverridableComponentProps<Press
      */
     pressEffect?: PressEffect;
 
+    /**
+     * The milliseconds to delay effect.
+     */
+    pressDelay?: number;
+
     /**
      * The millisecond for debouncing.
      * @default 650

package/src/Checkbox/CheckboxProps.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { CommonComponentColor, OverridableComponentProps } from '../types';
 import type { ButtonBaseProps } from '../ButtonBase';
 
-type BaseProps = Omit<ButtonBaseProps, 'onPress'>;
+type BaseProps = Omit<ButtonBaseProps, 'onPress' | 'children'>;
 
 export type CheckboxColor = CommonComponentColor;
 

package/src/Chip/Chip.tsx

@@ -8,7 +8,7 @@ import type ChipProps from './ChipProps';
 
 type ChipStyles = NamedStylesStringUnion<'root'>;
 
-const ICON_SIZE = 16;
+const ICON_SIZE = 20;
 
 const useStyles: UseStyles<ChipStyles> = function (): ChipStyles {
     const theme = useTheme();
@@ -20,8 +20,8 @@ const useStyles: UseStyles<ChipStyles> = function (): ChipStyles {
             flexDirection: 'row',
             height: 32,
             justifyContent: 'center',
-            paddingLeft: theme.spacing(2),
-            paddingRight: theme.spacing(2),
+            paddingLeft: theme.spacing(3),
+            paddingRight: theme.spacing(3),
         },
     };
 };
@@ -30,6 +30,7 @@ export default function Chip(props: ChipProps) {
     const {
         children,
         endIcon: endIconProp,
+        numberOfLines,
         onPress,
         startIcon: startIconProp,
         style: styleProp,
@@ -48,15 +49,15 @@ export default function Chip(props: ChipProps) {
         outlined: {
             backgroundColor: theme.palette.paper.default,
             borderColor: theme.palette.border,
-            borderWidth: 2,
+            borderWidth: 1,
         },
         filled: {
             backgroundColor: theme.palette.paper.grey,
         },
         bold: {
-            backgroundColor: theme.palette.paper.grey,
+            backgroundColor: theme.palette.paper.default,
             borderColor: theme.palette.primary.main,
-            borderWidth: 2,
+            borderWidth: 1.5,
         },
     };
 
@@ -67,7 +68,9 @@ export default function Chip(props: ChipProps) {
     ]);
 
     const fontStyle = createFontStyle(theme, {
-        selector: (typo) => typo.subtitle2,
+        selector: (typo) => variant === 'bold'
+            ? typo.subtitle2
+            : typo.body2,
         color: fontColor,
     });
 
@@ -103,6 +106,7 @@ export default function Chip(props: ChipProps) {
 
             <Text
                 children={children}
+                numberOfLines={numberOfLines}
                 style={textStyle}
             />
 

package/src/Chip/ChipProps.ts

@@ -15,6 +15,11 @@ export default interface ChipProps extends OverridableComponentProps<ButtonBaseP
      */
     children: string;
 
+    /**
+     * Number of lines of children.
+     */
+    numberOfLines?: number;
+
     /**
      * Element placed before the children.
      */

package/src/CircularProgress/CircularProgress.tsx

@@ -1,13 +1,16 @@
-import React from 'react';
-import { ViewProps } from 'react-native';
+import React, { useEffect } from 'react';
+import type { ViewProps } from 'react-native';
+import { Animated, Easing } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import Animated, { Easing } from 'react-native-reanimated';
 import { CircularProgress as CircularProgressIcon } from '../internal/icons';
-import { css } from '../styles';
-import { OverridableComponentProps } from '../types';
+import type { OverridableComponentProps } from '../types';
+import { useAnimatedValue } from '../hooks';
 
 type CircularProgressStyles = NamedStylesStringUnion<'root'>;
 
+const MIN_ROTATE_DEGREE = 0;
+const MAX_ROTATE_DEGREE = 360;
+
 const useStyles: UseStyles<CircularProgressStyles> = function (): CircularProgressStyles {
     return {
         root: {
@@ -18,36 +21,43 @@ const useStyles: UseStyles<CircularProgressStyles> = function (): CircularProgre
 };
 
 export default function CircularProgress(props: OverridableComponentProps<ViewProps>) {
-    const { style } = props;
+    const { style: styleProp } = props;
 
     const styles = useStyles();
 
-    const rootStyle = css([
-        styles.root,
-        style,
-    ]);
-
-    const sharedSpin = Animated.useSharedValue(0);
+    const rotate = useAnimatedValue(MIN_ROTATE_DEGREE);
 
-    const spinStyle = Animated.useAnimatedStyle(() => {
-        const interpolatedSpin = Animated.interpolate(sharedSpin.value, [0, 1], [0, 360]);
-
-        return {
-            transform: [{ rotate: `${interpolatedSpin}deg` }],
-        };
-    });
+    const animatedStyle = {
+        transform: [{
+            rotate: rotate.interpolate({
+                inputRange: [MIN_ROTATE_DEGREE, MAX_ROTATE_DEGREE],
+                outputRange: [`${MIN_ROTATE_DEGREE}deg`, `${MAX_ROTATE_DEGREE}deg`],
+            }),
+        }],
+    };
 
-    React.useEffect(() => {
-        sharedSpin.value = Animated.withRepeat(
-            Animated.withTiming(1, { duration: 900, easing: Easing.linear }),
-            -1,
-            false,
-        );
+    useEffect(() => {
+        Animated.loop(
+            Animated.timing(
+                rotate,
+                {
+                    toValue: MAX_ROTATE_DEGREE,
+                    duration: 900,
+                    easing: Easing.linear,
+                    useNativeDriver: true,
+                },
+            ),
+        ).start();
     }, []);
 
     return (
-        <Animated.View style={[spinStyle, rootStyle]}>
-            <CircularProgressIcon/>
-        </Animated.View>
+        <Animated.View
+            children={<CircularProgressIcon/>}
+            style={[
+                animatedStyle,
+                styles.root,
+                styleProp,
+            ]}
+        />
     );
 };

package/src/Dialog/Dialog.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useWindowDimensions } from 'react-native';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import Column from '../Column';
 import Modal from '../Modal';
 import Paper from '../Paper';
 import { useTheme } from '../styles';
@@ -11,16 +12,20 @@ type DialogStyleKeys =
     | 'paper'
     | 'paperFullScreen'
     | 'animation'
-    | 'animationFullScreen';
+    | 'animationFullScreen'
+    | 'topElement';
 
 type DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;
 
+const DIALOG_MAX_WIDTH = 328;
+
 const useStyles: UseStyles<DialogStyles> = function (): DialogStyles {
     const theme = useTheme();
 
     const { width } = useWindowDimensions();
 
     const margin = theme.spacing(4);
+    const dialogWidth = width - margin * 2;
 
     return {
         root: {
@@ -30,9 +35,9 @@ const useStyles: UseStyles<DialogStyles> = function (): DialogStyles {
         },
         paper: {
             margin,
-            maxWidth: 328,
+            maxWidth: DIALOG_MAX_WIDTH,
             overflow: 'hidden',
-            width: width - margin * 2,
+            width: dialogWidth,
         },
         paperFullScreen: {
             flexGrow: 1,
@@ -42,6 +47,11 @@ const useStyles: UseStyles<DialogStyles> = function (): DialogStyles {
             width: '100%',
             height: '100%',
         },
+        topElement: {
+            marginHorizontal: margin,
+            maxWidth: DIALOG_MAX_WIDTH,
+            width: dialogWidth,
+        },
     };
 };
 
@@ -50,7 +60,9 @@ export default function Dialog(props: DialogProps) {
         children,
         fullScreen = false,
         onClose,
+        style = {},
         visible,
+        topElement,
         ...otherProps
     } = props;
 
@@ -64,13 +76,22 @@ export default function Dialog(props: DialogProps) {
             style={styles.root}
             {...otherProps}
         >
-            <Paper
-                elevation={24}
-                square={fullScreen}
-                style={fullScreen ? styles.paperFullScreen : styles.paper}
-            >
-                {children}
-            </Paper>
+            <React.Fragment>
+                <Column style={fullScreen ? undefined : styles.topElement}>
+                    {topElement}
+                </Column>
+
+                <Paper
+                    elevation={24}
+                    square={fullScreen}
+                    style={css([
+                        fullScreen ? styles.paperFullScreen : styles.paper,
+                        style,
+                    ])}
+                >
+                    {children}
+                </Paper>
+            </React.Fragment>
         </Modal>
     );
 };

package/src/Dialog/DialogProps.ts

@@ -13,4 +13,9 @@ export default interface DialogProps extends OverridableComponentProps<ModalProp
      * @default false
      */
     fullScreen?: boolean;
+
+    /**
+     * Top element for displaying additional information on the dialog.
+     */
+    topElement?: React.ReactNode;
 }> {}

package/src/Image/Image.tsx

@@ -1,15 +1,23 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Text, View } from 'react-native';
 import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import type { ImageCoreProps } from '../ImageCore';
 import ImageCore from '../ImageCore';
 import { css, StyleSheet, useTheme } from '../styles';
 import type ImageProps from './ImageProps';
 
+type PlaceholderMode =
+    | 'default'
+    | 'custom'
+    | 'none';
+
 type ImageStyleKeys =
     | 'root'
     | 'rounded'
     | 'placeholder'
-    | 'outlined';
+    | 'outlined'
+    | 'error'
+    | 'errorText';
 
 type ImageStyles = NamedStylesStringUnion<ImageStyleKeys>;
 
@@ -30,62 +38,116 @@ const useStyles: UseStyles<ImageStyles> = function (): ImageStyles {
             borderStyle: 'solid',
             borderColor: theme.palette.paper.grey,
         },
+        error: {
+            alignItems: 'center',
+            height: '100%',
+            justifyContent: 'center',
+            width: '100%',
+        },
+        errorText: {
+            color: theme.palette.text.primary,
+            fontFamily: 'Inter-Medium',
+            fontSize: 12,
+            letterSpacing: 0,
+            lineHeight: 18,
+            textAlign: 'center',
+        },
     };
 };
 
+function determinePlaceholderMode(props: ImageProps): PlaceholderMode {
+    if (props.disablePlaceholder) {
+        return 'none';
+    }
+
+    return props.placeholder ? 'custom' : 'default';
+}
+
 export default function Image(props: ImageProps) {
     const {
         alt,
+        cache = 'immutable',
+        disableDrag,
+        disableLongClick,
         disableOutline,
         disablePlaceholder,
+        error,
         loading = 'lazy',
+        onError: onErrorProp,
+        onLoad: onLoadProp,
         overlaidChildren,
+        placeholder,
         resizeMode = 'cover',
         source,
         style,
         square = false,
-        onLoad,
-        onError,
         ...otherProps
     } = props;
 
-    const [failed, setFailed] = React.useState(false);
+    const [failed, setFailed] = useState(false);
 
     const styles = useStyles();
 
-    const handleError = () => {
-        if(onError){
-            onError();
-        }
+    const onLoad: ImageCoreProps['onLoad'] = () => {
+        setFailed(false);
+
+        onLoadProp?.();
+    };
 
+    const onError: ImageCoreProps['onError'] = () => {
         setFailed(true);
-    }
+
+        onErrorProp?.();
+    };
+
+    const placeholderMode = determinePlaceholderMode(props);
 
     return (
         <View
             style={css([
                 styles.root,
                 !disableOutline ? styles.outlined : undefined,
-                !disablePlaceholder ? styles.placeholder : undefined,
                 !square ? styles.rounded : undefined,
+                placeholderMode === 'default' ? styles.placeholder : undefined,
                 style,
             ])}
             {...otherProps}
         >
+            {placeholderMode === 'custom' ? (
+                <View
+                    style={css([
+                        StyleSheet.absoluteFill,
+                        { zIndex: -1 },
+                    ])}
+                >
+                    {placeholder}
+                </View>
+            ) : null}
+
             {failed ? (
-                <Text>{alt}</Text>
-            ) : (
+                <View style={styles.error}>
+                    {error ?? (
+                        <Text
+                            children={alt}
+                            style={styles.errorText}
+                        />
+                    )}
+                </View>
+            ) : source.uri ? (
                 <ImageCore
-                    alt={alt}
+                    alt={source.uri}
+                    cache={cache}
+                    disableDrag={disableDrag}
+                    disableLongClick={disableLongClick}
                     height={'100%'}
                     loading={loading}
-                    onError={handleError}
+                    onError={onError}
                     onLoad={onLoad}
                     resizeMode={resizeMode}
                     source={source}
                     width={'100%'}
                 />
-            )}
+            ) : null}
 
             {overlaidChildren ? (
                 <View style={StyleSheet.absoluteFill}>
@@ -94,4 +156,4 @@ export default function Image(props: ImageProps) {
             ) : null}
         </View>
     );
-};
+};

package/src/Image/ImageProps.ts

@@ -1,7 +1,13 @@
 import React from 'react';
 import type { ViewProps } from 'react-native';
 import type { OverridableComponentProps } from '../types';
-import type { ImageSource, Loading, ResizeMode } from '../ImageCore';
+import type { ImageSource, Loading, ResizeMode, CacheControl } from '../ImageCore';
+
+/**
+ * Image file quality.
+ * Request image by query string.
+ */
+export type ImageQuality = 'small' | 'medium' | 'large';
 
 export default interface ImageProps extends OverridableComponentProps<ViewProps, {
     /**
@@ -10,6 +16,18 @@ export default interface ImageProps extends OverridableComponentProps<ViewProps,
      */
     alt?: string;
 
+    /**
+     * Disable drag event for web.
+     * @default false
+     */
+    disableDrag?: boolean,
+
+    /**
+     * Disable Long click event for web.
+     * @default false
+     */
+    disableLongClick?: boolean,
+
     /**
      * If `true`, the image outline is not rendered.
      * @default false
@@ -22,6 +40,11 @@ export default interface ImageProps extends OverridableComponentProps<ViewProps,
      */
     disablePlaceholder?: boolean;
 
+    /**
+     * Custom error element. Default is simple alt text.
+     */
+    error?: React.ReactElement | null;
+
     /**
      * Web only. Loading the document by determining whether to load
      * the image immediately (`eager`) or on an as-needed basis (`lazy`).
@@ -43,7 +66,12 @@ export default interface ImageProps extends OverridableComponentProps<ViewProps,
     /**
      * The children on top this image.
      */
-    overlaidChildren?: React.ReactNode;
+    overlaidChildren?: React.ReactElement;
+
+    /**
+     * Custom placeholder element.
+     */
+    placeholder?: React.ReactElement;
 
     /**
      * Determines how to resize the image when the frame doesn't match the raw image dimensions.
@@ -61,4 +89,10 @@ export default interface ImageProps extends OverridableComponentProps<ViewProps,
      * @default false
      */
     square?: boolean;
+
+    /***
+     * FastImage cache control value.
+     * @default 'immutable'
+     */
+    cache?: CacheControl;
 }> {}