This commit is contained in:
rizky 2024-04-26 18:14:13 -07:00
parent af3fc9381e
commit 48b6b284b3
5 changed files with 44 additions and 22 deletions

View File

@ -1,24 +1,33 @@
import { useLocal } from "@/utils/use-local";
import { icon } from "../icon"; import { icon } from "../icon";
import { FC } from "react"; import { FC } from "react";
export const TitleBack: FC<{ export const TitleBack: FC<{
label: string; label: string | (() => Promise<string>);
url: string; on_back: () => void;
name_page: string; }> = ({ label, on_back: on_back }) => {
}> = ({ label, url, name_page }) => { const local = useLocal({ label: "" }, async () => {
if (typeof label === "function") {
local.label = await label();
} else {
local.label = label;
}
local.render();
});
return ( return (
<div className="c-bg-gray-100 c-px-2 c-w-full c-h-[20px] c-flex c-py-2"> <div className="c-bg-white c-px-2 c-w-full c-min-h-[20px] c-flex c-py-2">
<div <div
className="c-mr-2 hover:c-cursor-pointer" className="c-mr-2 hover:c-cursor-pointer"
onClick={() => { onClick={() => {
navigate(`${url}`); if (typeof on_back === "function") {
on_back();
}
}} }}
> >
{icon.left} {icon.left}
</div> </div>
<div>{label || "-"}</div> <div>{local.label || "-"}</div>
</div> </div>
); );
}; };

View File

@ -1,5 +1,5 @@
import { getPathname } from "@/exports";
import { useLocal } from "@/utils/use-local"; import { useLocal } from "@/utils/use-local";
import get from "lodash.get";
import { FC, useEffect, useRef } from "react"; import { FC, useEffect, useRef } from "react";
import { createPortal } from "react-dom"; import { createPortal } from "react-dom";
import { Toaster } from "sonner"; import { Toaster } from "sonner";
@ -7,7 +7,6 @@ import { FMInternal, FMProps } from "./typings";
import { editorFormData } from "./utils/ed-data"; import { editorFormData } from "./utils/ed-data";
import { formInit } from "./utils/init"; import { formInit } from "./utils/init";
import { formReload } from "./utils/reload"; import { formReload } from "./utils/reload";
import { getPathname } from "../../..";
const editorFormWidth = {} as Record<string, { w: number; f: any }>; const editorFormWidth = {} as Record<string, { w: number; f: any }>;

View File

@ -4,18 +4,22 @@ import { useField } from "../utils/use-field";
import { validate } from "../utils/validate"; import { validate } from "../utils/validate";
import { FieldInput } from "./FieldInput"; import { FieldInput } from "./FieldInput";
import { Label } from "./Label"; import { Label } from "./Label";
import { useLocal } from "@/utils/use-local";
export const Field: FC<FieldProp> = (arg) => { export const Field: FC<FieldProp> = (arg) => {
const { fm } = arg; const { fm } = arg;
const field = useField(arg); const field = useField(arg);
const local = useLocal({ prev_val: fm.data[field.name] });
const mode = fm.props.label_mode; const mode = fm.props.label_mode;
const w = field.width; const w = field.width;
useEffect(() => { useEffect(() => {
validate(field, fm); if (local.prev_val !== fm.data[field.name]) {
fm.events.on_change(field.name, fm.data[field.name]); validate(field, fm);
fm.render(); fm.events.on_change(field.name, fm.data[field.name]);
fm.render();
}
}, [fm.data[field.name]]); }, [fm.data[field.name]]);
if (field.status === "init" && !isEditor) return null; if (field.status === "init" && !isEditor) return null;

View File

@ -29,9 +29,15 @@ export const FieldInput: FC<{
); );
let found = null as any; let found = null as any;
if (childs && childs.length > 0 && field.type !== "custom") { if (childs && childs.length > 0 && field.type !== "custom") {
for (const child of childs) { for (const child of childs) {
const mp = (fieldMapping as any)[field.type]; let mp = (fieldMapping as any)[field.type];
if (!mp) {
mp = (fieldMapping as any)["text"];
}
if (child.component?.id === mp.id) { if (child.component?.id === mp.id) {
found = child; found = child;
@ -81,13 +87,12 @@ export const FieldInput: FC<{
border-color: transparent; border-color: transparent;
` `
: field.disabled : field.disabled
? "c-border-gray-100" ? "c-border-gray-100"
: errors.length > 0 : errors.length > 0
? field.focused ? field.focused
? "c-border-red-600 c-bg-red-50 c-outline c-outline-red-700" ? "c-border-red-600 c-bg-red-50 c-outline c-outline-red-700"
: "c-border-red-600 c-bg-red-50" : "c-border-red-600 c-bg-red-50"
: field.focused && : field.focused && "c-border-blue-700 c-outline c-outline-blue-700",
"c-border-blue-700 c-outline c-outline-blue-700",
css` css`
& > .field-inner { & > .field-inner {
min-height: 35px; min-height: 35px;

View File

@ -23,7 +23,12 @@ export const genFieldMitem = (arg: {
?.get("content") ?.get("content")
?.get("childs"); ?.get("childs");
const component = fieldMapping[field.type as "text"]; let component = fieldMapping[field.type as "text"];
if (!component) {
component = fieldMapping["text"];
}
if (component) { if (component) {
const item = createItem({ const item = createItem({
component: component as any, component: component as any,