2023-09-11 15:26:44 +00:00
|
|
|
import { Clipboard } from '@phosphor-icons/react';
|
2023-06-22 23:41:29 +00:00
|
|
|
import { ReactNode } from 'react';
|
2023-08-29 10:58:39 +00:00
|
|
|
import { useZodForm } from '@sd/client';
|
2023-09-11 15:26:44 +00:00
|
|
|
import { Button, Dialog, dialogManager, Input, useDialog, UseDialogProps } from '@sd/ui';
|
2024-01-08 20:26:46 +00:00
|
|
|
import { useLocale } from '~/hooks';
|
2023-01-12 15:26:59 +00:00
|
|
|
|
2023-02-28 05:29:48 +00:00
|
|
|
interface Props extends UseDialogProps {
|
2022-12-12 17:13:52 +00:00
|
|
|
title: string; // dialog title
|
|
|
|
description?: string; // description of the dialog
|
2023-06-16 03:49:02 +00:00
|
|
|
children?: ReactNode; // dialog content
|
|
|
|
value?: string; // value to be displayed as text or in an input box
|
2022-12-12 17:13:52 +00:00
|
|
|
label?: string; // button label
|
2023-01-20 03:23:22 +00:00
|
|
|
inputBox?: boolean; // whether the dialog should display the `value` in a disabled input box or as text
|
2023-08-16 07:16:18 +00:00
|
|
|
cancelBtn?: boolean; // whether the dialog should have a cancel button
|
2022-12-12 17:13:52 +00:00
|
|
|
}
|
|
|
|
|
2023-02-28 05:29:48 +00:00
|
|
|
const AlertDialog = (props: Props) => {
|
2024-01-08 20:26:46 +00:00
|
|
|
const { t } = useLocale();
|
|
|
|
|
2022-12-12 17:13:52 +00:00
|
|
|
// maybe a copy-to-clipboard button would be beneficial too
|
|
|
|
return (
|
|
|
|
<Dialog
|
2023-04-21 13:13:03 +00:00
|
|
|
title={props.title}
|
2023-05-20 03:11:10 +00:00
|
|
|
form={useZodForm()}
|
|
|
|
dialog={useDialog(props)}
|
2024-01-08 20:26:46 +00:00
|
|
|
ctaLabel={props.label !== undefined ? props.label : t('done')}
|
2023-08-16 07:16:18 +00:00
|
|
|
cancelBtn={props.cancelBtn}
|
2023-05-20 03:11:10 +00:00
|
|
|
onCancelled={false}
|
2022-12-12 17:13:52 +00:00
|
|
|
>
|
2023-06-16 03:49:02 +00:00
|
|
|
{props.description && <div className="mb-3 text-sm">{props.description}</div>}
|
|
|
|
{props.children}
|
2023-05-20 03:11:10 +00:00
|
|
|
{props.inputBox ? (
|
2023-03-30 03:08:04 +00:00
|
|
|
<Input
|
|
|
|
value={props.value}
|
|
|
|
disabled
|
|
|
|
className="mt-3"
|
|
|
|
right={
|
|
|
|
<Button
|
|
|
|
type="button"
|
|
|
|
onClick={() => {
|
2023-06-16 03:49:02 +00:00
|
|
|
props.value && navigator.clipboard.writeText(props.value);
|
2023-03-30 03:08:04 +00:00
|
|
|
}}
|
|
|
|
size="icon"
|
|
|
|
>
|
2024-03-12 20:41:41 +00:00
|
|
|
<Clipboard className="size-4" />
|
2023-03-30 03:08:04 +00:00
|
|
|
</Button>
|
|
|
|
}
|
|
|
|
/>
|
2023-05-20 03:11:10 +00:00
|
|
|
) : (
|
|
|
|
<div className="text-sm">{props.value}</div>
|
2022-12-12 17:13:52 +00:00
|
|
|
)}
|
|
|
|
</Dialog>
|
|
|
|
);
|
|
|
|
};
|
2023-02-28 05:29:48 +00:00
|
|
|
|
2023-06-16 03:49:02 +00:00
|
|
|
export function showAlertDialog(props: Omit<Props & { children?: ReactNode }, 'id'>) {
|
2023-02-28 05:29:48 +00:00
|
|
|
dialogManager.create((dp) => <AlertDialog {...dp} {...props} />);
|
|
|
|
}
|