@wix/design-system
Version:
@wix/design-system
62 lines • 3.88 kB
JavaScript
import React, { useEffect } from 'react';
import { classes } from './BaseModalLayout.classes';
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 { useIcons } from '../WixDesignSystemIconThemeProvider';
import { BaseModalLayoutContext } from './BaseModalLayoutContext';
import { Header, Content, Footer, Footnote, Illustration, } from './LayoutBlocks';
import Box from '../Box';
import deprecationLog from '../utils/deprecationLog';
const BaseModalLayout = ({ dataHook, className, children, style, onCloseButtonClick, // deprecated
onHelpButtonClick, // deprecated
closeButtonProps, helpButtonProps, skin, ...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 = {
...helpButtonProps,
onClick: helpButtonProps?.onClick || onHelpButtonClick,
skin: helpButtonProps?.skin || 'dark',
size: helpButtonProps?.size || 'large',
};
closeButtonProps = {
...closeButtonProps,
onClick: closeButtonProps?.onClick || onCloseButtonClick,
skin: closeButtonProps?.skin || 'dark',
size: closeButtonProps?.size || 'large',
};
const controlButtonAmount = [
helpButtonProps?.onClick,
closeButtonProps?.onClick,
].filter(Boolean).length;
const icons = useIcons('BaseModalLayout', { Help24: Help });
return (React.createElement("div", { "data-hook": dataHook, "data-skin": skin, style: style, className: classes.root({
skin,
controlButtonAmount: String(controlButtonAmount),
}, className) },
controlButtonAmount > 0 && (React.createElement(ThemeProviderConsumerBackwardCompatible, { defaultIcons: {
BaseModalLayout: {
HelpIcon: icons.Help24,
},
} }, ({ 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, onMouseDown: helpButtonProps.onMouseDown, 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, onMouseDown: closeButtonProps.onMouseDown, size: closeButtonProps.size, skin: closeButtonProps.skin, autoFocus: closeButtonProps.autoFocus, "aria-label": labels.close })))))),
React.createElement(BaseModalLayoutContext.Provider, { value: { ...restProps, skin } }, 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.displayName = 'BaseModalLayout';
export default BaseModalLayout;
//# sourceMappingURL=BaseModalLayout.js.map