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

package/src/Snackbar/Snackbar.tsx

@@ -1,14 +1,19 @@
-import React from 'react';
-import { View } from 'react-native';
+import React, { useEffect } from 'react';
+import { Animated, Easing } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+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 './SnackbarProps';
 
 type SnackBarStyles = NamedStylesStringUnion<'root'>;
 
+const fadeDuration = 300;
+const fadeAnimationDelay = 100;
+
 const useStyles: UseStyles<SnackBarStyles> = function (): SnackBarStyles {
     const theme = useTheme();
     const insets = useSafeAreaInsets();
@@ -35,6 +40,8 @@ export default function Snackbar(props: SnackbarProps) {
         autoHideDuration = null,
         children,
         message,
+        title,
+        startIcon,
         onActionPress,
         onClose,
         style,
@@ -73,16 +80,33 @@ export default function Snackbar(props: SnackbarProps) {
 
     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 (
-        <View
-            style={css([
+        <Animated.View
+            style={[
+                animatedStyle,
                 styles.root,
                 style,
-            ])}
+            ]}
             {...otherProps}
         >
             <Slide
@@ -93,12 +117,14 @@ export default function Snackbar(props: SnackbarProps) {
             >
                 {children ? children : (
                     <SnackbarContent
+                        title={title}
+                        startIcon={startIcon}
                         actionLabel={actionLabel}
                         message={message}
                         onActionPress={onActionPress}
                     />
                 )}
             </Slide>
-        </View>
+        </Animated.View>
     );
 };

package/src/Snackbar/SnackbarProps.ts

@@ -1,18 +1,18 @@
 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 SnackbarProps extends OverridableComponentProps<ViewProps, {
     /**
      * The text to use for the action component.
      */
-    actionLabel?: string,
+    actionLabel?: string;
 
     /**
      * y value for animating.
      */
-    animatedY?: Animated.SharedValue<number>;
+    animatedY?: Animated.Value;
 
     /**
      * The number of milliseconds to wait before automatically calling the
@@ -21,7 +21,7 @@ export default interface SnackbarProps extends OverridableComponentProps<ViewPro
      * the `null` value.
      * @default null
      */
-    autoHideDuration?: number | null,
+    autoHideDuration?: number | null;
 
     /**
      * Replace the `SnackbarContent` component.
@@ -31,21 +31,31 @@ export default interface SnackbarProps extends OverridableComponentProps<ViewPro
     /**
      * The message to display.
      */
-    message?: string,
+    message?: string;
 
     /**
      * Callback fired when the action component pressed.
      */
-    onActionPress?: () => void
+    onActionPress?: () => void;
 
     /**
      * Callback fired when the component requests to be closed.
      */
-    onClose?: () => void,
+    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,
+    visible?: boolean;
 }> {}

package/src/SnackbarContent/SnackbarContent.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import { Text } from 'react-native';
+import { lightTheme, darkTheme } from '@fountain-ui/styles';
 import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { rgb } from '@fountain-ui/utils';
 import { createFontStyle, css, useTheme } from '../styles';
 import ButtonBase from '../ButtonBase';
+import Column from '../Column';
 import Paper from '../Paper';
 import Spacer from '../Spacer';
+import Typography from '../Typography';
 import type SnackbarContentProps from './SnackbarContentProps';
 
 type SnackBarContentStyles = NamedStylesStringUnion<'root' | 'action'>;
@@ -18,15 +21,14 @@ const useStyles: UseStyles<SnackBarContentStyles> = function (): SnackBarContent
 
     return {
         root: {
+            flexDirection: 'row',
+            alignItems: 'center',
             backgroundColor: `rgba(${r}, ${g}, ${b}, .9)`,
             borderRadius: theme.shape.roundness,
             paddingHorizontal: theme.spacing(4),
             paddingVertical: theme.spacing(3),
         },
         action: {
-            alignItems: 'center',
-            flexDirection: 'row',
-            justifyContent: 'space-between',
             paddingVertical: theme.spacing(2),
         },
     };
@@ -36,8 +38,10 @@ export default function SnackbarContent(props: SnackbarContentProps) {
     const {
         actionLabel,
         message,
+        title,
         onActionPress,
         style,
+        startIcon,
         ...otherProps
     } = props;
 
@@ -45,9 +49,20 @@ export default function SnackbarContent(props: SnackbarContentProps) {
 
     const theme = useTheme();
 
+    const titleFontStyle = createFontStyle(theme, {
+        selector: (typo) => typo.subtitle2,
+        color: theme.mode === 'light'
+            ? lightTheme.palette.primary.contrastTextColor
+            : lightTheme.palette.primary.main,
+    });
+
     const messageFontStyle = createFontStyle(theme, {
         selector: (typo) => typo.body2,
-        color: theme.palette.primary.contrastTextColor,
+        color: title
+            ? theme.mode === 'light'
+                ? darkTheme.palette.text.secondary
+                : lightTheme.palette.text.secondary
+            : theme.palette.primary.contrastTextColor,
     });
 
     const labelFontStyle = createFontStyle(theme, {
@@ -70,15 +85,32 @@ export default function SnackbarContent(props: SnackbarContentProps) {
             ])}
             {...otherProps}
         >
-            <Text
-                children={message}
-                style={css([
-                    messageFontStyle,
-                ])}
-            />
+            {startIcon ? (
+                <React.Fragment>
+                    {startIcon}
+
+                    <Spacer size={3}/>
+                </React.Fragment>
+            ) : null}
+
+            <Column>
+                {title ? (
+                    <Typography
+                        children={title}
+                        style={css([titleFontStyle])}
+                    />
+                ) : null}
+
+                <Text
+                    children={message}
+                    style={css([messageFontStyle])}
+                />
+            </Column>
 
             {actionLabel ? (
                 <React.Fragment>
+                    <Spacer flex={1}/>
+
                     <Spacer size={1}/>
 
                     <ButtonBase

package/src/SnackbarContent/SnackbarContentProps.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { OverridableComponentProps } from '../types';
 import type { PaperProps } from '../Paper';
 
@@ -5,15 +6,25 @@ export default interface SnackbarContentProps extends OverridableComponentProps<
     /**
      * The text to use for the action component.
      */
-    actionLabel?: string,
+    actionLabel?: string;
 
     /**
      * The message to display.
      */
-    message?: string,
+    message?: string;
 
     /**
      * Callback fired when the action component pressed.
      */
-    onActionPress?: () => void
+    onActionPress?: () => void;
+
+    /**
+     * Element placed before the title and message.
+     */
+    startIcon?: React.ReactElement;
+
+    /**
+     * The title to display.
+     */
+    title?: string;
 }> {}

package/src/SvgIcon/SvgIcon.tsx

@@ -8,7 +8,7 @@ export default function SvgIcon(props: SvgIconProps) {
         color: colorProp = 'primary',
         height = 24,
         style: styleProp,
-        viewBox = '0 0 20 20',
+        viewBox = '0 0 24 24',
         width = 24,
         ...otherProps
     }: SvgIconProps = props;

package/src/Tab/Tab.tsx

@@ -1,37 +1,41 @@
-import React from 'react';
-import { Platform, Text } from 'react-native';
+import React, { cloneElement } from 'react';
+import { Platform, Text, View } from 'react-native';
 import Badge from '../Badge';
 import TabBase from '../TabBase';
-import type TabProps from './TabProps';
 import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
+import type TabProps from './TabProps';
 import TabIndicator from './TabIndicator';
 
 const styles = StyleSheet.create({
     root: {
         // TODO: Remove redundant platform checking
         ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),
-    },
-    primary: {
-        minHeight: 48,
-    },
-    secondary: {
-        minHeight: 48,
+        minHeight: 40,
     },
     bottomNavigation: {
         minHeight: 56,
     },
+    filledInner: {
+        justifyContent: 'center',
+    },
+    tertiary: {
+        minHeight: 44,
+    },
 });
 
 export default function Tab(props: TabProps) {
     const {
         badgeVisible = false,
         children,
-        enableIndicator,
+        enableIndicator = false,
         icon: defaultIcon,
-        selected,
+        indicatorColor = 'primary',
+        indicatorSize = 'full',
+        selected = false,
         selectedIcon,
         variant = 'primary',
         style,
+        onTabInnerLayout,
         ...otherProps
     } = props;
 
@@ -39,35 +43,64 @@ export default function Tab(props: TabProps) {
 
     const vertical = variant === 'bottom-navigation';
 
-    const color = selected ? theme.palette.text.primary : theme.palette.text.hint;
+    const color = selected
+        ? theme.palette.text.primary
+        : variant === 'contained'
+            ? theme.palette.text.secondary
+            : theme.palette.text.hint;
+
+    const containedStyle = {
+        borderColor: selected ? theme.palette.primary.main : theme.palette.border.default,
+        borderRadius: theme.shape.roundnessExtra,
+        borderWidth: selected ? 1.5 : 1,
+        minHeight: 'auto',
+        paddingHorizontal: theme.spacing(3),
+        paddingVertical: theme.spacing(1.5),
+    };
 
     const tabBaseStyle = css([
         styles.root,
-        variant === 'primary'
-            ? styles.primary
-            : (variant === 'secondary' ? styles.secondary : styles.bottomNavigation),
+        variant === 'bottom-navigation' && styles.bottomNavigation,
+        variant === 'contained' && containedStyle,
+        variant === 'tertiary' && styles.tertiary,
         style,
     ]);
 
+    const tabInnerStyle = css([
+        styles.root,
+        styles.filledInner,
+    ]);
+
     const fontStyle = createFontStyle(theme, {
-        selector: (typo) => variant === 'primary'
-            ? typo.h2
-            : (variant === 'secondary' ? typo.button2 : typo.flag),
+        selector: (typo) => {
+            switch (variant) {
+                case 'primary':
+                    return typo.h2;
+                case 'secondary':
+                    return typo.button2;
+                case 'tertiary':
+                    return typo.h3;
+                case 'contained':
+                    return selected
+                        ? { ...typo.subtitle2, fontWeight: typo.fontWeight.medium }
+                        : typo.body2;
+                default:
+                    return typo.flag;
+            }
+        },
         color,
     });
-
     const pressEffect = selected ? 'none' : 'opacity';
 
     const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;
-    const iconElement = icon ? React.cloneElement(icon, { fill: color }) : null;
+    const iconElement = icon ? cloneElement(icon, { fill: color }) : null;
 
-    return (
-        <TabBase
-            pressEffect={pressEffect}
-            style={tabBaseStyle}
-            vertical={vertical}
-            {...otherProps}
-        >
+    const tabElement = typeof children !== 'string' ? (
+        React.cloneElement(children, {
+            selected,
+        })
+    ) : (
+        <React.Fragment>
             <Badge
                 children={iconElement}
                 invisible={!badgeVisible}
@@ -77,8 +110,32 @@ export default function Tab(props: TabProps) {
                 children={children}
                 style={css(fontStyle)}
             />
+        </React.Fragment>
+    );
+    const tabIndicator = (enableIndicator && selected)
+        ? <TabIndicator indicatorSize={indicatorSize} color={indicatorColor}/>
+        : null;
+
+    return (
+        <TabBase
+            pressEffect={pressEffect}
+            style={tabBaseStyle}
+            vertical={vertical}
+            {...otherProps}
+        >
+            {indicatorSize === 'fit-content' ? (
+                <View onLayout={onTabInnerLayout} style={tabInnerStyle}>
+                    {tabElement}
+
+                    {tabIndicator}
+                </View>
+            ) : (
+                <React.Fragment>
+                    {tabElement}
 
-            {enableIndicator ? <TabIndicator/> : null}
+                    {tabIndicator}
+                </React.Fragment>
+            )}
         </TabBase>
     );
 };

package/src/Tab/TabIndicator.tsx

@@ -1,27 +1,29 @@
 import React from 'react';
 import { View } from 'react-native';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { NamedStylesStringUnion } from '@fountain-ui/styles';
 import { useTheme } from '../styles';
+import type { TabIndicatorColor, TabIndicatorSize } from './TabProps';
 
 type TabIndicatorStyles = NamedStylesStringUnion<'root'>;
 
-const useStyles: UseStyles<TabIndicatorStyles> = function (): TabIndicatorStyles {
-    const theme = useTheme();
+const useStyles: (color: TabIndicatorColor, indicatorSize: TabIndicatorSize) => TabIndicatorStyles =
+    function (color: TabIndicatorColor, indicatorSize): TabIndicatorStyles {
+        const theme = useTheme();
 
-    return {
-        root: {
-            backgroundColor: theme.palette.secondary.main,
-            bottom: 0,
-            height: 4,
-            left: 12,
-            right: 12,
-            position: 'absolute',
-        },
+        return {
+            root: {
+                backgroundColor: theme.palette[color].main,
+                bottom: 0,
+                height: 2,
+                left: indicatorSize === 'fit-content' ? 0 : 12,
+                right: indicatorSize === 'fit-content' ? 0 : 12,
+                position: 'absolute',
+            },
+        };
     };
-};
 
-const TabIndicator = function TabIndicator() {
-    const styles = useStyles();
+const TabIndicator = function TabIndicator({ indicatorSize, color }: { indicatorSize: TabIndicatorSize; color: TabIndicatorColor }) {
+    const styles = useStyles(color, indicatorSize);
 
     return (
         <View

package/src/Tab/TabProps.ts

@@ -1,8 +1,11 @@
 import React from 'react';
+import type { LayoutChangeEvent } from 'react-native';
 import type { TabBaseProps } from '../TabBase';
 import type { OverridableComponentProps } from '../types';
 
-export type TabVariant = 'primary' | 'secondary' | 'bottom-navigation';
+export type TabVariant = 'primary' | 'secondary' | 'tertiary' | 'bottom-navigation' | 'contained';
+export type TabIndicatorColor = 'primary' | 'secondary';
+export type TabIndicatorSize = 'full' | 'fit-content';
 
 export default interface TabProps extends OverridableComponentProps<TabBaseProps, {
     /**
@@ -14,7 +17,7 @@ export default interface TabProps extends OverridableComponentProps<TabBaseProps
     /**
      * The label of the Tab.
      */
-    children: string;
+    children: string | React.ReactElement;
 
     /**
      * If `true`, the indicator is enabled.
@@ -33,6 +36,20 @@ export default interface TabProps extends OverridableComponentProps<TabBaseProps
      */
     icon?: React.ReactElement;
 
+    /**
+     * Tab indicator color
+     * @default 'primary'
+     */
+    indicatorColor?: TabIndicatorColor;
+
+    /**
+     * The size of tab indicator.
+     * 'full' adjusts the indicator to the size of the Tab,
+     * while 'fit-content' adjusts the indicator to the size of the content inside the Tab.
+     * @default 'full'
+     */
+    indicatorSize?: TabIndicatorSize;
+
     /**
      * If supplied, use this icon on selected state.
      */
@@ -43,4 +60,9 @@ export default interface TabProps extends OverridableComponentProps<TabBaseProps
      * @default 'primary'
      */
     variant?: TabVariant;
+
+    /**
+     * Function to be passed to the child component's onLayout prop.
+     */
+    onTabInnerLayout?: (event: LayoutChangeEvent) => void;
 }> {}

package/src/Tab/index.ts

@@ -1,2 +1,2 @@
 export { default } from './Tab';
-export type { default as TabProps, TabVariant } from './TabProps';
+export type { default as TabProps, TabVariant, TabIndicatorSize } from './TabProps';

package/src/Tabs/IndexAwareTab.tsx

@@ -0,0 +1,29 @@
+import type { ReactElement } from 'react';
+import React, { cloneElement, useContext, useEffect, useState } from 'react';
+import InternalContext from './InternalContext';
+
+export interface IndexAwareTabProps {
+    children: ReactElement;
+    index: number;
+    initialIndex: number;
+}
+
+export default function IndexAwareTab(props: IndexAwareTabProps) {
+    const {
+        children,
+        index,
+        initialIndex,
+    } = props;
+
+    const [selected, setSelected] = useState(initialIndex === index);
+
+    const { indexStore } = useContext(InternalContext);
+
+    useEffect(() => {
+        return indexStore.subscribe((currentIndex) => {
+            setSelected(currentIndex === index);
+        });
+    }, [indexStore, index]);
+
+    return cloneElement(children, { selected });
+};

package/src/Tabs/InternalContext.ts

@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+import type { MonoStore } from '../store';
+import { MockStore } from '../store';
+
+export interface InternalContextValue {
+    indexStore: MonoStore<number>;
+}
+
+const InternalContext = createContext<InternalContextValue>({
+    indexStore: new MockStore(),
+});
+
+export default InternalContext;

package/src/Tabs/ScrollableTabsView.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { ScrollViewProps } from 'react-native';
+import { ScrollView } from 'react-native';
+import TabCoordinate from './TabCoordinate';
+import useScrollViewReaction from './useScrollViewReaction';
+
+export interface ScrollableTabsViewProps extends ScrollViewProps {
+    initialIndex: number;
+    coordinates: TabCoordinate[];
+}
+
+export default function ScrollableTabsView(props: ScrollableTabsViewProps) {
+    const {
+        coordinates,
+        initialIndex,
+        ...scrollViewProps
+    } = props;
+
+    const { scrollViewRef, onLayout } = useScrollViewReaction(initialIndex, coordinates);
+
+    return (
+        <ScrollView
+            ref={scrollViewRef}
+            onLayout={onLayout}
+            {...scrollViewProps}
+        />
+    );
+};