@coveord/plasma-react
and @coveord/plasma-style
packages. Those packages are deprecated and replaced by the @coveord/plasma-mantine
package. 1import {useDispatch} from 'react-redux';2import {Button, IDispatch, openModal, closeModal, ModalCompositeConnected} from '@coveord/plasma-react';34export default () => {5const dispatch: IDispatch = useDispatch();6const open = () => dispatch(openModal('simple-modal'));7const close = () => dispatch(closeModal('simple-modal'));8return (9<>10<Button onClick={open}>Open modal</Button>11<ModalCompositeConnected12id="simple-modal"13title="Simple Modal"14modalBodyChildren={15<div className="mt2">16Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper blandit volutpat.17Suspendisse nec lorem mauris. Nam faucibus vitae tellus eu aliquam. Vivamus non quam at lectus18pharetra gravida. In hac habitasse platea dictumst. Integer nec bibendum risus. Ut pulvinar19sodales erat, id sollicitudin nunc egestas vel. Aliquam lectus nisl, aliquam sed rutrum sed,20facilisis cursus lorem. Proin egestas justo erat, a rhoncus nulla pharetra et. In placerat21facilisis tellus eget sodales. Mauris eu neque est. Nam in odio pretium, ullamcorper orci nec,22ultricies arcu.23</div>24}25modalFooterChildren={26<Button small onClick={close}>27Close28</Button>29}30modalBodyClasses={['mod-header-padding', 'mod-form-top-bottom-padding']}31/>32</>33);34};
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
| |
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 |
1import {useDispatch} from 'react-redux';2import {Button, IDispatch, openModal, closeModal, ModalCompositeConnected} from '@coveord/plasma-react';34export default () => {5const dispatch: IDispatch = useDispatch();6const open = (id: string) => () => dispatch(openModal(id));7const close = (id: string) => () => dispatch(closeModal(id));8return (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<ModalCompositeConnected15id="success"16title="Prompt success"17isPrompt18modalHeaderClasses={['mod-success']}19modalBodyChildren={<div className="mt2">Success message</div>}20modalFooterChildren={21<Button small onClick={close('success')}>22Close23</Button>24}25modalBodyClasses={['mod-header-padding', 'mod-form-top-bottom-padding']}26/>2728<ModalCompositeConnected29id="warning"30title="Prompt warning"31isPrompt32modalHeaderClasses={['mod-warning']}33modalBodyChildren={<div className="mt2">Warning message</div>}34modalFooterChildren={35<Button small onClick={close('warning')}>36Close37</Button>38}39modalBodyClasses={['mod-header-padding', 'mod-form-top-bottom-padding']}40/>4142<ModalCompositeConnected43id="critical"44title="Prompt critical"45isPrompt46modalHeaderClasses={['mod-critical']}47modalBodyChildren={<div className="mt2">Critical message</div>}48modalFooterChildren={49<Button small onClick={close('critical')}>50Close51</Button>52}53modalBodyClasses={['mod-header-padding', 'mod-form-top-bottom-padding']}54/>5556<ModalCompositeConnected57id="info"58title="Prompt info"59isPrompt60modalHeaderClasses={['mod-info']}61modalBodyChildren={<div className="mt2">Info message</div>}62modalFooterChildren={63<Button small onClick={close('info')}>64Close65</Button>66}67modalBodyClasses={['mod-header-padding', 'mod-form-top-bottom-padding']}68/>69</>70);71};
1import {useDispatch} from 'react-redux';2import {Button, IDispatch, openModal, closeModal, ModalLoading} from '@coveord/plasma-react';34export default () => {5const dispatch: IDispatch = useDispatch();6const open = () => dispatch(openModal('loading-modal'));7const close = () => dispatch(closeModal('loading-modal'));8return (9<>10<Button onClick={open}>Open Modal</Button>11<ModalLoading id="loading-modal" title="My loading title" openOnMount={false} />12</>13);14};
1import {useDispatch} from 'react-redux';2import {Button, IDispatch, openModal, closeModal, ModalCompositeConnected} from '@coveord/plasma-react';34export default () => {5const dispatch: IDispatch = useDispatch();6const open = () => dispatch(openModal('additional-props'));7const close = () => dispatch(closeModal('additional-props'));8return (9<>10<Button onClick={open}>Open modal</Button>11<ModalCompositeConnected12id="additional-props"13title="Modal with addtional ReactModal props"14classes={['mod-fade-in-scale']}15modalBodyChildren="This modal only closes by using the close button or the X."16modalFooterChildren={<Button onClick={close}>Close</Button>}17modalBodyClasses={['mod-header-padding', 'mod-form-top-bottom-padding']}18docLink={{url: 'https://www.coveo.com', tooltip: {title: 'Go to coveo.com'}}}19shouldCloseOnEsc={false}20shouldCloseOnOverlayClick={false}21onAfterOpen={() => alert('The modal content has mounted and is ready to open.')}22closeCallback={() => alert('The modal has closed.')}23/>24</>25);26};
1import {useSelector, useDispatch} from 'react-redux';2import {3Button,4IDispatch,5Input,6openModal,7closeModal,8ModalCompositeConnected,9PlasmaState,10UnsavedChangesModalProvider,11WithDirtySelectors,12WithDirtyActions,13} from '@coveord/plasma-react';1415export default () => {16const id = 'ModalWithDirty';17const isDirty = useSelector((state: PlasmaState) => WithDirtySelectors.getIsDirty(state, {id}));18const dispatch: IDispatch = useDispatch();19const open = () => dispatch(openModal(id));20const close = () => dispatch(closeModal(id));21const toggleIsDirty = (dirty: boolean) => dispatch(WithDirtyActions.toggle(id, dirty));2223const handleClose = () => {24close();25toggleIsDirty(false);26};27const onInputChange = (value: string) => {28toggleIsDirty(value !== '');29};30return (31<>32<Button onClick={open}>Open Modal</Button>33<UnsavedChangesModalProvider isDirty={isDirty}>34{({promptBefore}) => (35<ModalCompositeConnected36id={id}37title="A modal with a dirty change discard prevention"38classes={['mod-fade-in-scale']}39modalBodyChildren={40<div className="mt2">41<div className="mb2">42<Input43id="input"44labelTitle="Try to close me with dirty changes."45onChange={onInputChange}46/>47</div>48</div>49}50modalFooterChildren={<Button onClick={() => promptBefore(handleClose)}>Close</Button>}51validateShouldNavigate={() => promptBefore(handleClose)}52modalBodyClasses={['mod-header-padding', 'mod-form-top-bottom-padding']}53docLink={{url: 'https://www.coveo.com', tooltip: {title: 'Go to coveo.com'}}}54/>55)}56</UnsavedChangesModalProvider>57</>58);59};
No guidelines exist for ModalCompositeConnected yet.