@fountain-ui/core 2.0.0-beta.9 → 2.0.0-beta.91

package/src/Accordion/AccordionProps.ts

@@ -1,30 +1,34 @@
 import React from 'react';
-import type { TypographyProps } from '../Typography';
 
 export default interface AccordionProps {
     /**
-     * The content of the component.
+     * The title of the component.
      */
-    content: string | React.ReactNode;
+    title: string | React.ReactNode;
 
     /**
-     * The icon to the left of the component.
+     * The subtitle of the component.
      */
-    LeftIcon?: React.ReactElement;
+    subTitle?: string | React.ReactNode;
 
     /**
-     * The icon to the right of the component.
+     * The component to the left of the title.
+     */
+    LeftComponent?: React.ReactNode;
+
+    /**
+     * The icon to the right of the title.
      */
     RightIcon?: React.ReactElement;
 
     /**
-     * The title of the component.
+     * The content of the component.
      */
-    title: string;
+    content: string | React.ReactNode;
 
     /**
-     * The variant of the component title.
-     * @default 'subtitle2'
+     * The initial state of expanding
+     * @default false
      */
-    titleVariant?: TypographyProps['variant'];
+    isInitialExpanded?: boolean;
 }

package/src/Badge/Badge.tsx

@@ -9,13 +9,12 @@ const defaultPosition: BadgePosition = {
     horizontal: 'right',
 };
 
-type BadgeStyles = NamedStylesStringUnion<'root' | 'badge' | 'top' | 'bottom' | 'left' | 'right'>;
+type BadgeStyles = NamedStylesStringUnion<'root' | 'badge'>;
 
 const useStyles: UseStyles<BadgeStyles> = function (): BadgeStyles {
     const theme = useTheme();
 
     const dotSize = 4;
-    const offset = 0;
 
     return {
         root: {},
@@ -26,18 +25,6 @@ const useStyles: UseStyles<BadgeStyles> = function (): BadgeStyles {
             position: 'absolute',
             width: dotSize,
         },
-        top: {
-            top: offset,
-        },
-        bottom: {
-            bottom: offset,
-        },
-        left: {
-            left: offset,
-        },
-        right: {
-            right: offset,
-        },
     };
 };
 
@@ -47,6 +34,7 @@ export default function Badge(props: BadgeProps) {
         invisible = false,
         position = defaultPosition,
         style,
+        offset = 0,
         ...otherProps
     } = props;
 
@@ -59,8 +47,10 @@ export default function Badge(props: BadgeProps) {
 
     const badgeStyle = css([
         styles.badge,
-        styles[position.vertical],
-        styles[position.horizontal],
+        {
+            [position.vertical]: offset,
+            [position.horizontal]: offset,
+        },
     ]);
 
     return (

package/src/Badge/BadgeProps.ts

@@ -31,4 +31,10 @@ export default interface BadgeProps extends OverridableComponentProps<ViewProps,
      * }
      */
     position?: BadgePosition;
+
+    /**
+     * The offset of the badge.
+     * @default 0
+     */
+    offset?: number;
 }> {}

package/src/Button/Button.tsx

