pending

1/**
2 * Based on React Aria's Button implementation
3 * @see https://github.com/adobe/react-spectrum/blob/main/packages/react-aria-components/src/Button.tsx
4 */
5 
6import { Slot as SlotPrimitive } from "radix-ui";
7import * as React from "react";
8 
9interface UsePendingOptions {
10  id?: string;
11  isPending?: boolean;
12  disabled?: boolean;
13}
14 
15interface UsePendingReturn<T extends HTMLElement = HTMLElement> {
16  pendingProps: React.HTMLAttributes<T> & {
17    "aria-busy"?: "true";
18    "aria-disabled"?: "true";
19    "data-pending"?: true;
20    "data-disabled"?: true;
21  };
22  isPending: boolean;
23}
24 
25function usePending<T extends HTMLElement = HTMLElement>(
26  options: UsePendingOptions = {},
27): UsePendingReturn<T> {
28  const { id, isPending = false, disabled = false } = options;
29 
30  const instanceId = React.useId();
31  const pendingId = id || instanceId;
32 
33  const pendingProps = React.useMemo(() => {
34    const props: React.HTMLAttributes<T> & {
35      "aria-busy"?: "true";
36      "aria-disabled"?: "true";
37      "data-pending"?: true;
38      "data-disabled"?: true;
39    } = {
40      id: pendingId,
41    };
42 
43    if (isPending) {
44      props["aria-busy"] = "true";
45      props["aria-disabled"] = "true";
46      props["data-pending"] = true;
47 
48      function onEventPrevent(event: React.SyntheticEvent) {
49        event.preventDefault();
50      }
51 
52      function onKeyEventPrevent(event: React.KeyboardEvent<T>) {
53        if (event.key === "Enter" || event.key === " ") {
54          event.preventDefault();
55        }
56      }
57 
58      props.onClick = onEventPrevent;
59      props.onPointerDown = onEventPrevent;
60      props.onPointerUp = onEventPrevent;
61      props.onMouseDown = onEventPrevent;
62      props.onMouseUp = onEventPrevent;
63      props.onKeyDown = onKeyEventPrevent;
64      props.onKeyUp = onKeyEventPrevent;
65    }
66 
67    if (disabled) {
68      props["data-disabled"] = true;
69    }
70 
71    return props;
72  }, [isPending, disabled, pendingId]);
73 
74  return React.useMemo(() => {
75    return {
76      pendingProps,
77      isPending,
78    };
79  }, [pendingProps, isPending]);
80}
81 
82interface PendingProps extends React.ComponentProps<typeof SlotPrimitive.Slot> {
83  isPending?: boolean;
84  disabled?: boolean;
85}
86 
87function Pending({ id, isPending, disabled, ...props }: PendingProps) {
88  const { pendingProps } = usePending({ id, isPending, disabled });
89 
90  return <SlotPrimitive.Slot {...props} {...pendingProps} />;
91}
92 
93export { Pending, usePending };