Dialog Component
Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.
Example of usage
import { Dialog, DialogButtonGroup } from '@tdcerhverv/dialog';
import { TextButton, DefaultButton } from '@tdcerhverv/button';
const DialogComponent = () => {
const $submitButton = React.createRef();
const [active, setActive] = React.useState(false);
const toggle = React.useCallback(() => {
setActive(s => !s);
}, []);
const handleCancel = () => {
// Handle cancel here
toggle();
};
const handleSubmit = () => {
// Handle submit here
};
return (
<Dialog
active={active}
closeLabel="Close"
heading="Delete user?"
description="This action cannot be undone."
handleSubmit={handleSubmit}
handleCancel={handleCancel}
autoFocus={$submitButton}
>
<DialogButtonGroup>
<TextButton type="button" onClick={handleCancel}>
Cancel
</TextButton>
<DefaultButton ref={$submitButton} type="submit">
Delete
</DefaultButton>
</DialogButtonGroup>
</Dialog>
);
};Props
interface DialogProps extends HTMLAttributes<HTMLDivElement> {
active: boolean;
autoFocus?: React.RefObject<HTMLElement>;
children: ReactElement;
closeLabel?: string;
description?: string;
dialogClassName?: string;
handleCancel?: () => void;
handleSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
heading?: ReactNode;
overlayClassName?: string;
}