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

package/src/Pagination/LegacyPagination.tsx

@@ -0,0 +1,168 @@
+import React from 'react';
+import { View } from 'react-native';
+import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { times } from '@fountain-ui/utils';
+import { ChevronLeft, ChevronRight } from '../internal/icons';
+import { css, useTheme } from '../styles';
+import IconButton from '../IconButton';
+import PaginationItem from '../PaginationItem/LegacyPaginationItem';
+import type PaginationProps from './LegacyPaginationProps';
+
+type PaginationStyleKeys =
+    | 'root'
+    | 'rootInline'
+    | 'rootAnchor'
+    | 'items'
+    | 'arrowContainer'
+    | 'prevInline'
+    | 'prevAnchor'
+    | 'nextInline'
+    | 'nextAnchor';
+
+type PaginationStyles = NamedStylesStringUnion<PaginationStyleKeys>;
+
+const useStyles: UseStyles<PaginationStyles> = function (): PaginationStyles {
+    const theme = useTheme();
+
+    return {
+        root: {},
+        rootInline: {
+            flexDirection: 'row',
+            alignItems: 'center',
+        },
+        rootAnchor: {
+            flexDirection: 'column',
+        },
+        items: {
+            flexDirection: 'row',
+            justifyContent: 'center',
+            marginTop: theme.spacing(2),
+        },
+        arrowContainer: {
+            flexDirection: 'column',
+            justifyContent: 'center',
+        },
+        prevInline: {
+            marginRight: theme.spacing(1),
+        },
+        prevAnchor: {
+            position: 'absolute',
+            left: -24,
+        },
+        nextInline: {
+            marginLeft: theme.spacing(1),
+        },
+        nextAnchor: {
+            position: 'absolute',
+            right: -24,
+        },
+    };
+};
+
+export default function Pagination(props: PaginationProps) {
+    const {
+        bundleSize = 1,
+        children,
+        count,
+        disabled = false,
+        hideIndicator = false,
+        hideNextButton = false,
+        hidePrevButton = false,
+        infinite = false,
+        onChange,
+        page,
+        renderItem = ({ index, ...rest }) => <PaginationItem key={`${index}`} {...rest}/>,
+        style,
+        ...otherProps
+    } = props;
+
+    const styles = useStyles();
+
+    const firstPage = 0;
+    const lastPage = count - 1;
+
+    const handleChange = (nextPage: number) => {
+        if (nextPage >= firstPage && nextPage <= lastPage) {
+            if (onChange) {
+                onChange(nextPage);
+            }
+        }
+    };
+
+    const handlePrevPress = () => {
+        const prevPage = page - bundleSize >= firstPage
+            ? page - bundleSize
+            : (infinite ? count - bundleSize + page : firstPage);
+
+        handleChange(prevPage);
+    };
+
+    const handleNextPress = () => {
+        const nextPage = page + bundleSize <= lastPage
+            ? page + bundleSize
+            : (infinite ? page + bundleSize - count : lastPage);
+
+        handleChange(nextPage);
+    };
+
+    const prevButton = !hidePrevButton ? (
+        <IconButton
+            color={'tertiary'}
+            disabled={disabled || (!infinite && page <= firstPage)}
+            onPress={handlePrevPress}
+            size={'small'}
+            style={children ? styles.prevAnchor : styles.prevInline}
+        >
+            <ChevronLeft/>
+        </IconButton>
+    ) : null;
+
+    const nextButton = !hideNextButton ? (
+        <IconButton
+            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)
+    ) : null;
+
+    const containerProps = {
+        style: css([
+            styles.root,
+            children ? styles.rootAnchor : styles.rootInline,
+            style,
+        ]),
+        ...otherProps,
+    };
+
+    if (children) {
+        return (
+            <View {...containerProps}>
+                <View style={css(styles.arrowContainer)}>
+                    {children}
+                    {prevButton}
+                    {nextButton}
+                </View>
+
+                <View style={css(styles.items)}>
+                    {items}
+                </View>
+            </View>
+        );
+    }
+
+    return (
+        <View {...containerProps}>
+            {prevButton}
+            {items}
+            {nextButton}
+        </View>
+    );
+};

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/Radio/LegacyRadio.tsx

@@ -0,0 +1,72 @@
+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 } from '../styles';
+import { RadioContext } from '../RadioGroup/RadioContextProvider';
+import type RadioProps from './LegacyRadioProps';
+
+type RadioStyles = NamedStylesStringUnion<'root'>;
+
+const ICON_SIZE = 20;
+
+const useStyles: UseStyles<RadioStyles> = function (): RadioStyles {
+    return {
+        root: {
+            alignItems: 'center',
+            flexDirection: 'row',
+        },
+    };
+};
+
+export default function Radio(props: RadioProps) {
+    const {
+        checked = false,
+        children,
+        checkedIcon: checkIconProp,
+        uncheckedIcon: uncheckedIconProp,
+        disabled = false,
+        iconPlacement = 'left',
+        onChange: onChangeProp,
+        style,
+        value,
+        ...otherProps
+    } = props;
+
+    const styles = useStyles();
+
+    const context = React.useContext(RadioContext);
+
+    const handlePress = () => {
+        const onChange = context?.onChange ?? onChangeProp;
+        if (onChange) {
+            onChange(value);
+        }
+    };
+
+    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 rootStyle = css([
+        styles.root,
+        style,
+    ]);
+
+    return (
+        <ButtonBase
+            disabled={disabled}
+            onPress={handlePress}
+            style={rootStyle}
+            {...otherProps}
+        >
+            {iconPlacement === 'left' ? icon : null}
+
+            {children ? children : null}
+
+            {iconPlacement === 'right' ? icon : null}
+        </ButtonBase>
+    );
+};

package/src/Radio/LegacyRadioProps.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import type { OverridableComponentProps } from '../types';
+import type { ButtonBaseProps } from '../ButtonBase';
+
+type BaseProps = Omit<ButtonBaseProps, 'onPress' | 'children'>;
+
+export default interface RadioProps extends OverridableComponentProps<BaseProps, {
+    /**
+     * If `true`, the component is checked.
+     * @default false
+     */
+    checked?: boolean;
+
+    /**
+     * Content which is sharing pressable next to radio.
+     */
+    children?: React.ReactNode;
+
+    /**
+     * If `true`, the radio is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+
+    /**
+     * Callback fired when the component is pressed.
+     */
+    onChange?: (newValue: string) => void;
+
+    /**
+     * 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;
+}> {}