48 lines
1.9 KiB
JavaScript
48 lines
1.9 KiB
JavaScript
import { Form } from "antd";
|
|
import LayoutFormRow from "./layout-form-row.component";
|
|
|
|
export default function InlineValidatedFormRow({ actions, errorNames = [], extraErrors = [], form, ...layoutFormRowProps }) {
|
|
const normalizedErrorNames = Array.isArray(errorNames) ? errorNames : [errorNames];
|
|
const normalizedExtraErrors = Array.isArray(extraErrors) ? extraErrors.filter(Boolean) : [extraErrors].filter(Boolean);
|
|
|
|
return (
|
|
<Form.Item noStyle shouldUpdate>
|
|
{() => {
|
|
const fieldErrors = normalizedErrorNames.flatMap((name) => form?.getFieldError?.(name) || []);
|
|
const errors = [...new Set([...fieldErrors, ...normalizedExtraErrors])];
|
|
const resolvedClassName = [
|
|
layoutFormRowProps.className,
|
|
errors.length > 0 ? "imex-form-row--error" : null
|
|
]
|
|
.filter(Boolean)
|
|
.join(" ");
|
|
|
|
const normalizedActions = Array.isArray(actions) ? actions.filter(Boolean) : [actions].filter(Boolean);
|
|
const resolvedActions =
|
|
errors.length > 0
|
|
? [
|
|
<div
|
|
key="inline-form-row-footer"
|
|
className="imex-inline-form-row-errors"
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: normalizedActions.length > 0 ? 8 : 0,
|
|
width: "100%",
|
|
textAlign: "left"
|
|
}}
|
|
>
|
|
<Form.ErrorList errors={errors} />
|
|
{normalizedActions.length > 0 ? <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>{normalizedActions}</div> : null}
|
|
</div>
|
|
]
|
|
: normalizedActions.length > 0
|
|
? normalizedActions
|
|
: undefined;
|
|
|
|
return <LayoutFormRow {...layoutFormRowProps} className={resolvedClassName} actions={resolvedActions} />;
|
|
}}
|
|
</Form.Item>
|
|
);
|
|
}
|