50 lines
1.4 KiB
TypeScript
Executable File
50 lines
1.4 KiB
TypeScript
Executable File
import { FC, useEffect } from "react";
|
|
import { FieldProp } from "../typings";
|
|
import { useField } from "../utils/use-field";
|
|
import { Label } from "./Label";
|
|
|
|
export const Field: FC<FieldProp> = (arg) => {
|
|
const { fm } = arg;
|
|
const field = useField(arg);
|
|
|
|
const mode = fm.props.label_mode;
|
|
const w = field.width;
|
|
|
|
useEffect(() => {
|
|
if (field.required && typeof field.required_msg === "function") {
|
|
const error_msg = field.required_msg(field.name);
|
|
const error_list = fm.error
|
|
.get(field.name)
|
|
.filter((e) => e !== error_msg);
|
|
if (fm.data[field.name]) {
|
|
fm.error.set(field.name, [error_msg, ...error_list]);
|
|
} else {
|
|
fm.error.set(field.name, error_list);
|
|
}
|
|
}
|
|
|
|
fm.events.on_change(field.name, fm.data[field.name]);
|
|
}, [fm.data[field.name]]);
|
|
|
|
if (field.status === "init") return null;
|
|
|
|
return (
|
|
<label
|
|
className={cx(
|
|
"field",
|
|
"c-flex",
|
|
w === "auto" && fm.size.field === "full" && "c-w-full",
|
|
w === "auto" && fm.size.field === "half" && "c-w-1/2",
|
|
w === "full" && "c-w-full",
|
|
w === "½" && "c-w-1/2",
|
|
w === "⅓" && "c-w-1/3",
|
|
w === "¼" && "c-w-1/4",
|
|
mode === "horizontal" && "c-flex-row",
|
|
mode === "vertical" && "c-flex-col"
|
|
)}
|
|
>
|
|
{mode !== "hidden" && <Label field={field} fm={fm} />}
|
|
</label>
|
|
);
|
|
};
|