Collection

A Collection allows users to provide an array of items of the same type.

List of tasks

These will have to be done by next week

1
import {Checkbox, Collection, TextInput, useForm} from '@coveord/plasma-mantine';
2

3
const Demo = () => {
4
    const form = useForm({
5
        validateInputOnChange: true,
6
        initialValues: {
7
            todoList: [
8
                {name: 'wash the dishes', done: true},
9
                {name: 'take out the trash', done: false},
10
                {name: 'vacuum the floors', done: false},
11
            ],
12
        },
13
        validate: {
14
            todoList: (value) => (value.length < 2 ? `Don't be lazy, add just ${2 - value.length} more tasks` : null),
15
        },
16
    });
17

18
    return (
19
        <Collection<{name: string; done: boolean}>
20
            draggable
21
            addLabel="Add task"
22
            description="These will have to be done by next week"
23
            label="List of tasks"
24
            newItem={{name: '', done: false}}
25
            {...form.getInputProps('todoList')}
26
        >
27
            {(_task, index) => (
28
                <>
29
                    <TextInput
30
                        // Autofocus is annoying when playing with the sandbox but you should have this on otherwise
31
                        // autoFocus
32
                        placeholder="Do something ..."
33
                        {...form.getInputProps(`todoList.${index}.name`)}
34
                    />
35
                    <Checkbox {...form.getInputProps(`todoList.${index}.done`, {type: 'checkbox'})} />
36
                </>
37
            )}
38
        </Collection>
39
    );
40
};
41
export default Demo;

Props

Name	Type	Default	Description
`children`required	`(item: unknown, index: number) => ReactNode`		A render function called for each item passed in the `value` prop. item–The current item's value index–The current item's index
`newItem`required	`unknown`		The default value each new item should have
`addDisabledTooltip`	`string`	`'There is already an empty item'`	The tooltip text displayed when hovering over the disabled add item button
`addLabel`	`string`	`"Add item"`	The label of the add item button
`allowAdd`	`(values: unknown[]) => boolean`		Function that determines if the add item button should be enabled given the current items of the collection. The button is always enabled if this props remains undefined values–The current items of the collection
`description`	`ReactNode`		Input description, displayed after label
`descriptionProps`	`Record<string, any>`		Props spread to description element
`disabled`	`boolean`	`false`	Whether the collection is disabled, or in other words in read only mode
`draggable`	`boolean`	`false`	Whether the collection should have drag and drop behavior enabled
`error`	`ReactNode`		Displays error message after input
`errorProps`	`Record<string, any>`		Props spread to error element
`getItemId`	`(originalItem: unknown) => string`		Defines how each item is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense. This method is required when using this component with ReactHookForm. originalItem–The original item
`label`	`ReactNode`		Input label, displayed before input
`labelProps`	`Record<string, any>`		Props spread to label element
`onChange`	`(value: unknown[]) => void`		Function called whenever the value needs to be updated value–The whole list of items after the change
`onFocus`	`() => void`		Unused, has no effect
`onInsertItem`	`(value: unknown, index: number) => void`		Function that gets called when a new item needs to be added to the collection value–The the value of the item to insert index–The index of the new item to insert
`onRemoveItem`	`(itemIndex: number) => void`		Function called after an item is removed from the collection using the remove button itemIndex–The index of the item that was removed
`onReorderItem`	`(payload: ReorderPayload) => void`		Function that gets called whenever a collection item needs to be reordered payload–The origin and destination index of the item to reorder
`required`	`boolean`	`false`	Whether the collection is required. When required is true, the collection will hide the remove button if there is only one item
`spacing`	`MantineNumberSize`	`'xs'`	The spacing between the colleciton items
`value`	`unknown[]`	`[]`	The list of items to display inside the collection
`withAsterisk`	`boolean`		Determines whether required asterisk should be rendered, overrides required prop, does not add required attribute to the input

Examples

Collection with ReactHookForm

List of tasks

These will have to be done by next week

1
import {Checkbox, Collection, TextInput} from '@coveord/plasma-mantine';
2
import {Controller, useForm, useFieldArray} from 'react-hook-form';
3

4
const Demo = () => {
5
    const {control} = useForm({
6
        defaultValues: {
7
            todoList: [
8
                {name: 'wash the dishes', done: true},
9
                {name: 'take out the trash', done: false},
10
                {name: 'vacuum the floors', done: false},
11
            ],
12
        },
13
        mode: 'onBlur',
14
    });
15

16
    const itemId = 'internal-id';
17
    const {fields, insert, move, remove} = useFieldArray({control, keyName: itemId, name: 'todoList'});
18

19
    return (
20
        <Controller
21
            control={control}
22
            name="todoList"
23
            render={({fieldState: {error}}) => (
24
                <Collection<{name: string; done: boolean; 'internal-id'?: string}>
25
                    draggable
26
                    addLabel="Add task"
27
                    description="These will have to be done by next week"
28
                    label="List of tasks"
29
                    newItem={{name: '', done: false}}
30
                    error={error?.message}
31
                    onReorderItem={({from, to}) => {
32
                        move(from, to);
33
                    }}
34
                    onRemoveItem={remove}
35
                    onInsertItem={(value, index: number) => {
36
                        insert(index, value);
37
                    }}
38
                    value={fields}
39
                    getItemId={(item) => item[itemId]}
40
                >
41
                    {(_task, index) => (
42
                        <>
43
                            <Controller
44
                                control={control}
45
                                name={`todoList.${index}.name` as const}
46
                                render={({field, fieldState: {error: errorFieldName}}) => (
47
                                    <TextInput
48
                                        {...field}
49
                                        error={errorFieldName?.message}
50
                                        placeholder="Do something ..."
51
                                    />
52
                                )}
53
                            />
54
                            <Controller
55
                                control={control}
56
                                name={`todoList.${index}.done` as const}
57
                                render={({field: {value, ...restField}, fieldState: {error: errorFieldDone}}) => (
58
                                    <Checkbox checked={value} {...restField} error={errorFieldDone?.message} />
59
                                )}
60
                            />
61
                        </>
62
                    )}
63
                </Collection>
64
            )}
65
        />
66
    );
67
};
68
export default Demo;

No guidelines exist for Collection yet.

Create guidelines