Layout

Modal Window

A modal appears over the current context to have users focus on a particular task or information.
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

NameTypeDefaultDescription
childrenReactNode
classesIClassName
closeCallback() => void
closeTimeoutnumber
contentClassesIClassName
Additionnal CSS class to add to the modal container
contentRef(el: HTMLDivElement) => void
docLinkILinkSvgProps
Props of the link to documentation
htmlIdstring
id for the html element
idstring
isOpenedboolean
isPromptbooleanfalse
Wheter this backdrop is for a prompt or not
layernumber
modalBodyChildrenReactNode
React child to add to the body
modalBodyClassesIClassName
Additionnal CSS class to add to the body
modalFooterChildrenReactNode
React child to add to the footer
modalFooterClassesIClassName
Additionnal CSS class to add to the footer
modalHeaderChildrenReactNode
React child to add to the header
modalHeaderClassesIClassName
Additionnal CSS class to add to the header
onClose() => void
onDestroy() => void
onRender() => void
openOnMountboolean
Renders the Modal already opened.
titleReactNode
Title of the modal
validateShouldNavigate(isDirty: boolean) => boolean
Function that will be called before the modal is closed
  • isDirtyhas the modal changed
withReduxStatebooleantrue if using a connected component, false otherwise
Wheter this component is connected to the state or not
displayFordeprecatedstring[]
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