Action Input

1import { Text, View } from "react-native";
2import { cn } from "@/lib/utils";
3import { ChevronRightIcon } from "./icons";
4import {
5  InputAddon,
6  type InputAddonChildren,
7  InputAddonIcon,
8  InputPressable,
9  type InputPressableProps,
10  useInputAddons,
11} from "./input";
12 
13// Types
14export type ActionInputProps = InputPressableProps & {
15  value?: string;
16  placeholder: string;
17  children?: InputAddonChildren;
18};
19 
20// Components
21export const ActionInput = ({
22  value,
23  placeholder,
24  children,
25  className,
26  ...props
27}: ActionInputProps) => {
28  const { startAddons, endAddons, pressableClassName } =
29    useInputAddons(children);
30 
31  return (
32    <InputPressable
33      {...props}
34      className={cn(pressableClassName, "pr-0", className)}
35    >
36      {startAddons}
37 
38      <View className="grow">
39        {value ? (
40          <Text className="text-base text-foreground">{value}</Text>
41        ) : (
42          <Text className="text-base text-muted-foreground">{placeholder}</Text>
43        )}
44      </View>
45 
46      {endAddons.length ? (
47        endAddons
48      ) : (
49        <InputAddon align="inline-end">
50          <InputAddonIcon>
51            <ChevronRightIcon />
52          </InputAddonIcon>
53        </InputAddon>
54      )}
55    </InputPressable>
56  );
57};