wip fix

comps/form/ButtonOptions/index.tsx

@@ -1,46 +0,0 @@
-import { useLocal } from "@/utils/use-local";
-import { FC, useEffect } from "react";
-import { Button } from "../../ui/button";
-
-export const ButtonOptions: FC<{
-  on_select: (val: any) => void;
-  options: () => Promise<{ value: string; label: string }[]>;
-  value: string
-}> = ({ options, on_select, value }) => {
-  const local = useLocal({
-    list: [] as { value: string; label: string }[],
-    status: "init" as "init" | "loading" | "ready",
-  });
-
-  useEffect(() => {
-    if (local.status === "init") {
-      local.status = "loading";
-      local.render();
-      options().then((result) => {
-        local.list = result;
-
-        local.status = "ready";
-        local.render();
-      });
-    }
-  }, [options]);
-
-  return (
-    <div>
-      {!!local.list &&
-        local.list.map((item, index) => (
-          <Button
-            key={index}
-            onClick={() => {
-              on_select(item.value);
-              local.render();
-            }}
-            className="c-mr-3"
-            variant={item.value === value ? "default" : "outline"}
-          >
-            <span>{item.label}</span>
-          </Button>
-        ))}
-    </div>
-  );
-};

comps/form/Field.tsx

@@ -13,7 +13,7 @@ import { UseFormReturn } from "react-hook-form";
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 import { Textarea } from "../ui/textarea";
-import { ButtonOptions } from "./ButtonOptions";
+import { Radio } from "./Radio";
 import { Date } from "./Date";
 import { Datetime } from "./Datetime";
 import { InputMoney } from "./InputMoney";
@@ -30,7 +30,7 @@ export const Field: FC<{
     | "textarea"
     | "dropdown"
     | "password"
-    | "button-options"
+    | "radio"
     | "date"
     | "datetime"
     | "money"
@@ -40,6 +40,9 @@ export const Field: FC<{
   options: () => Promise<{ value: string; label: string }[]>;
   slider: () => Promise<SliderOptions>;
   on_change: (arg: { value: any }) => void | Promise<void>;
+  PassProp: any;
+  custom: "y" | "n";
+  child: any;
 }> = ({
   name,
   form,
@@ -50,6 +53,9 @@ export const Field: FC<{
   options,
   slider,
   on_change,
+  PassProp,
+  custom,
+  child,
 }) => {
   const value = form?.hook.getValues()[name];
   const local = useLocal({
@@ -208,10 +214,13 @@ export const Field: FC<{
                   />
                 )}
 
-                {type === "button-options" && (
-                  <ButtonOptions
+                {type === "radio" && (
+                  <Radio
                     options={options}
+                    PassProp={PassProp}
+                    child={child}
                     value={field.value}
+                    custom={custom}
                     on_select={(value: any) => {
                       form?.hook.setValue(name, value);
                     }}

comps/form/Radio/index.tsx

@@ -0,0 +1,60 @@
+import { useLocal } from "@/utils/use-local";
+import { FC, useEffect } from "react";
+import { Button } from "../../ui/button";
+
+export const Radio: FC<{
+  on_select: (val: any) => void;
+  options: () => Promise<(string | { value: string; label: string })[]>;
+  value: string;
+  PassProp: any;
+  custom: "y" | "n";
+  child: any;
+}> = ({ options, on_select, value, custom, child, PassProp }) => {
+  const local = useLocal({
+    list: [] as { value: string; label: string }[],
+    status: "init" as "init" | "loading" | "ready",
+  });
+
+  useEffect(() => {
+    if (local.status === "init") {
+      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";
+        local.render();
+      });
+    }
+  }, [options]);
+
+  return (
+    <div className="c-flex c-flex-1">
+      {!!local.list &&
+        local.list.map((item, index) => {
+          if (custom === "y") return <PassProp>{child}</PassProp>;
+          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>
+  );
+};