-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
/
use-button-group.ts
116 lines (104 loc) 路 2.57 KB
/
use-button-group.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import type {ButtonProps} from "./index";
import type {ReactRef} from "@nextui-org/react-utils";
import type {ButtonGroupVariantProps} from "@nextui-org/theme";
import {buttonGroup} from "@nextui-org/theme";
import {HTMLNextUIProps, PropGetter, mapPropsVariants} from "@nextui-org/system";
import {useDOMRef} from "@nextui-org/react-utils";
import {useMemo, useCallback} from "react";
interface Props extends HTMLNextUIProps, ButtonGroupVariantProps {
/**
* Ref to the DOM node.
*/
ref?: ReactRef<HTMLDivElement | null>;
/**
* Whether the buttons are disabled.
* @default false
*/
isDisabled?: ButtonProps["isDisabled"];
}
export type ContextType = {
size?: ButtonProps["size"];
color?: ButtonProps["color"];
variant?: ButtonProps["variant"];
radius?: ButtonProps["radius"];
isDisabled?: ButtonProps["isDisabled"];
disableAnimation?: ButtonProps["disableAnimation"];
disableRipple?: ButtonProps["disableRipple"];
isIconOnly?: ButtonProps["isIconOnly"];
fullWidth?: boolean;
};
export type UseButtonGroupProps = Props &
Partial<
Pick<
ButtonProps,
"size" | "color" | "radius" | "variant" | "isIconOnly" | "disableAnimation" | "disableRipple"
>
>;
export function useButtonGroup(originalProps: UseButtonGroupProps) {
const [props, variantProps] = mapPropsVariants(originalProps, buttonGroup.variantKeys);
const {
ref,
as,
children,
color = "default",
size = "md",
variant = "solid",
radius,
isDisabled = false,
disableAnimation = false,
disableRipple = false,
isIconOnly = false,
className,
...otherProps
} = props;
const Component = as || "div";
const domRef = useDOMRef(ref);
const classNames = useMemo(
() =>
buttonGroup({
...variantProps,
className,
}),
[...Object.values(variantProps), className],
);
const context = useMemo<ContextType>(
() => ({
size,
color,
variant,
radius,
isIconOnly,
isDisabled,
disableAnimation,
disableRipple,
fullWidth: !!originalProps?.fullWidth,
}),
[
size,
color,
variant,
radius,
isDisabled,
isIconOnly,
disableAnimation,
disableRipple,
originalProps?.fullWidth,
],
);
const getButtonGroupProps: PropGetter = useCallback(
() => ({
role: "group",
...otherProps,
}),
[otherProps],
);
return {
Component,
children,
domRef,
context,
classNames,
getButtonGroupProps,
};
}
export type UseButtonGroupReturn = ReturnType<typeof useButtonGroup>;