Repeater Items
repeaterItems
should be an array with one configuration object for each repeated block.
The configuration object has the following shape:
Properties
interface IRepeaterItem {
name: string
itemType?: string
itemLabel?: string
min?: number
max?: number
positionLabel?: string
getDefaultProps?: () => Props
items?: {
type: string
label?: string
min?: number
max?: number
getDefaultProps?: () => Props
}[]
}
When max
is reached, you cannot add any more blocks to the repeater.
When you set a min
React Bricks will always add the min number of blocks (using default values).
Multiple item types
itemType
is used when you have just one type of brick that can be repeated in a Repeater (for example a Thumbnail in a Gallery).positionLabel
anditems
are used when you can have multiple types of brick in a Reapear (for example in a Form you may add "TextInput" blocks or "Select" blocks). In that case thepositionLabel
identifies the position where this blocks will appear (for example "Top" or "Form fields").- When you have multiple item types, each with its own
min
andmax
, themin
prop on the root item is not considered, while themax
number of all items is still enforced.
Properties definition
Property | Definition |
---|---|
name | Name of the prop passed to the component with these repeated items |
itemType | It corresponds to the unique name of the repeated Brick type (for example "feature-item") |
itemLabel? | Optional label used for the Add / Remove buttons. If none is provided, the repeated brick's label is used as fallback |
getDefaultProps | Since 3.9.0 it is possible to specify a function that returns the default props for the repeated brick inside of this brick. For example, for a Button brick repeated inside a Form brick, you could specify that the default type should be "submit" instead of "link". |
min | Minimum number of repeated items allowed |
max | Maximum number of repeated items allowed |
positionLabel | A label for the position where blocks will appear. Useful when you have multiple item types (see next prop). |
items | Allowed item types, when multiple. In this case itemType and min are not used. Each item has its own type , label , min and max and getDefaultProps . |
Usage example
YourBrick.schema {
...
repeaterItems: [
{
name: 'buttons',
itemType: 'button',
itemLabel: 'Button',
min: 0,
max: 2,
},
],
...
}