Button

1import { cva, type VariantProps } from "class-variance-authority";
2import {
3  Children,
4  cloneElement,
5  createContext,
6  useContext,
7  useMemo,
8} from "react";
9import { ActivityIndicator, Pressable, Text } from "react-native";
10import { cn } from "@/lib/utils";
11 
12// Types
13type InternalButtonContextType = VariantProps<typeof buttonVariants> & {
14  busy?: boolean;
15  disabled?: boolean;
16};
17 
18type ButtonChildProps = {
19  children: React.ReactNode;
20  className?: string;
21};
22 
23export type ButtonProps = React.ComponentProps<typeof Pressable> &
24  InternalButtonContextType & {
25    children: React.ReactNode;
26  };
27 
28// Context
29const ButtonContext = createContext<InternalButtonContextType | null>(null);
30 
31const useButtonContext = () => {
32  const context = useContext(ButtonContext);
33  if (!context) {
34    throw new Error("useButtonContext must be used within a Button component");
35  }
36  return context;
37};
38 
39// Components
40export const Button = ({
41  className,
42  variant,
43  size,
44  busy,
45  disabled,
46  children,
47  accessibilityRole = "button",
48  ...props
49}: ButtonProps) => {
50  const ctx = useMemo(() => {
51    return {
52      busy,
53      disabled,
54      size,
55      variant,
56    };
57  }, [variant, size, busy, disabled]);
58 
59  return (
60    <ButtonContext.Provider value={ctx}>
61      <Pressable
62        accessibilityRole={accessibilityRole}
63        accessibilityState={{ busy, disabled }}
64        className={cn(
65          buttonVariants({ className, size, variant }),
66          disabled && "opacity-50"
67        )}
68        disabled={disabled || busy}
69        {...props}
70      >
71        {Children.map(children, (child) => {
72          if (typeof child === "string") {
73            if (size === "icon") {
74              // Icon buttons shouldn't render text
75              return null;
76            }
77            return <ButtonText>{child}</ButtonText>;
78          }
79 
80          return child;
81        })}
82        {busy ? <ButtonSpinner /> : null}
83      </Pressable>
84    </ButtonContext.Provider>
85  );
86};
87 
88export const ButtonText = (props: ButtonChildProps) => {
89  const ctx = useButtonContext();
90 
91  return (
92    <Text
93      {...props}
94      className={cn(
95        buttonTextVariants(ctx),
96        ctx.busy && "opacity-0",
97        props.className
98      )}
99    />
100  );
101};
102 
103export const ButtonIcon = ({ children, ...props }: ButtonChildProps) => {
104  const ctx = useButtonContext();
105 
106  const child = Children.only(children);
107 
108  if (!child) {
109    if (__DEV__) {
110// … truncated