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

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/AnimatedContainer/index.tsx

@@ -0,0 +1,172 @@
+import React, { useCallback, useEffect } from 'react';
+import { Animated, Easing, Platform, useWindowDimensions } from 'react-native';
+import * as R from 'ramda';
+import { useAnimatedValue } from '../../hooks';
+import { isNotAndroid12 } from '../../utils';
+import type ModalProps from '../ModalProps';
+import { ANIMATION_TYPE, AnimationUnit } from '../ModalProps';
+
+type AnimatedContainerProps = Pick<ModalProps,
+    | 'children'
+    | 'closeAnimation'
+    | 'initialOpacity'
+    | 'initialTranslateY'
+    | 'onEnter'
+    | 'onEntered'
+    | 'onExit'
+    | 'onExited'
+    | 'openAnimation'
+    | 'offsetAnimation'
+    | 'style'
+    | 'visible'>
+
+const DEFAULT_ANIMATION_CONFIG = {
+    duration: 300,
+    useNativeDriver: isNotAndroid12,
+};
+
+export default function AnimatedContainer(props: AnimatedContainerProps) {
+    const {
+        children,
+        closeAnimation,
+        initialOpacity,
+        initialTranslateY,
+        onEnter,
+        onEntered,
+        onExit,
+        onExited,
+        openAnimation,
+        offsetAnimation,
+        style,
+        visible,
+    } = props;
+
+    const { height: screenHeight } = useWindowDimensions();
+
+    const opacity = useAnimatedValue(initialOpacity ?? 0);
+
+    const translateY = useAnimatedValue(initialTranslateY ?? screenHeight);
+
+    const convertToCompositeAnimation = useCallback((animationUnit: AnimationUnit) => {
+        const {
+            type,
+            ...others
+        } = animationUnit;
+
+        switch (type) {
+            case ANIMATION_TYPE.FADE:
+                return Animated.timing(opacity, {
+                    ...others,
+                    useNativeDriver: isNotAndroid12,
+                });
+            case ANIMATION_TYPE.SLIDE:
+            default:
+                const easing = others.toValue === screenHeight
+                    ? Easing.in(Easing.ease)
+                    : Platform.OS === 'web'
+                        ? Easing.bezier(0.16, 1, 0.3, 1)
+                        : Easing.out(Easing.exp);
+
+                return Animated.timing(translateY, {
+                    ...others,
+                    easing,
+                    useNativeDriver: isNotAndroid12,
+                });
+        }
+    }, [screenHeight]);
+
+    useEffect(() => {
+        if (visible) {
+            onEnter?.();
+
+            if (R.isNil(openAnimation)) {
+                opacity.setValue(1);
+
+                Animated.timing(translateY, {
+                    ...DEFAULT_ANIMATION_CONFIG,
+                    easing: Platform.OS === 'web'
+                        ? Easing.bezier(0.16, 1, 0.3, 1)
+                        : Easing.out(Easing.exp),
+                    toValue: 0,
+                }).start(({ finished }) => {
+                    if (finished) {
+                        onEntered?.();
+                    }
+                });
+            } else {
+                const convertedAnimation = openAnimation.map((animationUnit) => {
+                    return convertToCompositeAnimation({
+                        ...DEFAULT_ANIMATION_CONFIG,
+                        ...animationUnit,
+                    });
+                });
+
+                Animated.parallel(convertedAnimation).start(({ finished }) => {
+                    if (finished) {
+                        onEntered?.();
+                    }
+                });
+            }
+        } else {
+            onExit?.();
+
+            if (R.isNil(closeAnimation)) {
+                opacity.setValue(1);
+
+                Animated.timing(translateY, {
+                    ...DEFAULT_ANIMATION_CONFIG,
+                    easing: Easing.in(Easing.ease),
+                    toValue: screenHeight,
+                }).start(({ finished }) => {
+                    if (finished) {
+                        onExited?.();
+                    }
+                });
+            } else {
+                const convertedAnimation = closeAnimation.map((animationUnit) => {
+                    return convertToCompositeAnimation({
+                        ...DEFAULT_ANIMATION_CONFIG,
+                        ...animationUnit,
+                    });
+                });
+
+                Animated.parallel(convertedAnimation).start(({ finished }) => {
+                    if (finished) {
+                        onExited?.();
+                    }
+                });
+            }
+        }
+    }, [convertToCompositeAnimation, visible]);
+
+    useEffect(() => {
+        if (visible && offsetAnimation && offsetAnimation.length > 0) {
+            opacity.setValue(1);
+            const convertedAnimation = offsetAnimation.map((animationUnit) => {
+                return convertToCompositeAnimation({
+                    ...DEFAULT_ANIMATION_CONFIG,
+                    ...animationUnit
+                });
+            });
+            Animated.parallel(convertedAnimation).start();
+        }
+    }, [visible, offsetAnimation, convertToCompositeAnimation]);
+
+    const animatedStyle = {
+        opacity,
+        transform: [{ translateY }],
+    };
+
+    return (
+        <Animated.View
+            needsOffscreenAlphaCompositing={true}
+            pointerEvents={'box-none'}
+            style={[
+                animatedStyle,
+                style,
+            ]}
+        >
+            {children}
+        </Animated.View>
+    );
+}

