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

package/src/Dialog/Dialog.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
-import { useWindowDimensions } from 'react-native';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import Modal from '../Modal';
+import React, { useMemo, useState } from 'react';
+import { LayoutChangeEvent, useWindowDimensions } from 'react-native';
+import { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import Column from '../Column';
+import Modal, { ANIMATION_TYPE, AnimationUnit } from '../Modal';
 import Paper from '../Paper';
 import { useTheme } from '../styles';
 import type DialogProps from './DialogProps';
@@ -11,16 +12,23 @@ type DialogStyleKeys =
     | 'paper'
     | 'paperFullScreen'
     | 'animation'
-    | 'animationFullScreen';
+    | 'animationFullScreen'
+    | 'topElementSize'
+    | 'topElementPosition';
 
 type DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;
 
+const DIALOG_MAX_WIDTH = 328;
+
+const TOP_ELEMENT_OFFSET = 20;
+
 const useStyles: UseStyles<DialogStyles> = function (): DialogStyles {
     const theme = useTheme();
 
     const { width } = useWindowDimensions();
 
     const margin = theme.spacing(4);
+    const dialogWidth = width - margin * 2;
 
     return {
         root: {
@@ -29,10 +37,11 @@ const useStyles: UseStyles<DialogStyles> = function (): DialogStyles {
             zIndex: theme.zIndex.dialog,
         },
         paper: {
+            borderRadius: theme.shape.roundnessExtra,
             margin,
-            maxWidth: 328,
+            maxWidth: DIALOG_MAX_WIDTH,
             overflow: 'hidden',
-            width: width - margin * 2,
+            width: dialogWidth,
         },
         paperFullScreen: {
             flexGrow: 1,
@@ -42,35 +51,148 @@ const useStyles: UseStyles<DialogStyles> = function (): DialogStyles {
             width: '100%',
             height: '100%',
         },
+        topElementSize: {
+            marginHorizontal: margin,
+            maxWidth: DIALOG_MAX_WIDTH,
+            width: dialogWidth,
+        },
+        topElementPosition: {
+            position: 'absolute',
+            bottom: -1 * theme.spacing(4),
+            width: '100%',
+        },
     };
 };
 
 export default function Dialog(props: DialogProps) {
     const {
+        animationType = ANIMATION_TYPE.SLIDE,
         children,
         fullScreen = false,
+        hideBackdrop,
         onClose,
+        style = {},
         visible,
+        topElement,
         ...otherProps
     } = props;
 
     const styles = useStyles();
 
+    const { height: screenHeight } = useWindowDimensions();
+
+    const [topElementHeight, setTopElementHeight] = useState(0);
+    const handleTopElementLayout = (event: LayoutChangeEvent) => {
+        const { height } = event.nativeEvent.layout;
+        setTopElementHeight(height);
+    };
+
+    const offsetAnimation = useMemo<AnimationUnit[]>(() => {
+        if (topElementHeight === 0) {
+            return [];
+        }
+
+        return [{
+            toValue: (topElementHeight - TOP_ELEMENT_OFFSET) / 2,
+            type: ANIMATION_TYPE.SLIDE,
+        }]
+    }, [topElementHeight]);
+
+    const closeAnimation = useMemo<AnimationUnit[]>(() => {
+        if (animationType === ANIMATION_TYPE.FADE) {
+            return [{
+                toValue: 0,
+                type: ANIMATION_TYPE.FADE,
+            }];
+        } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {
+            return [
+                {
+                    toValue: screenHeight,
+                    type: ANIMATION_TYPE.SLIDE,
+                },
+                {
+                    duration: 150,
+                    toValue: 0,
+                    type: ANIMATION_TYPE.FADE,
+                },
+            ];
+        }
+
+        return [{
+            duration: 150,
+            toValue: screenHeight,
+            type: ANIMATION_TYPE.SLIDE,
+        }];
+    }, [animationType, fullScreen, screenHeight]);
+
+    const openAnimation = useMemo<AnimationUnit[]>(() => {
+        if (animationType === ANIMATION_TYPE.FADE) {
+            return [{
+                toValue: 1,
+                type: ANIMATION_TYPE.FADE,
+            }];
+        } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {
+            return [
+                {
+                    toValue: 0,
+                    type: ANIMATION_TYPE.SLIDE,
+                },
+                {
+                    delay: 50,
+                    duration: 150,
+                    toValue: 1,
+                    type: ANIMATION_TYPE.FADE,
+                },
+            ];
+        }
+
+        return [{
+            toValue: 0,
+            type: ANIMATION_TYPE.SLIDE,
+        }];
+    }, [animationType, fullScreen]);
+
+    const initialOpacity = animationType === ANIMATION_TYPE.SLIDE && fullScreen ? 1 : undefined;
+
+    const initialTranslateY = animationType === ANIMATION_TYPE.FADE ? 0 : undefined;
+
     return (
         <Modal
             animationStyle={fullScreen ? styles.animationFullScreen : styles.animation}
+            closeAnimation={closeAnimation}
+            hideBackdrop={hideBackdrop || animationType === ANIMATION_TYPE.FADE}
+            initialOpacity={initialOpacity}
+            initialTranslateY={initialTranslateY}
             onClose={onClose}
+            openAnimation={openAnimation}
+            offsetAnimation={offsetAnimation}
             visible={visible}
             style={styles.root}
             {...otherProps}
         >
-            <Paper
-                elevation={24}
-                square={fullScreen}
-                style={fullScreen ? styles.paperFullScreen : styles.paper}
-            >
-                {children}
-            </Paper>
+            <React.Fragment>
+                {topElement ? (
+                    <Column style={fullScreen ? undefined : styles.topElementSize}>
+                        <Column
+                            style={styles.topElementPosition}
+                            onLayout={handleTopElementLayout}
+                        >
+                            {topElement}
+                        </Column>
+                    </Column>
+                ) : null}
+
+                <Paper
+                    elevation={6}
+                    square={fullScreen}
+                    style={css([
+                        fullScreen ? styles.paperFullScreen : styles.paper,
+                        style,
+                    ])}
+                >
+                    {children}
+                </Paper>
+            </React.Fragment>
         </Modal>
     );
 };

package/src/Dialog/DialogProps.ts

@@ -1,8 +1,15 @@
 import React from 'react';
 import type { ModalProps } from '../Modal';
 import type { OverridableComponentProps } from '../types';
+import { ANIMATION_TYPE } from '../Modal';
 
 export default interface DialogProps extends OverridableComponentProps<ModalProps, {
+    /**
+     * Type of animation used when the dialog opens and closes.
+     * @default 'slide'
+     */
+    animationType?: ANIMATION_TYPE;
+
     /**
      * Dialog children, usually the included sub-components.
      */
@@ -13,4 +20,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/Divider/Divider.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
+import { ExtendedStyle } from '../types';
 import type DividerProps from './DividerProps';
 
 const styles = StyleSheet.create({
@@ -17,27 +18,29 @@ const styles = StyleSheet.create({
     divider: {
         flexGrow: 1,
     },
-    borderBottom: {
-        borderBottomWidth: 1,
-    },
-    borderRight: {
-        borderRightWidth: 1,
-    },
 });
 
 export default function Divider(props: DividerProps) {
     const {
+        borderWidth = 1,
         children: childrenProp,
+        color = 'divider',
+        elementAlign = 'center',
         inset = 0,
-        vertical = false,
+        marginBetweenChildren = 2,
         style,
+        vertical = false,
         ...otherProps
     } = props;
 
     const theme = useTheme();
 
     const fontColor = theme.palette.text.secondary;
-    const borderColor = theme.palette.divider;
+    const borderColor = color === 'divider'
+        ? theme.palette.divider
+        : color === 'border'
+            ? theme.palette.border.default
+            : theme.palette[color].main;
     const marginSize = theme.spacing(1);
     const insetSize = theme.spacing(inset);
 
@@ -55,7 +58,7 @@ export default function Divider(props: DividerProps) {
         : { marginLeft: insetSize, marginRight: insetSize };
 
     const borderColorStyle = { borderColor };
-    const borderWidthStyle = (vertical ? styles.borderRight : styles.borderBottom);
+    const borderWidthStyle = (vertical ? { borderRightWidth: borderWidth } : { borderBottomWidth: borderWidth });
 
     const containerStyle = css([
         insetStyle,
@@ -73,9 +76,15 @@ export default function Divider(props: DividerProps) {
         styles.divider,
     ]);
 
-    const dividerMarginSize = theme.spacing(2);
-    const startDividerStyle = vertical ? { marginBottom: dividerMarginSize } : { marginRight: dividerMarginSize };
-    const endDividerStyle = vertical ? { marginTop: dividerMarginSize } : { marginLeft: dividerMarginSize };
+    const dividerMarginSize = theme.spacing(marginBetweenChildren);
+    const startDividerStyle: ExtendedStyle = {
+        display: elementAlign !== 'start' ? 'flex' : 'none',
+        ...(vertical ? { marginBottom: dividerMarginSize } : { marginRight: dividerMarginSize }),
+    };
+    const endDividerStyle: ExtendedStyle = {
+        display: elementAlign !== 'end' ? 'flex' : 'none',
+        ...(vertical ? { marginTop: dividerMarginSize } : { marginLeft: dividerMarginSize }),
+    };
 
     const fontStyle = createFontStyle(theme, {
         selector: (typo) => typo.caption2,
@@ -87,11 +96,11 @@ export default function Divider(props: DividerProps) {
         : childrenProp;
 
     const children = childrenProp ? (
-        <>
+        <React.Fragment>
             <View style={css([dividerStyle, startDividerStyle])}/>
             {element}
             <View style={css([dividerStyle, endDividerStyle])}/>
-        </>
+        </React.Fragment>
     ) : null;
 
     return (

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}
+                    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,16 +1,22 @@
-import React from 'react';
-import type { WithTimingConfig } from 'react-native-reanimated';
-import Animated, { useAnimatedStyle, useSharedValue, withTiming } 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: 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,
@@ -19,31 +25,35 @@ export default function ImageCore(props: ImageCoreProps) {
         width,
     } = props;
 
-    const style = { width, height };
-
-    const opacity = useSharedValue(0);
+    const opacity = useAnimatedValue(INITIAL_OPACITY);
 
-    const animatedStyle = useAnimatedStyle(() => ({
-        opacity: opacity.value,
-    }));
+    const acceptHeader = useContext(ImageFileExtensionContext);
 
-    const handleLoad = () => {
-        opacity.value = 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;