@wix/design-system
Version:
@wix/design-system
69 lines • 4.71 kB
JavaScript
import React from 'react';
import Heading from '../Heading';
import Text from '../Text';
import TextButton from '../TextButton';
import CloseButton from '../CloseButton';
import Button from '../Button';
import deprecationLog from '../utils/deprecationLog';
import { st, classes } from './MessageBoxMarketerialLayout.st.css.js';
const buttonSkinByTheme = {
blue: 'standard',
purple: 'premium',
white: 'dark',
};
/**
* @deprecated MessageBoxMarketerialLayout is deprecated and will be removed in the next major version. Please use MessageModalLayout instead.
*/
class MessageBoxMarketerialLayout extends React.PureComponent {
constructor(props) {
super(props);
this._renderButtons = () => {
const { primaryButtonLabel, primaryButtonTheme, primaryButtonNode, theme, onPrimaryButtonClick, primaryButtonDisabled, secondaryButtonLabel, footerBottomChildren, onSecondaryButtonClick, } = this.props;
return (React.createElement("div", { className: st(classes.buttonsContainer, {
noPadding: !primaryButtonNode &&
!primaryButtonLabel &&
!secondaryButtonLabel &&
!footerBottomChildren,
}) },
!!primaryButtonNode && (React.createElement("div", { "data-hook": "primary-button-node" }, primaryButtonNode)),
!primaryButtonNode && primaryButtonLabel && (React.createElement(Button, { skin: buttonSkinByTheme[primaryButtonTheme || theme], priority: !primaryButtonTheme && theme === 'white' ? 'secondary' : 'primary', onClick: onPrimaryButtonClick, dataHook: "primary-button", disabled: primaryButtonDisabled }, primaryButtonLabel)),
secondaryButtonLabel && !footerBottomChildren && (React.createElement("div", { className: classes.secondaryButtonContainer },
React.createElement(TextButton, { size: "small", onClick: onSecondaryButtonClick, dataHook: "secondary-button", weight: "normal" }, secondaryButtonLabel)))));
};
deprecationLog('<MessageBoxMarketerialLayout/> is deprecated and will be removed in the next major version. Please use <MessageModalLayout/> instead.');
}
render() {
const { dataHook, title, content, primaryButtonLabel, secondaryButtonLabel, imageUrl, onClose, theme, imageComponent, footerBottomChildren, removeButtonsPadding, width, noBodyPadding, } = this.props;
// instead of introducing a breaking change for padding removal for non buttons existence, we add this prop
const shouldRemoveButtonsPadding = removeButtonsPadding && !primaryButtonLabel && !secondaryButtonLabel;
const shouldDisplayBodyPadding = !noBodyPadding;
return (React.createElement("div", { className: st(classes.root), style: { width }, "data-hook": dataHook },
React.createElement("div", { className: st(classes.header, {
theme,
imageExists: !!imageComponent || !!imageUrl,
}) },
React.createElement("div", { className: st(classes.close) },
React.createElement(CloseButton, { dataHook: "close-button", size: "large", onClick: onClose, skin: "dark" })),
imageComponent ? (React.createElement("div", { className: st(classes.headerImageComponent) }, imageComponent)) : imageUrl ? (React.createElement("div", { className: st(classes.headerImage) },
React.createElement("img", { src: imageUrl, "data-hook": "header-image" }))) : null),
!title ? null : (React.createElement("div", { className: st(classes.title, {
shouldDisplayBodyPadding,
}), "data-hook": "message-box-title" },
React.createElement(Heading, { size: "extraLarge" }, title))),
React.createElement("div", { className: st(classes.content, {
shouldDisplayBodyPadding,
}) },
React.createElement(Text, { size: "medium", weight: "thin" }, content)),
shouldRemoveButtonsPadding ? (React.createElement("div", { className: classes.emptyButtonsContainer })) : (this._renderButtons()),
footerBottomChildren ? (React.createElement("div", { "data-hook": "footer-layout-bottom-children", className: st(classes.bottomChildren), children: footerBottomChildren })) : null));
}
}
MessageBoxMarketerialLayout.displayName = 'MessageBoxMarketerialLayout';
MessageBoxMarketerialLayout.defaultProps = {
theme: 'blue',
removeButtonsPadding: false,
width: '600px',
noBodyPadding: false,
};
export default MessageBoxMarketerialLayout;
//# sourceMappingURL=MessageBoxMarketerialLayout.js.map