@fattureincloud-mobile/fic-mobile-ds 1.2.0 → 1.2.2

package/src/components/buttons/FicButton/FicButtonTertiary.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 import {
   GestureResponderEvent,
   Platform,
@@ -7,15 +7,31 @@ import {
   StyleProp,
   TextStyle,
   View,
-  ViewStyle
+  ViewStyle,
 } from 'react-native';
 import { TouchableHighlight } from 'react-native-gesture-handler';
+import Animated, {
+  runOnUI,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 import { useTheme } from '../../../hooks/useTheme';
 import { Icon } from '../../../providers/IconProvider';
 import { PADDING } from '../../../styles/space';
 import { Body } from '../../typographies/Body';
-import { DEFAULT_ICON, DEFAULT_ICON_SIZE, DEFAULT_TITLE, HIT_SLOP, ICON_HORIZONTAL_MARGIN } from './constants';
-import { FicButtonTextProps, FicButtonThemeProps, onPressType } from './FicButton.types';
+import {
+  DEFAULT_ICON,
+  DEFAULT_ICON_SIZE,
+  DEFAULT_TITLE,
+  HIT_SLOP,
+  ICON_HORIZONTAL_MARGIN,
+} from './constants';
+import {
+  FicButtonTextProps,
+  FicButtonThemeProps,
+  onPressType,
+} from './FicButton.types';
 
 const FicButtonTertiary: React.FC<FicButtonTextProps> = ({
   title,
@@ -34,17 +50,21 @@ const FicButtonTertiary: React.FC<FicButtonTextProps> = ({
   regular,
   light,
   duotone,
-  containerStyle
+  containerStyle,
 }) => {
   const { ficButton: theme } = useTheme() || {};
 
   const Pressable = Platform.OS === 'ios' ? PressableIOS : TouchableHighlight;
 
   const buttonTheme = (theme?.['tertiary'] as FicButtonThemeProps) || {};
-  const themeProps = disabled ? buttonTheme.disabled : error ? buttonTheme.error : buttonTheme.default;
+  const themeProps = disabled
+    ? buttonTheme.disabled
+    : error
+    ? buttonTheme.error
+    : buttonTheme.default;
   const _containerStyle = containerStyle ?? {};
 
-  const [isPressed, setIsPressed] = useState(false);
+  const pressedOpacity = useSharedValue(0);
 
   const iconColor = useMemo(() => {
     return colorContrastForLightTheme && !error
@@ -66,51 +86,42 @@ const FicButtonTertiary: React.FC<FicButtonTextProps> = ({
     () => ({
       marginLeft: iconPosition === 'left' ? ICON_HORIZONTAL_MARGIN : 0,
       marginRight: iconPosition === 'right' ? ICON_HORIZONTAL_MARGIN : 0,
-      textDecorationLine: themeProps?.text.textDecorationLine ?? 'underline'
+      textDecorationLine: themeProps?.text.textDecorationLine ?? 'underline',
     }),
-    [themeProps, iconPosition, isPressed, disabled]
+    [themeProps, iconPosition, disabled]
   );
 
-  const tertiaryPressedAreaStyle: StyleProp<ViewStyle> = useMemo(
-    () => ({
-      top: small ? -PADDING.SM : -PADDING.LG,
-      bottom: small ? -PADDING.SM : -PADDING.LG,
-      left: fullWidth ? 0 : PADDING.LG * -1,
-      right: fullWidth ? 0 : PADDING.LG * -1,
-      position: 'absolute',
-      ...themeProps?.pressedStyle?.container
-    }),
-    [small, themeProps, fullWidth]
-  );
+  const pressableAreaStyle = useAnimatedStyle<ViewStyle>(() => ({
+    top: small ? -PADDING.SM : -PADDING.LG,
+    bottom: small ? -PADDING.SM : -PADDING.LG,
+    left: fullWidth ? 0 : PADDING.LG * -1,
+    right: fullWidth ? 0 : PADDING.LG * -1,
+    position: 'absolute',
+    opacity: pressedOpacity.value,
+    ...themeProps?.pressedStyle?.container,
+  }));
+
+  const animate = (value: number) => {
+    'worklet';
+    pressedOpacity.value = withTiming(value, { duration: 0 });
+  };
 
-  const dynamicContainerStyle: StyleProp<ViewStyle> = useMemo(
-    () => ({
-      paddingTop: small ? PADDING.SM : PADDING.LG,
-      paddingBottom: small ? PADDING.SM : PADDING.LG,
-      width: '100%',
-      ...(isPressed ? themeProps?.pressedStyle?.container : themeProps?.container)
-    }),
-    [disabled, themeProps, isPressed]
+  const handleOnPressIn: onPressType = useCallback(
+    (e: GestureResponderEvent | undefined) => {
+      runOnUI(animate)(1);
+      if (onPressIn) onPressIn(e);
+    },
+    [pressedOpacity, onPressIn]
   );
 
-  const dynamicContainerStyleContainer: StyleProp<ViewStyle> = useMemo(
-    () => ({
-      width: '100%',
-      ...(isPressed ? themeProps?.pressedStyle?.container : themeProps?.container)
-    }),
-    [disabled, themeProps, isPressed]
+  const handleOnPressOut: onPressType = useCallback(
+    (e: GestureResponderEvent | undefined) => {
+      runOnUI(animate)(0);
+      if (onPressOut) onPressOut(e);
+    },
+    [pressedOpacity, onPressOut]
   );
 
-  const handleOnPressIn: onPressType = (e: GestureResponderEvent | undefined) => {
-    if (onPressIn) onPressIn(e);
-    setIsPressed(true);
-  };
-
-  const handleOnPressOut: onPressType = (e: GestureResponderEvent | undefined) => {
-    if (onPressOut) onPressOut(e);
-    setIsPressed(false);
-  };
-
   const handleOnPress: onPressType = (e: GestureResponderEvent | undefined) => {
     if (onPress) onPress(e);
   };
@@ -129,7 +140,11 @@ const FicButtonTertiary: React.FC<FicButtonTextProps> = ({
             duotone={duotone}
           />
         ) : null}
-        <Body text={title ?? DEFAULT_TITLE} style={bodyStyle} color={bodyColor} />
+        <Body
+          text={title ?? DEFAULT_TITLE}
+          style={bodyStyle}
+          color={bodyColor}
+        />
         {iconPosition === 'right' ? (
           <Icon
             name={iconName || DEFAULT_ICON}
@@ -143,33 +158,28 @@ const FicButtonTertiary: React.FC<FicButtonTextProps> = ({
         ) : null}
       </>
     );
-  }, [iconPosition, iconName, iconSize, buttonTheme, disabled, error, bodyStyle, title]);
-
-  return fullWidth ? (
-    <Pressable
-      style={[dynamicContainerStyle, Platform.OS === 'ios' ? _containerStyle : {}]}
-      containerStyle={[dynamicContainerStyleContainer, _containerStyle]}
-      onPress={handleOnPress}
-      onPressIn={handleOnPressIn}
-      onPressOut={handleOnPressOut}
-      disabled={disabled}
-      hitSlop={HIT_SLOP}
-      underlayColor={'transparent'}
-    >
-      {FicTertiary()}
-    </Pressable>
-  ) : (
+  }, [
+    iconPosition,
+    iconName,
+    iconSize,
+    buttonTheme,
+    disabled,
+    error,
+    bodyStyle,
+    title,
+  ]);
+
+  return (
     <View
       style={[
         {
-          position: 'relative',
-          alignSelf: 'flex-start',
-          width: fullWidth ? '100%' : 'auto'
+          width: fullWidth ? '100%' : 'auto',
+          alignSelf: fullWidth ? 'stretch' : 'flex-start',
         },
-        _containerStyle
+        _containerStyle,
       ]}
     >
-      {isPressed ? <View style={[tertiaryPressedAreaStyle]} /> : null}
+      <Animated.View style={pressableAreaStyle} />
       <Pressable
         style={themeProps?.container}
         onPress={handleOnPress}

package/src/components/buttons/FicButton/themes/dark.ts

@@ -10,7 +10,7 @@ const defaultContainerProps: GenericViewStyle = {
   justifyContent: 'center',
   alignContent: 'center',
   alignItems: 'center',
-  borderRadius: BORDER_RADIUS.SM
+  borderRadius: BORDER_RADIUS.SM,
 };
 
 const { alignContent, ...defaultIconContainerProps } = defaultContainerProps;
@@ -18,7 +18,7 @@ const { alignContent, ...defaultIconContainerProps } = defaultContainerProps;
 const iconContainerProps = {
   ...defaultIconContainerProps,
   borderRadius: 1000,
-  alignSelf: 'center' as FlexAlignType
+  alignSelf: 'center' as FlexAlignType,
 };
 
 const ficButtonDarkTheme: FicButtonTheme = {
@@ -26,63 +26,63 @@ const ficButtonDarkTheme: FicButtonTheme = {
     default: {
       container: {
         ...defaultContainerProps,
-        backgroundColor: Colors.AZURE_K
+        backgroundColor: Colors.AZURE_K,
       },
       text: {
-        color: Colors.ELEVATION_1
+        color: Colors.ELEVATION_1,
       },
       icon: {
-        color: Colors.ELEVATION_1
+        color: Colors.ELEVATION_1,
       },
       pressedStyle: {
         container: {
           ...defaultContainerProps,
-          backgroundColor: Colors.AZURE_K_D1
+          backgroundColor: Colors.AZURE_K_D1,
         },
         text: {
-          color: Colors.ELEVATION_1
+          color: Colors.ELEVATION_1,
         },
         icon: {
-          color: Colors.ELEVATION_1
-        }
-      }
+          color: Colors.ELEVATION_1,
+        },
+      },
     },
     disabled: {
       container: {
         ...defaultContainerProps,
-        backgroundColor: Colors.ELEVATION_4
+        backgroundColor: Colors.ELEVATION_4,
       },
       text: {
-        color: Colors.ELEVATION_2
+        color: Colors.ELEVATION_2,
       },
       icon: {
-        color: Colors.ELEVATION_2
-      }
+        color: Colors.ELEVATION_2,
+      },
     },
     error: {
       container: {
         ...defaultContainerProps,
-        backgroundColor: Colors.RED
+        backgroundColor: Colors.RED,
       },
       text: {
-        color: Colors.WHITE
+        color: Colors.WHITE,
       },
       icon: {
-        color: Colors.WHITE
+        color: Colors.WHITE,
       },
       pressedStyle: {
         container: {
           ...defaultContainerProps,
-          backgroundColor: Colors.RED_D1
+          backgroundColor: Colors.RED_D1,
         },
         text: {
-          color: Colors.WHITE
+          color: Colors.WHITE,
         },
         icon: {
-          color: Colors.WHITE
-        }
-      }
-    }
+          color: Colors.WHITE,
+        },
+      },
+    },
   },
   secondary: {
     default: {
@@ -90,71 +90,71 @@ const ficButtonDarkTheme: FicButtonTheme = {
         ...defaultContainerProps,
         backgroundColor: Colors.ELEVATION_1,
         borderWidth: 1,
-        borderColor: Colors.AZURE_K
+        borderColor: Colors.AZURE_K,
       },
       text: {
-        color: Colors.AZURE_K
+        color: Colors.AZURE_K,
       },
       icon: {
-        color: Colors.AZURE_K
+        color: Colors.AZURE_K,
       },
       pressedStyle: {
         container: {
           ...defaultContainerProps,
           backgroundColor: Colors.ELEVATION_2,
           borderWidth: 1,
-          borderColor: Colors.AZURE_K
+          borderColor: Colors.AZURE_K,
         },
         text: {
-          color: Colors.AZURE_K
+          color: Colors.AZURE_K,
         },
         icon: {
-          color: Colors.AZURE_K
-        }
-      }
+          color: Colors.AZURE_K,
+        },
+      },
     },
     disabled: {
       container: {
         ...defaultContainerProps,
         backgroundColor: Colors.ELEVATION_1,
         borderWidth: 1,
-        borderColor: Colors.ELEVATION_4
+        borderColor: Colors.ELEVATION_4,
       },
       text: {
-        color: Colors.ELEVATION_4
+        color: Colors.ELEVATION_4,
       },
       icon: {
-        color: Colors.ELEVATION_4
-      }
+        color: Colors.ELEVATION_4,
+      },
     },
     error: {
       container: {
         ...defaultContainerProps,
         backgroundColor: Colors.ELEVATION_1,
         borderWidth: 1,
-        borderColor: Colors.RED_K_D1
+        borderColor: Colors.RED_K_D1,
       },
       text: {
-        color: Colors.RED_K_D1
+        color: Colors.RED_K_D1,
       },
       icon: {
-        color: Colors.RED_K_D1
+        color: Colors.RED_K_D1,
       },
       pressedStyle: {
         container: {
           ...defaultContainerProps,
           backgroundColor: Colors.ELEVATION_2,
           borderWidth: 1,
-          borderColor: Colors.RED_K_D1
+          borderColor: Colors.RED_K_D1,
         },
         text: {
-          color: Colors.RED_K_D1
+          color: Colors.RED_K_D1,
         },
         icon: {
-          color: Colors.RED_K_D1
-        }
-      }
-    }
+          color: Colors.RED_K_D1,
+        },
+      },
+    },
   },
   tertiary: {
     default: {
@@ -162,96 +162,96 @@ const ficButtonDarkTheme: FicButtonTheme = {
       text: {
         textDecorationLine: 'underline',
         fontSize: FONT_SIZE,
-        color: Colors.AZURE_K
+        color: Colors.AZURE_K,
       },
       icon: {
-        color: Colors.AZURE_K
+        color: Colors.AZURE_K,
       },
       pressedStyle: {
         container: {
           ...defaultContainerProps,
           alignSelf: 'center',
-          backgroundColor: Colors.ELEVATION_4
+          backgroundColor: Colors.ELEVATION_4,
         },
         text: {
           textDecorationLine: 'underline',
           fontSize: FONT_SIZE,
-          color: Colors.AZURE_K
+          color: Colors.AZURE_K,
         },
         icon: {
-          color: Colors.AZURE_K
-        }
-      }
+          color: Colors.AZURE_K,
+        },
+      },
     },
     disabled: {
-      container: { ...defaultContainerProps },
+      container: { ...defaultContainerProps, alignSelf: 'center' },
       text: {
         textDecorationLine: 'underline',
         fontSize: FONT_SIZE,
-        color: Colors.ELEVATION_4
+        color: Colors.ELEVATION_4,
       },
       icon: {
-        color: Colors.ELEVATION_4
-      }
+        color: Colors.ELEVATION_4,
+      },
     },
     error: {
       container: { ...defaultContainerProps, alignSelf: 'center' },
       text: {
         textDecorationLine: 'underline',
         fontSize: FONT_SIZE,
-        color: Colors.RED_K_D1
+        color: Colors.RED_K_D1,
       },
       icon: {
-        color: Colors.RED_K_D1
+        color: Colors.RED_K_D1,
       },
       pressedStyle: {
         container: {
           ...defaultContainerProps,
           alignSelf: 'center',
-          backgroundColor: Colors.ELEVATION_4
+          backgroundColor: Colors.ELEVATION_4,
         },
         text: {
           textDecorationLine: 'underline',
           fontSize: FONT_SIZE,
-          color: Colors.RED_K_D1
+          color: Colors.RED_K_D1,
         },
         icon: {
-          color: Colors.RED_K_D1
-        }
-      }
-    }
+          color: Colors.RED_K_D1,
+        },
+      },
+    },
   },
   icon: {
     default: {
       container: { ...iconContainerProps, alignSelf: 'flex-start' },
       text: {},
       icon: {
-        color: Colors.WHITE_80
+        color: Colors.WHITE_80,
       },
       pressedStyle: {
         container: {
           backgroundColor: Colors.ELEVATION_4,
           justifyContent: 'center',
-          alignItems: 'center'
+          alignItems: 'center',
         },
         text: {},
         icon: {
-          color: Colors.WHITE_80
-        }
-      }
+          color: Colors.WHITE_80,
+        },
+      },
     },
     disabled: {
       container: { ...iconContainerProps },
       text: {},
       icon: {
-        color: Colors.ELEVATION_4
-      }
+        color: Colors.ELEVATION_4,
+      },
     },
     error: {
       container: { ...iconContainerProps },
       text: {},
       icon: {
-        color: Colors.RED_K_D1
+        color: Colors.RED_K_D1,
       },
       pressedStyle: {
         container: {
@@ -259,15 +259,15 @@ const ficButtonDarkTheme: FicButtonTheme = {
           justifyContent: 'center',
           alignItems: 'center',
           borderRadius: 1000,
-          backgroundColor: Colors.ELEVATION_4
+          backgroundColor: Colors.ELEVATION_4,
         },
         text: {},
         icon: {
-          color: Colors.RED_K_D1
-        }
-      }
-    }
-  }
+          color: Colors.RED_K_D1,
+        },
+      },
+    },
+  },
 };
 
 export default ficButtonDarkTheme;

package/src/components/buttons/FicButton/themes/index.ts

@@ -1,3 +1,4 @@
+import ficButtonDarkTheme from './dark';
 import ficButtonLightTheme from './light';
 
-export { ficButtonLightTheme };
+export { ficButtonDarkTheme, ficButtonLightTheme };