wix-style-react
Version:
wix-style-react
95 lines • 5.91 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import Heading from '../Heading';
import Text from '../Text';
import TextButton from '../TextButton';
import CloseButton from '../CloseButton';
import Button from '../Button';
import { st, classes } from './MessageBoxMarketerialLayout.st.css';
import { WixStyleReactContext } from '../WixStyleReactProvider/context';
const buttonSkinByTheme = {
blue: 'standard',
purple: 'premium',
white: 'dark',
};
class MessageBoxMarketerialLayout extends React.PureComponent {
constructor() {
super(...arguments);
this._renderButtons = newColorsBranding => {
const { primaryButtonLabel, primaryButtonTheme, primaryButtonNode, theme, onPrimaryButtonClick, primaryButtonDisabled, secondaryButtonLabel, footerBottomChildren, onSecondaryButtonClick, } = this.props;
return (React.createElement("div", { className: st(classes.buttonsContainer, {
noPadding: newColorsBranding &&
!primaryButtonNode &&
!primaryButtonLabel &&
!secondaryButtonLabel &&
!footerBottomChildren,
newColorsBranding,
}) },
!!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: newColorsBranding ? 'normal' : 'thin' }, secondaryButtonLabel)))));
};
}
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(WixStyleReactContext.Consumer, null, ({ newColorsBranding }) => (React.createElement("div", { className: st(classes.root), style: { width }, "data-hook": dataHook },
React.createElement("div", { className: st(classes.header, {
theme,
imageExists: !!imageComponent || !!imageUrl,
newColorsBranding,
}) },
React.createElement("div", { className: st(classes.close, { newColorsBranding }) },
React.createElement(CloseButton, { dataHook: "close-button", size: newColorsBranding ? 'large' : 'medium', onClick: onClose, skin: theme === 'white' || newColorsBranding
? 'dark'
: 'lightFilled' })),
imageComponent ? (React.createElement("div", { className: st(classes.headerImageComponent, {
newColorsBranding,
}) }, imageComponent)) : imageUrl ? (React.createElement("div", { className: st(classes.headerImage, { newColorsBranding }) },
React.createElement("img", { src: imageUrl, "data-hook": "header-image" }))) : null),
newColorsBranding && !title ? null : (React.createElement("div", { className: st(classes.title, {
shouldDisplayBodyPadding,
newColorsBranding,
}), "data-hook": "message-box-title" },
React.createElement(Heading, { size: "extraLarge" }, title))),
React.createElement("div", { className: st(classes.content, {
shouldDisplayBodyPadding,
newColorsBranding,
}) },
React.createElement(Text, { size: "medium", weight: "thin" }, content)),
shouldRemoveButtonsPadding ? (React.createElement("div", { className: classes.emptyButtonsContainer })) : (this._renderButtons(newColorsBranding)),
footerBottomChildren ? (React.createElement("div", { "data-hook": "footer-layout-bottom-children", className: st(classes.bottomChildren, { newColorsBranding }), children: footerBottomChildren })) : null))));
}
}
MessageBoxMarketerialLayout.propTypes = {
/** applied as data-hook HTML attribute that can be used to create driver in testing */
dataHook: PropTypes.string,
title: PropTypes.node.isRequired,
content: PropTypes.node.isRequired,
primaryButtonLabel: PropTypes.string,
primaryButtonDisabled: PropTypes.bool,
primaryButtonNode: PropTypes.node,
secondaryButtonLabel: PropTypes.string,
onPrimaryButtonClick: PropTypes.func,
onSecondaryButtonClick: PropTypes.func,
imageUrl: PropTypes.string,
onClose: PropTypes.func.isRequired,
imageComponent: PropTypes.node,
footerBottomChildren: PropTypes.node,
theme: PropTypes.oneOf(['blue', 'purple', 'white']),
primaryButtonTheme: PropTypes.oneOf(['blue', 'purple']),
removeButtonsPadding: PropTypes.bool,
width: PropTypes.string,
noBodyPadding: PropTypes.bool,
};
MessageBoxMarketerialLayout.defaultProps = {
theme: 'blue',
removeButtonsPadding: false,
width: '600px',
noBodyPadding: false,
};
export default MessageBoxMarketerialLayout;
//# sourceMappingURL=MessageBoxMarketerialLayout.js.map