@fountain-ui/core 3.0.0-alpha.10 → 3.0.0-alpha.12

package/src/Dialog/Dialog.tsx

@@ -14,7 +14,6 @@ export default function Dialog(props: DialogProps) {
     const {
         animationType = ANIMATION_TYPE.SLIDE,
         children,
-        fullScreen = false,
         hideBackdrop,
         onClose,
         style: styleProp,
@@ -24,7 +23,7 @@ export default function Dialog(props: DialogProps) {
         ...otherProps
     } = props;
 
-    const styles = useDialogStyle(size, fullScreen);
+    const styles = useDialogStyle(size);
 
     const { height: screenHeight } = useWindowDimensions();
 
@@ -51,7 +50,7 @@ export default function Dialog(props: DialogProps) {
                 toValue: 0,
                 type: ANIMATION_TYPE.FADE,
             }];
-        } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {
+        } else if (animationType === ANIMATION_TYPE.SLIDE) {
             return [
                 {
                     toValue: screenHeight,
@@ -70,7 +69,7 @@ export default function Dialog(props: DialogProps) {
             toValue: screenHeight,
             type: ANIMATION_TYPE.SLIDE,
         }];
-    }, [animationType, fullScreen, screenHeight]);
+    }, [animationType, screenHeight]);
 
     const openAnimation = useMemo<AnimationUnit[]>(() => {
         if (animationType === ANIMATION_TYPE.FADE) {
@@ -78,7 +77,7 @@ export default function Dialog(props: DialogProps) {
                 toValue: 1,
                 type: ANIMATION_TYPE.FADE,
             }];
-        } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {
+        } else if (animationType === ANIMATION_TYPE.SLIDE) {
             return [
                 {
                     toValue: 0,
@@ -97,9 +96,9 @@ export default function Dialog(props: DialogProps) {
             toValue: 0,
             type: ANIMATION_TYPE.SLIDE,
         }];
-    }, [animationType, fullScreen]);
+    }, [animationType]);
 
-    const initialOpacity = animationType === ANIMATION_TYPE.SLIDE && fullScreen ? 1 : undefined;
+    const initialOpacity = animationType === ANIMATION_TYPE.SLIDE ? 1 : undefined;
 
     const initialTranslateY = animationType === ANIMATION_TYPE.FADE ? 0 : undefined;
 
