feat: add valueChecked prop to Field and TypeTag components for improved tag management

components/form/Field.tsx

@@ -74,6 +74,7 @@ export interface FieldProps {
   isDebounce?: boolean;
   data?: any;
   mode?: string;
+  valueChecked?: string[];
 }
 export const Field: React.FC<FieldProps> = ({
   fm,
@@ -109,6 +110,7 @@ export const Field: React.FC<FieldProps> = ({
   description,
   styleField,
   isDebounce = false,
+  valueChecked,
   mode,
 }) => {
   let result = null;
@@ -469,6 +471,7 @@ export const Field: React.FC<FieldProps> = ({
                   fm={fm}
                   fields={initField}
                   name={name}
+                  valueChecked={valueChecked}
                   disabled={is_disable}
                   className={className}
                   onChange={onChange}

components/form/field/TypeTag.tsx

@@ -2,7 +2,7 @@ import { cva } from "class-variance-authority";
 import { useRef, useState, useEffect } from "react";
 import { Checkbox } from "../../ui/checkbox";
 import { X } from "lucide-react";
-import { IoIosRadioButtonOff } from "react-icons/io";
+import { IoIosRadioButtonOff, IoIosRadioButtonOn } from "react-icons/io";
 
 export const TypeTag: React.FC<any> = ({
   name,
@@ -15,6 +15,7 @@ export const TypeTag: React.FC<any> = ({
   onChange,
   styleField,
   mode,
+  valueChecked,
 }) => {
   const [tags, setTags] = useState<string[]>(fm.data?.[name] || []);
   const [inputValue, setInputValue] = useState("");
@@ -98,7 +99,11 @@ export const TypeTag: React.FC<any> = ({
         disabled && !tags?.length ? "h-9" : ""
       )}
     >
-      {tags.map((tag, index) => (
+      {tags.map((tag, index) => {
+        const checked = valueChecked?.length
+          ? isChecked(tag, valueChecked)
+          : false;
+        return (
           <div
             key={index}
             className={cx(
@@ -114,14 +119,12 @@ export const TypeTag: React.FC<any> = ({
               <>
                 <Checkbox
                   className="border border-primary"
-                checked={false}
+                  checked={checked}
                   onClick={(e) => {}}
                 />{" "}
               </>
             ) : styleField === "radio" ? (
-            <>
+              <>{checked ? <IoIosRadioButtonOn /> : <IoIosRadioButtonOff />}</>
-              <IoIosRadioButtonOff />{" "}
-            </>
             ) : styleField === "order" ? (
               <>
                 {index + 1}
@@ -174,7 +177,8 @@ export const TypeTag: React.FC<any> = ({
               </button>
             )}
           </div>
-      ))}
+        );
+      })}
       {!disabled && (
         <input
           type="text"
@@ -188,3 +192,8 @@ export const TypeTag: React.FC<any> = ({
     </div>
   );
 };
+
+const isChecked = (value: string, valueChecked: string[]) => {
+  const findCheck = valueChecked?.find((item) => item === value);
+  return findCheck ? true : false;
+};