131 lines
3.4 KiB
TypeScript
Executable File
131 lines
3.4 KiB
TypeScript
Executable File
import { createItem } from "@/gen/utils";
|
|
import get from "lodash.get";
|
|
import { FC, useEffect } from "react";
|
|
import { FMLocal, FieldLocal } from "../typings";
|
|
import { genFieldMitem, updateFieldMItem } from "../utils/gen-mitem";
|
|
import { fieldMapping } from "./mapping";
|
|
import { FieldLoading } from "./raw/FieldLoading";
|
|
import { TypeCustom } from "./type/TypeCustom";
|
|
|
|
const modify = {
|
|
timeout: null as any,
|
|
};
|
|
|
|
export const FieldInput: FC<{
|
|
field: FieldLocal;
|
|
fm: FMLocal;
|
|
PassProp: any;
|
|
child: any;
|
|
_item: any;
|
|
_meta: any;
|
|
_sync: (mitem: any, item: any) => void;
|
|
}> = ({ field, fm, PassProp, child, _meta, _item, _sync }) => {
|
|
const prefix = typeof field.prefix === "function" ? field.prefix() : null;
|
|
const suffix = typeof field.suffix === "function" ? field.suffix() : null;
|
|
const errors = fm.error.get(field.name);
|
|
const childs = get(
|
|
child,
|
|
"props.meta.item.component.props.child.content.childs"
|
|
);
|
|
|
|
let found = null as any;
|
|
|
|
if (childs && childs.length > 0 && field.type !== "custom") {
|
|
for (const child of childs) {
|
|
let mp = (fieldMapping as any)[field.type];
|
|
|
|
if (!mp) {
|
|
mp = (fieldMapping as any)["text"];
|
|
}
|
|
|
|
if (child.component?.id === mp.id) {
|
|
found = child;
|
|
|
|
if (mp.props) {
|
|
const item = createItem({
|
|
component: {
|
|
id: "--",
|
|
props:
|
|
typeof mp.props === "function" ? mp.props(fm, field) : mp.props,
|
|
},
|
|
});
|
|
|
|
const props = found.component.props;
|
|
let should_update = false;
|
|
|
|
for (const [k, v] of Object.entries(item.component.props) as any) {
|
|
if (props[k] && props[k].valueBuilt === v.valueBuilt) {
|
|
continue;
|
|
} else {
|
|
if (field.prop && !field.prop[k]) {
|
|
props[k] = v;
|
|
should_update = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (should_update) {
|
|
updateFieldMItem(_meta, found, _sync);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (isEditor && !found && field.type !== "custom") {
|
|
genFieldMitem({ _meta, _item, _sync, field, fm });
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
className={cx(
|
|
"field-outer c-flex c-flex-1 c-flex-row c-rounded c-border c-text-sm",
|
|
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 && "c-border-blue-700 c-outline c-outline-blue-700",
|
|
css`
|
|
& > .field-inner {
|
|
min-height: 35px;
|
|
}
|
|
`
|
|
)}
|
|
>
|
|
{prefix && <></>}
|
|
{fm.status === "loading" ? (
|
|
<FieldLoading />
|
|
) : (
|
|
<div
|
|
className={cx(
|
|
"field-inner c-flex-1 c-flex c-items-center",
|
|
field.disabled && "c-pointer-events-none"
|
|
)}
|
|
>
|
|
{field.type === "custom" ? (
|
|
<TypeCustom fm={fm} field={field} />
|
|
) : (
|
|
<>
|
|
{!found && <FieldLoading />}
|
|
{found && (
|
|
<PassProp field={field} fm={fm}>
|
|
{found}
|
|
</PassProp>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
{suffix && <></>}
|
|
</div>
|
|
);
|
|
};
|