Repeaters

Block repeater

The BlockRepeater component is a simple way to repeat blocks of content. Use Block for wrapping fields.

Component

<BlockRepeater 
    field="blocks" 
    label="Content" 
    discriminationField="type"
>
    <Block discriminateBy="content" label="">
        ...
    </Block>
</Reapeater>

Component - advanced

<BlockRepeater 
    field="blocks" 
    label="Content" 
    discriminationField="type"
    sortableBy="order"
    removalType="delete"
    addButtonText="Add footer block"
>
    <Block discriminateBy="content" label="">
        ...
    </Block>
</BlockReapeater>

API schema

export class TodoList {
  tasks = def.oneHasMany(Task, "todoList");
}

export class Task {
  order = def.intColumn();
  done = def.boolColumn();
  content = def.stringColumn();
  todoList = def.manyHasOne(TodoItem, "tasks");
}

Props

Prop	Description
field	string The name of the column in Contember schema where to store data. Required
label	ReactNode The label for the field. Required
discriminationField	string | SugaredRelativeSingleField Required
sortableBy	undefined | string The name of the column in Contember schema that is used to sort the options.
enableRemoving	boolean
enableRemoving	undefined | RemovelType
addButtonText	undefined | string

Repeater

The Repeater component renders a repeater with given child components.

Component

<Repeater field="tasks" label="Todo list" orderBy="content">
    <TextAreaField field="content" label="Task" />
</Reapeater>

Component - advanced

<Repeater field="tasks" label="Todo list" sortableBy="order">
    <CheckboxField field="done" label="Done" defaultValue="false" />
    <TextAreaField field="content" label="Task" />
</Reapeater>

API schema

export class TodoList {
  tasks = def.oneHasMany(Task, "todoList");
}

export class Task {
  order = def.intColumn();
  done = def.boolColumn();
  content = def.stringColumn();
  todoList = def.manyHasOne(TodoItem, "tasks");
}

Props

Prop	Description
field	string The name of the column in Contember schema where to store data. Required
label	ReactNode The label for the field. Required
sortableBy	undefined | string The name of the column in Contember schema that is used to sort the options.
orderBy	undefined | string The name of the column in Contember schema that is used to order the options.