@fountain-ui/core 2.0.0-beta.92 → 2.0.0-beta.94

package/src/Radio/Radio.tsx

@@ -1,20 +1,29 @@
-import React from 'react';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import React, { useContext } from 'react';
+import { Text } from 'react-native';
+import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import ButtonBase from '../ButtonBase';
-import { Radio as RadioIcon, RadioChecked as RadioCheckedIcon } from '../internal';
-import { css } from '../styles';
+import { Check as CheckedIcon } from '../internal';
+import Row from '../Row';
+import { createFontStyle, css, useTheme } from '../styles';
+import { cloneElementSafely } from '../utils';
 import { RadioContext } from '../RadioGroup/RadioContextProvider';
 import type RadioProps from './RadioProps';
 
-type RadioStyles = NamedStylesStringUnion<'root'>;
-
-const ICON_SIZE = 20;
+type RadioStyles = NamedStylesStringUnion<'root' | 'content'>;
 
 const useStyles: UseStyles<RadioStyles> = function (): RadioStyles {
+    const theme = useTheme();
+
     return {
         root: {
             alignItems: 'center',
             flexDirection: 'row',
+            gap: theme.spacing(8),
+            justifyContent: 'space-between',
+        },
+        content: {
+            gap: theme.spacing(2),
+            minHeight: 20,
         },
     };
 };
@@ -24,18 +33,19 @@ export default function Radio(props: RadioProps) {
         checked = false,
         children,
         checkedIcon: checkIconProp,
-        uncheckedIcon: uncheckedIconProp,
         disabled = false,
-        iconPlacement = 'left',
         onChange: onChangeProp,
+        startIcon: startIconProp,
         style,
         value,
         ...otherProps
     } = props;
 
+    const theme = useTheme();
+
     const styles = useStyles();
 
