You are viewing the legacy documentation of Plasma featuring the components from the@coveord/plasma-react and @coveord/plasma-style packages. Those packages are deprecated and replaced by the @coveord/plasma-mantine package.

Modal Window

A modal appears over the current context to have users focus on a particular task or information.

View source

1
import {useDispatch} from 'react-redux';
2
import {Button, IDispatch, openModal, closeModal, ModalCompositeConnected} from '@coveord/plasma-react';
3

4
export default () => {
5
    const dispatch: IDispatch = useDispatch();
6
    const open = () => dispatch(openModal('simple-modal'));
7
    const close = () => dispatch(closeModal('simple-modal'));
8
    return (
9
        <>
10
            <Button onClick={open}>Open modal</Button>
11
            <ModalCompositeConnected
12
                id="simple-modal"
13
                title="Simple Modal"
14
                modalBodyChildren={
15
                    <div className="mt2">
16
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper blandit volutpat.
17
                        Suspendisse nec lorem mauris. Nam faucibus vitae tellus eu aliquam. Vivamus non quam at lectus
18
                        pharetra gravida. In hac habitasse platea dictumst. Integer nec bibendum risus. Ut pulvinar
19
                        sodales erat, id sollicitudin nunc egestas vel. Aliquam lectus nisl, aliquam sed rutrum sed,
20
                        facilisis cursus lorem. Proin egestas justo erat, a rhoncus nulla pharetra et. In placerat
21
                        facilisis tellus eget sodales. Mauris eu neque est. Nam in odio pretium, ullamcorper orci nec,
22
                        ultricies arcu.
23
                    </div>
24
                }
25
                modalFooterChildren={
26
                    <Button small onClick={close}>
27
                        Close
28
                    </Button>
29
                }
30
                modalBodyClasses={['mod-header-padding', 'mod-form-top-bottom-padding']}
31
            />
32
        </>
33
    );
34
};

Props

Name	Type	Default	Description
`children`	`ReactNode`
`classes`	`IClassName`
`closeCallback`	`() => void`
`closeTimeout`	`number`
`contentClasses`	`IClassName`		Additionnal CSS class to add to the modal container
`contentRef`	`(el: HTMLDivElement) => void`
`docLink`	`ILinkSvgProps`		Props of the link to documentation
`htmlId`	`string`		id for the html element
`id`	`string`
`isOpened`	`boolean`
`isPrompt`	`boolean`	`false`	Wheter this backdrop is for a prompt or not
`layer`	`number`
`modalBodyChildren`	`ReactNode`		React child to add to the body
`modalBodyClasses`	`IClassName`		Additionnal CSS class to add to the body
`modalFooterChildren`	`ReactNode`		React child to add to the footer
`modalFooterClasses`	`IClassName`		Additionnal CSS class to add to the footer
`modalHeaderChildren`	`ReactNode`		React child to add to the header
`modalHeaderClasses`	`IClassName`		Additionnal CSS class to add to the header
`onClose`	`() => void`
`onDestroy`	`() => void`
`onRender`	`() => void`
`openOnMount`	`boolean`		Renders the Modal already opened.
`title`	`ReactNode`		Title of the modal
`validateShouldNavigate`	`(isDirty: boolean) => boolean`		Function that will be called before the modal is closed isDirty–has the modal changed
`withReduxState`	`boolean`	`true if using a connected component, false otherwise`	Wheter this component is connected to the state or not
`displayFor`deprecated	`string[]`		Do not use

Examples

Prompts

1
import {useDispatch} from 'react-redux';
2
import {Button, IDispatch, openModal, closeModal, ModalCompositeConnected} from '@coveord/plasma-react';
3

4
export default () => {
5
    const dispatch: IDispatch = useDispatch();
6
    const open = (id: string) => () => dispatch(openModal(id));
7
    const close = (id: string) => () => dispatch(closeModal(id));
8
    return (
9
        <>
10
            <Button onClick={open('success')}>Success prompt</Button>
11
            <Button onClick={open('warning')}>Warning prompt</Button>
12
            <Button onClick={open('critical')}>Critical prompt</Button>
13
            <Button onClick={open('info')}>Info prompt</Button>
14
            <ModalCompositeConnected
15
                id="success"
16
                title="Prompt success"
17
                isPrompt
18
                modalHeaderClasses={['mod-success']}
19
                modalBodyChildren={<div className="mt2">Success message</div>}
20
                modalFooterChildren={
21
                    <Button small onClick={close('success')}>
22
                        Close
23
                    </Button>
24
                }
25
                modalBodyClasses={['mod-header-padding', 'mod-form-top-bottom-padding']}
26
            />
27

28
            <ModalCompositeConnected
29
                id="warning"
30
                title="Prompt warning"
31
                isPrompt
32
                modalHeaderClasses={['mod-warning']}
33
                modalBodyChildren={<div className="mt2">Warning message</div>}
34
                modalFooterChildren={
35
                    <Button small onClick={close('warning')}>
36
                        Close
37
                    </Button>
38
                }
39
                modalBodyClasses={['mod-header-padding', 'mod-form-top-bottom-padding']}
40
            />
41

42
            <ModalCompositeConnected
43
                id="critical"
44
                title="Prompt critical"
45
                isPrompt
46
                modalHeaderClasses={['mod-critical']}
47
                modalBodyChildren={<div className="mt2">Critical message</div>}
48
                modalFooterChildren={
49
                    <Button small onClick={close('critical')}>
50
                        Close
51
                    </Button>
52
                }
53
                modalBodyClasses={['mod-header-padding', 'mod-form-top-bottom-padding']}
54
            />
55

56
            <ModalCompositeConnected
57
                id="info"
58
                title="Prompt info"
59
                isPrompt
60
                modalHeaderClasses={['mod-info']}
61
                modalBodyChildren={<div className="mt2">Info message</div>}
62
                modalFooterChildren={
63
                    <Button small onClick={close('info')}>
64
                        Close
65
                    </Button>
66
                }
67
                modalBodyClasses={['mod-header-padding', 'mod-form-top-bottom-padding']}
68
            />
69
        </>
70
    );
71
};

