wix-style-react
Version:
wix-style-react
65 lines • 3.51 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';
class ModalMobileLayout extends React.PureComponent {
constructor() {
super(...arguments);
this._renderTitle = () => (React.createElement("div", { className: classes.title, "data-hook": "modalMobileLayout-title", "data-sticky-title": this.props.stickyTitle }, this.props.title));
this._renderFooter = () => (React.createElement("div", { className: classes.footer, "data-hook": "modalMobileLayout-footer", "data-sticky-footer": this.props.stickyFooter }, this.props.footer));
}
render() {
const { dataHook, className, title, content, footer, onOverlayClick, onCloseButtonClick, fullscreen, stickyTitle, stickyFooter, } = this.props;
return (React.createElement("div", { id: "modalMobileLayout-root", "data-hook": dataHook, className: st(classes.root, {
fullscreen,
stickyTitle,
stickyFooter,
noTitle: !title,
noFooter: !footer,
}, className), onClick: ({ target: { id } }) => {
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 && this._renderTitle(),
React.createElement("div", { className: classes.content, "data-hook": "modalMobileLayout-content" },
React.createElement("div", null,
title && !stickyTitle && this._renderTitle(),
content,
footer && !stickyFooter && this._renderFooter())),
footer && stickyFooter && this._renderFooter())));
}
}
ModalMobileLayout.displayName = 'ModalMobileLayout';
ModalMobileLayout.propTypes = {
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: PropTypes.string,
/** A css class to be applied to the component's root element */
className: PropTypes.string,
/** title node to be displayed in the header strip */
title: PropTypes.node,
/** If true, the title will be sticky to the top of the modal */
stickyTitle: PropTypes.bool,
/** content node to be displayed */
content: PropTypes.node,
/** footer node to be displayed */
footer: PropTypes.node,
/** If true, the footer will be sticky to the bottom of the modal */
stickyFooter: PropTypes.bool,
/** callback for when there's a click on the overlay (in case the modal in not fullscreen) */
onOverlayClick: PropTypes.func,
/** callback for when the the close button is clicked. **Note**: if this prop is not provided, then the close button will not be shown. */
onCloseButtonClick: PropTypes.func,
/** If true, the modal will take all of the screen */
fullscreen: PropTypes.bool,
};
ModalMobileLayout.defaultProps = {
stickyTitle: false,
stickyFooter: false,
fullscreen: false,
};
export default ModalMobileLayout;
//# sourceMappingURL=ModalMobileLayout.js.map