@erquhart/heroui-native 1.0.0-beta.10.1

package/src/components/text-field/text-field.animation.ts

@@ -0,0 +1,299 @@
+import { useEffect } from 'react';
+import {
+  interpolateColor,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { useAnimationSettings } from '../../helpers/contexts';
+import { useCombinedAnimationDisabledState } from '../../helpers/hooks';
+import { useThemeColor } from '../../helpers/theme';
+import type { AnimationRootDisableAll } from '../../helpers/types/animation';
+import {
+  getAnimationState,
+  getAnimationValueMergedConfig,
+  getAnimationValueProperty,
+  getIsAnimationDisabledValue,
+} from '../../helpers/utils/animation';
+import {
+  ANIMATION_DURATION,
+  ANIMATION_EASING,
+  ENTERING_ANIMATION_CONFIG,
+  EXITING_ANIMATION_CONFIG,
+} from './text-field.constants';
+import type {
+  TextFieldDescriptionAnimation,
+  TextFieldInputAnimation,
+  TextFieldLabelAnimation,
+} from './text-field.types';
+
+// --------------------------------------------------
+
+/**
+ * Animation hook for TextField Root component
+ * Handles root-level animation configuration and provides context for child components
+ */
+export function useTextFieldRootAnimation(options: {
+  animation: AnimationRootDisableAll | undefined;
+}) {
+  const { animation } = options;
+
+  const isAllAnimationsDisabled = useCombinedAnimationDisabledState(animation);
+
+  return {
+    isAllAnimationsDisabled,
+  };
+}
+
+// --------------------------------------------------
+
+/**
+ * Animation hook for TextField Label component
+ * Handles entering and exiting animations for the label
+ */
+export function useTextFieldLabelAnimation(options: {
+  animation: TextFieldLabelAnimation | undefined;
+}) {
+  const { animation } = options;
+
+  const { isAllAnimationsDisabled } = useAnimationSettings();
+
+  const { animationConfig, isAnimationDisabled } = getAnimationState(animation);
+
+  const isAnimationDisabledValue = getIsAnimationDisabledValue({
+    isAnimationDisabled,
+    isAllAnimationsDisabled,
+  });
+
+  // Entering animation
+  const enteringValue = getAnimationValueProperty({
+    animationValue: animationConfig?.entering,
+    property: 'value',
+    defaultValue: ENTERING_ANIMATION_CONFIG,
+  });
+
+  // Exiting animation
+  const exitingValue = getAnimationValueProperty({
+    animationValue: animationConfig?.exiting,
+    property: 'value',
+    defaultValue: EXITING_ANIMATION_CONFIG,
+  });
+
+  return {
+    entering: isAnimationDisabledValue ? undefined : enteringValue,
+    exiting: isAnimationDisabledValue ? undefined : exitingValue,
+  };
+}
+
+// --------------------------------------------------
+
+/**
+ * Animation hook for TextField Description component
+ * Handles entering and exiting animations for the description text
+ */
+export function useTextFieldDescriptionAnimation(options: {
+  animation: TextFieldDescriptionAnimation | undefined;
+}) {
+  const { animation } = options;
+
+  const { isAllAnimationsDisabled } = useAnimationSettings();
+
+  const { animationConfig, isAnimationDisabled } = getAnimationState(animation);
+
+  const isAnimationDisabledValue = getIsAnimationDisabledValue({
+    isAnimationDisabled,
+    isAllAnimationsDisabled,
+  });
+
+  // Entering animation
+  const enteringValue = getAnimationValueProperty({
+    animationValue: animationConfig?.entering,
+    property: 'value',
+    defaultValue: ENTERING_ANIMATION_CONFIG,
+  });
+
+  // Exiting animation
+  const exitingValue = getAnimationValueProperty({
+    animationValue: animationConfig?.exiting,
+    property: 'value',
+    defaultValue: EXITING_ANIMATION_CONFIG,
+  });
+
+  return {
+    entering: isAnimationDisabledValue ? undefined : enteringValue,
+    exiting: isAnimationDisabledValue ? undefined : exitingValue,
+  };
+}
+
+// --------------------------------------------------
+
+/**
+ * Animation hook for TextField Input component
+ * Handles background color and border color animations for focus/blur and error states
+ */
+export function useTextFieldInputAnimation(options: {
+  animation: TextFieldInputAnimation | undefined;
+  isInvalid: boolean;
+}) {
+  const { animation, isInvalid } = options;
+
+  const [
+    themeColorFieldBackground,
+    themeColorFieldFocusBackground,
+    themeColorFieldBlurBorder,
+    themeColorFieldFocusBorder,
+    themeColorDanger,
+  ] = useThemeColor([
+    'field',
+    'field-focus',
+    'field-border',
+    'accent',
+    'danger',
+  ]);
+
+  const { isAllAnimationsDisabled } = useAnimationSettings();
+
+  const { animationConfig, isAnimationDisabled } = getAnimationState(animation);
+
+  const isAnimationDisabledValue = getIsAnimationDisabledValue({
+    isAnimationDisabled,
+    isAllAnimationsDisabled,
+  });
+
+  // Background color animation
+  const backgroundColorValue = {
+    blur:
+      animationConfig?.backgroundColor?.value?.blur ??
+      themeColorFieldBackground,
+    focus:
+      animationConfig?.backgroundColor?.value?.focus ??
+      themeColorFieldFocusBackground,
+    error:
+      animationConfig?.backgroundColor?.value?.error ??
+      themeColorFieldBackground,
+  };
+
+  // Border color animation
+  const borderColorValue = {
+    blur:
+      animationConfig?.borderColor?.value?.blur ?? themeColorFieldBlurBorder,
+    focus:
+      animationConfig?.borderColor?.value?.focus ?? themeColorFieldFocusBorder,
+    error: animationConfig?.borderColor?.value?.error ?? themeColorDanger,
+  };
+
+  // Focus/blur animation timing configuration
+  const focusTimingConfig = getAnimationValueMergedConfig({
+    animationValue: animationConfig?.focus,
+    property: 'timingConfig',
+    defaultValue: {
+      duration: ANIMATION_DURATION,
+      easing: ANIMATION_EASING,
+    },
+  });
+
+  // Error state animation timing configuration
+  const errorTimingConfig = getAnimationValueMergedConfig({
+    animationValue: animationConfig?.error,
+    property: 'timingConfig',
+    defaultValue: {
+      duration: ANIMATION_DURATION,
+      easing: ANIMATION_EASING,
+    },
+  });
+
+  const focusProgress = useSharedValue(0);
+  const errorProgress = useSharedValue(0);
+  const currentBgColor = useSharedValue(backgroundColorValue.blur);
+  const currentBorderColor = useSharedValue(borderColorValue.blur);
+
+  // Update error state when isInvalid changes
+  useEffect(() => {
+    if (isInvalid) {
+      errorProgress.set(
+        withTiming(1, isAnimationDisabledValue ? {} : errorTimingConfig)
+      );
+    } else {
+      errorProgress.set(
+        withTiming(0, isAnimationDisabledValue ? {} : errorTimingConfig)
+      );
+    }
+  }, [isInvalid, errorProgress, isAnimationDisabledValue, errorTimingConfig]);
+
+  const animatedContainerStyle = useAnimatedStyle(() => {
+    if (isInvalid) {
+      const errorBgColor = backgroundColorValue.error || currentBgColor.get();
+      const errorBorderColor = borderColorValue.error;
+
+      if (isAnimationDisabledValue) {
+        return {
+          backgroundColor: errorBgColor,
+          borderColor: errorBorderColor,
+        };
+      }
+
+      return {
+        backgroundColor: interpolateColor(
+          errorProgress.get(),
+          [0, 1],
+          [currentBgColor.get(), errorBgColor]
+        ),
+        borderColor: interpolateColor(
+          errorProgress.get(),
+          [0, 1],
+          [currentBorderColor.get(), errorBorderColor]
+        ),
+      };
+    }
+
+    if (isAnimationDisabledValue) {
+      return {
+        backgroundColor: focusProgress.get()
+          ? backgroundColorValue.focus
+          : backgroundColorValue.blur,
+        borderColor: focusProgress.get()
+          ? borderColorValue.focus
+          : borderColorValue.blur,
+      };
+    }
+
+    return {
+      backgroundColor: interpolateColor(
+        focusProgress.get(),
+        [0, 1],
+        [backgroundColorValue.blur, backgroundColorValue.focus]
+      ),
+      borderColor: interpolateColor(
+        focusProgress.get(),
+        [0, 1],
+        [borderColorValue.blur, borderColorValue.focus]
+      ),
+    };
+  });
+
+  const handleFocusAnimation = () => {
+    if (!isAnimationDisabledValue) {
+      focusProgress.set(withTiming(1, focusTimingConfig));
+    } else {
+      focusProgress.set(1);
+    }
+    currentBgColor.set(backgroundColorValue.focus);
+    currentBorderColor.set(borderColorValue.focus);
+  };
+
+  const handleBlurAnimation = () => {
+    if (!isAnimationDisabledValue) {
+      focusProgress.set(withTiming(0, focusTimingConfig));
+    } else {
+      focusProgress.set(0);
+    }
+    currentBgColor.set(backgroundColorValue.blur);
+    currentBorderColor.set(borderColorValue.blur);
+  };
+
+  return {
+    animatedContainerStyle,
+    handleFocusAnimation,
+    handleBlurAnimation,
+  };
+}

package/src/components/text-field/text-field.constants.ts

@@ -0,0 +1,36 @@
+import { Easing, FadeIn, FadeOut } from 'react-native-reanimated';
+
+/**
+ * Display names for TextField components
+ */
+export const DISPLAY_NAME = {
+  ROOT: 'HeroUINative.TextField.Root',
+  LABEL: 'HeroUINative.TextField.Label',
+  INPUT: 'HeroUINative.TextField.Input',
+  INPUT_START_CONTENT: 'HeroUINative.TextField.InputStartContent',
+  INPUT_END_CONTENT: 'HeroUINative.TextField.InputEndContent',
+  DESCRIPTION: 'HeroUINative.TextField.Description',
+  ERROR_MESSAGE: 'HeroUINative.TextField.ErrorMessage',
+};
+
+/**
+ * Animation duration for focus/blur transitions
+ */
+export const ANIMATION_DURATION = 150;
+
+/**
+ * Animation easing function for focus/blur transitions
+ */
+export const ANIMATION_EASING = Easing.out(Easing.ease);
+
+/**
+ * Animation configuration for entering transitions
+ */
+export const ENTERING_ANIMATION_CONFIG =
+  FadeIn.duration(ANIMATION_DURATION).easing(ANIMATION_EASING);
+
+/**
+ * Animation configuration for exiting transitions
+ */
+export const EXITING_ANIMATION_CONFIG =
+  FadeOut.duration(ANIMATION_DURATION).easing(ANIMATION_EASING);