List
The List
control provides your component with an array where the values are controlled by a
Makeswift control.
The List
control can be nested as deeply as you want within List
and
Shape
controls.
AnchorExamples
AnchorPopulating a list of testimonials
In this example we register a hypothetical Testimonials
component which takes a testimonials
prop. This prop expects an array of testimonial objects. We use the List
control, together with
Shape
, TextInput
, and
TextArea
controls to control the testimonials
prop.
import { ReactRuntime } from '@makeswift/runtime/react'
import { List, Shape, TextInput, TextArea } from '@makeswift/runtime/controls'
import { Testimonials } from '~/components'
ReactRuntime.registerComponent(Testimonials, {
type: 'testimonials',
label: 'Testimonials',
props: {
testimonials: List({
label: 'Testimonials',
type: Shape({
type: {
author: TextInput({ label: 'Author', defaultValue: '' }),
quote: TextArea({ label: 'Quote', defaultValue: '' }),
},
}),
getItemLabel(testimonial) {
return testimonial?.author || 'Untitled'
},
}),
},
})
AnchorAPI
AnchorParameters
Parameter | Type | Required | Default | Description |
---|---|---|---|---|
type | ControlDefinition | yes | N/A | A control that determines the values in the array. |
label | string | no | 'List' | Text for the panel label. |
getItemLabel | (item: T) => string | no | undefined | A function to get the label for each list item shown in the panel. |
Valid control values for the type
parameter are the following:
AnchorProvided value
The List
control provides an array value to your components where the items in the array are of
the type provided by the control used in the type
field. Each item's value will be determined by
the associated control.