57 lines
1.8 KiB
JavaScript
57 lines
1.8 KiB
JavaScript
import React from "@modules/react";
|
|
import Strings from "@modules/strings";
|
|
|
|
import Root from "./root";
|
|
import Header from "./header";
|
|
import Footer from "./footer";
|
|
import Content from "./content";
|
|
|
|
import Text from "../base/text";
|
|
import Button from "../base/button";
|
|
|
|
const {useRef, useEffect, useLayoutEffect} = React;
|
|
|
|
|
|
export default function ConfirmationModal({transitionState, onClose, onCloseCallback, className, size = Root.Sizes.SMALL, header, children, danger = false, onCancel = () => {}, onConfirm = () => {}, cancelText = Strings.Modals.cancel, confirmText = Strings.Modals.okay}) {
|
|
|
|
const buttonRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
setTimeout(() => buttonRef?.current?.focus?.(), 0);
|
|
}, []);
|
|
|
|
useLayoutEffect(() => {
|
|
onCloseCallback?.();
|
|
}, [onCloseCallback]);
|
|
|
|
return <Root transitionState={transitionState} size={size} className={className}>
|
|
<Header>
|
|
<Text tag="h1" size={Text.Sizes.SIZE_20} color={Text.Colors.HEADER_PRIMARY} strong={true}>{header}</Text>
|
|
</Header>
|
|
<Content>{children}</Content>
|
|
<Footer>
|
|
{confirmText && <Button
|
|
type="submit"
|
|
buttonRef={buttonRef}
|
|
color={danger ? Button.Colors.RED : Button.Colors.BRAND}
|
|
onClick={() => {
|
|
onConfirm?.();
|
|
onClose();
|
|
}}
|
|
>
|
|
{confirmText}
|
|
</Button>}
|
|
{cancelText && <Button
|
|
type="button"
|
|
look={Button.Looks.LINK}
|
|
color={Button.Colors.PRIMARY}
|
|
onClick={() => {
|
|
onCancel?.();
|
|
onClose();
|
|
}}
|
|
>
|
|
{cancelText}
|
|
</Button>}
|
|
</Footer>
|
|
</Root>;
|
|
} |