-
Notifications
You must be signed in to change notification settings - Fork 77
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
String Arrays Support #35
Comments
Currently, AutoForm only supports array of objects (https://github.com/vantezzen/auto-form#arrays) as inferring field labels etc. needs to be done another way otherwise. |
Thanks Bennett for your response. I've resolved my issue by creating a new INPUT_COMPONENTS and tweaking the AutoForm as needed. However, given the specific nature of my modifications and the number of custom changes involved, submitting a pull request might not be feasible. |
Hi, can you share the modifications? I have also stumbled upon this problem |
For my case I created a Component for Tags listing for my project as blow: import { useEffect, useRef, useState } from "react";
import { Button } from "./ui/button";
import { XIcon } from "lucide-react";
type Params = {
onValueChange?: (value: string[]) => void;
value: string[];
readonly?: boolean;
};
export function TagsListInput({ value, onValueChange, readonly }: Params) {
const [tags, setTags] = useState<string[]>();
const inputRef = useRef(null);
useEffect(() => {
if (value) {
setTags(value);
}
}, [value]);
useEffect(() => {
if (onValueChange && tags) {
onValueChange(tags);
}
}, [tags]);
return (
<>
{tags &&
tags.map((item, index) => (
<Button
key={"tag-" + index + "item"}
className="me-1 font-normal text-xs px-2.5 py-0.5 h-auto mb-1"
variant="secondary"
onClick={(e) => {
let temp = tags.filter((str, idx) => idx != index);
setTags(temp);
e.preventDefault();
}}
>
{item}
<XIcon className="ms-2 w-3" />
</Button>
))}
<input
type="text"
placeholder="Enter Keyword"
className="text-sm px-2.5 py-0.5 border-muted border w-32"
ref={inputRef}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === "Tab") {
let temp = tags;
if (!temp) temp = [];
if (inputRef.current) {
temp.push((inputRef.current as HTMLInputElement).value);
(inputRef.current as HTMLInputElement).value = "";
}
setTags([...temp]);
e.preventDefault();
}
}}
/>
</>
);
} And I added an Autoform Field to the Autoform.ts file to support this new field as below: function AutoFormTagsInput({
label,
isRequired,
field,
fieldConfigItem,
fieldProps,
}: AutoFormInputComponentProps) {
return (
<FormItem>
<FormLabel>
{label}
{isRequired && <span className="text-destructive"> *</span>}
</FormLabel>
<FormControl>
<TagsListInput
value={field.value}
onValueChange={field.onChange}
{...fieldProps}
/>
</FormControl>
{fieldConfigItem.description && (
<FormDescription>{fieldConfigItem.description}</FormDescription>
)}
<FormMessage />
</FormItem>
);
} I added the support for the new component to the INPUT_COMPONENTS type as below: const INPUT_COMPONENTS = {
...
tags: AutoFormTagsInput,
textlist: AutoFormTextListInput,
}; And in AutoForm usage I set the FieldConfig as below: fieldConfig={{
keywords: { fieldType: "tags" },
}} BTW, as I noted Bennett has refactored the project a lot. So, you must figure out how to do this approach on the updated project structure. I hope it helps. |
Hi there,
First of all thanks for the great tool which you developed. For my case, I need AutoForm to support String Arrays. which unfortunately, I couldn't figure out how to do it.
The field is as below:
The text was updated successfully, but these errors were encountered: