@fountain-ui/core 2.0.0-beta.8 → 2.0.0-beta.80

package/src/Divider/DividerProps.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import type { ViewProps } from 'react-native';
-import type { OverridableComponentProps } from '../types';
+import type { CommonComponentColor, OverridableComponentProps } from '../types';
+
+export type DividerColor = 'divider' | 'border' | CommonComponentColor;
 
 export default interface DividerProps extends OverridableComponentProps<ViewProps, {
     /**
@@ -19,4 +21,28 @@ export default interface DividerProps extends OverridableComponentProps<ViewProp
      * @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/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;
 }> {}

package/src/Image/index.ts

@@ -1,2 +1,2 @@
 export { default } from './Image';
-export type { default as ImageProps } from './ImageProps';
+export type { default as ImageProps, ImageQuality } from './ImageProps';

package/src/ImageCore/ImageCoreNative.tsx

@@ -1,15 +1,22 @@
-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 { isNotAndroid12 } from '../utils';
 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 {
+        cache,
         height,
         onError,
         onLoad,
@@ -18,31 +25,35 @@ 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: isNotAndroid12,
+        }).start();
 
-        if (onLoad) {
-            onLoad();
-        }
-    };
+        onLoad?.();
+    }, [onLoad]);
 
     return (
         <AnimatedFastImage
             onError={onError}
             onLoad={handleLoad}
             resizeMode={resizeMode}
-            source={{ uri: source.uri }}
+            source={{
+                cache,
+                uri: source.uri,
+                headers: {
+                    'Accept': acceptHeader,
+                },
+            }}
             style={[
-                animatedStyle,
-                style,
+                { opacity },
+                { width, height },
             ]}
         />
     );

package/src/ImageCore/ImageCoreProps.ts

@@ -1,13 +1,18 @@
 export interface ImageSource {
-    uri: string;
+    uri?: string;
 }
 
 export type ResizeMode = 'cover' | 'contain';
 
 export type Loading = 'lazy' | 'eager';
 
+export type CacheControl = 'immutable' | 'web' | 'cacheOnly';
+
 export default interface ImageCoreProps extends Readonly<{
     alt?: string;
+    cache?: CacheControl;
+    disableDrag?: boolean,
+    disableLongClick?: boolean,
     height?: number | string;
     loading: Loading;
     onError?: () => void;

package/src/ImageCore/ImageCoreWeb.tsx

@@ -1,9 +1,24 @@
-import React from 'react';
+import React, { DragEventHandler, MouseEventHandler } from 'react';
 import type ImageCoreProps from './ImageCoreProps';
 
+const longClickDisabledStyle = {
+    '-webkit-user-select': 'none',
+    '-webkit-touch-callout': 'none',
+};
+
+const preventDragging: DragEventHandler<HTMLImageElement> = () => false;
+
+const preventMouseDown: MouseEventHandler<HTMLImageElement> = (event) => {
+    if (event.preventDefault) {
+        event.preventDefault();
+    }
+};
+
 export default function ImageCore(props: ImageCoreProps) {
     const {
         alt,
+        disableDrag = false,
+        disableLongClick = false,
         height,
         loading,
         onError,
@@ -13,13 +28,18 @@ export default function ImageCore(props: ImageCoreProps) {
         width,
     } = props;
 
-    const style = { objectFit: resizeMode };
+    const style = {
+        objectFit: resizeMode,
+        ...(disableLongClick ? longClickDisabledStyle : {}),
+    };
 
     return (
         <img
             alt={alt}
             height={height}
             loading={loading}
+            onDragStart={disableDrag ? preventDragging : undefined}
+            onMouseDown={disableDrag ? preventMouseDown : undefined}
             onError={onError}
             onLoad={onLoad}
             src={source.uri}

package/src/ImageCore/ImageFileExtensionContext.ts

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

package/src/ImageCore/ImageFileExtensionProvider.tsx

@@ -0,0 +1,33 @@
+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 supportedMediaTypes = [
+        ...(R.map(extension => `image/${extension}`, extensions)),
+        'image/*',
+        '*/*',
+    ];
+
+    const acceptHeader = `${R.join(',', supportedMediaTypes)};`;
+
+    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 type { default as ImageCoreProps, ImageSource, Loading, ResizeMode, CacheControl } from './ImageCoreProps';
+
+export { default as ImageFileExtensionProvider } from './ImageFileExtensionProvider';
+export * from './ImageFileExtensionProvider';

package/src/Modal/Modal.tsx

@@ -14,6 +14,9 @@ export interface ModalCloseEvent {
     };
 }
 