package/src/Modal/Modal.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import { View } from 'react-native';
 import { css, StyleSheet } from '../styles';
 import { useElevationStyle } from '../hooks';
-import Slide from '../Slide';
-import SimpleBackdrop from './SimpleBackdrop';
 import type ModalProps from './ModalProps';
+import AnimatedContainer from './AnimatedContainer';
+import SimpleBackdrop from './SimpleBackdrop';
 
 export type ModalCloseReasonType = 'OUTSIDE_PRESS' | 'HARDWARE_BACK_PRESS' | 'CLOSE_BUTTON_PRESS' | 'UNKNOWN';
 
@@ -25,9 +25,18 @@ export default function Modal(props: ModalProps) {
         animationStyle,
         backdropOpacity = 0.5,
         children,
+        closeAnimation,
         disableAnimation = false,
         hideBackdrop = false,
+        initialOpacity,
+        initialTranslateY,
         onClose,
+        onEnter: onEnterProp,
+        onEntered: onEnteredProp,
+        onExit: onExitProp,
+        onExited: onExitedProp,
+        openAnimation,
+        offsetAnimation,
         style,
         visible,
         ...otherProps
@@ -43,6 +52,24 @@ export default function Modal(props: ModalProps) {
 
     const elevationStyle = useElevationStyle(6);
 
+    const onEnter = () => {
+        setExited(false);
+        onEnterProp?.();
+    };
+
+    const onEntered = () => {
+        onEnteredProp?.();
+    };
+
+    const onExit = () => {
+        onExitProp?.();
+    };
+
+    const onExited = () => {
+        setExited(true);
+        onExitedProp?.();
+    };
+
     if (!visible) {
         if (disableAnimation || exited) {
             return null;
@@ -58,23 +85,28 @@ export default function Modal(props: ModalProps) {
             ])}
             {...otherProps}
         >
-            {(hideBackdrop || !visible) ? null : (
+            {(!hideBackdrop && visible) ? (
                 <SimpleBackdrop
                     onPress={handleBackdropPress}
                     opacity={backdropOpacity}
                 />
-            )}
+            ) : null}
 
             {!disableAnimation ? (
-                <Slide
-                    appear={visible}
-                    exitDuration={150}
-                    onEnter={() => setExited(false)}
-                    onExited={() => setExited(true)}
+                <AnimatedContainer
+                    children={children}
+                    closeAnimation={closeAnimation}
+                    initialOpacity={initialOpacity}
+                    initialTranslateY={initialTranslateY}
+                    onEnter={onEnter}
+                    onEntered={onEntered}
+                    onExit={onExit}
+                    onExited={onExited}
+                    openAnimation={openAnimation}
+                    offsetAnimation={offsetAnimation}
                     style={animationStyle}
-                >
-                    {children}
-                </Slide>
+                    visible={visible}
+                />
             ) : children}
         </View>
     );

package/src/Modal/ModalProps.ts

@@ -1,8 +1,21 @@
 import React from 'react';
 import type { ViewProps } from 'react-native';
+import { Animated } from 'react-native';
 import type { ComponentProps, OverridableComponentProps } from '../types';
 import { ModalCloseEvent } from './Modal';
 
+export const enum ANIMATION_TYPE {
+    SLIDE = 'slide',
+    FADE = 'fade',
+}
+
+export type AnimationUnit = Omit<Animated.TimingAnimationConfig, 'useNativeDriver'> & {
+    /**
+     * Type of animation used when the dialog opens and closes.
+     */
+    type: ANIMATION_TYPE;
+}
+
 export default interface ModalProps extends OverridableComponentProps<ViewProps, {
     /**
      * Style object provided to animation component.
@@ -26,16 +39,61 @@ export default interface ModalProps extends OverridableComponentProps<ViewProps,
      */
     disableAnimation?: boolean;
 
+    /**
+     * Animation used when the modal closes.
+     */
+    closeAnimation?: AnimationUnit[] | undefined;
+
     /**
      * If `true`, the backdrop is not rendered.
      * @default false
      */
     hideBackdrop?: boolean;
 
+    /**
+     * Set the initial value of opacity for animating.
+     */
+    initialOpacity?: number | undefined;
+
+    /**
+     * Set the initial value of transition y for animating.
+     */
+    initialTranslateY?: number | undefined;
+
     /**
      * Callback fired when the component requests to be closed.
      */
-    onClose?: (event?: ModalCloseEvent) => void,
+    onClose?: (event?: ModalCloseEvent) => void;
+
+    /**
+     * Callback fired when the enter animation will start.
+     */
+    onEnter?: () => void | undefined;
+
+    /**
+     * Callback fired when the enter animation is completed.
+     */
+    onEntered?: () => void | undefined;
+
+    /**
+     * Callback fired when the exit animation will start.
+     */
+    onExit?: () => void | undefined;
+
+    /**
+     * Callback fired when the exit animation is completed.
+     */
+    onExited?: () => void | undefined;
+
+    /**
+     * Animation used when the modal opens.
+     */
+    openAnimation?: AnimationUnit[] | undefined;
+
+    /**
+     * Additional offset animation applied when the modal opens.
+     */
+    offsetAnimation?: AnimationUnit[] | undefined;
 
     /**
      * If `true`, the modal is visible.

package/src/Modal/index.ts

@@ -1,3 +1,4 @@
 export { default, createModalCloseEvent } from './Modal';
 export type { ModalCloseEvent } from './Modal';
-export type { default as ModalProps } from './ModalProps';
+export type { default as ModalProps, AnimationUnit } from './ModalProps';
+export { ANIMATION_TYPE } from './ModalProps';

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';
 
@@ -23,7 +23,10 @@ export default function Radio(props: RadioProps) {
     const {
         checked = false,
         children,
+        checkedIcon: checkIconProp,
+        uncheckedIcon: uncheckedIconProp,
         disabled = false,
+        iconPlacement = 'left',
         onChange: onChangeProp,
         style,
         value,
@@ -32,8 +35,6 @@ export default function Radio(props: RadioProps) {
 
     const styles = useStyles();
 
-    const theme = useTheme();
-
     const context = React.useContext(RadioContext);
 
     const handlePress = () => {
@@ -45,9 +46,9 @@ export default function Radio(props: RadioProps) {
 
     const isChecked = context?.value === value ?? checked;
 
-    const icon = isChecked
-        ? <RadioCheckedIcon width={ICON_SIZE} height={ICON_SIZE} color={'primary'}/>
-        : <RadioIcon width={ICON_SIZE} height={ICON_SIZE} color={'tertiary'}/>;
+    const checkedIcon = checkIconProp ?? <RadioCheckedIcon width={ICON_SIZE} height={ICON_SIZE} color={'primary'}/>;
+    const uncheckedIcon = uncheckedIconProp ?? <RadioIcon width={ICON_SIZE} height={ICON_SIZE} color={'tertiary'}/>;
+    const icon = isChecked ? checkedIcon : uncheckedIcon;
 
     const rootStyle = css([
         styles.root,
@@ -61,9 +62,11 @@ export default function Radio(props: RadioProps) {
             style={rootStyle}
             {...otherProps}
         >
-            {icon}
+            {iconPlacement === 'left' ? icon : null}
 
             {children ? children : null}
+
+            {iconPlacement === 'right' ? icon : null}
         </ButtonBase>
     );
 };

package/src/Radio/RadioProps.ts

@@ -31,4 +31,20 @@ export default interface RadioProps extends OverridableComponentProps<BaseProps,
      * Value of the component.
      */
     value: string;
+
+    /**
+     * Determines the placement of the icon relative to the children.
+     * @default 'left'
+     */
+    iconPlacement?: 'right' | 'left';
+
+    /**
+     * Custom icon element to display when the radio is unchecked.
+     */
+    uncheckedIcon?: React.ReactNode;
+
+    /**
+     * Custom icon element to display when the radio is checked.
+     */
+    checkedIcon?: React.ReactNode;
 }> {}

package/src/Slide/Slide.tsx

@@ -1,12 +1,15 @@
-import React from 'react';
-import { useWindowDimensions } from 'react-native';
-import type { WithTimingConfig } from 'react-native-reanimated';
-import Animated, { Easing, runOnJS, useAnimatedStyle, useSharedValue, withTiming } 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,
@@ -21,40 +24,42 @@ export default function Slide(props: SlideProps) {
         ...otherProps
     } = props;
 
-    const window = useWindowDimensions();
-
-    const y = useSharedValue(window.height);
+    const y = useAnimatedValue(getDisappearingOffsetY());
     const animatedY = animatedYProp || y;
 
-    const animatedStyle = useAnimatedStyle(() => ({
-        transform: [{ translateY: animatedY.value }],
-    }));
+    const animatedStyle = {
+        transform: [{ translateY: animatedY }],
+    };
 
-    React.useEffect(() => {
+    useEffect(() => {
         if (appear) {
-            const enterConfig: WithTimingConfig = {
-                duration: enterDuration,
-                easing: Easing.out(Easing.exp),
-            };
-
             onEnter?.();
 
-            animatedY.value = withTiming(0, enterConfig, isFinished => {
-                if (isFinished && onEntered) {
-                    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: WithTimingConfig = {
-                duration: exitDuration,
-                easing: Easing.in(Easing.ease),
-            };
-
             onExit?.();
 
-            animatedY.value = withTiming(window.height, exitConfig, isFinished => {
-                if (isFinished && onExited) {
-                    runOnJS(onExited)();
+            const toValue = getDisappearingOffsetY();
+            Animated.timing(animatedY, {
+                toValue,
+                duration: exitDuration,
+                easing: Easing.in(Easing.ease),
+                useNativeDriver: isNotAndroid12,
+            }).start(({ finished }) => {
+                if (finished && onExited) {
+                    onExited();
                 }
             });
         }
@@ -62,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.