midsuit
/
julong-lib
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
faisolavolut 2025-04-10 11:36:28 +07:00
parent f7a79188e0
commit 637556e335
2 changed files with 88 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/form/Field.tsx
View File

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

161
components/form/field/TypeTag.tsx
View File

@ -2,7 +2,7 @@ import { cva } from "class-variance-authority";
import { useRef, useState, useEffect } from "react"; import { useRef, useState, useEffect } from "react";
import { Checkbox } from "../../ui/checkbox"; import { Checkbox } from "../../ui/checkbox";
import { X } from "lucide-react"; import { X } from "lucide-react";
import { IoIosRadioButtonOff } from "react-icons/io"; import { IoIosRadioButtonOff, IoIosRadioButtonOn } from "react-icons/io";
export const TypeTag: React.FC<any> = ({ export const TypeTag: React.FC<any> = ({
name, name,
@ -15,6 +15,7 @@ export const TypeTag: React.FC<any> = ({
onChange, onChange,
styleField, styleField,
mode, mode,
valueChecked,
}) => { }) => {
const [tags, setTags] = useState<string[]>(fm.data?.[name] || []); const [tags, setTags] = useState<string[]>(fm.data?.[name] || []);
const [inputValue, setInputValue] = useState(""); const [inputValue, setInputValue] = useState("");
@ -98,83 +99,86 @@ export const TypeTag: React.FC<any> = ({
disabled && !tags?.length ? "h-9" : "" disabled && !tags?.length ? "h-9" : ""
)} )}
> >
{tags.map((tag, index) => ( {tags.map((tag, index) => {
<div const checked = valueChecked?.length
key={index} ? isChecked(tag, valueChecked)
className={cx( : false;
buttonVariants({ variant: styleField ? styleField : "default" }), return (
editingIndex === index <div
? styleField key={index}
? "border-b border-gray-500 rounded-none" className={cx(
: "bg-transparent border border-gray-500 rounded-full text-gray-900" buttonVariants({ variant: styleField ? styleField : "default" }),
: "" editingIndex === index
)} ? styleField
> ? "border-b border-gray-500 rounded-none"
{styleField === "checkbox" ? ( : "bg-transparent border border-gray-500 rounded-full text-gray-900"
<> : ""
<Checkbox )}
className="border border-primary" >
checked={false} {styleField === "checkbox" ? (
onClick={(e) => {}} <>
/>{" "} <Checkbox
</> className="border border-primary"
) : styleField === "radio" ? ( checked={checked}
<> onClick={(e) => {}}
<IoIosRadioButtonOff />{" "} />{" "}
</> </>
) : styleField === "order" ? ( ) : styleField === "radio" ? (
<> <>{checked ? <IoIosRadioButtonOn /> : <IoIosRadioButtonOff />}</>
{index + 1} ) : styleField === "order" ? (
{". "} <>
</> {index + 1}
) : ( {". "}
<></> </>
)} ) : (
{disabled ? ( <></>
<div className="px-2">{tag}</div> )}
) : ( {disabled ? (
<div <div className="px-2">{tag}</div>
ref={(el) => { ) : (
if (el) tagRefs.current[index] = el; <div
}} ref={(el) => {
className={cx( if (el) tagRefs.current[index] = el;
"px-3 py-1 pr-0 flex-grow focus:shadow-none focus:ring-0 focus:border-none focus:outline-none", }}
editingIndex !== index && "cursor-pointer" className={cx(
)} "px-3 py-1 pr-0 flex-grow focus:shadow-none focus:ring-0 focus:border-none focus:outline-none",
contentEditable={editingIndex === index} editingIndex !== index && "cursor-pointer"
suppressContentEditableWarning )}
onBlur={() => handleSaveEdit(index)} contentEditable={editingIndex === index}
onKeyDown={(e) => { suppressContentEditableWarning
if (disabled) return; onBlur={() => handleSaveEdit(index)}
if (e.key === "Enter") { onKeyDown={(e) => {
e.preventDefault(); if (disabled) return;
e.stopPropagation(); if (e.key === "Enter") {
handleSaveEdit(index); e.preventDefault();
e.stopPropagation();
handleSaveEdit(index);
}
if (e.key === "Escape") {
setEditingIndex(null);
}
}}
onClick={() => handleFocusTag(index)}
onInput={(e) =>
setTempValue((e.target as HTMLDivElement).innerText)
} }
if (e.key === "Escape") { >
setEditingIndex(null); {tag}
} </div>
}} )}
onClick={() => handleFocusTag(index)}
onInput={(e) =>
setTempValue((e.target as HTMLDivElement).innerText)
}
>
{tag}
</div>
)}
{!disabled && ( {!disabled && (
<button <button
type="button" type="button"
onClick={() => removeTag(index)} onClick={() => removeTag(index)}
className="ml-2 text-red-500 pr-2" className="ml-2 text-red-500 pr-2"
> >
<X size={16} /> <X size={16} />
</button> </button>
)} )}
</div> </div>
))} );
})}
{!disabled && ( {!disabled && (
<input <input
type="text" type="text"
@ -188,3 +192,8 @@ export const TypeTag: React.FC<any> = ({
</div> </div>
); );
}; };
const isChecked = (value: string, valueChecked: string[]) => {
const findCheck = valueChecked?.find((item) => item === value);
return findCheck ? true : false;
};