@fountain-ui/core 2.0.0-beta.2 → 2.0.0-beta.22

package/src/Accordion/Accordion.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import Animated from 'react-native-reanimated';
+import type { WithTimingConfig } from 'react-native-reanimated';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { ChevronDown as ChevronDownIcon } from '../internal/icons';
 import ButtonBase from '../ButtonBase';
@@ -13,7 +14,7 @@ import AccordionProps from './AccordionProps';
 
 type AccordionStyles = NamedStylesStringUnion<'root'>;
 
-const ANIMATION_OPTION = { duration: 250 };
+const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 250 };
 
 const useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {
     const theme = useTheme();
@@ -38,15 +39,16 @@ export default function Accordion(props: AccordionProps) {
     const styles = useStyles();
 
     const [isExpanded, setIsExpanded] = useState(false);
-    const rotate = Animated.useSharedValue(0);
 
-    const animatedChevronDownStyles = Animated.useAnimatedStyle(() => ({
+    const rotate = useSharedValue(0);
+
+    const animatedChevronDownStyles = useAnimatedStyle(() => ({
         transform: [{ rotate: `${rotate.value}deg` }],
-    }));
+    }), []);
 
     const onPress = () => {
         setIsExpanded(prev => !prev);
-        rotate.value = Animated.withTiming(!isExpanded ? 180 : 0, ANIMATION_OPTION);
+        rotate.value = withTiming(!isExpanded ? 180 : 0, ANIMATION_CONFIG);
     };
 
     return (

package/src/AppBar/AppBar.tsx

@@ -5,11 +5,7 @@ import Paper from '../Paper';
 import { css, useTheme } from '../styles';
 import type AppBarProps from './AppBarProps';
 
-type AppBarStyleKeys =
-    | 'root'
-    | 'colorDefault'
-    | 'colorPrimary'
-    | 'colorTransparent';
+type AppBarStyleKeys = 'root';
 
 type AppBarStyles = NamedStylesStringUnion<AppBarStyleKeys>;
 
@@ -23,15 +19,6 @@ const useStyles: UseStyles<AppBarStyles> = function (): AppBarStyles {
             width: '100%',
             zIndex: theme.zIndex.appBar,
         },
-        colorDefault: {
-            backgroundColor: theme.palette.background.default,
-        },
-        colorPrimary: {
-            backgroundColor: theme.palette.primary.main,
-        },
-        colorTransparent: {
-            backgroundColor: 'transparent',
-        },
     };
 };
 
@@ -42,26 +29,31 @@ const AppBar = React.forwardRef<View, AppBarProps>(function AppBar(props, ref) {
         ...otherProps
     } = props;
 
+    const theme = useTheme();
+
     const styles = useStyles();
 
-    const colorStyle = color === 'default'
-        ? styles.colorDefault
-        : color === 'primary'
-            ? styles.colorPrimary
-            : styles.colorTransparent;
+    const backgroundColor = color === 'default'
+        ? theme.palette.background.default
+        : color === 'paper'
+            ? theme.palette.paper.default
+            : color === 'primary'
+                ? theme.palette.primary.main
+                : 'transparent';
 
     const paperStyle = css([
         styles.root,
-        colorStyle,
+        { backgroundColor },
         style,
     ]);
 
     return (
         <Paper
             ref={ref}
-            square
+            colorValue={backgroundColor}
             elevation={0}
             style={paperStyle}
+            square={true}
             {...otherProps}
         />
     );

package/src/AppBar/AppBarProps.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { OverridableComponentProps } from '../types';
 import type { PaperProps } from '../Paper';
 
-export type AppBarColor = 'default' | 'primary' | 'transparent';
+export type AppBarColor = 'default' | 'paper' | 'primary' | 'transparent';
 
 export default interface AppBarProps extends OverridableComponentProps<PaperProps, {
     /**

package/src/Button/Button.tsx

@@ -75,7 +75,7 @@ export default function Button(props: ButtonProps) {
     const iconProps = {
         width: iconSizes[size],
         height: iconSizes[size],
-        colorValue: fontColor,
+        fill: fontColor,
     };
 
     const startIcon = cloneElementSafely(startIconProp, iconProps);

package/src/ButtonBase/ButtonBase.tsx

@@ -1,10 +1,12 @@
-import React from 'react';
-import Animated from 'react-native-reanimated';
+import React, { useCallback, useEffect, useRef } from 'react';
+import { Animated } from 'react-native';
 import { 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,23 @@ 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;
+
+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 +40,7 @@ export default function ButtonBase(props: ButtonBaseProps) {
         disableThrottle = false,
         onPress,
         pressEffect = 'opacity',
-        style,
+        style: styleProp,
         throttleMillis = 650,
         ...otherProps
     } = props;
@@ -39,56 +50,72 @@ export default function ButtonBase(props: ButtonBaseProps) {
         callback: onPress,
     });
 
-    const opacity = Animated.useSharedValue(ORIGINAL_OPACITY);
-    const scale = Animated.useSharedValue(ORIGINAL_SCALE);
+    const opacity = useRef<Animated.Value>(new Animated.Value(ORIGINAL_OPACITY)).current;
+    const scale = useRef<Animated.Value>(new Animated.Value(ORIGINAL_SCALE)).current;
 
-    const animatedStyle = Animated.useAnimatedStyle(() => ({
-        opacity: opacity.value,
-        transform: [{ scale: scale.value }],
-    }));
+    useEffect(() => {
+        opacity.setValue(disabled ? DISABLED_OPACITY : ORIGINAL_OPACITY);
+    }, [disabled]);
 
-    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 pressDelay = pressEffect === 'scale'
+        ? SCALE_EFFECT_PRESS_IN_DELAY
+        : 0;
+
     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/Chip/Chip.tsx

@@ -30,6 +30,7 @@ export default function Chip(props: ChipProps) {
     const {
         children,
         endIcon: endIconProp,
+        numberOfLines,
         onPress,
         startIcon: startIconProp,
         style: styleProp,
@@ -87,7 +88,7 @@ export default function Chip(props: ChipProps) {
     const iconProps = {
         width: ICON_SIZE,
         height: ICON_SIZE,
-        colorValue: fontColor,
+        fill: fontColor,
     };
 
     const startIcon = cloneElementSafely(startIconProp, iconProps);
@@ -103,6 +104,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,15 @@
-import React from 'react';
-import { ViewProps } from 'react-native';
+import React, { useEffect, useRef } 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';
 
 type CircularProgressStyles = NamedStylesStringUnion<'root'>;
 
+const MIN_ROTATE_DEGREE = 0;
+const MAX_ROTATE_DEGREE = 360;
+
 const useStyles: UseStyles<CircularProgressStyles> = function (): CircularProgressStyles {
     return {
         root: {
@@ -18,36 +20,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 = useRef(new Animated.Value(MIN_ROTATE_DEGREE)).current;
 
-    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/Fab/Fab.tsx

@@ -62,7 +62,7 @@ export default function Fab(props: FabProps) {
     const icon = cloneElementSafely(children, {
         width: iconSizes[size],
         height: iconSizes[size],
-        colorValue: fontColor,
+        fill: fontColor,
     });
 
     const elevationStyle = useElevationStyle(elevation);

package/src/ImageCore/ImageCoreNative.tsx

@@ -1,12 +1,15 @@
-import React from 'react';
-import Animated from 'react-native-reanimated';
+import React, { useCallback, useRef } from 'react';
+import { Animated } from 'react-native';
 import FastImage from 'react-native-fast-image';
 import type ImageCoreProps from './ImageCoreProps';
 
 // @ts-ignore
 const AnimatedFastImage = Animated.createAnimatedComponent(FastImage);
 
-const animationConfig: Animated.WithTimingConfig = { duration: 150 };
+const INITIAL_OPACITY = 0;
+const LOADED_OPACITY = 1;
+
+const ANIMATION_DURATION = 200;
 
 export default function ImageCore(props: ImageCoreProps) {
     const {
@@ -18,21 +21,17 @@ export default function ImageCore(props: ImageCoreProps) {
         width,
     } = props;
 
-    const style = { width, height };
-
-    const opacity = Animated.useSharedValue(0);
-
-    const animatedStyle = Animated.useAnimatedStyle(() => ({
-        opacity: opacity.value,
-    }));
+    const opacity = useRef<Animated.Value>(new Animated.Value(INITIAL_OPACITY)).current;
 
-    const handleLoad = () => {
-        opacity.value = Animated.withTiming(1, animationConfig);
+    const handleLoad = useCallback(() => {
+        Animated.timing(opacity, {
+            toValue: LOADED_OPACITY,
+            duration: ANIMATION_DURATION,
+            useNativeDriver: true,
+        }).start();
 
-        if (onLoad) {
-            onLoad();
-        }
-    };
+        onLoad?.();
+    }, [onLoad]);
 
     return (
         <AnimatedFastImage
@@ -41,8 +40,8 @@ export default function ImageCore(props: ImageCoreProps) {
             resizeMode={resizeMode}
             source={{ uri: source.uri }}
             style={[
-                animatedStyle,
-                style,
+                { opacity },
+                { width, height },
             ]}
         />
     );

package/src/Paper/Paper.tsx

@@ -3,10 +3,12 @@ import { View } from 'react-native';
 import { css, StyleSheet, useTheme } from '../styles';
 import { useElevationStyle } from '../hooks';
 import type PaperProps from './PaperProps';
+import PaperStylesProvider from './PaperStylesProvider';
 
 const Paper = React.forwardRef<View, PaperProps>(function Paper(props, ref) {
     const {
         color = 'default',
+        colorValue,
         elevation = 1,
         style: styleProp,
         square = false,
@@ -16,9 +18,9 @@ const Paper = React.forwardRef<View, PaperProps>(function Paper(props, ref) {
 
     const theme = useTheme();
 
-    const rootStyle = {
-        backgroundColor: theme.palette.paper[color],
-    };
+    const backgroundColor = colorValue ?? theme.palette.paper[color];
+
+    const rootStyle = { backgroundColor };
 
     const roundedStyle = {
         borderRadius: theme.shape.roundness,
@@ -40,11 +42,15 @@ const Paper = React.forwardRef<View, PaperProps>(function Paper(props, ref) {
     ]);
 
     return (
-        <View
-            ref={ref}
-            style={style}
-            {...otherProps}
-        />
+        <PaperStylesProvider
+            value={{ backgroundColor }}
+        >
+            <View
+                ref={ref}
+                style={style}
+                {...otherProps}
+            />
+        </PaperStylesProvider>
     );
 });
 

package/src/Paper/PaperProps.ts

@@ -19,6 +19,12 @@ export default interface PaperProps extends OverridableComponentProps<ViewProps,
      */
     color?: PaperColor;
 
+    /**
+     * The hex color value of Paper.
+     * It has higher priority than `color` prop.
+     */
+    colorValue?: string;
+
     /**
      * Shadow depth, corresponds to `dp` in the spec.
      * It accepts values between 0 and 24 inclusive.

package/src/Paper/PaperStylesProvider.tsx

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+export type PaperStyles = {
+    backgroundColor: string;
+}
+
+export const PaperStylesContext = createContext<PaperStyles | null>(null);
+
+export default PaperStylesContext.Provider;

package/src/Paper/usePaperStyles.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { PaperStylesContext } from './PaperStylesProvider';
+
+export default function usePaperStyles() {
+    return useContext(PaperStylesContext);
+};

package/src/Slide/Slide.tsx

@@ -1,11 +1,14 @@
-import React from 'react';
-import { useWindowDimensions } from 'react-native';
-import Animated, { Easing } from 'react-native-reanimated';
+import React, { useEffect } from 'react';
+import { Dimensions } from 'react-native';
+import type { WithTimingConfig } from 'react-native-reanimated';
+import Animated, { Easing, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import type SlideProps from './SlideProps';
 
 const defaultEnterDuration = 300;
 const defaultExitDuration = 300;
 
+const getDisappearingOffsetY = (): number => Dimensions.get('window').height;
+
 export default function Slide(props: SlideProps) {
     const {
         animatedY: animatedYProp,
@@ -20,40 +23,40 @@ export default function Slide(props: SlideProps) {
         ...otherProps
     } = props;
 
-    const window = useWindowDimensions();
-
-    const y = Animated.useSharedValue(window.height);
+    const y = useSharedValue(getDisappearingOffsetY());
     const animatedY = animatedYProp || y;
 
-    const animatedStyle = Animated.useAnimatedStyle(() => ({
+    const animatedStyle = useAnimatedStyle(() => ({
         transform: [{ translateY: animatedY.value }],
-    }));
+    }), []);
 
-    React.useEffect(() => {
+    useEffect(() => {
         if (appear) {
-            const enterConfig: Animated.WithTimingConfig = {
+            onEnter?.();
+
+            const toValue = 0;
+            const enterConfig: Readonly<WithTimingConfig> = {
                 duration: enterDuration,
                 easing: Easing.out(Easing.exp),
             };
 
-            onEnter?.();
-
-            animatedY.value = Animated.withTiming(0, enterConfig, isFinished => {
+            animatedY.value = withTiming(toValue, enterConfig, isFinished => {
                 if (isFinished && onEntered) {
-                    Animated.runOnJS(onEntered)();
+                    runOnJS(onEntered)();
                 }
             });
         } else {
-            const exitConfig: Animated.WithTimingConfig = {
+            onExit?.();
+
+            const toValue = getDisappearingOffsetY();
+            const exitConfig: Readonly<WithTimingConfig> = {
                 duration: exitDuration,
                 easing: Easing.in(Easing.ease),
             };
 
-            onExit?.();
-
-            animatedY.value = Animated.withTiming(window.height, exitConfig, isFinished => {
+            animatedY.value = withTiming(toValue, exitConfig, isFinished => {
                 if (isFinished && onExited) {
-                    Animated.runOnJS(onExited)();
+                    runOnJS(onExited)();
                 }
             });
         }

package/src/SvgIcon/SvgIcon.tsx

@@ -6,7 +6,6 @@ import type SvgIconProps from './SvgIconProps';
 export default function SvgIcon(props: SvgIconProps) {
     const {
         color: colorProp = 'primary',
-        colorValue,
         height = 24,
         style: styleProp,
         viewBox = '0 0 20 20',
@@ -16,7 +15,7 @@ export default function SvgIcon(props: SvgIconProps) {
 
     const theme = useTheme();
 
-    const color = colorValue ?? theme.palette[colorProp].main;
+    const color = theme.palette[colorProp].main;
 
     const style = css([
         { flexShrink: 0 },

package/src/SvgIcon/SvgIconProps.ts

@@ -19,7 +19,7 @@ export default interface SvgIconProps extends OverridableComponentProps<SvgProps
     /**
      * The color of the component. It is treated as higher priority than `color` prop if provided.
      */
-    colorValue?: string;
+    fill?: SvgProps['fill'];
 
     /**
      * The height applied to the icon.