@fountain-ui/core 1.12.1 → 1.14.1

package/src/ButtonBase/ButtonBase.tsx

@@ -4,10 +4,11 @@ import { useThrottle } from '../hooks';
 import { AnimatedPressable } from '../animated';
 import { StyleSheet } from '../styles';
 import type ButtonBaseProps from './ButtonBaseProps';
+import useDisabledReaction from './useDisabledReaction';
 
-const ORIGINAL_OPACITY = 1;
+export const ORIGINAL_OPACITY = 1;
+export const DISABLED_OPACITY = .3;
 const ACTIVE_OPACITY = .65;
-const DISABLED_OPACITY = .3;
 
 const ORIGINAL_SCALE = 1;
 const MINIFIED_SCALE = .96;
@@ -46,6 +47,8 @@ export default function ButtonBase(props: ButtonBaseProps) {
         transform: [{ scale: scale.value }],
     }));
 
+    useDisabledReaction(disabled, opacity);
+
     const startAnimation = (pressIn: boolean, isHovered: boolean = false) => {
         if (pressEffect === 'none') {
             return;

package/src/ButtonBase/useDisabledReaction/index.native.ts

@@ -0,0 +1,4 @@
+import Animated from 'react-native-reanimated';
+
+export default function useDisabledReaction(disabled: boolean, opacity: Animated.SharedValue<number>) {
+}

package/src/ButtonBase/useDisabledReaction/index.ts

@@ -0,0 +1,15 @@
+import Animated from 'react-native-reanimated';
+import { DISABLED_OPACITY, ORIGINAL_OPACITY } from '../ButtonBase';
+
+export default function useDisabledReaction(disabled: boolean, opacity: Animated.SharedValue<number>) {
+    Animated.useAnimatedReaction(
+        () => disabled,
+        (result) => {
+            if (result) {
+                opacity.value = DISABLED_OPACITY;
+            } else {
+                opacity.value = ORIGINAL_OPACITY;
+            }
+        },
+    );
+}

package/src/Chip/Chip.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Text } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { cloneSvgIcon, createFontStyle, css, useTheme } from '../styles';
-import { ButtonBase } from '../index';
+import ButtonBase from '../ButtonBase';
 import type ChipProps from './ChipProps';
 
 type ChipStyles = NamedStylesStringUnion<'root'>;
@@ -47,7 +47,7 @@ export default function Chip(props: ChipProps) {
         outlined: {
             backgroundColor: theme.palette.paper.default,
             borderColor: theme.palette.border,
-            borderWidth: 1,
+            borderWidth: 2,
         },
         filled: {
             backgroundColor: theme.palette.paper.grey,
@@ -55,7 +55,7 @@ export default function Chip(props: ChipProps) {
         bold: {
             backgroundColor: theme.palette.paper.grey,
             borderColor: theme.palette.primary.main,
-            borderWidth: 1,
+            borderWidth: 2,
         },
     };
 
@@ -102,4 +102,4 @@ export default function Chip(props: ChipProps) {
             {endIcon}
         </ButtonBase>
     );
-}
+}

package/src/Snackbar/Snackbar.tsx

@@ -30,10 +30,12 @@ const useStyles: UseStyles<SnackBarStyles> = function (): SnackBarStyles {
 
 export default function Snackbar(props: SnackbarProps) {
     const {
+        actionLabel,
         animatedY,
         autoHideDuration = null,
         children,
         message,
+        onActionPress,
         onClose,
         style,
         visible = false,
@@ -90,7 +92,11 @@ export default function Snackbar(props: SnackbarProps) {
                 onExited={() => setExited(true)}
             >
                 {children ? children : (
-                    <SnackbarContent message={message}/>
+                    <SnackbarContent
+                        actionLabel={actionLabel}
+                        message={message}
+                        onActionPress={onActionPress}
+                    />
                 )}
             </Slide>
         </View>

package/src/Snackbar/SnackbarProps.ts

@@ -4,6 +4,11 @@ import Animated from 'react-native-reanimated';
 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.
      */
@@ -28,6 +33,11 @@ export default interface SnackbarProps extends OverridableComponentProps<ViewPro
      */
     message?: string,
 
+    /**
+     * Callback fired when the action component pressed.
+     */
+    onActionPress?: () => void
+
     /**
      * Callback fired when the component requests to be closed.
      */

package/src/SnackbarContent/SnackbarContent.tsx

@@ -3,10 +3,12 @@ import { Text } from 'react-native';
 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 Paper from '../Paper';
+import Spacer from '../Spacer';
 import type SnackbarContentProps from './SnackbarContentProps';
 
-type SnackBarContentStyles = NamedStylesStringUnion<'root'>;
+type SnackBarContentStyles = NamedStylesStringUnion<'root' | 'action'>;
 
 const useStyles: UseStyles<SnackBarContentStyles> = function (): SnackBarContentStyles {
     const theme = useTheme();
@@ -21,12 +23,20 @@ const useStyles: UseStyles<SnackBarContentStyles> = function (): SnackBarContent
             paddingHorizontal: theme.spacing(4),
             paddingVertical: theme.spacing(3),
         },
+        action: {
+            alignItems: 'center',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            paddingVertical: theme.spacing(2),
+        },
     };
 };
 
 export default function SnackbarContent(props: SnackbarContentProps) {
     const {
+        actionLabel,
         message,
+        onActionPress,
         style,
         ...otherProps
     } = props;
@@ -35,16 +45,27 @@ export default function SnackbarContent(props: SnackbarContentProps) {
 
     const theme = useTheme();
 
-    const fontStyle = createFontStyle(theme, {
+    const messageFontStyle = createFontStyle(theme, {
         selector: (typo) => typo.body2,
         color: theme.palette.primary.contrastTextColor,
     });
 
+    const labelFontStyle = createFontStyle(theme, {
+        selector: (typo) => typo.button2,
+        color: theme.palette.primary.contrastTextColor,
+    });
+
+    const labelStyle = css([
+        labelFontStyle,
+        { padding: theme.spacing(2) },
+    ]);
+
     return (
         <Paper
             elevation={0}
             style={css([
                 styles.root,
+                actionLabel ? styles.action : undefined,
                 style,
             ])}
             {...otherProps}
@@ -52,9 +73,25 @@ export default function SnackbarContent(props: SnackbarContentProps) {
             <Text
                 children={message}
                 style={css([
-                    fontStyle,
+                    messageFontStyle,
                 ])}
             />
+
+            {actionLabel ? (
+                <React.Fragment>
+                    <Spacer size={1}/>
+
+                    <ButtonBase
+                        onPress={onActionPress}
+                        pressEffect={'none'}
+                    >
+                        <Text
+                            children={actionLabel}
+                            style={labelStyle}
+                        />
+                    </ButtonBase>
+                </React.Fragment>
+            ) : null}
         </Paper>
     );
 };

package/src/SnackbarContent/SnackbarContentProps.ts

@@ -2,8 +2,18 @@ import type { OverridableComponentProps } from '../types';
 import type { PaperProps } from '../Paper';
 
 export default interface SnackbarContentProps extends OverridableComponentProps<PaperProps, {
+    /**
+     * The text to use for the action component.
+     */
+    actionLabel?: string,
+
     /**
      * The message to display.
      */
     message?: string,
+
+    /**
+     * Callback fired when the action component pressed.
+     */
+    onActionPress?: () => void
 }> {}

package/src/Tooltip/Tooltip.tsx

@@ -77,7 +77,10 @@ export default function Tooltip(props: TooltipProps) {
     ]);
 
     const buttonElem = (
-        <TouchableWithoutFeedback onPress={onClose}>
+        <TouchableWithoutFeedback
+            disallowInterruption={true}
+            onPress={onClose}
+        >
             <View style={css(touchableStyle)}>
                 <Text
                     children={title}

package/src/hooks/useCollapsibleAppBar.ts

@@ -2,8 +2,8 @@ import React from 'react';
 import { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useElevationStyle } from '../hooks';
 import { useHeight } from '../internal/hooks';
+import useElevationStyle from './useElevationStyle';
 import useAppbarStyles from './useAppbarStyles';
 
 type WebOnlyStyle = { boxShadow: any };