Add description to array input fields

This commit is contained in:
Ola Hungerford
2025-01-29 11:36:10 -07:00
parent a4469f7895
commit 4b3bb5f34e

View File

@@ -132,8 +132,19 @@ const DynamicJsonForm = ({
const arrayValue = Array.isArray(currentValue) ? currentValue : []; const arrayValue = Array.isArray(currentValue) ? currentValue : [];
if (!propSchema.items) return null; if (!propSchema.items) return null;
return ( return (
<div className="space-y-2"> <div className="space-y-4">
{arrayValue.map((item, index) => ( {propSchema.description && (
<p className="text-sm text-gray-600">{propSchema.description}</p>
)}
{propSchema.items?.description && (
<p className="text-sm text-gray-500">
Items: {propSchema.items.description}
</p>
)}
<div className="space-y-2">
{arrayValue.map((item, index) => (
<div key={index} className="flex items-center gap-2"> <div key={index} className="flex items-center gap-2">
{renderFormFields( {renderFormFields(
propSchema.items as JsonSchemaType, propSchema.items as JsonSchemaType,
@@ -154,18 +165,20 @@ const DynamicJsonForm = ({
</Button> </Button>
</div> </div>
))} ))}
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
onClick={() => { onClick={() => {
handleFieldChange( handleFieldChange(
path, path,
[...arrayValue, generateDefaultValue(propSchema.items as JsonSchemaType)] [...arrayValue, generateDefaultValue(propSchema.items as JsonSchemaType)]
); );
}} }}
> title={propSchema.items?.description ? `Add new ${propSchema.items.description}` : 'Add new item'}
Add Item >
</Button> Add Item
</Button>
</div>
</div> </div>
); );
} }