@@ -124,7 +123,7 @@ export default function Dialog(props: DialogProps) {
         >
             <DialogProvider value={{ size }}>
                 {topElement ? (
-                    <Column style={fullScreen ? undefined : styles.topElementContainer}>
+                    <Column style={styles.topElementContainer}>
                         <Column
                             style={styles.topElementContent}
                             onLayout={handleTopElementLayout}

package/src/Dialog/DialogProps.ts

@@ -3,7 +3,7 @@ import type { ModalProps } from '../Modal';
 import type { OverridableComponentProps } from '../types';
 import { ANIMATION_TYPE } from '../Modal';
 
-export const dialogSizes = ['small', 'medium', 'large'] as const;
+export const dialogSizes = ['small', 'medium', 'large', 'full'] as const;
 export type DialogSize = typeof dialogSizes[number];
 
 export default interface DialogProps extends OverridableComponentProps<ModalProps, {
@@ -18,12 +18,6 @@ export default interface DialogProps extends OverridableComponentProps<ModalProp
      */
     children?: React.ReactNode;
 
-    /**
-     * If `true`, the dialog is full-screen.
-     * @default false
-     */
-    fullScreen?: boolean;
-
     /**
      * Determines the minWidth of the Dialog.
      * @default 'medium'

package/src/Dialog/useDialogSectionStyle.ts

@@ -15,14 +15,16 @@ export default function useDialogSectionStyle() {
     return useMemo<FountainUiStyle>(() => {
         const sizePaddingHorizontalMap: Record<DialogSize, FountainUiStyle> = {
             small: {
-                paddingHorizontal: theme.spacing(6),
+                paddingHorizontal: 24,
             },
             medium: {
-                // TODO: need to refactor breakpoints.
-                paddingHorizontal: theme.spacing(windowWidth >= 448 ? 8 : 6),
+                paddingHorizontal: windowWidth >= 448 ? 32 : 24,
             },
             large: {
-                paddingHorizontal: theme.spacing(8),
+                paddingHorizontal: 32,
+            },
+            full: {
+                paddingHorizontal: windowWidth >= 448 ? 32 : 24,
             },
         };
 

package/src/Dialog/useDialogStyle.ts

@@ -13,7 +13,7 @@ type DialogStyleKeys =
 
 type DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;
 
-export default function useDialogStyle(size: DialogSize, fullScreen: boolean): DialogStyles {
+export default function useDialogStyle(size: DialogSize): DialogStyles {
     const theme = useTheme();
 
     const {
@@ -34,29 +34,31 @@ export default function useDialogStyle(size: DialogSize, fullScreen: boolean): D
                 minHeight: 360,
                 width: 512,
             },
+            full: {},
         };
 
-        const containerPaddingVertical = theme.spacing(6);
+        const containerPaddingVertical = 24;
         const dialogMaxHeight = windowHeight - containerPaddingVertical * 2;
         const dialogMaxWidth = sizeStyleMap[size]?.maxWidth;
 
+        const isFullScreen = size === 'full';
+
         return {
             root: {
                 alignItems: 'center',
                 justifyContent: 'center',
                 zIndex: theme.zIndex.dialog,
             },
-            container: fullScreen ? {
+            container: isFullScreen ? {
                 height: '100%',
                 width: '100%',
             } : {
                 alignItems: 'center',
-                // TODO: need to refactor breakpoints.
-                paddingHorizontal: theme.spacing(windowWidth > 320 ? 6 : 4),
+                paddingHorizontal: windowWidth > theme.breakpoints.values.xs ? 24 : 16,
                 paddingVertical: containerPaddingVertical,
                 width: '100%',
             },
-            paper: fullScreen ? {
+            paper: isFullScreen ? {
                 backgroundColor: theme.palette.surface.base,
                 height: '100%',
                 width: '100%',
@@ -78,5 +80,5 @@ export default function useDialogStyle(size: DialogSize, fullScreen: boolean): D
                 width: '100%',
             },
         };
-    }, [theme, windowHeight, windowWidth, size, fullScreen]);
+    }, [theme, windowHeight, windowWidth, size]);
 }

package/src/DialogTitle/DialogLargeTitle.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import type { DialogProps } from '../Dialog';
+import type DialogTitleProps from './DialogTitleProps';
+import { createFontStyle, css, useTheme } from '../styles';
+import IconButton from '../IconButton';
+import { ChevronLeft, Close } from '../internal';
+
+const styles = StyleSheet.create({
+    root: {
+        alignItems: 'center',
+        height: 64,
+        justifyContent: 'center',
+        paddingHorizontal: 80,
+        width: '100%',
+    },
+    backButton: {
+        height: 40,
+        left: 20,
+        paddingLeft: 5,
+        paddingRight: 11,
+        paddingVertical: 8,
+        position: 'absolute',
+        width: 40,
+    },
+    closeButton: {
+        height: 40,
+        left: 20,
+        padding: 8,
+        position: 'absolute',
+        width: 40,
+    },
+});
+
+interface DialogLargeTitleProps extends DialogTitleProps {
+    closeButtonType?: 'back' | 'close';
+    onClose: DialogProps['onClose'];
+}
+
+export default function DialogLargeTitle(props: DialogLargeTitleProps) {
+    const {
+        children,
+        closeButtonType = 'close',
+        onClose,
+        style: styleProp,
+        ...otherProps
+    } = props;
+
+    const theme = useTheme();
+
+    const fontStyle = createFontStyle(theme, {
+        selector: (typo) => typo.header4.semiBold,
+        color: theme.palette.text.strong,
+    });
+
+    const rootStyle = css([
+        styles.root,
+        styleProp,
+    ]);
+
+    return (
+        <View
+            style={rootStyle}
+            {...otherProps}
+        >
+            {typeof onClose === 'function' ? (
+                closeButtonType === 'back' ? (
+                    <IconButton
+                        style={styles.backButton}
+                        onPress={onClose}
+                    >
+                        <ChevronLeft
+                            color={'strong'}
+                            size={'large'}
+                        />
+                    </IconButton>
+                ) : (
+                    <IconButton
+                        style={styles.closeButton}
+                        onPress={onClose}
+                    >
+                        <Close
+                            color={'strong'}
+                            size={'large'}
+                        />
+                    </IconButton>
+                )
+            ) : null}
+
+            <Text style={fontStyle}>
+                {children}
+            </Text>
+        </View>
+    );
+}

package/src/DialogTitle/DialogTitle.tsx

@@ -3,6 +3,7 @@ import { Text, View } from 'react-native';
 import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { useDialogSectionStyle } from '../Dialog';
 import { createFontStyle, css, useTheme } from '../styles';
+import DialogLargeTitle from './DialogLargeTitle';
 import type DialogTitleProps from './DialogTitleProps';
 
 type DialogTitleStyles = NamedStylesStringUnion<'root' | 'title'>;
@@ -20,7 +21,7 @@ const useStyles: UseStyles<DialogTitleStyles> = function (): DialogTitleStyles {
     };
 };
 
-export default function DialogTitle(props: DialogTitleProps) {
+const DialogTitle = (props: DialogTitleProps) => {
     const {
         children,
         style: styleProp,
@@ -62,3 +63,7 @@ export default function DialogTitle(props: DialogTitleProps) {
         </View>
     );
 };
+
+DialogTitle.Large = DialogLargeTitle;
+
+export default DialogTitle;

package/src/Divider/Divider.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 import type { Theme } from '@fountain-ui/styles';
+import { commonColors } from '@fountain-ui/styles';
 import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
 import { ExtendedStyle } from '../types';
 import type DividerProps from './DividerProps';
@@ -29,6 +30,10 @@ function selectBorderColor(theme: Theme, variant: DividerVariant, vertical: bool
             return vertical ? theme.palette.border.weaker : theme.palette.border.weak;
         case 'strong':
             return vertical ? theme.palette.border.weak : theme.palette.border.base;
+        case 'strongStatic':
+            return commonColors.opacity.white['13'];
+        case 'baseStatic':
+            return commonColors.opacity.white['10'];
     }
 }
 

package/src/Divider/DividerProps.ts

@@ -5,7 +5,7 @@ import type { OverridableComponentProps } from '../types';
 export const dividerElementAligns = ['start', 'center', 'end'] as const;
 export type DividerElementAlign = typeof dividerElementAligns[number];
 
-export const dividerVariants = ['base', 'strong'] as const;
+export const dividerVariants = ['base', 'strong', 'baseStatic', 'strongStatic'] as const;
 export type DividerVariant = typeof dividerVariants[number];
 
 export default interface DividerProps extends OverridableComponentProps<ViewProps, {

package/src/ListItem/ListItem.tsx

@@ -8,28 +8,22 @@ import Row from '../Row';
 import { createFontStyle, css, useTheme } from '../styles';
 import type ListItemProps from './ListItemProps';
 
-type ListItemStyles = NamedStylesStringUnion<'content' | 'description' | 'divider' | 'dividerWrapper'>;
+type ListItemStyles = NamedStylesStringUnion<'content' | 'description'>;
 
 const useStyles: UseStyles<ListItemStyles> = function (): ListItemStyles {
     const theme = useTheme();
 
     return {
         content: {
+            borderBottomColor: theme.palette.border.weak,
+            borderBottomWidth: 0.5,
             gap: theme.spacing(2),
             paddingVertical: theme.spacing(3.75),
-            paddingHorizontal: theme.spacing(4),
             width: '100%',
         },
         description: {
             paddingRight: theme.spacing(20),
         },
-        divider: {
-            borderBottomColor: theme.palette.border.weak,
-            borderBottomWidth: 0.5,
-        },
-        dividerWrapper: {
-            paddingHorizontal: theme.spacing(4),
-        },
     };
 };
 
@@ -102,10 +96,6 @@ export default function ListItem(props: ListItemProps) {
                     {content}
                 </View>
             )}
-
-            <View style={styles.dividerWrapper}>
-                <View style={styles.divider}/>
-            </View>
         </View>
     );
 };

package/src/Pagination/Pagination.tsx

@@ -8,7 +8,7 @@ import IconButton from '../IconButton';
 import PaginationItem from '../PaginationItem';
 import NumberPagination from './NumberPagination';
 import type PaginationProps from './PaginationProps';
-import type { PaginationVariant } from './PaginationProps';
+import type { PaginationColor, PaginationVariant } from './PaginationProps';
 
 type PaginationStyleKeys =
     | 'root'
@@ -65,6 +65,7 @@ export default function Pagination(props: PaginationProps) {
     const {
         bundleSize = 1,
         children,
+        color = 'base' as PaginationColor,
         count,
         disabled = false,
         hideIndicator = false,
@@ -134,7 +135,7 @@ export default function Pagination(props: PaginationProps) {
                 currentPage={page}
                 maxPage={count}
             />
-        ) : times(i => renderItem({ index: i, disabled, selected: i === page }), count)
+        ) : times(i => renderItem({ color, index: i, disabled, selected: i === page }), count)
     ) : null;
 
     const containerProps = {

package/src/Pagination/PaginationProps.ts

@@ -2,10 +2,19 @@ import React from 'react';
 import type { ViewProps } from 'react-native';
 import type { OverridableComponentProps } from '../types';
 
+export const paginationColors = ['base', 'static'] as const;
+export type PaginationColor = typeof paginationColors[number];
+
 export const paginationVariants = ['dot', 'number'] as const;
 export type PaginationVariant = typeof paginationVariants[number];
 
 export interface PaginationRenderItemParams {
+    /**
+     * Set color of dot.
+     * @default 'base'
+     */
+    color?: PaginationColor;
+
     /**
      * Index of the pagination item.
      */
@@ -34,6 +43,12 @@ export default interface PaginationProps extends OverridableComponentProps<ViewP
      */
     children?: React.ReactNode;
 
+    /**
+     * Set color of dot.
+     * @default 'base'
+     */
+    color?: PaginationColor;
+
     /**
      * The total number of pages.
      */

package/src/Pagination/index.ts

@@ -1,3 +1,3 @@
 export { default } from './Pagination';
-export type { default as PaginationProps } from './PaginationProps';
-export { paginationVariants } from './PaginationProps';
+export type { default as PaginationProps, PaginationColor, PaginationVariant } from './PaginationProps';
+export { paginationColors, paginationVariants } from './PaginationProps';

package/src/PaginationItem/PaginationItem.tsx

@@ -1,47 +1,54 @@
 import React from 'react';
-import { View } from 'react-native';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { StyleSheet, View, ViewStyle } from 'react-native';
+import { commonColors, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { PaginationColor } from '../Pagination';
 import { css, useTheme } from '../styles';
 import type PaginationItemProps from './PaginationItemProps';
 
-type PaginationItemStyles = NamedStylesStringUnion<'root' | 'selected' | 'unselected'>;
+const DEFAULT_SIZE = 6;
 
-const useStyles: UseStyles<PaginationItemStyles> = function (): PaginationItemStyles {
+const styles = StyleSheet.create({
+    root: {
+        width: DEFAULT_SIZE,
+        height: DEFAULT_SIZE,
+        borderRadius: DEFAULT_SIZE * 0.5,
+        marginHorizontal: 4,
+    },
+});
+
+function getBackgroundColor(color: PaginationColor, selected: boolean): ViewStyle['backgroundColor'] {
     const theme = useTheme();
 
-    const size = 6;
-
-    return {
-        root: {
-            width: size,
-            height: size,
-            borderRadius: size * 0.5,
-            marginHorizontal: theme.spacing(1),
-        },
-        selected: {
-            backgroundColor: theme.palette.fill.base,
-        },
-        unselected: {
-            backgroundColor: theme.palette.status.disabled,
-        },
-    };
-};
+    switch (color) {
+        case 'static':
+            return selected
+                ? commonColors.static.strongInverse
+                : commonColors.static.weakOpacityInverse;
+        case 'base':
+        default:
+            return selected
+                ? theme.palette.fill.base
+                : theme.palette.status.disabled;
+
+    }
+}
 
 function PaginationItem(props: PaginationItemProps) {
     const {
+        color = 'base' as PaginationColor,
         disabled,
-        selected,
+        selected = false,
         style,
         ...otherProps
     } = props;
 
-    const styles = useStyles();
+    const backgroundColor = getBackgroundColor(color, selected);
 
     return (
         <View
             style={css([
                 styles.root,
-                selected ? styles.selected : styles.unselected,
+                { backgroundColor },
                 style,
             ])}
             {...otherProps}

package/src/PaginationItem/PaginationItemProps.ts

@@ -1,7 +1,14 @@
 import type { ViewProps } from 'react-native';
 import type { OverridableComponentProps } from '../types';
+import { PaginationColor } from '../Pagination';
 
 export default interface PaginationItemProps extends OverridableComponentProps<ViewProps, {
+    /**
+     * Set color of dot.
+     * @default 'base'
+     */
+    color?: PaginationColor;
+
     /**
      * If `true`, the pagination item is disabled.
      * @default false

package/src/Tab/Tab.tsx

@@ -69,17 +69,31 @@ export default function Tab(props: TabProps) {
         <React.Fragment>
             {iconElement ? (
                 <React.Fragment>
-                    <Badge invisible={!badgeVisible}>
+                    <Badge
+                        horizontalOffset={-6}
+                        invisible={!badgeVisible}
+                        verticalOffset={-4.5}
+                    >
                         {iconElement}
                     </Badge>
 
                     <Spacer size={1.25}/>
-                </React.Fragment>
-            ) : null}
 
-            <Text style={css(labelStyle)}>
-                {children}
-            </Text>
+                    <Text style={css(labelStyle)}>
+                        {children}
+                    </Text>
+                </React.Fragment>
+            ) : (
+                <Badge
+                    horizontalOffset={-7}
+                    invisible={!badgeVisible}
+                    verticalOffset={3}
+                >
+                    <Text style={css(labelStyle)}>
+                        {children}
+                    </Text>
+                </Badge>
+            )}
         </React.Fragment>
     );
 

package/src/Tabs/useTabsStyle.ts

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import type { FountainUiStyle } from '@fountain-ui/styles';
+import { useBreakpointUp } from '../hooks';
 import { useTheme } from '../styles';
 import type { TabVariant } from '../Tab';
 
@@ -10,13 +11,15 @@ interface TabsStyle {
 export default function useTabsStyle(variant: TabVariant) {
     const theme = useTheme();
 
+    const isDesktop = useBreakpointUp('md', true, false);
+
     return useMemo<TabsStyle>(() => {
         switch (variant) {
             case 'circular':
                 return {
                     container: {
-                        paddingBottom: theme.spacing(2),
-                        paddingHorizontal: theme.spacing(3),
+                        paddingBottom: 8,
+                        paddingHorizontal: isDesktop ? 20 : 12,
                     },
                 };
             case 'bottom-navigation':
@@ -27,9 +30,9 @@ export default function useTabsStyle(variant: TabVariant) {
             default:
                 return {
                     container: {
-                        paddingHorizontal: theme.spacing(1.5),
+                        paddingHorizontal: isDesktop ? 14 : 6,
                     },
                 };
         }
-    }, [theme, variant]);
+    }, [theme, variant, isDesktop]);
 }

package/src/Toolbar/BackButton/BackButton.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import IconButton from '../../IconButton';
+import { ChevronLeft } from '../../internal';
+import type BackButtonProps from './BackButtonProps';
+import { css } from '@fountain-ui/styles';
+
+const styles = StyleSheet.create({
+    root: {
+        height: 40,
+        left: 4,
+        paddingLeft: 5,
+        paddingRight: 11,
+        paddingVertical: 8,
+        position: 'absolute',
+        width: 40,
+    },
+});
+
+export default function BackButton(props: BackButtonProps) {
+    const {
+        style: styleProp,
+        ...otherProps
+    } = props;
+
+    const rootStyle = css([
+        styles.root,
+        styleProp,
+    ]);
+
+    return (
+        <IconButton
+            style={rootStyle}
+            {...otherProps}
+        >
+            <ChevronLeft
+                color={'strong'}
+                size={'large'}
+            />
+        </IconButton>
+    );
+}

package/src/Toolbar/BackButton/BackButtonProps.ts

@@ -0,0 +1,4 @@
+import type { IconButtonProps } from '../../IconButton';
+import type { OverridableComponentProps } from '../../types';
+
+export default interface BackButtonProps extends OverridableComponentProps<Omit<IconButtonProps, 'children'>, {}> {}

package/src/Toolbar/BackButton/index.ts

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

package/src/Toolbar/Toolbar.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import type { FountainUiStyle, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import Row from '../Row';
 import { css, useTheme } from '../styles';
+import BackButton from './BackButton';
 import type ToolbarProps from './ToolbarProps';
 import type { ToolbarSize } from './ToolbarProps';
 
@@ -27,7 +28,7 @@ const sizeMap: Record<ToolbarSize, FountainUiStyle> = {
     large: { height: 56 },
 };
 
-export default function Toolbar(props: ToolbarProps) {
+const Toolbar = (props: ToolbarProps) => {
     const {
         disableGutters = false,
         size = 'medium',
@@ -49,3 +50,7 @@ export default function Toolbar(props: ToolbarProps) {
         />
     );
 };
+
+Toolbar.BackButton = BackButton;
+
+export default Toolbar;