+const defaultEnterDuration = 300;
+const defaultExitDuration = 150;
+
 export const createModalCloseEvent = (reason: ModalCloseReasonType) => ({
     metadata: {
         reason,
@@ -26,6 +29,8 @@ export default function Modal(props: ModalProps) {
         backdropOpacity = 0.5,
         children,
         disableAnimation = false,
+        enterDuration = defaultEnterDuration,
+        exitDuration = defaultExitDuration,
         hideBackdrop = false,
         onClose,
         style,
@@ -68,7 +73,8 @@ export default function Modal(props: ModalProps) {
             {!disableAnimation ? (
                 <Slide
                     appear={visible}
-                    exitDuration={150}
+                    enterDuration={enterDuration}
+                    exitDuration={exitDuration}
                     onEnter={() => setExited(false)}
                     onExited={() => setExited(true)}
                     style={animationStyle}

package/src/Modal/ModalProps.ts

@@ -26,6 +26,18 @@ export default interface ModalProps extends OverridableComponentProps<ViewProps,
      */
     disableAnimation?: boolean;
 
+    /**
+     * The number of milliseconds to enter animation.
+     * @default 300
+     */
+    enterDuration?: number;
+
+    /**
+     * The number of milliseconds to exit animation.
+     * @default 150
+     */
+    exitDuration?: number;
+
     /**
      * If `true`, the backdrop is not rendered.
      * @default false

package/src/Paper/Paper.tsx

@@ -23,7 +23,7 @@ const Paper = React.forwardRef<View, PaperProps>(function Paper(props, ref) {
     const rootStyle = { backgroundColor };
 
     const roundedStyle = {
-        borderRadius: theme.shape.roundness,
+        borderRadius: theme.shape.roundnessLarge,
     };
 
     const elevationStyle = useElevationStyle(elevation);

package/src/Radio/Radio.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import ButtonBase from '../ButtonBase';
 import { Radio as RadioIcon, RadioChecked as RadioCheckedIcon } from '../internal';
-import { css, useTheme } from '../styles';
+import { css } from '../styles';
 import { RadioContext } from '../RadioGroup/RadioContextProvider';
 import type RadioProps from './RadioProps';
 
@@ -32,8 +32,6 @@ export default function Radio(props: RadioProps) {
 
     const styles = useStyles();
 
-    const theme = useTheme();
-
     const context = React.useContext(RadioContext);
 
     const handlePress = () => {

package/src/Slide/Slide.tsx

@@ -1,11 +1,15 @@
-import React from 'react';
-import { useWindowDimensions } from 'react-native';
-import Animated, { Easing } from 'react-native-reanimated';
+import React, { useEffect } from 'react';
+import { Animated, Dimensions, Easing, Platform } from 'react-native';
+import { useAnimatedValue } from '../hooks';
+import { isNotAndroid12 } from '../utils';
+
 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 +24,42 @@ export default function Slide(props: SlideProps) {
         ...otherProps
     } = props;
 
-    const window = useWindowDimensions();
-
-    const y = Animated.useSharedValue(window.height);
+    const y = useAnimatedValue(getDisappearingOffsetY());
     const animatedY = animatedYProp || y;
 
-    const animatedStyle = Animated.useAnimatedStyle(() => ({
-        transform: [{ translateY: animatedY.value }],
-    }));
+    const animatedStyle = {
+        transform: [{ translateY: animatedY }],
+    };
 
-    React.useEffect(() => {
+    useEffect(() => {
         if (appear) {
-            const enterConfig: Animated.WithTimingConfig = {
-                duration: enterDuration,
-                easing: Easing.out(Easing.exp),
-            };
-
             onEnter?.();
 
-            animatedY.value = Animated.withTiming(0, enterConfig, isFinished => {
-                if (isFinished && onEntered) {
-                    Animated.runOnJS(onEntered)();
+            const toValue = 0;
+            Animated.timing(animatedY, {
+                toValue,
+                duration: enterDuration,
+                easing: Platform.OS === 'web'
+                    ? Easing.bezier(0.16, 1, 0.3, 1)
+                    : Easing.out(Easing.exp),
+                useNativeDriver: isNotAndroid12,
+            }).start(({ finished }) => {
+                if (finished && onEntered) {
+                    onEntered();
                 }
             });
         } else {
-            const exitConfig: Animated.WithTimingConfig = {
-                duration: exitDuration,
-                easing: Easing.in(Easing.ease),
-            };
-
             onExit?.();
 
-            animatedY.value = Animated.withTiming(window.height, exitConfig, isFinished => {
-                if (isFinished && onExited) {
-                    Animated.runOnJS(onExited)();
+            const toValue = getDisappearingOffsetY();
+            Animated.timing(animatedY, {
+                toValue,
+                duration: exitDuration,
+                easing: Easing.in(Easing.ease),
+                useNativeDriver: isNotAndroid12,
+            }).start(({ finished }) => {
+                if (finished && onExited) {
+                    onExited();
                 }
             });
         }
@@ -61,6 +67,7 @@ export default function Slide(props: SlideProps) {
 
     return (
         <Animated.View
+            pointerEvents={'box-none'}
             style={[
                 animatedStyle,
                 style,

package/src/Slide/SlideProps.ts

@@ -1,13 +1,12 @@
 import React from 'react';
-import type { ViewProps } from 'react-native';
-import Animated from 'react-native-reanimated';
+import type { Animated, ViewProps } from 'react-native';
 import type { OverridableComponentProps } from '../types';
 
 export default interface SlideProps extends OverridableComponentProps<ViewProps, {
     /**
      * y value for animating.
      */
-    animatedY?: Animated.SharedValue<number>;
+    animatedY?: Animated.Value;
 
     /**
      * If `true`, the component will transition in.