143 lines
3.9 KiB
TypeScript
Executable File
143 lines
3.9 KiB
TypeScript
Executable File
import { ReactNode } from "react";
|
|
import { FMLocal, FieldLocal, FieldProp } from "../typings";
|
|
import { Label } from "../field/Label";
|
|
import { FieldLoading } from "../../ui/field-loading";
|
|
|
|
export const BaseField = (prop: {
|
|
field: FieldLocal;
|
|
fm: FMLocal;
|
|
arg: FieldProp;
|
|
children: (arg: {
|
|
field: FieldLocal;
|
|
fm: FMLocal;
|
|
arg: FieldProp;
|
|
}) => ReactNode;
|
|
}) => {
|
|
const { field, fm, arg } = prop;
|
|
const w = field.width;
|
|
const prefix =
|
|
typeof field.prefix === "function"
|
|
? field.prefix()
|
|
: typeof field.prefix === "string"
|
|
? field.prefix
|
|
: null;
|
|
const suffix =
|
|
typeof field.suffix === "function"
|
|
? field.suffix()
|
|
: typeof field.suffix === "string"
|
|
? field.prefix
|
|
: null;
|
|
const name = field.name;
|
|
const errors = fm.error.get(name);
|
|
|
|
const showlabel = arg.show_label || "y";
|
|
return (
|
|
<label
|
|
className={cx(
|
|
"field",
|
|
name,
|
|
"c-flex",
|
|
css`
|
|
padding: 5px 0px 0px 10px;
|
|
`,
|
|
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-3/4",
|
|
w === "½" && "c-w-1/2",
|
|
w === "⅓" && "c-w-1/3",
|
|
w === "¼" && "c-w-1/4",
|
|
"c-flex-col c-space-y-1",
|
|
field.focused && "focused",
|
|
field.disabled && "disabled",
|
|
typeof fm.data[name] !== "undefined" &&
|
|
fm.data[name] !== null &&
|
|
fm.data[name] !== "" &&
|
|
"filled"
|
|
)}
|
|
>
|
|
{arg.show_label !== "n" && <Label field={field} fm={fm} arg={arg}/>}
|
|
<div className="field-input c-flex c-flex-1 c-flex-col">
|
|
<div
|
|
className={cx(
|
|
!["toggle", "button", "radio", "checkbox"].includes(arg.sub_type)
|
|
? cx(
|
|
"field-outer c-overflow-hidden c-flex-1 c-flex c-flex-row c-text-sm c-bg-white",
|
|
"c-rounded "
|
|
)
|
|
: "",
|
|
fm.status === "loading"
|
|
? css`
|
|
border-color: transparent;
|
|
`
|
|
: field.disabled
|
|
? "c-border-gray-100"
|
|
: errors.length > 0
|
|
? field.focused
|
|
? "c-border-red-600 c-bg-red-50 c-outline c-outline-red-700"
|
|
: "c-border-red-600 c-bg-red-50"
|
|
: field.focused && "focused",
|
|
css`
|
|
& > .field-inner {
|
|
min-height: 35px;
|
|
}
|
|
`
|
|
)}
|
|
>
|
|
{prefix && prefix !== "" ? (
|
|
<div
|
|
className="
|
|
c-px-2 c-bg-gray-200 c-flex c-flex-row c-items-center"
|
|
>
|
|
{prefix}
|
|
</div>
|
|
) : (
|
|
<></>
|
|
)}
|
|
{fm.status === "loading" ? (
|
|
<FieldLoading />
|
|
) : (
|
|
<div
|
|
className={cx(
|
|
"field-inner c-flex-1 c-flex c-items-center",
|
|
field.focused && "focused",
|
|
field.disabled && "c-pointer-events-none"
|
|
)}
|
|
>
|
|
{prop.children(prop)}
|
|
</div>
|
|
)}
|
|
{suffix && suffix !== "" ? (
|
|
<div
|
|
className="
|
|
c-px-2 c-bg-gray-200 c-flex c-flex-row c-items-center"
|
|
>
|
|
{suffix}
|
|
</div>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</div>
|
|
|
|
{/* {JSON.stringify(errors)} */}
|
|
{errors.length > 0 && (
|
|
<div
|
|
className={cx(
|
|
"field-error c-p-2 c-pl-0 c-text-xs c-text-red-600",
|
|
field.desc && "c-pt-0",
|
|
|
|
css`
|
|
padding-left: 0px !important;
|
|
`
|
|
)}
|
|
>
|
|
{errors.map((err) => {
|
|
return <div>{err}</div>;
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</label>
|
|
);
|
|
};
|