Choicebox

1import {
2  Children,
3  cloneElement,
4  createContext,
5  isValidElement,
6  useCallback,
7  useContext,
8  useMemo,
9  useState,
10} from "react";
11import {
12  type GestureResponderEvent,
13  type PressableProps,
14  Text,
15  View,
16} from "react-native";
17import { cn } from "../lib/utils";
18import { Checkbox } from "./checkbox";
19import { InputPressable } from "./input";
20import { Radio } from "./radio";
21import { Stack, type StackProps } from "./stack";
22 
23// Types
24type ChoiceboxType = "single" | "multiple";
25 
26type ChoiceboxRootContextValue = {
27  type: ChoiceboxType;
28  disabled?: boolean;
29  invalid?: boolean;
30  isSelected: (value: string) => boolean;
31  toggle: (value: string) => void;
32};
33 
34type ChoiceboxItemContextValue = {
35  value: string;
36  selected: boolean;
37  disabled?: boolean;
38};
39 
40export type ChoiceboxProps = {
41  type?: ChoiceboxType;
42  /** When `type` is `single`, allow clearing the selected item */
43  clearable?: boolean;
44  value?: string | string[];
45  defaultValue?: string | string[];
46  onValueChange?: (value: string | string[] | undefined) => void;
47  disabled?: boolean;
48  invalid?: boolean;
49  direction?: StackProps["direction"];
50  className?: string;
51  children: React.ReactNode;
52};
53 
54export type ChoiceboxItemProps = Omit<PressableProps, "children"> & {
55  value: string;
56  disabled?: boolean;
57  children: React.ReactNode;
58};
59 
60export type ChoiceboxItemHeaderProps = React.ComponentProps<typeof View>;
61export type ChoiceboxItemTitleProps = React.ComponentProps<typeof Text>;
62export type ChoiceboxItemDescriptionProps = React.ComponentProps<typeof Text>;
63 
64// Context
65const ChoiceboxRootContext = createContext<ChoiceboxRootContextValue | null>(
66  null
67);
68 
69const ChoiceboxItemContext = createContext<ChoiceboxItemContextValue | null>(
70  null
71);
72 
73const useChoiceboxRoot = () => {
74  const context = useContext(ChoiceboxRootContext);
75  if (!context) {
76    throw new Error("Choicebox components must be used within a Choicebox");
77  }
78  return context;
79};
80 
81const useChoiceboxItem = () => {
82  const context = useContext(ChoiceboxItemContext);
83  if (!context) {
84    throw new Error(
85      "ChoiceboxItem subcomponents must be used within a ChoiceboxItem"
86    );
87  }
88  return context;
89};
90 
91// Components
92export const Choicebox = ({
93  type = "single",
94  clearable = false,
95  value: valueProp,
96  defaultValue,
97  onValueChange,
98  disabled,
99  invalid,
100  direction = "column",
101  className,
102  children,
103}: ChoiceboxProps) => {
104  const isControlled = valueProp !== undefined;
105 
106// … truncated