wip fix

comps/form/Field.tsx

@@ -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);
                     }}

comps/form/Form.tsx

@@ -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>

comps/form/Radio/index.tsx

@@ -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,17 +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(() => {
+    if (!local.option_modified && form) {
       local.status = "loading";
       local.render();
-    options().then((result) => {
+      options({ data: form.hook.getValues(), current_name: name }).then(
+        (result) => {
           local.list = result.map((e) => {
             if (typeof e === "string") {
               return {
@@ -44,17 +54,19 @@ export const Radio: FC<{
 
           local.status = "ready";
           local.render();
-    });
+        }
+      );
+    }
   }, [options]);
 
-  let mod = null as any;
-  if (form && !local.mod) {
-    local.mod = true;
-    mod = modify.bind({
+  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 {
@@ -64,23 +76,33 @@ export const Radio: FC<{
               }
               return e;
             });
-          local.render();
           }
+          form.render();
         },
       });
-    init_modify(mod);
+      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) => {
+        local.list
+          .filter((e) => e)
+          .map((item, index) => {
             if (custom === "y" && form)
               return (
                 <PassProp
                   data={form.hook.getValues()}
-                modify={mod}
+                  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>

comps/form/utils/utils.ts

@@ -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 = {