@wix/design-system
Version:
@wix/design-system
96 lines • 4.82 kB
JavaScript
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './BaseModalLayout.st.css.js';
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';
import deprecationLog from '../utils/deprecationLog';
const classNames = {
headerClassName: classes.header,
contentClassName: classes.content,
footerClassName: classes.footer,
footnoteClassName: classes.footnote,
illustrationClassName: classes.illustration,
};
const BaseModalLayout = ({ dataHook, className, children, style, onCloseButtonClick, // deprecated
onHelpButtonClick, // deprecated
closeButtonProps, helpButtonProps, skin = 'standard', ...restProps }) => {
useEffect(() => {
if (onCloseButtonClick) {
deprecationLog('<BaseModalLayout /> - prop "onCloseButtonClick" is deprecated and will be removed in next major release, please use "closeButtonProps" property instead.');
}
if (onHelpButtonClick) {
deprecationLog('<BaseModalLayout /> - prop "onHelpButtonClick" is deprecated and will be removed in next major release, please use "helpButtonProps" property instead.');
}
}, [onCloseButtonClick, onHelpButtonClick]);
helpButtonProps = {
onClick: helpButtonProps?.onClick || onHelpButtonClick,
skin: helpButtonProps?.skin || 'dark',
size: helpButtonProps?.size || 'large',
};
closeButtonProps = {
onClick: closeButtonProps?.onClick || onCloseButtonClick,
skin: closeButtonProps?.skin || 'dark',
size: closeButtonProps?.size || 'large',
};
const controlButtonAmount = [
helpButtonProps?.onClick,
closeButtonProps?.onClick,
].filter(Boolean).length;
return (React.createElement("div", { "data-hook": dataHook, "data-skin": skin, style: style, className: st(classes.root, { skin, controlButtonAmount }, className) },
controlButtonAmount > 0 && (React.createElement(ThemeProviderConsumerBackwardCompatible, { defaultIcons: {
BaseModalLayout: {
HelpIcon: Help,
},
} }, ({ icons: { BaseModalLayout: { HelpIcon }, }, }) => (React.createElement(Box, { direction: "horizontal", className: classes.controlButtons },
helpButtonProps.onClick && (React.createElement(CloseButton, { dataHook: dataHooks.helpButton, className: classes.helpButton, onClick: helpButtonProps.onClick, size: helpButtonProps.size, skin: helpButtonProps.skin, "aria-label": labels.help },
React.createElement(HelpIcon, { className: classes.helpIcon }))),
closeButtonProps.onClick && (React.createElement(CloseButton, { dataHook: dataHooks.closeButton, className: classes.closeButton, onClick: closeButtonProps.onClick, size: closeButtonProps.size, skin: closeButtonProps.skin, "aria-label": labels.close })))))),
React.createElement(BaseModalLayoutContext.Provider, { value: { ...restProps, skin, ...classNames } }, children)));
};
/** Private component to be used by all public modals. Represents the common internals of all modals */
BaseModalLayout.Header = Header;
BaseModalLayout.Content = Content;
BaseModalLayout.Footer = Footer;
BaseModalLayout.Footnote = Footnote;
BaseModalLayout.Illustration = Illustration;
BaseModalLayout.propTypes = {
className: PropTypes.string,
dataHook: PropTypes.string,
skin: PropTypes.oneOf(['standard', 'premium', 'destructive']),
helpButtonProps: PropTypes.shape({
onClick: PropTypes.func,
size: PropTypes.oneOf(['small', 'medium', 'large']),
skin: PropTypes.oneOf([
'standard',
'standardFilled',
'light',
'lightFilled',
'dark',
'transparent',
]),
}),
closeButtonProps: PropTypes.shape({
onClick: PropTypes.func,
size: PropTypes.oneOf(['small', 'medium', 'large']),
skin: PropTypes.oneOf([
'standard',
'standardFilled',
'light',
'lightFilled',
'dark',
'transparent',
]),
}),
/** @deprecated use closeButtonProps instead. */
onCloseButtonClick: PropTypes.func,
/** @deprecated use helpButtonProps instead. */
onHelpButtonClick: PropTypes.func,
};
BaseModalLayout.displayName = 'BaseModalLayout';
export default BaseModalLayout;
//# sourceMappingURL=BaseModalLayout.js.map