@wix/design-system
Version:
@wix/design-system
45 lines • 2.33 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { X } from '@wix/wix-ui-icons-common';
import IconButton from '../IconButton';
import { st, classes } from './ModalMobileLayout.st.css.js';
import Title from './components/Title/Title';
import Footer from './components/Footer/Footer';
const ModalMobileLayout = ({ dataHook, className, title, content, footer, onOverlayClick, onCloseButtonClick, fullscreen = false, stickyTitle = false, stickyFooter = false, }) => {
return (React.createElement("div", { id: "modalMobileLayout-root", "data-hook": dataHook, className: st(classes.root, {
fullscreen,
noTitle: !title,
noFooter: !footer,
}, className), onClick: ({ target }) => {
target instanceof HTMLElement &&
target.id === 'modalMobileLayout-root' &&
onOverlayClick &&
onOverlayClick();
} },
React.createElement("div", { className: classes.container },
onCloseButtonClick && (React.createElement("div", { className: classes.close },
React.createElement(IconButton, { dataHook: "modalMobileLayout-close-button", skin: "light", onClick: onCloseButtonClick },
React.createElement(X, null)))),
title && stickyTitle && React.createElement(Title, { isSticky: true }, title),
React.createElement("div", { className: classes.content, "data-hook": "modalMobileLayout-content" },
React.createElement("div", null,
title && !stickyTitle && React.createElement(Title, null, title),
content,
footer && !stickyFooter && React.createElement(Footer, null, footer))),
footer && stickyFooter && React.createElement(Footer, { isSticky: true }, footer))));
};
ModalMobileLayout.displayName = 'ModalMobileLayout';
ModalMobileLayout.propTypes = {
dataHook: PropTypes.string,
className: PropTypes.string,
title: PropTypes.node,
stickyTitle: PropTypes.bool,
content: PropTypes.node,
footer: PropTypes.node,
stickyFooter: PropTypes.bool,
onOverlayClick: PropTypes.func,
onCloseButtonClick: PropTypes.func,
fullscreen: PropTypes.bool,
};
export default ModalMobileLayout;
//# sourceMappingURL=ModalMobileLayout.js.map