-    const context = React.useContext(RadioContext);
+    const context = useContext(RadioContext);
 
     const handlePress = () => {
         const onChange = context?.onChange ?? onChangeProp;
@@ -46,15 +56,28 @@ export default function Radio(props: RadioProps) {
 
     const isChecked = context?.value === value ?? checked;
 
-    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 defaultCheckedIcon = (
+        <CheckedIcon
+            color={'accent'}
+            enableV2={true}
+        />
+    );
+
+    const checkedIcon = checkIconProp ?? defaultCheckedIcon;
+    const icon = isChecked ? checkedIcon : null;
+
+    const startIcon = cloneElementSafely(startIconProp, { color: 'strong' });
 
     const rootStyle = css([
         styles.root,
         style,
     ]);
 
+    const fontStyle = createFontStyle(theme, {
+        // TODO: apply typo select.
+        color: theme.palette.text.strong,
+    });
+
     return (
         <ButtonBase
             disabled={disabled}
@@ -62,11 +85,19 @@ export default function Radio(props: RadioProps) {
             style={rootStyle}
             {...otherProps}
         >
-            {iconPlacement === 'left' ? icon : null}
+            <Row
+                alignItems={'center'}
+                style={styles.content}
+            >
+                {startIcon}
 
-            {children ? children : null}
+                <Text
+                    children={children}
+                    style={fontStyle}
+                />
+            </Row>
 
-            {iconPlacement === 'right' ? icon : null}
+            {icon}
         </ButtonBase>
     );
 };

package/src/Radio/RadioProps.ts

@@ -11,10 +11,15 @@ export default interface RadioProps extends OverridableComponentProps<BaseProps,
      */
     checked?: boolean;
 
+    /**
+     * Custom icon element to display when the radio is checked.
+     */
+    checkedIcon?: React.ReactNode;
+
     /**
      * Content which is sharing pressable next to radio.
      */
-    children?: React.ReactNode;
+    children?: string;
 
     /**
      * If `true`, the radio is disabled.
@@ -28,23 +33,12 @@ export default interface RadioProps extends OverridableComponentProps<BaseProps,
     onChange?: (newValue: string) => void;
 
     /**
-     * Value of the component.
+     * Element placed before the children.
      */
-    value: string;
+    startIcon?: React.ReactElement;
 
     /**
-     * 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.
+     * Value of the component.
      */
-    checkedIcon?: React.ReactNode;
+    value: string;
 }> {}

package/src/Radio/index.ts

@@ -1,2 +1,2 @@
-export { default } from './Radio';
-export type { default as RadioProps } from './RadioProps';
+export { default } from './LegacyRadio';
+export type { default as RadioProps } from './LegacyRadioProps';

package/src/RadioGroup/LegacyRadioGroup.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { View } from 'react-native';
+import RadioContextProvider from './RadioContextProvider';
+import type RadioGroupProps from './RadioGroupProps';
+
+export default function RadioGroup(props: RadioGroupProps) {
+    const {
+        value,
+        onChange,
+        ...otherProps
+    } = props;
+
+    return (
+        <RadioContextProvider value={{ value, onChange }}>
+            <View
+                {...otherProps}
+            />
+        </RadioContextProvider>
+    );
+};

package/src/RadioGroup/RadioGroup.tsx

@@ -1,20 +1,47 @@
-import React from 'react';
+import React, { Children } from 'react';
 import { View } from 'react-native';
+import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { useTheme } from '../styles';
+import type { FalsyReactElement } from '../utils';
+import { cloneElementSafely } from '../utils';
 import RadioContextProvider from './RadioContextProvider';
 import type RadioGroupProps from './RadioGroupProps';
 
+type RadioItemStyles = NamedStylesStringUnion<'root'>;
+
+const useStyles: UseStyles<RadioItemStyles> = function (): RadioItemStyles {
+    const theme = useTheme();
+
+    return {
+        root: {
+            borderBottomColor: theme.palette.border.weak,
+            borderBottomWidth: 0.5,
+            paddingVertical: theme.spacing(3.5),
+        },
+    };
+};
+
 export default function RadioGroup(props: RadioGroupProps) {
     const {
+        children,
         value,
         onChange,
         ...otherProps
     } = props;
 
+    const styles = useStyles();
+
+    const radios = Children.map(children, (child) => (
+        <View style={styles.root}>
+            {cloneElementSafely(child as FalsyReactElement)}
+        </View>
+    ));
+
     return (
         <RadioContextProvider value={{ value, onChange }}>
-            <View
-                {...otherProps}
-            />
+            <View {...otherProps}>
+                {radios}
+            </View>
         </RadioContextProvider>
     );
 };

package/src/RadioGroup/index.ts

@@ -1,2 +1,2 @@
-export { default } from './RadioGroup';
-export type { default as RadioGroupProps } from './RadioGroupProps';
+export { default } from './LegacyRadioGroup';
+export type { default as RadioGroupProps } from './RadioGroupProps';

package/src/ShadowView/ShadowView.native.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { ShadowVariant } from '@fountain-ui/styles';
+import { css, useTheme } from '../styles';
+import type ShadowViewProps from './ShadowViewProps';
+
+export default function ShadowView(props: ShadowViewProps) {
+    const {
+        children,
+        style: styleProp,
+        variant = 100 as ShadowVariant,
+        ...otherProps
+    } = props;
+
+    const theme = useTheme();
+
+    const { nativeShadows } = theme.shadow[variant];
+
+    const content = nativeShadows.reduce((accumulator, nativeShadow) => {
+        return (
+            <View
+                style={css([
+                    { ...nativeShadow },
+                    styleProp,
+                ])}
+            >
+                {accumulator}
+            </View>
+        );
+    }, children);
+
+    return (
+        <View {...otherProps}>
+            {content}
+        </View>
+    );
+}

package/src/ShadowView/ShadowView.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { View } from 'react-native';
+import { ReactNativeStyle } from '@emotion/native';
+import type { ShadowVariant } from '@fountain-ui/styles';
+import { css, useTheme } from '../styles';
+import type ShadowViewProps from './ShadowViewProps';
+
+export default function ShadowView(props: ShadowViewProps) {
+    const {
+        children,
+        style: styleProp,
+        variant = 100 as ShadowVariant,
+        ...otherProps
+    } = props;
+
+    const theme = useTheme();
+
+    const { webShadow } = theme.shadow[variant];
+
+    const containerStyle = css([
+        { ...webShadow } as ReactNativeStyle,
+        styleProp,
+    ]);
+
+    return (
+        <View
+            {...otherProps}
+            style={containerStyle}
+        >
+            {children}
+        </View>
+    );
+}

package/src/ShadowView/ShadowViewProps.ts

@@ -0,0 +1,11 @@
+import { ViewProps } from 'react-native';
+import type { ShadowVariant } from '@fountain-ui/styles';
+import { OverridableComponentProps } from '../types';
+
+export default interface ShadowViewProps extends OverridableComponentProps<ViewProps, {
+    /**
+     * Determines the darkness of the shadow.
+     * @default 100
+     */
+    variant?: ShadowVariant;
+}> {}

package/src/ShadowView/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ShadowView';
+export type { default as ShadowViewProps } from './ShadowViewProps';

package/src/Snackbar/LegacySnackbar.tsx

@@ -0,0 +1,130 @@
+import React, { useEffect } from 'react';
+import { Animated, Easing } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import Slide from '../Slide';
+import SnackbarContent from '../SnackbarContent';
+import { useAnimatedValue } from '../hooks';
+import { useTheme } from '../styles';
+import { isNotAndroid12 } from '../utils';
+import type SnackbarProps from './LegacySnackbarProps';
+
+type SnackBarStyles = NamedStylesStringUnion<'root'>;
+
+const fadeDuration = 300;
+const fadeAnimationDelay = 100;
+
+const useStyles: UseStyles<SnackBarStyles> = function (): SnackBarStyles {
+    const theme = useTheme();
+    const insets = useSafeAreaInsets();
+
+    return {
+        root: {
+            alignSelf: 'center',
+            bottom: theme.spacing(2),
+            maxWidth: 480,
+            paddingBottom: insets.bottom,
+            paddingHorizontal: theme.spacing(2),
+            position: 'absolute',
+            width: '100%',
+            // TODO: Need to remove zIndex.
+            zIndex: 32,
+        },
+    };
+};
+
+export default function Snackbar(props: SnackbarProps) {
+    const {
+        actionLabel,
+        animatedY,
+        autoHideDuration = null,
+        children,
+        message,
+        title,
+        startIcon,
+        onActionPress,
+        onClose,
+        style,
+        visible = false,
+        ...otherProps
+    } = props;
+
+    const autoHideTimer = React.useRef<number | null>(null);
+
+    const clearAutoHideTimeout = () => {
+        if (autoHideTimer.current !== null) {
+            clearTimeout(autoHideTimer.current);
+        }
+    };
+
+    React.useEffect(() => {
+        return () => {
+            clearAutoHideTimeout();
+        };
+    }, []);
+
+    React.useEffect(() => {
+        if (visible && autoHideDuration !== null) {
+            clearAutoHideTimeout();
+
+            // @ts-ignore
+            autoHideTimer.current = setTimeout(() => {
+                if (onClose) {
+                    onClose();
+                }
+            }, autoHideDuration);
+        }
+    }, [visible, autoHideDuration, onClose]);
+
+    const styles = useStyles();
+
+    const [exited, setExited] = React.useState(true);
+
+    const animatedOpacity = useAnimatedValue(0);
+
+    const animatedStyle = {
+        opacity: animatedOpacity,
+    };
+
+    useEffect(() => {
+        Animated.timing(animatedOpacity, {
+            toValue: visible ? 1 : 0,
+            duration: fadeDuration,
+            delay: visible ? fadeAnimationDelay : 0,
+            easing: Easing.out(Easing.exp),
+            useNativeDriver: isNotAndroid12,
+        }).start();
+    }, [visible]);
+
+    if (!visible && exited) {
+        return null;
+    }
+
+    return (
+        <Animated.View
+            style={[
+                animatedStyle,
+                styles.root,
+                style,
+            ]}
+            {...otherProps}
+        >
+            <Slide
+                animatedY={animatedY}
+                appear={visible}
+                onEnter={() => setExited(false)}
+                onExited={() => setExited(true)}
+            >
+                {children ? children : (
+                    <SnackbarContent
+                        title={title}
+                        startIcon={startIcon}
+                        actionLabel={actionLabel}
+                        message={message}
+                        onActionPress={onActionPress}
+                    />
+                )}
+            </Slide>
+        </Animated.View>
+    );
+};

package/src/Snackbar/LegacySnackbarProps.ts

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import type { Animated, ViewProps } from 'react-native';
+import type { OverridableComponentProps } from '../types';
+
+export default interface SnackbarProps extends OverridableComponentProps<ViewProps, {
+    /**
+     * The text to use for the action component.
+     */
+    actionLabel?: string;
+
+    /**
+     * y value for animating.
+     */
+    animatedY?: Animated.Value;
+
+    /**
+     * The number of milliseconds to wait before automatically calling the
+     * `onDismiss` function. `onDismiss` should then set the state of the `visible`
+     * prop to hide the `Snackbar`. This behavior is disabled by default with
+     * the `null` value.
+     * @default null
+     */
+    autoHideDuration?: number | null;
+
+    /**
+     * Replace the `SnackbarContent` component.
+     */
+    children?: React.ReactNode;
+
+    /**
+     * The message to display.
+     */
+    message?: string;
+
+    /**
+     * Callback fired when the action component pressed.
+     */
+    onActionPress?: () => void;
+
+    /**
+     * Callback fired when the component requests to be closed.
+     */
+    onClose?: () => void;
+
+    /**
+     * Element placed before the title and message.
+     */
+    startIcon?: React.ReactElement;
+
+    /**
+     * The title to display.
+     */
+    title?: string;
+
+    /**
+     * If `true`, `Snackbar` is shown.
+     * @default false
+     */
+    visible?: boolean;
+}> {}

package/src/Snackbar/Snackbar.tsx

@@ -3,7 +3,7 @@ import { Animated, Easing } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import Slide from '../Slide';
-import SnackbarContent from '../SnackbarContent';
+import SnackbarContent from '../SnackbarContent/SnackbarContent';
 import { useAnimatedValue } from '../hooks';
 import { useTheme } from '../styles';
 import { isNotAndroid12 } from '../utils';
@@ -35,14 +35,15 @@ const useStyles: UseStyles<SnackBarStyles> = function (): SnackBarStyles {
 
 export default function Snackbar(props: SnackbarProps) {
     const {
-        actionLabel,
+        actionContent,
         animatedY,
         autoHideDuration = null,
         children,
         message,
         title,
         startIcon,
-        onActionPress,
+        status = 'info',
+        onPress,
         onClose,
         style,
         visible = false,
@@ -119,9 +120,10 @@ export default function Snackbar(props: SnackbarProps) {
                     <SnackbarContent
                         title={title}
                         startIcon={startIcon}
-                        actionLabel={actionLabel}
+                        status={status}
+                        actionContent={actionContent}
                         message={message}
-                        onActionPress={onActionPress}
+                        onPress={onPress}
                     />
                 )}
             </Slide>

package/src/Snackbar/SnackbarProps.ts

@@ -1,13 +1,15 @@
 import React from 'react';
-
 import type { Animated, ViewProps } from 'react-native';
 import type { OverridableComponentProps } from '../types';
 
+export const snackbarStatus = ['info', 'success', 'fail'] as const;
+export type SnackbarStatus = typeof snackbarStatus[number];
+
 export default interface SnackbarProps extends OverridableComponentProps<ViewProps, {
     /**
      * The text to use for the action component.
      */
-    actionLabel?: string;
+    actionContent?: string | React.ReactNode;
 
     /**
      * y value for animating.
@@ -36,7 +38,7 @@ export default interface SnackbarProps extends OverridableComponentProps<ViewPro
     /**
      * Callback fired when the action component pressed.
      */
-    onActionPress?: () => void;
+    onPress?: () => void;
 
     /**
      * Callback fired when the component requests to be closed.
@@ -48,6 +50,12 @@ export default interface SnackbarProps extends OverridableComponentProps<ViewPro
      */
     startIcon?: React.ReactElement;
 
+    /**
+     * The status of the snackbar, which determines its visual style and optional icon.
+     * @default 'info'
+     */
+    status?: SnackbarStatus;
+
     /**
      * The title to display.
      */

package/src/Snackbar/index.ts

@@ -1,2 +1,2 @@
-export { default } from './Snackbar';
-export type { default as SnackbarProps } from './SnackbarProps';
+export { default } from './LegacySnackbar';
+export type { default as SnackbarProps } from './LegacySnackbarProps';