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
|
import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Button, ButtonProps, Text } from "@mantine/core";
import {
ComponentProps,
FunctionComponent,
PropsWithChildren,
useCallback,
useState,
} from "react";
type ToolboxButtonProps = Omit<ButtonProps, "color" | "variant" | "leftIcon"> &
Omit<ComponentProps<"button">, "ref"> & {
icon: IconDefinition;
children: string;
};
const ToolboxButton: FunctionComponent<ToolboxButtonProps> = ({
icon,
children,
...props
}) => {
return (
<Button
color="dark"
variant="subtle"
leftIcon={<FontAwesomeIcon icon={icon}></FontAwesomeIcon>}
{...props}
>
<Text size="xs">{children}</Text>
</Button>
);
};
type ToolboxMutateButtonProps<R, T extends () => Promise<R>> = {
promise: T;
onSuccess?: (item: R) => void;
} & Omit<ToolboxButtonProps, "onClick" | "loading">;
export function ToolboxMutateButton<R, T extends () => Promise<R>>(
props: PropsWithChildren<ToolboxMutateButtonProps<R, T>>
): JSX.Element {
const { promise, onSuccess, ...button } = props;
const [loading, setLoading] = useState(false);
const click = useCallback(() => {
setLoading(true);
promise().then((val) => {
setLoading(false);
onSuccess && onSuccess(val);
});
}, [onSuccess, promise]);
return (
<ToolboxButton
loading={loading}
onClick={click}
{...button}
></ToolboxButton>
);
}
export default ToolboxButton;
|
