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

package/src/Pagination/LegacyPaginationProps.ts

@@ -0,0 +1,85 @@
+import React from 'react';
+import type { ViewProps } from 'react-native';
+import type { OverridableComponentProps } from '../types';
+
+export interface PaginationRenderItemParams {
+    /**
+     * Index of the pagination item.
+     */
+    index: number;
+
+    /**
+     * If `true`, the pagination item is disabled.
+     */
+    disabled: boolean;
+
+    /**
+     * If `true` the pagination item is selected.
+     */
+    selected: boolean;
+}
+
+export default interface PaginationProps extends OverridableComponentProps<ViewProps, {
+    /**
+     * The Number of pages that change when the button is pressed
+     * @default 1
+     */
+    bundleSize?: number,
+
+    /**
+     * The pagination will be added relative to this node.
+     */
+    children?: React.ReactNode;
+
+    /**
+     * The total number of pages.
+     */
+    count: number,
+
+    /**
+     * If `true`, the pagination is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+
+
+    /**
+     * If `true`, hide the page indicator.
+     * @default false
+     */
+    hideIndicator?: boolean,
+
+    /**
+     * If `true`, hide the next-page button.
+     * @default false
+     */
+    hideNextButton?: boolean,
+
+    /**
+     * If `true`, hide the previous-page button.
+     * @default false
+     */
+    hidePrevButton?: boolean,
+
+    /**
+     * If `true`, pagination is infinite.
+     * @default false
+     */
+    infinite?: boolean,
+
+    /**
+     * Callback fired when the page is changed.
+     */
+    onChange?: (page: number) => void,
+
+    /**
+     * The current page number.
+     */
+    page: number;
+
+    /**
+     * Render the item.
+     * @default (item) => <PaginationItem {...item} />
+     */
+    renderItem?: (params: PaginationRenderItemParams) => React.ReactNode;
+}> {}

package/src/Pagination/NumberPagination.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Text } from 'react-native';
+import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { commonColors, typographyOf } from '@fountain-ui/styles';
+import Divider from '../Divider';
+import Row from '../Row';
+import { createFontStyle, useTheme } from '../styles';
+import type PaginationProps from './PaginationProps';
+
+type NumberPaginationStyles = NamedStylesStringUnion<'root' | 'divider'>;
+
+const useStyles: UseStyles<NumberPaginationStyles> = function (): NumberPaginationStyles {
+    const theme = useTheme();
+
+    return {
+        root: {
+            backgroundColor: commonColors.static.weakOpacity,
+            borderRadius: theme.shape.radius.full,
+            paddingHorizontal: theme.spacing(1.25),
+            paddingVertical: theme.spacing(0.5),
+        },
+        divider: {
+            alignSelf: 'center',
+            borderColor: commonColors.static.weakOpacityInverse,
+            height: 6,
+        },
+    };
+};
+
+interface NumberPaginationProps {
+    currentPage: PaginationProps['page'];
+    maxPage: PaginationProps['count'];
+}
+
+export default function NumberPagination(props: NumberPaginationProps) {
+    const {
+        currentPage,
+        maxPage,
+    } = props;
+
+    const styles = useStyles();
+
+    const theme = useTheme();
+
+    const typography = typographyOf({
+        fontSize: 9.5,
+        lineHeight: 11.4,
+        fontFamily: 'Pretendard-SemiBold',
+        letterSpacing: -0.19,
+    });
+
+    const currentFontStyle = createFontStyle(theme, {
+        selector: (_) => typography,
+        color: commonColors.static.strongInverse,
+    });
+
+    const countFontStyle = createFontStyle(theme, {
+        selector: (_) => typography,
+        color: commonColors.static.baseOpacityInverse,
+    });
+
+    return (
+        <Row style={styles.root}>
+            <Text style={currentFontStyle}>
+                {currentPage + 1}
+            </Text>
+
+            <Divider
+                style={styles.divider}
+                vertical={true}
+            />
+
+            <Text style={countFontStyle}>
+                {maxPage}
+            </Text>
+        </Row>
+    );
+}

package/src/Pagination/Pagination.tsx

@@ -6,7 +6,9 @@ import { ChevronLeft, ChevronRight } from '../internal/icons';
 import { css, useTheme } from '../styles';
 import IconButton from '../IconButton';
 import PaginationItem from '../PaginationItem';
+import NumberPagination from './NumberPagination';
 import type PaginationProps from './PaginationProps';
+import type { PaginationVariant } from './PaginationProps';
 
 type PaginationStyleKeys =
     | 'root'
