wix-style-react
Version:
wix-style-react
244 lines (242 loc) • 8.51 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Content = _interopRequireDefault(require("./components/Content"));
var _Box = _interopRequireDefault(require("../Box"));
var _Proportion = _interopRequireDefault(require("../Proportion"));
var _constants = require("./constants");
var _MarketingLayoutSt = require("./MarketingLayout.st.css");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/MarketingLayout/MarketingLayout.js";
var imagePlaceholderAspectRatioBySize = {
[_constants.SIZES.tiny]: 1,
[_constants.SIZES.small]: 1,
[_constants.SIZES.medium]: 282 / 188
};
/** Marketing layout is a layout designed to promote new features or display first time visit.
* Component has title, description, action and illustration areas. */
class MarketingLayout extends _react.default.PureComponent {
constructor() {
super(...arguments);
this.renderImagePlaceholder = () => {
var {
size
} = this.props;
return /*#__PURE__*/_react.default.createElement(_Proportion.default, {
aspectRatio: imagePlaceholderAspectRatioBySize[size],
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 63,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: _MarketingLayoutSt.classes.imagePlaceholder,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 64,
columnNumber: 9
}
}));
};
this.getBorderRadiusProps = () => {
var {
inverted,
direction,
imagePadding
} = this.props;
if (direction === 'horizontal') return {
borderTopLeftRadius: !imagePadding && inverted ? 'inherit' : undefined,
borderTopRightRadius: !imagePadding && !inverted ? 'inherit' : undefined,
borderBottomLeftRadius: !imagePadding && inverted ? 'inherit' : undefined,
borderBottomRightRadius: !imagePadding && !inverted ? 'inherit' : undefined
};else return {};
};
this.renderImage = () => {
var {
image,
imageBackgroundColor,
inverted,
size,
direction,
imagePadding
} = this.props;
if (!image && !imageBackgroundColor) {
return null;
}
return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
key: "image",
display: "flex",
backgroundColor: imageBackgroundColor,
justifyContent: "flex-end",
className: (0, _MarketingLayoutSt.st)(_MarketingLayoutSt.classes.imageBackground)
}, this.getBorderRadiusProps(), {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 99,
columnNumber: 7
}
}), /*#__PURE__*/_react.default.createElement("div", {
className: (0, _MarketingLayoutSt.st)(_MarketingLayoutSt.classes.imageWrapper, {
size,
inverted,
direction
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 107,
columnNumber: 9
}
}, typeof image === 'string' ? /*#__PURE__*/_react.default.createElement("img", {
src: image,
width: "100%",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 115,
columnNumber: 13
}
}) : image || this.renderImagePlaceholder()));
};
this.renderContent = () => {
var {
size,
actions,
title,
description,
badge,
hiddenBadge,
inverted,
direction,
imageBackgroundColor
} = this.props;
return /*#__PURE__*/_react.default.createElement(_Box.default, {
key: "content",
className: (0, _MarketingLayoutSt.st)(_MarketingLayoutSt.classes.contentWrapper, {
inverted,
size,
direction,
withImageBackground: !!imageBackgroundColor
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 138,
columnNumber: 7
}
}, badge && !hiddenBadge && /*#__PURE__*/_react.default.createElement("div", {
className: _MarketingLayoutSt.classes.badge,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 147,
columnNumber: 35
}
}, badge), /*#__PURE__*/_react.default.createElement(_Content.default, {
size: size,
actions: actions,
title: title,
description: description,
badge: badge,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 148,
columnNumber: 9
}
}));
};
}
renderHorizontal() {
var image = this.renderImage();
var content = this.renderContent();
return this.props.inverted ? [image, content] : [content, image];
}
renderVertical() {
var image = this.props.image && this.renderImage();
var content = this.renderContent();
return this.props.inverted ? [content, image] : [image, content];
}
render() {
var {
size,
badge,
hiddenBadge,
alignItems,
inverted,
actions,
dataHook,
imageBackgroundColor,
direction,
imagePadding
} = this.props;
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _MarketingLayoutSt.st)(_MarketingLayoutSt.classes.root, {
size,
badge: !!badge,
hiddenBadge,
alignItems,
inverted,
withActions: !!actions,
withImageBackground: !!imageBackgroundColor,
direction,
imagePadding
}),
style: this.getBorderRadiusProps(),
"data-hook": dataHook,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 186,
columnNumber: 7
}
}, direction === _constants.DIRECTIONS.vertical ? this.renderVertical() : this.renderHorizontal());
}
}
MarketingLayout.displayName = 'MarketingLayout';
MarketingLayout.propTypes = {
/** Applies a data-hook HTML attribute that can be used in the tests. */
dataHook: _propTypes.default.string,
/** Accepts image URL or a custom element to be displayed on the side of content. */
image: _propTypes.default.node,
/** Specifies image area background color. Can be a keyword from color palette or any supported CSS color value (HEX, RGB, etc.). */
imageBackgroundColor: _propTypes.default.string,
/**
* Controls the size of the marketing layout.<br/>
*/
size: _propTypes.default.oneOf(['tiny', 'small', 'medium']),
/** Controls content direction. */
direction: _propTypes.default.oneOf(['horizontal', 'vertical']),
/** Controls the vertical alignment of the content. */
alignItems: _propTypes.default.oneOf(['center', 'stretch']),
/** Flips content layout. If true, image will be displayed on the left side of the content. */
inverted: _propTypes.default.bool,
/** Sets marketing layout actions. Accepts single or multiple interactive components. Most commonly contain `<Button/>` or `<TextButton/>`. */
actions: _propTypes.default.node,
/** Sets the marketing layout title. Accepts text string or a custom element. */
title: _propTypes.default.node,
/** Sets the marketing layout description. Accepts text string or a custom element. */
description: _propTypes.default.node,
/** Adds a container for a `<Badge/>` component at the top left corner. Affect component height. */
badge: _propTypes.default.node,
/** Specifies whether the badge is hidden. Can be used to add additional vertical spacing, if no badge is given. */
hiddenBadge: _propTypes.default.bool,
/** Enables padding inside image container. Use with `direction="horizontal"` layout only. */
imagePadding: _propTypes.default.bool
};
MarketingLayout.defaultProps = {
size: 'small',
alignItems: 'center',
inverted: false,
direction: 'horizontal',
hiddenBadge: false,
imagePadding: true
};
var _default = exports.default = MarketingLayout;
//# sourceMappingURL=MarketingLayout.js.map