71 lines
2.9 KiB
JavaScript
71 lines
2.9 KiB
JavaScript
import React from "react";
|
|
import {Form, Space} from "antd";
|
|
import {useTranslation} from "react-i18next";
|
|
import AlertComponent from "../alert/alert.component";
|
|
import "./form-fields-changed.styles.scss";
|
|
import Prompt from "../../utils/prompt";
|
|
|
|
export default function FormsFieldChanged({form, skipPrompt}) {
|
|
const {t} = useTranslation();
|
|
|
|
const handleReset = () => {
|
|
form.resetFields();
|
|
};
|
|
//if (!form.isFieldsTouched()) return <></>;
|
|
return (
|
|
<Form.Item
|
|
className="form-fields-changed"
|
|
shouldUpdate
|
|
style={{margin: 0, padding: 0, minHeight: "unset"}}
|
|
>
|
|
{() => {
|
|
const errors = form.getFieldsError().filter((e) => e.errors.length > 0);
|
|
if (form.isFieldsTouched())
|
|
return (
|
|
<Space direction="vertical" style={{width: "100%"}}>
|
|
<Prompt
|
|
when={!skipPrompt}
|
|
beforeUnload={true}
|
|
message={t("general.messages.unsavedchangespopup")}
|
|
/>
|
|
<AlertComponent
|
|
type="warning"
|
|
message={
|
|
<div>
|
|
<span>{t("general.messages.unsavedchanges")} </span>
|
|
<span
|
|
onClick={handleReset}
|
|
style={{
|
|
cursor: "pointer",
|
|
textDecoration: "underline",
|
|
}}
|
|
>
|
|
{t("general.actions.reset")}
|
|
</span>
|
|
</div>
|
|
}
|
|
/>
|
|
{errors.length > 0 && (
|
|
<AlertComponent
|
|
type="error"
|
|
message={
|
|
<div>
|
|
<ul>
|
|
{errors.map((e, idx) =>
|
|
e.errors.map((e2, idx2) => (
|
|
<li key={`${idx}${idx2}`}>{e2}</li>
|
|
))
|
|
)}
|
|
</ul>
|
|
</div>
|
|
}
|
|
/>
|
|
)}
|
|
</Space>
|
|
);
|
|
return <div style={{display: "none"}}></div>;
|
|
}}
|
|
</Form.Item>
|
|
);
|
|
}
|