61 lines
2.8 KiB
TypeScript
61 lines
2.8 KiB
TypeScript
import { useRef, useState } from "react";
|
|
import { t as i18nT } from "i18next";
|
|
import ButtonSecondary from "../buttons/ButtonSecondary";
|
|
import SuccessModal, { RefSuccessModal } from "./SuccessModal";
|
|
import ErrorModal, { RefErrorModal } from "./ErrorModal";
|
|
import ConfirmModal, { RefConfirmModal } from "./ConfirmModal";
|
|
import Modal from "./Modal";
|
|
|
|
export default function PreviewModals() {
|
|
const successModal = useRef<RefSuccessModal>(null);
|
|
const errorModal = useRef<RefErrorModal>(null);
|
|
const confirmModal = useRef<RefConfirmModal>(null);
|
|
|
|
const [open, setOpen] = useState(false);
|
|
|
|
function showSuccessModal() {
|
|
successModal.current?.show(i18nT("components.modals.preview.title"), i18nT("components.modals.preview.description"));
|
|
}
|
|
function showErrorModal() {
|
|
errorModal.current?.show(i18nT("components.modals.preview.title"), i18nT("components.modals.preview.description"));
|
|
}
|
|
function showConfirmModal() {
|
|
confirmModal.current?.setValue({ name: i18nT("components.modals.preview.sample") });
|
|
confirmModal.current?.show(
|
|
i18nT("components.modals.preview.title"),
|
|
i18nT("shared.confirm"),
|
|
i18nT("shared.cancel"),
|
|
i18nT("components.modals.preview.description")
|
|
);
|
|
}
|
|
function onYes(value?: any) {
|
|
if (value) {
|
|
alert(i18nT("components.modals.preview.confirmedWithValue", { value: JSON.stringify(value) }));
|
|
} else {
|
|
alert(i18nT("components.modals.preview.yes"));
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="border-border bg-background border border-dashed p-6">
|
|
<div id="modals" className="w-full space-y-2">
|
|
<div className="mx-auto flex max-w-3xl flex-col items-center justify-center space-y-4 sm:flex-row sm:items-end sm:justify-center sm:space-y-0 sm:space-x-4">
|
|
<ButtonSecondary onClick={() => showSuccessModal()}>{i18nT("components.modals.preview.success")}</ButtonSecondary>
|
|
<ButtonSecondary onClick={() => showErrorModal()}>{i18nT("components.modals.preview.error")}</ButtonSecondary>
|
|
<ButtonSecondary onClick={() => showConfirmModal()}>{i18nT("components.modals.preview.confirm")}</ButtonSecondary>
|
|
<ButtonSecondary onClick={() => setOpen(!open)}>{i18nT("components.modals.preview.empty")}</ButtonSecondary>
|
|
</div>
|
|
<SuccessModal ref={successModal} onClosed={() => alert(i18nT("components.modals.preview.closedSuccess"))} />
|
|
<ErrorModal ref={errorModal} onClosed={() => alert(i18nT("components.modals.preview.closedError"))} />
|
|
<ConfirmModal ref={confirmModal} onNo={() => alert(i18nT("components.modals.preview.no"))} onYes={onYes} />
|
|
<Modal open={open} setOpen={setOpen}>
|
|
{i18nT("components.modals.preview.contentHere")}
|
|
</Modal>
|
|
{/* <Modal ref={emptyModal}>
|
|
<div>{i18nT("components.catalog.yourContentHere")}</div>
|
|
</Modal> */}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|