@cimpress/react-components
Version:
React components to support the MCP styleguide
54 lines • 3.76 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = ModalDemo;
const react_1 = __importStar(require("react"));
const react_components_1 = require("@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' },
];
function ModalDemo() {
const [modalState, setModalState] = (0, react_1.useState)(() => ({ open: false, status: undefined }));
const [childOpen, setChildOpen] = (0, react_1.useState)(false);
const closeModal = () => setModalState({ open: false, status: undefined });
return (react_1.default.createElement("div", null,
react_1.default.createElement(react_components_1.ButtonGroup, null,
variations.map(variation => (react_1.default.createElement(react_components_1.Button, { key: variation.type, onClick: () => setModalState({ open: true, status: variation.status }) },
"Launch ",
variation.type,
" modal"))),
react_1.default.createElement(react_components_1.Button, { style: { color: 'red' }, onClick: () => setChildOpen(true) },
"Launch child modal",
react_1.default.createElement(react_components_1.Modal, { status: "success", show: childOpen, onRequestHide: () => setChildOpen(false), title: "An example modal", closeButton: true, footer: react_1.default.createElement(react_components_1.Button, { onClick: () => setChildOpen(false) }, "Close") },
react_1.default.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_1.default.createElement("p", null, "I also stop events from propagating to the parent.")))),
react_1.default.createElement(react_components_1.Modal, { status: modalState.status, className: "foobar", show: modalState.open, onRequestHide: closeModal, title: "An example modal", closeButton: true, footer: react_1.default.createElement(react_components_1.Button, { onClick: closeModal }, "Close") },
react_1.default.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