33 lines
1.5 KiB
TypeScript
33 lines
1.5 KiB
TypeScript
|
import type { ObjectFieldTemplateProps, ArrayFieldTemplateProps } from '@rjsf/utils'
|
||
|
|
import { Button } from '@gouvfr-lasuite/cunningham-react'
|
||
|
|
|
||
|
|
export function ObjectFieldTemplate({ title, properties, description }: ObjectFieldTemplateProps) {
|
||
|
|
return (
|
||
|
|
<fieldset style={{ border: '1px solid var(--c--theme--colors--greyscale-200)', borderRadius: '4px', padding: '1rem', marginBottom: '1rem' }}>
|
||
|
|
{title && <legend style={{ fontWeight: 600, padding: '0 0.5rem' }}>{title}</legend>}
|
||
|
|
{description && <p style={{ color: 'var(--c--theme--colors--greyscale-600)', marginBottom: '0.5rem' }}>{description}</p>}
|
||
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
|
||
|
|
{properties.map((prop) => prop.content)}
|
||
|
|
</div>
|
||
|
|
</fieldset>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
// In rjsf v6, items are pre-rendered ReactElements (each rendered by ArrayFieldItemTemplate,
|
||
|
|
// which handles its own remove/reorder buttons). ArrayFieldTemplate just provides the layout.
|
||
|
|
export function ArrayFieldTemplate({ title, items, canAdd, onAddClick }: ArrayFieldTemplateProps) {
|
||
|
|
return (
|
||
|
|
<div style={{ marginBottom: '1rem' }}>
|
||
|
|
{title && <h4 style={{ marginBottom: '0.5rem' }}>{title}</h4>}
|
||
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
|
||
|
|
{items}
|
||
|
|
</div>
|
||
|
|
{canAdd && (
|
||
|
|
<div style={{ marginTop: '0.5rem' }}>
|
||
|
|
<Button color="neutral" size="small" onClick={onAddClick}>+ Add item</Button>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|