Loading Modal

1
import {useDispatch} from 'react-redux';
2
import {Button, IDispatch, openModal, closeModal, ModalLoading} from '@coveord/plasma-react';
3

4
export default () => {
5
    const dispatch: IDispatch = useDispatch();
6
    const open = () => dispatch(openModal('loading-modal'));
7
    const close = () => dispatch(closeModal('loading-modal'));
8
    return (
9
        <>
10
            <Button onClick={open}>Open Modal</Button>
11
            <ModalLoading id="loading-modal" title="My loading title" openOnMount={false} />
12
        </>
13
    );
14
};

With Additional Props

1
import {useDispatch} from 'react-redux';
2
import {Button, IDispatch, openModal, closeModal, ModalCompositeConnected} from '@coveord/plasma-react';
3

4
export default () => {
5
    const dispatch: IDispatch = useDispatch();
6
    const open = () => dispatch(openModal('additional-props'));
7
    const close = () => dispatch(closeModal('additional-props'));
8
    return (
9
        <>
10
            <Button onClick={open}>Open modal</Button>
11
            <ModalCompositeConnected
12
                id="additional-props"
13
                title="Modal with addtional ReactModal props"
14
                classes={['mod-fade-in-scale']}
15
                modalBodyChildren="This modal only closes by using the close button or the X."
16
                modalFooterChildren={<Button onClick={close}>Close</Button>}
17
                modalBodyClasses={['mod-header-padding', 'mod-form-top-bottom-padding']}
18
                docLink={{url: 'https://www.coveo.com', tooltip: {title: 'Go to coveo.com'}}}
19
                shouldCloseOnEsc={false}
20
                shouldCloseOnOverlayClick={false}
21
                onAfterOpen={() => alert('The modal content has mounted and is ready to open.')}
22
                closeCallback={() => alert('The modal has closed.')}
23
            />
24
        </>
25
    );
26
};

With Dirty State Management

1
import {useSelector, useDispatch} from 'react-redux';
2
import {
3
    Button,
4
    IDispatch,
5
    Input,
6
    openModal,
7
    closeModal,
8
    ModalCompositeConnected,
9
    PlasmaState,
10
    UnsavedChangesModalProvider,
11
    WithDirtySelectors,
12
    WithDirtyActions,
13
} from '@coveord/plasma-react';
14

15
export default () => {
16
    const id = 'ModalWithDirty';
17
    const isDirty = useSelector((state: PlasmaState) => WithDirtySelectors.getIsDirty(state, {id}));
18
    const dispatch: IDispatch = useDispatch();
19
    const open = () => dispatch(openModal(id));
20
    const close = () => dispatch(closeModal(id));
21
    const toggleIsDirty = (dirty: boolean) => dispatch(WithDirtyActions.toggle(id, dirty));
22

23
    const handleClose = () => {
24
        close();
25
        toggleIsDirty(false);
26
    };
27
    const onInputChange = (value: string) => {
28
        toggleIsDirty(value !== '');
29
    };
30
    return (
31
        <>
32
            <Button onClick={open}>Open Modal</Button>
33
            <UnsavedChangesModalProvider isDirty={isDirty}>
34
                {({promptBefore}) => (
35
                    <ModalCompositeConnected
36
                        id={id}
37
                        title="A modal with a dirty change discard prevention"
38
                        classes={['mod-fade-in-scale']}
39
                        modalBodyChildren={
40
                            <div className="mt2">
41
                                <div className="mb2">
42
                                    <Input
43
                                        id="input"
44
                                        labelTitle="Try to close me with dirty changes."
45
                                        onChange={onInputChange}
46
                                    />
47
                                </div>
48
                            </div>
49
                        }
50
                        modalFooterChildren={<Button onClick={() => promptBefore(handleClose)}>Close</Button>}
51
                        validateShouldNavigate={() => promptBefore(handleClose)}
52
                        modalBodyClasses={['mod-header-padding', 'mod-form-top-bottom-padding']}
53
                        docLink={{url: 'https://www.coveo.com', tooltip: {title: 'Go to coveo.com'}}}
54
                    />
55
                )}
56
            </UnsavedChangesModalProvider>
57
        </>
58
    );
59
};

No guidelines exist for ModalCompositeConnected yet.

Create guidelines