|
| 1 | +import React, {forwardRef, useRef} from 'react'; |
| 2 | +import Animated, {useAnimatedStyle, interpolateColor, interpolate} from 'react-native-reanimated'; |
| 3 | +import {Text, View, TextInput, TouchableWithoutFeedback, type StyleProp, type ViewStyle} from 'react-native'; |
| 4 | + |
| 5 | +import {ErrorIcon} from '../../icons'; |
| 6 | +import {styles} from './filled-text-input.styles'; |
| 7 | +import {type IconProps} from '../../icons/icon-props'; |
| 8 | +import type {TextInputProps} from '../text-input.types'; |
| 9 | +import {useTextInputColors} from '../use-text-input-colors.hook'; |
| 10 | +import {useTextInputFocus} from '../use-text-input-focus-anim.hook'; |
| 11 | +import {useTypography} from '../../typography/useTypography.component'; |
| 12 | + |
| 13 | +const UNFOCUSED_LABEL_TOP_PLACEMENT = 8; |
| 14 | +const DEFAULT_LABEL_SMALL_FONT_SIZE = 12; |
| 15 | +const DEFAULT_LABEL_LARGE_FONT_SIZE = 16; |
| 16 | +const ACTIVE_INDICATOR_FOCUSED_HEIGHT = 3; |
| 17 | +const ACTIVE_INDICATOR_UNFOCUSED_HEIGHT = 1; |
| 18 | + |
| 19 | +export interface FilledTextInputProps<T> extends TextInputProps<T> { |
| 20 | + activeIndicatorStyle?: StyleProp<ViewStyle>; |
| 21 | +} |
| 22 | + |
| 23 | +export const FilledTextInput = forwardRef( |
| 24 | + <T extends IconProps>( |
| 25 | + { |
| 26 | + label, |
| 27 | + placeholder, |
| 28 | + |
| 29 | + errorText, |
| 30 | + suportingText, |
| 31 | + disabled = false, |
| 32 | + |
| 33 | + leadingIcon, |
| 34 | + trailingIcon, |
| 35 | + leadingIconProps = {} as T, |
| 36 | + trailingIconProps = {} as T, |
| 37 | + |
| 38 | + leadingComponent, |
| 39 | + trailingComponent, |
| 40 | + |
| 41 | + style, |
| 42 | + labelStyle, |
| 43 | + outerContainerStyle, |
| 44 | + innerContainerStyle, |
| 45 | + supportingTextStyle, |
| 46 | + activeIndicatorStyle, |
| 47 | + |
| 48 | + onFocus, |
| 49 | + onBlur, |
| 50 | + onOuterContainerLayout, |
| 51 | + ...props |
| 52 | + }: FilledTextInputProps<T>, |
| 53 | + ref: React.Ref<TextInput> |
| 54 | + ) => { |
| 55 | + const {bodyLarge, bodySmall} = useTypography(); |
| 56 | + // eslint-disable-next-line react-hooks/rules-of-hooks |
| 57 | + const inputRef = (ref as React.MutableRefObject<TextInput>) || useRef<TextInput>(null); |
| 58 | + const { |
| 59 | + valueColor, |
| 60 | + containerColor, |
| 61 | + selectionColor, |
| 62 | + placeholderColor, |
| 63 | + labelFocusedColor, |
| 64 | + trailingIconColor, |
| 65 | + leadingIconColor, |
| 66 | + labelUnfocusedColor, |
| 67 | + supportingTextColor, |
| 68 | + activeIndicatorFocusedColor, |
| 69 | + activeIndicatorUnfocusedColor, |
| 70 | + } = useTextInputColors({ |
| 71 | + disabled, |
| 72 | + isError: (errorText?.length ?? 0) > 0, |
| 73 | + }); |
| 74 | + const {focusAnim, focusAnimRange, focusInput, onInputBlur, onInputFocus} = useTextInputFocus({inputRef, onBlur, onFocus}); |
| 75 | + |
| 76 | + const LeadingIcon = leadingIcon; |
| 77 | + const TrailingIcon = errorText ? ErrorIcon : trailingIcon; |
| 78 | + |
| 79 | + const [smallLabelFontSize, largeLabelFontSize] = [ |
| 80 | + bodySmall.fontSize ?? DEFAULT_LABEL_SMALL_FONT_SIZE, |
| 81 | + bodyLarge.fontSize ?? DEFAULT_LABEL_LARGE_FONT_SIZE, |
| 82 | + ]; |
| 83 | + const [unfocusedLabelFontSize, unfocusedLabelTopPlacement] = placeholder |
| 84 | + ? [smallLabelFontSize, 0] |
| 85 | + : [largeLabelFontSize, UNFOCUSED_LABEL_TOP_PLACEMENT]; |
| 86 | + |
| 87 | + const labelAnimatedStyles = useAnimatedStyle( |
| 88 | + () => ({ |
| 89 | + top: interpolate(focusAnim.value, focusAnimRange, [unfocusedLabelTopPlacement, 0]), |
| 90 | + color: interpolateColor(focusAnim.value, focusAnimRange, [labelUnfocusedColor, labelFocusedColor] as string[]), |
| 91 | + fontSize: interpolate(focusAnim.value, focusAnimRange, [unfocusedLabelFontSize, smallLabelFontSize]), |
| 92 | + }), |
| 93 | + [labelUnfocusedColor, labelFocusedColor, unfocusedLabelTopPlacement, unfocusedLabelFontSize, smallLabelFontSize] |
| 94 | + ); |
| 95 | + |
| 96 | + const activeIndicatorAnimatedStyles = useAnimatedStyle( |
| 97 | + () => ({ |
| 98 | + backgroundColor: interpolateColor(focusAnim.value, focusAnimRange, [activeIndicatorUnfocusedColor, activeIndicatorFocusedColor] as string[]), |
| 99 | + height: interpolate(focusAnim.value, focusAnimRange, [ACTIVE_INDICATOR_UNFOCUSED_HEIGHT, ACTIVE_INDICATOR_FOCUSED_HEIGHT]), |
| 100 | + }), |
| 101 | + [activeIndicatorUnfocusedColor, activeIndicatorFocusedColor] |
| 102 | + ); |
| 103 | + |
| 104 | + return ( |
| 105 | + <View style={outerContainerStyle} onLayout={onOuterContainerLayout}> |
| 106 | + <TouchableWithoutFeedback onPress={focusInput}> |
| 107 | + <Animated.View style={[styles.container, {backgroundColor: containerColor}, innerContainerStyle]}> |
| 108 | + {leadingComponent} |
| 109 | + {LeadingIcon ? <LeadingIcon color={leadingIconColor} style={styles.leadingIcon} {...leadingIconProps} /> : null} |
| 110 | + <View style={[styles.inputWithLabelContainer]}> |
| 111 | + <Animated.Text style={[styles.label, bodyLarge, labelAnimatedStyles, labelStyle]}>{label}</Animated.Text> |
| 112 | + <TextInput |
| 113 | + ref={inputRef} |
| 114 | + onBlur={onInputBlur} |
| 115 | + onFocus={onInputFocus} |
| 116 | + editable={!disabled} |
| 117 | + placeholder={placeholder} |
| 118 | + selectionColor={selectionColor} |
| 119 | + placeholderTextColor={placeholderColor} |
| 120 | + style={[styles.input, bodyLarge, {color: valueColor}, style]} |
| 121 | + {...props} |
| 122 | + /> |
| 123 | + </View> |
| 124 | + {TrailingIcon ? <TrailingIcon color={trailingIconColor} style={styles.trailingIcon} {...trailingIconProps} /> : null} |
| 125 | + {trailingComponent} |
| 126 | + <Animated.View style={[styles.activeIndicator, activeIndicatorAnimatedStyles, activeIndicatorStyle]} /> |
| 127 | + </Animated.View> |
| 128 | + </TouchableWithoutFeedback> |
| 129 | + {suportingText || errorText ? ( |
| 130 | + <Text style={[bodySmall, styles.supportingText, {color: supportingTextColor}, supportingTextStyle]}>{errorText ?? suportingText}</Text> |
| 131 | + ) : null} |
| 132 | + </View> |
| 133 | + ); |
| 134 | + } |
| 135 | +); |
0 commit comments