`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:

Note that the Style control is not included in this list. Support for using the Style control together with the Shape control is a work in progress.

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.