132 lines
3.1 KiB
JavaScript
132 lines
3.1 KiB
JavaScript
import { Button, Grid, Modal, Result, Spin } from "antd";
|
|
import { useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { myFetch } from "../../utils";
|
|
|
|
const { useBreakpoint } = Grid;
|
|
|
|
export default function MyModal({
|
|
children,
|
|
isOpen,
|
|
onCancel,
|
|
footer = <MyModalOnlyCloseButtonFooter onCancel={onCancel} />,
|
|
}) {
|
|
const screenBreakpoint = useBreakpoint();
|
|
|
|
return (
|
|
<Modal
|
|
open={isOpen}
|
|
width={screenBreakpoint.xs ? "100vw" : "70vw"}
|
|
maskClosable={false}
|
|
onCancel={onCancel}
|
|
footer={footer}
|
|
centered={screenBreakpoint.xs}
|
|
>
|
|
{children}
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
// This modal will show a loading indicator until the data is loaded.
|
|
// If the data is loaded and no data is found, it will show a not found modal.
|
|
// If the data is loaded and data is found, it will show the children.
|
|
export function MyLazyLoadingModal({
|
|
isOpen,
|
|
onCancel,
|
|
children,
|
|
resultTitleNoDataFound,
|
|
setFoundData,
|
|
fetchUrl,
|
|
fetchType,
|
|
}) {
|
|
// for the loading indicator
|
|
const [isDataLoaded, setIsDataLoaded] = useState(false);
|
|
// response data by the fetch
|
|
const [noDataFound, setNoDataFound] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!isOpen) return;
|
|
|
|
if (isDataLoaded) {
|
|
setIsDataLoaded(false);
|
|
setNoDataFound(false);
|
|
}
|
|
|
|
myFetch(fetchUrl, fetchType).then((data) => {
|
|
setIsDataLoaded(true);
|
|
|
|
if (!data) {
|
|
setNoDataFound(true);
|
|
return;
|
|
}
|
|
|
|
setFoundData(data);
|
|
});
|
|
}, [isOpen]);
|
|
|
|
return (
|
|
<MyModal isOpen={isOpen} onCancel={onCancel}>
|
|
{noDataFound ? (
|
|
<MyNotFoundModalContent resultTitle={resultTitleNoDataFound} />
|
|
) : isDataLoaded ? (
|
|
children
|
|
) : (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
height: "48.3vh", // set the loading modal height to the same height as the MyNotFoundModalContent result
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<Spin size="large" />
|
|
</div>
|
|
)}
|
|
</MyModal>
|
|
);
|
|
}
|
|
|
|
export function MyNotFoundModal({ isOpen, onCancel, resultTitle }) {
|
|
return (
|
|
<MyModal isOpen={isOpen} onCancel={onCancel}>
|
|
<MyNotFoundModalContent resultTitle={resultTitle} />
|
|
</MyModal>
|
|
);
|
|
}
|
|
|
|
export function MyNotFoundModalContent({ resultTitle }) {
|
|
return <Result status="500" title={resultTitle} />;
|
|
}
|
|
|
|
export function MyModalOnlyCloseButtonFooter({ onCancel }) {
|
|
const { t } = useTranslation();
|
|
|
|
return <Button onClick={onCancel}>{t("common.button.close")}</Button>;
|
|
}
|
|
|
|
export function MyModalCloseSaveButtonFooter({ onCancel, onSave }) {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<>
|
|
<Button onClick={onCancel}>{t("common.button.close")}</Button>
|
|
<Button onClick={onSave} type="primary">
|
|
{t("common.button.save")}
|
|
</Button>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function MyModalCloseCreateButtonFooter({ onCancel, onCreate }) {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<>
|
|
<Button onClick={onCancel}>{t("common.button.close")}</Button>
|
|
<Button onClick={onCreate} type="primary">
|
|
{t("common.button.create")}
|
|
</Button>
|
|
</>
|
|
);
|
|
}
|