@fountain-ui/core 2.0.0-beta.3 → 2.0.0-beta.31

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/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/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,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 = 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 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/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

@@ -30,6 +30,7 @@ export default function Chip(props: ChipProps) {
     const {
         children,
         endIcon: endIconProp,
+        numberOfLines,
         onPress,
         startIcon: startIconProp,
         style: styleProp,
@@ -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,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/Image/Image.tsx

@@ -44,6 +44,7 @@ export default function Image(props: ImageProps) {
         source,
         style,
         square = false,
+        size,
         onLoad,
         onError,
         ...otherProps
@@ -61,6 +62,11 @@ export default function Image(props: ImageProps) {
         setFailed(true);
     }
 
+    const sourceWithSizeParam = {
+        ...source,
+        uri: size ? `${source.uri}?size=${size}` : source.uri,
+    };
+
     return (
         <View
             style={css([
@@ -82,7 +88,7 @@ export default function Image(props: ImageProps) {
                     onError={handleError}
                     onLoad={onLoad}
                     resizeMode={resizeMode}
-                    source={source}
+                    source={sourceWithSizeParam}
                     width={'100%'}
                 />
             )}

package/src/Image/ImageProps.ts

@@ -61,4 +61,6 @@ export default interface ImageProps extends OverridableComponentProps<ViewProps,
      * @default false
      */
     square?: boolean;
+
+    size?: 'small' | 'medium' | 'large';
 }> {}

package/src/ImageCore/ImageCoreNative.tsx

@@ -1,12 +1,17 @@
-import React from 'react';
-import Animated from 'react-native-reanimated';
+import React, { useCallback, useContext } from 'react';
+import { Animated } from 'react-native';
 import FastImage from 'react-native-fast-image';
+import { useAnimatedValue } from '../hooks';
 import type ImageCoreProps from './ImageCoreProps';
+import ImageFileExtensionContext from './ImageFileExtensionContext';
 
 // @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,31 +23,34 @@ export default function ImageCore(props: ImageCoreProps) {
         width,
     } = props;
 
-    const style = { width, height };
-
-    const opacity = Animated.useSharedValue(0);
+    const opacity = useAnimatedValue(INITIAL_OPACITY);
 
-    const animatedStyle = Animated.useAnimatedStyle(() => ({
-        opacity: opacity.value,
-    }));
+    const acceptHeader = useContext(ImageFileExtensionContext);
 
-    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
             onError={onError}
             onLoad={handleLoad}
             resizeMode={resizeMode}
-            source={{ uri: source.uri }}
+            source={{
+                uri: source.uri,
+                headers: {
+                    'Accept': acceptHeader,
+                },
+            }}
             style={[
-                animatedStyle,
-                style,
+                { opacity },
+                { width, height },
             ]}
         />
     );

package/src/ImageCore/ImageFileExtensionContext.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const defaultAcceptHeader = 'image/jpg,image/png,image/*,*/*;';
+
+const ImageFileExtensionContext = React.createContext<string>(defaultAcceptHeader);
+
+export default ImageFileExtensionContext;

package/src/ImageCore/ImageFileExtensionProvider.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import * as R from 'ramda';
+import ImageFileExtensionContext from './ImageFileExtensionContext';
+
+export enum ImageFileExtension {
+    AVIF = "avif",
+    WEBP = "webp",
+    JPG = "jpg",
+    PNG = "png",
+}
+
+interface ImageFileExtensionProviderProps {
+    children: React.ReactNode;
+    extensions: ImageFileExtension[];
+}
+
+export default function ImageFileExtensionProvider(props: ImageFileExtensionProviderProps) {
+    const { children, extensions } = props;
+
+    const availableAcceptHeader = R.pipe(
+        R.map(extension => `image/${extension}`),
+        R.join(','),
+    )(extensions);
+
+    const acceptHeader = `${availableAcceptHeader},image/*,*/*;`;
+
+    return (
+        <ImageFileExtensionContext.Provider value={acceptHeader}>
+            {children}
+        </ImageFileExtensionContext.Provider>
+    );
+}

package/src/ImageCore/index.native.ts

@@ -1 +1,3 @@
-export { default } from './ImageCoreNative';
+export { default } from './ImageCoreNative';
+export { default as ImageFileExtensionProvider } from './ImageFileExtensionProvider';
+export * from './ImageFileExtensionProvider';

package/src/ImageCore/index.ts

@@ -1,2 +1,5 @@
 export { default } from './ImageCoreWeb';
-export * from './ImageCoreProps';
+export * from './ImageCoreProps';
+
+export { default as ImageFileExtensionProvider } from './ImageFileExtensionProvider';
+export * from './ImageFileExtensionProvider';

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