@@ -42,6 +42,7 @@ export default function Button(props: ButtonProps) {
         fullWidth = false,
         href,
         onPress,
+        pressEffect,
         size = 'medium',
         startIcon: startIconProp,
         style: styleProp,
@@ -81,11 +82,11 @@ export default function Button(props: ButtonProps) {
     const startIcon = cloneElementSafely(startIconProp, iconProps);
     const endIcon = cloneElementSafely(endIconProp, iconProps);
 
-    const paddingSize = size === 'small' ? theme.spacing(2) : theme.spacing(4);
+    const paddingSize = size === 'small' ? theme.spacing(3) : theme.spacing(4);
     const paddingLeft = startIcon ? paddingSize - theme.spacing(1) : paddingSize;
     const paddingRight = endIcon ? paddingSize - theme.spacing(1) : paddingSize;
 
-    const borderRadius = theme.shape.roundness;
+    const borderRadius = theme.shape.roundnessLarge;
     const buttonBaseStyle = css([
         styles.root,
         variantStyleMap[variant],
@@ -116,6 +117,10 @@ export default function Button(props: ButtonProps) {
         { textAlign: 'center' },
     ]);
 
+    const modifiedPressEffect = variant !== 'text' && !pressEffect
+        ? 'scale'
+        : pressEffect;
+
     const handlePress = async () => {
         if (disabled) {
             return;
@@ -136,6 +141,7 @@ export default function Button(props: ButtonProps) {
             disabled={disabled}
             onPress={handlePress}
             style={buttonBaseStyle}
+            pressEffect={modifiedPressEffect}
             {...otherProps}
         >
             {startIcon}

package/src/ButtonBase/ButtonBase.tsx

@@ -1,11 +1,13 @@
-import React from 'react';
-import type { WithTimingConfig } from 'react-native-reanimated';
-import { useAnimatedStyle, useSharedValue, withDelay, withTiming } 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 { isNotAndroid12 } from '../utils';
 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;
@@ -14,14 +16,26 @@ const ACTIVE_OPACITY = .65;
 const ORIGINAL_SCALE = 1;
 const MINIFIED_SCALE = .96;
 
-const animationTimingConfig: 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: isNotAndroid12,
+    }).start();
+};
+
+const getOpacityByDisabled = (disabled: boolean) => disabled ? DISABLED_OPACITY : ORIGINAL_OPACITY;
 
 export default function ButtonBase(props: ButtonBaseProps) {
     const {
@@ -29,8 +43,10 @@ export default function ButtonBase(props: ButtonBaseProps) {
         disabled = false,
         disableThrottle = false,
         onPress,
+        onPressOut,
         pressEffect = 'opacity',
-        style,
+        pressDelay: pressDelayOrNil,
+        style: styleProp,
         throttleMillis = 650,
         ...otherProps
     } = props;
@@ -40,56 +56,75 @@ export default function ButtonBase(props: ButtonBaseProps) {
         callback: onPress,
     });
 
-    const opacity = useSharedValue(ORIGINAL_OPACITY);
-    const scale = useSharedValue(ORIGINAL_SCALE);
+    const opacity = useAnimatedValue(getOpacityByDisabled(disabled));
+    const scale = useAnimatedValue(ORIGINAL_SCALE);
 
-    const animatedStyle = useAnimatedStyle(() => ({
-        opacity: opacity.value,
-        transform: [{ scale: scale.value }],
-    }));
+    useEffect(() => {
+        opacity.setValue(getOpacityByDisabled(disabled));
+    }, [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 = withTiming(ORIGINAL_OPACITY, animationTimingConfig);
-            }
-        } else if (!isHovered) {
-            if (pressIn) {
-                scale.value = withDelay(
-                    100,
-                    withTiming(MINIFIED_SCALE, animationTimingConfig),
-                );
-            } else {
-                scale.value = 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(() => {
+        onPressOut && onPressOut();
+
+        startPressAnimation(false, false);
+    }, [startPressAnimation, onPressOut]);
+
+    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

@@ -26,12 +26,22 @@ export default interface ButtonBaseProps extends OverridableComponentProps<Press
      */
     onPress?: () => void;
 
+    /**
+     * Function to execute on press out.
+     */
+    onPressOut?: () => void;
+
     /**
      * Applied press effect.
      * @default 'opacity'
      */
     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();
@@ -16,12 +16,12 @@ const useStyles: UseStyles<ChipStyles> = function (): ChipStyles {
     return {
         root: {
             alignItems: 'center',
-            borderRadius: 20,
+            borderRadius: theme.shape.roundnessExtra,
             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,
@@ -47,16 +48,16 @@ export default function Chip(props: ChipProps) {
     const variantStyleMap = {
         outlined: {
             backgroundColor: theme.palette.paper.default,
-            borderColor: theme.palette.border,
-            borderWidth: 2,
+            borderColor: theme.palette.border.default,
+            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,17 @@
-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, useAnimatedStyle, useSharedValue, withRepeat, withTiming } 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';
+import { isNotAndroid12 } from '../utils';
 
 type CircularProgressStyles = NamedStylesStringUnion<'root'>;
 
+const MIN_ROTATE_DEGREE = 0;
+const MAX_ROTATE_DEGREE = 360;
+
 const useStyles: UseStyles<CircularProgressStyles> = function (): CircularProgressStyles {
     return {
         root: {
@@ -18,39 +22,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 = useSharedValue(0);
-
-    const spinStyle = useAnimatedStyle(() => {
-        const interpolatedSpin = Animated.interpolateNode(sharedSpin.value, {
-            inputRange: [0, 1],
-            outputRange: [0, 360],
-        });
-
-        return {
-            transform: [{ rotate: `${interpolatedSpin}deg` }],
-        };
-    });
-
-    React.useEffect(() => {
-        sharedSpin.value = withRepeat(
-            withTiming(1, { duration: 900, easing: Easing.linear }),
-            -1,
-            false,
-        );
+    const rotate = useAnimatedValue(MIN_ROTATE_DEGREE);
+
+    const animatedStyle = {
+        transform: [{
+            rotate: rotate.interpolate({
+                inputRange: [MIN_ROTATE_DEGREE, MAX_ROTATE_DEGREE],
+                outputRange: [`${MIN_ROTATE_DEGREE}deg`, `${MAX_ROTATE_DEGREE}deg`],
+            }),
+        }],
+    };
+
+    useEffect(() => {
+        Animated.loop(
+            Animated.timing(
+                rotate,
+                {
+                    toValue: MAX_ROTATE_DEGREE,
+                    duration: 900,
+                    easing: Easing.linear,
+                    useNativeDriver: isNotAndroid12,
+                },
+            ),
+        ).start();
     }, []);
 
     return (
-        <Animated.View style={[spinStyle, rootStyle]}>
-            <CircularProgressIcon/>
-        </Animated.View>
+        <Animated.View
+            children={<CircularProgressIcon/>}
+            style={[
+                animatedStyle,
+                styles.root,
+                styleProp,
+            ]}
+        />
     );
 };