Search Input

1import { cn } from "@/lib/utils";
2import { SearchIcon } from "./icons";
3import {
4  Input,
5  InputAddon,
6  type InputAddonChildren,
7  InputAddonIcon,
8  InputPressable,
9  type InputProps,
10  useInputAddons,
11  useInputFocusState,
12} from "./input";
13 
14// Types
15export type SearchInputProps = InputProps & {
16  onFocus?: () => void;
17  onBlur?: () => void;
18  disabled?: boolean;
19  children?: InputAddonChildren;
20};
21 
22// Components
23export const SearchInput = ({
24  onFocus,
25  onBlur,
26  disabled,
27  children,
28  accessibilityRole = "search",
29  ...props
30}: SearchInputProps) => {
31  const { isFocused, internalRef, handleFocus, handleBlur, handlePress } =
32    useInputFocusState({ onBlur, onFocus });
33 
34  const { startAddons, endAddons, pressableClassName } =
35    useInputAddons(children);
36 
37  return (
38    <InputPressable
39      className={cn(
40        pressableClassName,
41        "min-h-11 bg-input/40 py-1 pl-0 active:bg-input dark:active:bg-input"
42      )}
43      disabled={disabled}
44      focused={isFocused}
45      onPress={handlePress}
46    >
47      <InputAddon align="inline-start">
48        <InputAddonIcon>
49          <SearchIcon />
50        </InputAddonIcon>
51      </InputAddon>
52 
53      {startAddons}
54 
55      <Input
56        {...props}
57        accessibilityRole={accessibilityRole}
58        className={cn("shrink", props.className)}
59        disabled={disabled}
60        onBlur={handleBlur}
61        onFocus={handleFocus}
62        ref={internalRef}
63      />
64 
65      {endAddons}
66    </InputPressable>
67  );
68};