wip fix
This commit is contained in:
rizrmd
parent
7fe2663c39
commit
5af47da93a
|
|
@ -44,7 +44,10 @@ export const Field: FC<{
|
|||
PassProp: any;
|
||||
custom: "y" | "n";
|
||||
child: any;
|
||||
label_alt: ReactNode | FC<{ modify: typeof modify; data: any }>;
|
||||
selection: "single" | "multi";
|
||||
label_alt:
|
||||
| ReactNode
|
||||
| FC<{ modify: typeof modify; data: any; current_name: string }>;
|
||||
}> = ({
|
||||
name,
|
||||
form,
|
||||
|
|
@ -57,6 +60,7 @@ export const Field: FC<{
|
|||
on_change,
|
||||
PassProp,
|
||||
custom,
|
||||
selection,
|
||||
child,
|
||||
label_alt,
|
||||
}) => {
|
||||
|
|
@ -146,6 +150,7 @@ export const Field: FC<{
|
|||
: modify.bind({
|
||||
form,
|
||||
}),
|
||||
current_name: name,
|
||||
data: form.hook.getValues(),
|
||||
})}
|
||||
{typeof label_alt !== "function" && label_alt}
|
||||
|
|
@ -237,12 +242,14 @@ export const Field: FC<{
|
|||
|
||||
{type === "radio" && (
|
||||
<Radio
|
||||
name={name}
|
||||
options={options}
|
||||
PassProp={PassProp}
|
||||
child={child}
|
||||
value={field.value}
|
||||
custom={custom}
|
||||
form={form}
|
||||
selection={selection}
|
||||
on_select={(value: any) => {
|
||||
form?.hook.setValue(name, value);
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -4,13 +4,22 @@ import { FC } from "react";
|
|||
import { useForm } from "react-hook-form";
|
||||
|
||||
export const Form: FC<{
|
||||
on_init: (arg: { submit: any }) => any;
|
||||
on_load: () => any;
|
||||
on_submit: (arg: { form: any; error: any }) => any;
|
||||
body: any;
|
||||
form: { hook: any; render: () => void };
|
||||
PassProp: any;
|
||||
layout: "auto" | "1-col" | "2-col";
|
||||
}> = ({ on_load, body, form, PassProp, on_submit, layout: _layout }) => {
|
||||
}> = ({
|
||||
on_init,
|
||||
on_load,
|
||||
body,
|
||||
form,
|
||||
PassProp,
|
||||
on_submit,
|
||||
layout: _layout,
|
||||
}) => {
|
||||
const form_hook = useForm<any>({
|
||||
defaultValues: on_load,
|
||||
});
|
||||
|
|
@ -19,6 +28,7 @@ export const Form: FC<{
|
|||
el: null as any,
|
||||
submit_timeout: null as any,
|
||||
layout: "unknown" as "unknown" | "2-col" | "1-col",
|
||||
init: false,
|
||||
});
|
||||
|
||||
form.hook = form_hook;
|
||||
|
|
@ -26,6 +36,21 @@ export const Form: FC<{
|
|||
let layout = _layout || "auto";
|
||||
if (layout !== "auto") local.layout = layout;
|
||||
|
||||
const submit = () => {
|
||||
clearTimeout(local.submit_timeout);
|
||||
local.submit_timeout = setTimeout(() => {
|
||||
on_submit({
|
||||
form: form.hook.getValues(),
|
||||
error: {},
|
||||
});
|
||||
}, 300);
|
||||
};
|
||||
|
||||
if (!local.init) {
|
||||
local.init = true;
|
||||
on_init({ submit });
|
||||
}
|
||||
|
||||
return (
|
||||
<FForm {...form_hook}>
|
||||
<form
|
||||
|
|
@ -35,11 +60,7 @@ export const Form: FC<{
|
|||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
clearTimeout(local.submit_timeout);
|
||||
local.submit_timeout = setTimeout(() => {
|
||||
on_submit({ form: form.hook.getValues(), error: {} });
|
||||
}, 300);
|
||||
submit();
|
||||
}}
|
||||
>
|
||||
<div
|
||||
|
|
@ -80,14 +101,7 @@ export const Form: FC<{
|
|||
`
|
||||
)}
|
||||
>
|
||||
<PassProp
|
||||
submit={() => {
|
||||
clearTimeout(local.submit_timeout);
|
||||
local.submit_timeout = setTimeout(() => {
|
||||
on_submit({ form: form.hook.getValues(), error: {} });
|
||||
}, 300);
|
||||
}}
|
||||
>
|
||||
<PassProp submit={submit} data={form_hook.getValues()}>
|
||||
{body}
|
||||
</PassProp>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,13 +4,18 @@ import { Button } from "../../ui/button";
|
|||
import { FormHook, modify } from "../utils/utils";
|
||||
|
||||
export const Radio: FC<{
|
||||
name: string;
|
||||
on_select: (val: any) => void;
|
||||
options: () => Promise<(string | { value: string; label: string })[]>;
|
||||
options: (opt: {
|
||||
data: any;
|
||||
current_name: string;
|
||||
}) => Promise<(string | { value: string; label: string })[]>;
|
||||
value: string;
|
||||
PassProp: any;
|
||||
custom: "y" | "n";
|
||||
child: any;
|
||||
form?: FormHook;
|
||||
selection: "single" | "multi";
|
||||
init_modify: (modify: any) => void;
|
||||
}> = ({
|
||||
options,
|
||||
|
|
@ -21,40 +26,22 @@ export const Radio: FC<{
|
|||
child,
|
||||
PassProp,
|
||||
init_modify,
|
||||
selection,
|
||||
name,
|
||||
}) => {
|
||||
const local = useLocal({
|
||||
list: [] as { value: string; label: string }[],
|
||||
status: "init" as "init" | "loading" | "ready",
|
||||
mod: false,
|
||||
mod: null as any,
|
||||
option_modified: false,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
local.status = "loading";
|
||||
local.render();
|
||||
options().then((result) => {
|
||||
local.list = result.map((e) => {
|
||||
if (typeof e === "string") {
|
||||
return {
|
||||
value: e,
|
||||
label: e,
|
||||
};
|
||||
}
|
||||
return e;
|
||||
});
|
||||
|
||||
local.status = "ready";
|
||||
if (!local.option_modified && form) {
|
||||
local.status = "loading";
|
||||
local.render();
|
||||
});
|
||||
}, [options]);
|
||||
|
||||
let mod = null as any;
|
||||
if (form && !local.mod) {
|
||||
local.mod = true;
|
||||
mod = modify.bind({
|
||||
form,
|
||||
change_hook(opt) {
|
||||
const result = opt.options;
|
||||
if (result) {
|
||||
options({ data: form.hook.getValues(), current_name: name }).then(
|
||||
(result) => {
|
||||
local.list = result.map((e) => {
|
||||
if (typeof e === "string") {
|
||||
return {
|
||||
|
|
@ -64,41 +51,76 @@ export const Radio: FC<{
|
|||
}
|
||||
return e;
|
||||
});
|
||||
|
||||
local.status = "ready";
|
||||
local.render();
|
||||
}
|
||||
},
|
||||
});
|
||||
init_modify(mod);
|
||||
);
|
||||
}
|
||||
}, [options]);
|
||||
|
||||
if (form) {
|
||||
if (!local.mod) {
|
||||
local.mod = modify.bind({
|
||||
form,
|
||||
change_hook(opt) {
|
||||
const result = opt.options;
|
||||
if (result) {
|
||||
local.option_modified = true;
|
||||
local.list = result.map((e) => {
|
||||
if (typeof e === "string") {
|
||||
return {
|
||||
value: e,
|
||||
label: e,
|
||||
};
|
||||
}
|
||||
return e;
|
||||
});
|
||||
}
|
||||
form.render();
|
||||
},
|
||||
});
|
||||
init_modify(local.mod);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="c-flex c-flex-1">
|
||||
<div className="c-flex c-flex-1 c-flex-wrap">
|
||||
{!!local.list &&
|
||||
local.list.map((item, index) => {
|
||||
if (custom === "y" && form)
|
||||
local.list
|
||||
.filter((e) => e)
|
||||
.map((item, index) => {
|
||||
if (custom === "y" && form)
|
||||
return (
|
||||
<PassProp
|
||||
data={form.hook.getValues()}
|
||||
modify={local.mod}
|
||||
is_active={item.value === value}
|
||||
option_item={item}
|
||||
current_name={name}
|
||||
item_click={() => {
|
||||
console.log(selection);
|
||||
|
||||
form.hook.setValue(name, [...value])
|
||||
}}
|
||||
>
|
||||
{child}
|
||||
</PassProp>
|
||||
);
|
||||
return (
|
||||
<PassProp
|
||||
data={form.hook.getValues()}
|
||||
modify={mod}
|
||||
is_active={item.value === value}
|
||||
<Button
|
||||
key={index}
|
||||
onClick={() => {
|
||||
on_select(item.value);
|
||||
local.render();
|
||||
}}
|
||||
className={cx("c-mr-2")}
|
||||
variant={item.value === value ? "default" : "outline"}
|
||||
>
|
||||
{child}
|
||||
</PassProp>
|
||||
<span>{item.label}</span>
|
||||
</Button>
|
||||
);
|
||||
return (
|
||||
<Button
|
||||
key={index}
|
||||
onClick={() => {
|
||||
on_select(item.value);
|
||||
local.render();
|
||||
}}
|
||||
className={cx("c-mr-2")}
|
||||
variant={item.value === value ? "default" : "outline"}
|
||||
>
|
||||
<span>{item.label}</span>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -16,8 +16,7 @@ export const modify = function (
|
|||
if (keys.includes("value")) {
|
||||
f.hook.setValue(field_name, opt.value);
|
||||
}
|
||||
if (this.change_hook)
|
||||
this.change_hook(opt);
|
||||
if (this.change_hook) this.change_hook(opt);
|
||||
};
|
||||
|
||||
export type FormHook = {
|
||||
|
|
|
|||
Loading…
Reference in New Issue