Inline List

1import { cva, type VariantProps } from "class-variance-authority";
2import {
3  Children,
4  cloneElement,
5  createContext,
6  isValidElement,
7  useContext,
8  useMemo,
9} from "react";
10import { Pressable, View } from "react-native";
11import { cn } from "@/lib/utils";
12import { Text } from "./text";
13 
14// Types
15export type InlineListProps = React.ComponentProps<typeof View> & {
16  title?: string;
17  children: React.ReactNode;
18};
19 
20type InlineListItemVariant = "default" | "destructive";
21 
22export type InlineListItemProps = React.ComponentProps<typeof Pressable> & {
23  children: React.ReactNode;
24  showSeparator?: boolean;
25  variant?: InlineListItemVariant;
26};
27 
28export type InlineListItemTitleProps = React.ComponentProps<typeof Text>;
29export type InlineListItemDescriptionProps = React.ComponentProps<typeof Text>;
30 
31export type InlineListItemAddonProps = React.ComponentProps<typeof View> &
32  VariantProps<typeof inlineListItemAddonVariants> & {
33    children: React.ReactNode;
34  };
35 
36type InlineListItemAddonIconProps = {
37  children: React.ReactNode;
38  className?: string;
39};
40 
41export type InlineListItemAddonChild =
42  | React.ReactElement<InlineListItemAddonProps>
43  | null
44  | false;
45 
46export type InlineListItemAddonChildren =
47  | InlineListItemAddonChild
48  | InlineListItemAddonChild[];
49 
50type InlineListItemAddonAlign = NonNullable<
51  VariantProps<typeof inlineListItemAddonVariants>["align"]
52>;
53 
54// Context
55type InlineListSeparatorContextValue = {
56  showSeparator: boolean;
57};
58 
59const InlineListSeparatorContext =
60  createContext<InlineListSeparatorContextValue | null>(null);
61 
62const InlineListItemContext = createContext<InlineListItemVariant>("default");
63 
64const useInlineListItemContext = () => useContext(InlineListItemContext);
65 
66const InlineListItemAddonContext =
67  createContext<InlineListItemAddonAlign>("inline-start");
68 
69const useInlineListItemAddonContext = () =>
70  useContext(InlineListItemAddonContext);
71 
72// Hooks
73export const useInlineListItemAddons = (children?: React.ReactNode) => {
74  const startAddons: InlineListItemAddonChild[] = [];
75  const endAddons: InlineListItemAddonChild[] = [];
76 
77  Children.forEach(children, (child) => {
78    if (isValidElement(child) && child.type === InlineListItemAddon) {
79      const typedChild = child as InlineListItemAddonChild;
80 
81      if (typedChild) {
82        if (
83          typeof typedChild.props.align === "undefined" ||
84          typedChild.props.align === "inline-start"
85        ) {
86          startAddons.push(typedChild);
87        } else {
88// … truncated