wix-style-react
Version:
wix-style-react
58 lines • 3.36 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './BaseModalLayout.st.css';
import { labels, dataHooks } from './constants';
import CloseButton from '../CloseButton';
import { Help24 as Help } from '@wix/wix-ui-icons-common/system/';
import { ThemeProviderConsumerBackwardCompatible } from '../ThemeProvider/ThemeProviderConsumerBackwardCompatible';
import { BaseModalLayoutContext } from './BaseModalLayoutContext';
import { Header, Content, Footer, Footnote, Illustration, } from './LayoutBlocks';
import Box from '../Box';
const classNames = {
headerClassName: classes.header,
contentClassName: classes.content,
footerClassName: classes.footer,
footnoteClassName: classes.footnote,
illustrationClassName: classes.illustration,
};
/** Private component to be used by all public modals. Represents the common internals of all modals */
class BaseModalLayout extends React.PureComponent {
render() {
const { dataHook, className, children, style, onCloseButtonClick, onHelpButtonClick, ...restProps } = this.props;
const { theme } = restProps;
const controlButtonAmount = [onCloseButtonClick, onHelpButtonClick].filter(Boolean).length;
return (React.createElement("div", { "data-hook": dataHook, "data-theme": theme, style: style, className: st(classes.root, { theme, controlButtonAmount }, className) },
controlButtonAmount > 0 && (React.createElement(ThemeProviderConsumerBackwardCompatible, { defaultIcons: {
BaseModalLayout: {
HelpIcon: Help,
},
} }, ({ icons: { BaseModalLayout: { HelpIcon }, }, }) => (React.createElement(Box, { direction: "horizontal", className: classes.controlButtons },
onHelpButtonClick && (React.createElement(CloseButton, { dataHook: dataHooks.helpButton, className: classes.helpButton, onClick: onHelpButtonClick, size: "large", skin: "dark", "aria-label": labels.help },
React.createElement(HelpIcon, { className: classes.helpIcon }))),
onCloseButtonClick && (React.createElement(CloseButton, { dataHook: dataHooks.closeButton, className: classes.closeButton, onClick: onCloseButtonClick, size: "large", skin: "dark", "aria-label": labels.close })))))),
React.createElement(BaseModalLayoutContext.Provider, { value: { ...restProps, ...classNames } }, children)));
}
}
BaseModalLayout.Header = Header;
BaseModalLayout.Content = Content;
BaseModalLayout.Footer = Footer;
BaseModalLayout.Footnote = Footnote;
BaseModalLayout.Illustration = Illustration;
BaseModalLayout.propTypes = {
/** additional css classes */
className: PropTypes.string,
/** data hook for testing */
dataHook: PropTypes.string,
/** callback for when the close button is clicked */
onCloseButtonClick: PropTypes.func,
/** callback for when the help button is clicked */
onHelpButtonClick: PropTypes.func,
/** a global theme for the modal, will be applied as stylable state and will affect footer buttons skin */
theme: PropTypes.oneOf(['standard', 'premium', 'destructive']),
};
BaseModalLayout.defaultProps = {
theme: 'standard',
};
BaseModalLayout.displayName = 'BaseModalLayout';
export default BaseModalLayout;
//# sourceMappingURL=BaseModalLayout.js.map