rnnovaui 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rnnovaui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "",
   "main": "src/index.js",
   "react-native": "src/index.js",

package/src/components/Button/UIButton.js

@@ -1,7 +1,9 @@
-import React, { memo, useCallback, useMemo } from "react";
+import React, { memo, useCallback, useMemo, useRef } from "react";
 
 import {
   ActivityIndicator,
+  Animated,
+  Easing,
   Pressable,
   StyleSheet,
   Text,
@@ -10,7 +12,7 @@ import {
 
 import { useUITheme } from "../../theme";
 
-const VARIANTS = {
+const BUTTON_VARIANTS = {
   solid: "solid",
   outline: "outline",
   ghost: "ghost",
@@ -19,14 +21,14 @@ const VARIANTS = {
   success: "success",
 };
 
-const SIZES = {
+const BUTTON_SIZES = {
   sm: "sm",
   md: "md",
   lg: "lg",
   xl: "xl",
 };
 
-const FALLBACK = {
+const FALLBACK_COLORS = {
   primary: "#FF5A1F",
   primaryPressed: "#E94D17",
   primarySoft: "#FFF0EA",
@@ -41,9 +43,10 @@ const FALLBACK = {
 
   disabledBackground: "#E5E5E5",
   disabledText: "#A3A3A3",
+  disabledBorder: "#E5E5E5",
 };
 
-function UIButton({
+function UIButtonComponent({
   title,
   children,
 
@@ -55,136 +58,146 @@ function UIButton({
 
   fullWidth = false,
 
-  leftIcon,
-  rightIcon,
+  leftIcon = null,
+  rightIcon = null,
 
   onPress,
   onLongPress,
+  onPressIn,
+  onPressOut,
 
   style,
   contentStyle,
   textStyle,
 
-  testID,
-
-  ...props
-}) {
-  const { theme } = useUITheme();
+  activeOpacity = 0.82,
 
-  const colors = theme?.colors || {};
-
-  const primary = colors.primary || FALLBACK.primary;
-
-  const primaryPressed = colors.primaryPressed || FALLBACK.primaryPressed;
+  pressAnimation = true,
 
-  const primarySoft = colors.primarySoft || FALLBACK.primarySoft;
+  pressScale = 0.97,
 
-  const success = colors.success || FALLBACK.success;
+  pressAnimationDuration = 100,
 
-  const successPressed = colors.successPressed || FALLBACK.successPressed;
+  testID,
 
-  const danger = colors.danger || FALLBACK.danger;
+  accessibilityLabel,
+  accessibilityHint,
 
-  const dangerPressed = colors.dangerPressed || FALLBACK.dangerPressed;
+  ...props
+}) {
+  const { theme } = useUITheme();
 
-  const white = colors.onPrimary || FALLBACK.white;
+  const colors = theme?.colors || {};
 
   const isDisabled = disabled || loading;
 
-  const buttonColors = useMemo(() => {
-    if (isDisabled) {
-      return {
-        background:
-          colors.buttonDisabledBackground || FALLBACK.disabledBackground,
-
-        border: colors.buttonDisabledBorder || FALLBACK.disabledBackground,
-
-        text: colors.buttonDisabledText || FALLBACK.disabledText,
-
-        borderWidth: 1,
-      };
-    }
+  /*
+   * Native Animated value.
+   *
+   * Created once and reused.
+   * This avoids creating animation
+   * objects on every render.
+   */
+  const scale = useRef(new Animated.Value(1)).current;
 
-    switch (variant) {
-      case "outline":
-        return {
-          background: "transparent",
+  const animationRef = useRef(null);
 
-          border: colors.buttonOutlineBorder || primary,
+  const safeVariant = BUTTON_VARIANTS[variant]
+    ? variant
+    : BUTTON_VARIANTS.solid;
 
-          text: colors.buttonOutlineText || primary,
+  const safeSize = BUTTON_SIZES[size] ? size : BUTTON_SIZES.md;
 
-          borderWidth: 1,
-        };
+  const buttonColors = useMemo(
+    () => getVariantColors(safeVariant, colors, isDisabled),
+    [safeVariant, colors, isDisabled],
+  );
 
-      case "ghost":
-        return {
-          background: "transparent",
+  const dimensions = useMemo(
+    () => getDimensions(safeSize, theme),
+    [safeSize, theme],
+  );
 
-          border: "transparent",
+  const stopAnimation = useCallback(() => {
+    if (animationRef.current) {
+      animationRef.current.stop();
 
-          text: colors.buttonGhostText || primary,
+      animationRef.current = null;
+    }
+  }, []);
 
-          borderWidth: 0,
-        };
+  const animateScale = useCallback(
+    (targetScale) => {
+      if (!pressAnimation || isDisabled) {
+        return;
+      }
 
-      case "soft":
-        return {
-          background: colors.buttonSoftBackground || primarySoft,
+      stopAnimation();
 
-          border: colors.buttonSoftBackground || primarySoft,
+      animationRef.current = Animated.timing(scale, {
+        toValue: targetScale,
 
-          text: colors.buttonSoftText || primary,
+        duration: pressAnimationDuration,
 
-          borderWidth: 1,
-        };
+        easing: Easing.out(Easing.quad),
 
-      case "danger":
-        return {
-          background: colors.buttonDangerBackground || danger,
+        useNativeDriver: true,
+      });
 
-          border: colors.buttonDangerBackground || danger,
+      animationRef.current.start(() => {
+        animationRef.current = null;
+      });
+    },
+    [pressAnimation, isDisabled, stopAnimation, scale, pressAnimationDuration],
+  );
 
-          text: colors.buttonDangerText || white,
+  const handlePressIn = useCallback(
+    (event) => {
+      if (isDisabled) {
+        return;
+      }
 
-          borderWidth: 1,
-        };
+      animateScale(pressScale);
 
-      case "success":
-        return {
-          background: colors.buttonSuccessBackground || success,
+      onPressIn?.(event);
+    },
+    [isDisabled, animateScale, pressScale, onPressIn],
+  );
 
-          border: colors.buttonSuccessBackground || success,
+  const handlePressOut = useCallback(
+    (event) => {
+      if (isDisabled) {
+        return;
+      }
 
-          text: colors.buttonSuccessText || white,
+      animateScale(1);
 
-          borderWidth: 1,
-        };
+      onPressOut?.(event);
+    },
+    [isDisabled, animateScale, onPressOut],
+  );
 
-      case "solid":
-      default:
-        return {
-          background: colors.buttonPrimaryBackground || primary,
+  const handlePress = useCallback(
+    (event) => {
+      if (isDisabled) {
+        return;
+      }
 
-          border: colors.buttonPrimaryBackground || primary,
+      onPress?.(event);
+    },
+    [isDisabled, onPress],
+  );
 
-          text: colors.buttonPrimaryText || white,
+  const handleLongPress = useCallback(
+    (event) => {
+      if (isDisabled) {
+        return;
+      }
 
-          borderWidth: 1,
-        };
-    }
-  }, [
-    variant,
-    isDisabled,
-    colors,
-    primary,
-    primarySoft,
-    success,
-    danger,
-    white,
-  ]);
-
-  const dimensions = useMemo(() => getDimensions(size, theme), [size, theme]);
+      onLongPress?.(event);
+    },
+    [isDisabled, onLongPress],
+  );
 
   const buttonStyle = useMemo(
     () => [
@@ -208,88 +221,187 @@ function UIButton({
         width: fullWidth ? "100%" : undefined,
 
         opacity: isDisabled ? 0.55 : 1,
+
+        transform: [
+          {
+            scale,
+          },
+        ],
       },
 
       style,
     ],
-    [dimensions, buttonColors, fullWidth, isDisabled, style],
+    [dimensions, buttonColors, fullWidth, isDisabled, scale, style],
   );
 
-  const handlePress = useCallback(
-    (event) => {
-      if (isDisabled) {
-        return;
-      }
-
-      onPress?.(event);
-    },
-    [isDisabled, onPress],
+  return (
+    <Animated.View style={buttonStyle}>
+      <Pressable
+        {...props}
+        testID={testID}
+        disabled={isDisabled}
+        onPress={handlePress}
+        onLongPress={handleLongPress}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        accessibilityRole="button"
+        accessibilityLabel={
+          accessibilityLabel || (typeof title === "string" ? title : undefined)
+        }
+        accessibilityHint={accessibilityHint}
+        accessibilityState={{
+          disabled: isDisabled,
+
+          busy: loading,
+        }}
+        style={styles.pressable}
+      >
+        <View
+          style={[
+            styles.content,
+
+            {
+              gap: dimensions.gap,
+            },
+
+            contentStyle,
+          ]}
+        >
+          {loading ? (
+            <ActivityIndicator size="small" color={buttonColors.text} />
+          ) : (
+            leftIcon && <View style={styles.icon}>{leftIcon}</View>
+          )}
+
+          {children !== undefined && children !== null ? (
+            <View style={styles.children}>{children}</View>
+          ) : title !== undefined && title !== null ? (
+            <Text
+              numberOfLines={1}
+              style={[
+                styles.text,
+
+                {
+                  color: buttonColors.text,
+
+                  fontSize: dimensions.fontSize,
+
+                  lineHeight: dimensions.lineHeight,
+                },
+
+                textStyle,
+              ]}
+            >
+              {title}
+            </Text>
+          ) : null}
+
+          {!loading && rightIcon && (
+            <View style={styles.icon}>{rightIcon}</View>
+          )}
+        </View>
+      </Pressable>
+    </Animated.View>
   );
+}
 
-  const handleLongPress = useCallback(
-    (event) => {
-      if (isDisabled) {
-        return;
-      }
+function getVariantColors(variant, colors, disabled) {
+  const primary = colors.primary || FALLBACK_COLORS.primary;
 
-      onLongPress?.(event);
-    },
-    [isDisabled, onLongPress],
-  );
+  const primarySoft = colors.primarySoft || FALLBACK_COLORS.primarySoft;
 
-  return (
-    <Pressable
-      {...props}
-      testID={testID}
-      disabled={isDisabled}
-      onPress={handlePress}
-      onLongPress={handleLongPress}
-      style={buttonStyle}
-    >
-      <View
-        style={[
-          styles.content,
+  const success = colors.success || FALLBACK_COLORS.success;
 
-          {
-            gap: dimensions.gap,
-          },
+  const successPressed =
+    colors.successPressed || FALLBACK_COLORS.successPressed;
 
-          contentStyle,
-        ]}
-      >
-        {loading ? (
-          <ActivityIndicator size="small" color={buttonColors.text} />
-        ) : (
-          leftIcon && <View style={styles.icon}>{leftIcon}</View>
-        )}
-
-        {children !== undefined && children !== null ? (
-          <View style={styles.children}>{children}</View>
-        ) : title !== undefined && title !== null ? (
-          <Text
-            numberOfLines={1}
-            style={[
-              styles.text,
-
-              {
-                color: buttonColors.text,
-
-                fontSize: dimensions.fontSize,
-
-                lineHeight: dimensions.lineHeight,
-              },
-
-              textStyle,
-            ]}
-          >
-            {title}
-          </Text>
-        ) : null}
-
-        {!loading && rightIcon && <View style={styles.icon}>{rightIcon}</View>}
-      </View>
-    </Pressable>
-  );
+  const danger = colors.danger || FALLBACK_COLORS.danger;
+
+  const dangerPressed = colors.dangerPressed || FALLBACK_COLORS.dangerPressed;
+
+  const white = colors.onPrimary || FALLBACK_COLORS.white;
+
+  if (disabled) {
+    return {
+      background:
+        colors.buttonDisabledBackground || FALLBACK_COLORS.disabledBackground,
+
+      border: colors.buttonDisabledBorder || FALLBACK_COLORS.disabledBorder,
+
+      borderWidth: 1,
+
+      text: colors.buttonDisabledText || FALLBACK_COLORS.disabledText,
+    };
+  }
+
+  switch (variant) {
+    case BUTTON_VARIANTS.outline:
+      return {
+        background: colors.buttonOutlineBackground || "transparent",
+
+        border: colors.buttonOutlineBorder || primary,
+
+        borderWidth: 1,
+
+        text: colors.buttonOutlineText || primary,
+      };
+
+    case BUTTON_VARIANTS.ghost:
+      return {
+        background: colors.buttonGhostBackground || "transparent",
+
+        border: "transparent",
+
+        borderWidth: 0,
+
+        text: colors.buttonGhostText || primary,
+      };
+
+    case BUTTON_VARIANTS.soft:
+      return {
+        background: colors.buttonSoftBackground || primarySoft,
+
+        border: colors.buttonSoftBackground || primarySoft,
+
+        borderWidth: 1,
+
+        text: colors.buttonSoftText || primary,
+      };
+
+    case BUTTON_VARIANTS.danger:
+      return {
+        background: colors.buttonDangerBackground || danger,
+
+        border: colors.buttonDangerBackground || danger,
+
+        borderWidth: 1,
+
+        text: colors.buttonDangerText || white,
+      };
+
+    case BUTTON_VARIANTS.success:
+      return {
+        background: colors.buttonSuccessBackground || success,
+
+        border: colors.buttonSuccessBackground || success,
+
+        borderWidth: 1,
+
+        text: colors.buttonSuccessText || white,
+      };
+
+    case BUTTON_VARIANTS.solid:
+    default:
+      return {
+        background: colors.buttonPrimaryBackground || primary,
+
+        border: colors.buttonPrimaryBackground || primary,
+
+        borderWidth: 1,
+
+        text: colors.buttonPrimaryText || white,
+      };
+  }
 }
 
 function getDimensions(size, theme) {
@@ -301,7 +413,7 @@ function getDimensions(size, theme) {
   const spacing = theme?.spacing || {};
 
   switch (size) {
-    case "sm":
+    case BUTTON_SIZES.sm:
       return {
         height: buttonSizes.sm || 36,
 
@@ -316,7 +428,7 @@ function getDimensions(size, theme) {
         lineHeight: 18,
       };
 
-    case "lg":
+    case BUTTON_SIZES.lg:
       return {
         height: buttonSizes.lg || 52,
 
@@ -331,7 +443,7 @@ function getDimensions(size, theme) {
         lineHeight: 22,
       };
 
-    case "xl":
+    case BUTTON_SIZES.xl:
       return {
         height: buttonSizes.xl || 60,
 
@@ -346,7 +458,7 @@ function getDimensions(size, theme) {
         lineHeight: 24,
       };
 
-    case "md":
+    case BUTTON_SIZES.md:
     default:
       return {
         height: buttonSizes.md || 44,
@@ -366,18 +478,28 @@ function getDimensions(size, theme) {
 
 const styles = StyleSheet.create({
   button: {
-    flexDirection: "row",
+    flexShrink: 0,
 
     alignItems: "center",
 
     justifyContent: "center",
+  },
 
-    overflow: "hidden",
+  pressable: {
+    width: "100%",
 
-    flexShrink: 0,
+    height: "100%",
+
+    alignItems: "center",
+
+    justifyContent: "center",
   },
 
   content: {
+    width: "100%",
+
+    height: "100%",
+
     flexDirection: "row",
 
     alignItems: "center",
@@ -404,16 +526,20 @@ const styles = StyleSheet.create({
   },
 
   text: {
+    flexShrink: 1,
+
     fontWeight: "600",
 
     textAlign: "center",
 
     includeFontPadding: false,
-
-    flexShrink: 1,
   },
 });
 
-export default memo(UIButton);
+export const UIButton = memo(UIButtonComponent);
+
+UIButton.displayName = "UIButton";
+
+export { BUTTON_VARIANTS as UIButtonVariants, BUTTON_SIZES as UIButtonSizes };
 
-export { UIButton, VARIANTS as UIButtonVariants, SIZES as UIButtonSizes };
+export default UIButton;