Textarea Input

1import { cn } from "../lib/utils";
2import {
3  Input,
4  InputPressable,
5  type InputProps,
6  useInputFocusState,
7} from "./input";
8 
9// Types
10export type TextareaInputProps = InputProps & {
11  onFocus?: () => void;
12  onBlur?: () => void;
13  disabled?: boolean;
14  invalid?: boolean;
15};
16 
17// Components
18export const TextareaInput = ({
19  onFocus,
20  onBlur,
21  disabled,
22  invalid,
23  className,
24  ...props
25}: TextareaInputProps) => {
26  const { isFocused, internalRef, handleFocus, handleBlur, handlePress } =
27    useInputFocusState({ onBlur, onFocus });
28 
29  return (
30    <InputPressable
31      disabled={disabled}
32      focused={isFocused}
33      invalid={invalid}
34      onPress={handlePress}
35    >
36      <Input
37        {...props}
38        className={cn("min-h-24", className)}
39        disabled={disabled}
40        multiline
41        onBlur={handleBlur}
42        onFocus={handleFocus}
43        pointerEvents={isFocused || disabled ? undefined : "none"}
44        ref={internalRef}
45        scrollEnabled={false}
46        textAlignVertical="top"
47      />
48    </InputPressable>
49  );
50};