mirror of https://github.com/morpheus65535/bazarr
66 lines
1.5 KiB
TypeScript
66 lines
1.5 KiB
TypeScript
import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { Button, ButtonProps, Text } from "@mantine/core";
|
|
import {
|
|
FunctionComponent,
|
|
PropsWithChildren,
|
|
useCallback,
|
|
useState,
|
|
} from "react";
|
|
|
|
type ToolboxButtonProps = Omit<
|
|
ButtonProps<"button">,
|
|
"color" | "variant" | "leftIcon"
|
|
> & {
|
|
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;
|