@@ -73,6 +75,7 @@ export default function Pagination(props: PaginationProps) {
         page,
         renderItem = ({ index, ...rest }) => <PaginationItem key={`${index}`} {...rest}/>,
         style,
+        variant = 'dot' as PaginationVariant,
         ...otherProps
     } = props;
 
@@ -107,28 +110,35 @@ export default function Pagination(props: PaginationProps) {
 
     const prevButton = !hidePrevButton ? (
         <IconButton
-            children={<ChevronLeft/>}
             color={'tertiary'}
             disabled={disabled || (!infinite && page <= firstPage)}
             onPress={handlePrevPress}
             size={'small'}
             style={children ? styles.prevAnchor : styles.prevInline}
-        />
+        >
+            <ChevronLeft/>
+        </IconButton>
     ) : null;
 
     const nextButton = !hideNextButton ? (
         <IconButton
-            children={<ChevronRight/>}
             color={'tertiary'}
             disabled={disabled || (!infinite && page + bundleSize > lastPage)}
             onPress={handleNextPress}
             size={'small'}
             style={children ? styles.nextAnchor : styles.nextInline}
-        />
+        >
+            <ChevronRight/>
+        </IconButton>
     ) : null;
 
     const items = !hideIndicator ? (
-        times(i => renderItem({ index: i, disabled, selected: i === page }), count)
+        variant === 'number' ? (
+            <NumberPagination
+                currentPage={page}
+                maxPage={count}
+            />
+        ) : times(i => renderItem({ index: i, disabled, selected: i === page }), count)
     ) : null;
 
     const containerProps = {

package/src/Pagination/PaginationProps.ts

@@ -2,6 +2,9 @@ import React from 'react';
 import type { ViewProps } from 'react-native';
 import type { OverridableComponentProps } from '../types';
 
+export const paginationVariants = ['dot', 'number'] as const;
+export type PaginationVariant = typeof paginationVariants[number];
+
 export interface PaginationRenderItemParams {
     /**
      * Index of the pagination item.
@@ -82,4 +85,10 @@ export default interface PaginationProps extends OverridableComponentProps<ViewP
      * @default (item) => <PaginationItem {...item} />
      */
     renderItem?: (params: PaginationRenderItemParams) => React.ReactNode;
+
+    /**
+     * Determines design variations of the component.
+     * @default 'dot'
+     */
+    variant?: PaginationVariant;
 }> {}

package/src/Pagination/index.ts

@@ -1,2 +1,2 @@
-export { default } from './Pagination';
-export type { default as PaginationProps } from './PaginationProps';
+export { default } from './LegacyPagination';
+export type { default as PaginationProps } from './LegacyPaginationProps';

package/src/PaginationItem/LegacyPaginationItem.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { View } from 'react-native';
+import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { css, useTheme } from '../styles';
+import type PaginationItemProps from './PaginationItemProps';
+
+type PaginationItemStyles = NamedStylesStringUnion<'root' | 'selected' | 'unselected'>;
+
+const useStyles: UseStyles<PaginationItemStyles> = function (): PaginationItemStyles {
+    const theme = useTheme();
+
+    const size = 6;
+
+    return {
+        root: {
+            width: size,
+            height: size,
+            borderRadius: size * 0.5,
+            marginHorizontal: theme.spacing(1),
+        },
+        selected: {
+            backgroundColor: theme.palette.secondary.main,
+        },
+        unselected: {
+            backgroundColor: '#D1D1D1',
+        },
+    };
+};
+
+function PaginationItem(props: PaginationItemProps) {
+    const {
+        disabled,
+        selected,
+        style,
+        ...otherProps
+    } = props;
+
+    const styles = useStyles();
+
+    return (
+        <View
+            style={css([
+                styles.root,
+                selected ? styles.selected : styles.unselected,
+                style,
+            ])}
+            {...otherProps}
+        />
+    );
+}
+
+export default React.memo(PaginationItem);

package/src/PaginationItem/PaginationItem.tsx

@@ -19,10 +19,10 @@ const useStyles: UseStyles<PaginationItemStyles> = function (): PaginationItemSt
             marginHorizontal: theme.spacing(1),
         },
         selected: {
-            backgroundColor: theme.palette.secondary.main,
+            backgroundColor: theme.palette.fill.base,
         },
         unselected: {
-            backgroundColor: '#D1D1D1',
+            backgroundColor: theme.palette.status.disabled,
         },
     };
 };

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';