@cimpress/react-components
Version:
React components to support the MCP styleguide
28 lines • 2.37 kB
JavaScript
import React, { useState } from 'react';
import { Modal, Button, ButtonGroup } from '@cimpress/react-components';
const variations = [
{ type: 'plain', status: undefined },
{ type: 'warning', status: 'warning' },
{ type: 'danger', status: 'danger' },
{ type: 'success', status: 'success' },
{ type: 'info', status: 'info' },
];
export default function ModalDemo() {
const [modalState, setModalState] = useState(() => ({ open: false, status: undefined }));
const [childOpen, setChildOpen] = useState(false);
const closeModal = () => setModalState({ open: false, status: undefined });
return (React.createElement("div", null,
React.createElement(ButtonGroup, null,
variations.map(variation => (React.createElement(Button, { key: variation.type, onClick: () => setModalState({ open: true, status: variation.status }) },
"Launch ",
variation.type,
" modal"))),
React.createElement(Button, { style: { color: 'red' }, onClick: () => setChildOpen(true) },
"Launch child modal",
React.createElement(Modal, { status: "success", show: childOpen, onRequestHide: () => setChildOpen(false), title: "An example modal", closeButton: true, footer: React.createElement(Button, { onClick: () => setChildOpen(false) }, "Close") },
React.createElement("p", null, "I am a modal body from inside a button (and I didn't inherit the red text of my parent component, thanks to React Portals)!"),
React.createElement("p", null, "I also stop events from propagating to the parent.")))),
React.createElement(Modal, { status: modalState.status, className: "foobar", show: modalState.open, onRequestHide: closeModal, title: "An example modal", closeButton: true, footer: React.createElement(Button, { onClick: closeModal }, "Close") },
React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam asperiores, quidem quos eaque error odit itaque, quo eveniet consectetur nesciunt inventore numquam repellendus. Laboriosam repellendus, ea alias debitis hic incidunt! Molestiae sed ad earum distinctio eaque laborum culpa necessitatibus? Dolorem sequi officiis atque facilis est repudiandae aut voluptatum veniam voluptas."))));
}
//# sourceMappingURL=modal.js.map