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,
},
],
...
}