wix-style-react
Version:
260 lines (217 loc) • 10.5 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _cellSpansBySize, _imagePlaceholderAspe;
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
import React from 'react';
import PropTypes from 'prop-types';
import { WixStyleReactContext } from '../WixStyleReactProvider/context';
import Content from './components/Content';
import { Layout, Cell } from '../Layout';
import Proportion from '../Proportion';
import { SIZES, DIRECTIONS } from './constants';
import { st, classes } from './MarketingLayout.st.css';
import { stVars as colorsStVars } from '../Foundation/stylable/colors.st.css';
import deprecationLog from '../utils/deprecationLog';
var cellSpansBySize = (_cellSpansBySize = {}, _defineProperty(_cellSpansBySize, SIZES.tiny, {
image: 4,
content: 8
}), _defineProperty(_cellSpansBySize, SIZES.small, {
image: 3,
spacer: 1,
content: 8
}), _defineProperty(_cellSpansBySize, SIZES.medium, {
image: 4,
spacer: 1,
content: 7
}), _defineProperty(_cellSpansBySize, SIZES.large, {
image: 5,
spacer: 1,
content: 6
}), _cellSpansBySize);
var imagePlaceholderAspectRatioBySize = (_imagePlaceholderAspe = {}, _defineProperty(_imagePlaceholderAspe, SIZES.tiny, 1), _defineProperty(_imagePlaceholderAspe, SIZES.small, 1), _defineProperty(_imagePlaceholderAspe, SIZES.medium, 282 / 188), _defineProperty(_imagePlaceholderAspe, SIZES.large, 360 / 240), _imagePlaceholderAspe);
/** Marketing layout is a layout designed to promote new features or display first time visit.
* Component has title, description, action and illustration areas. */
var MarketingLayout = /*#__PURE__*/function (_React$PureComponent) {
_inherits(MarketingLayout, _React$PureComponent);
var _super = _createSuper(MarketingLayout);
function MarketingLayout() {
var _this;
_classCallCheck(this, MarketingLayout);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_defineProperty(_assertThisInitialized(_this), "_renderSpacerCell", function (span) {
return /*#__PURE__*/React.createElement(Cell, {
key: "spacer",
span: span
});
});
_defineProperty(_assertThisInitialized(_this), "_renderImagePlaceholder", function () {
var size = _this.props.size;
return /*#__PURE__*/React.createElement(Proportion, {
aspectRatio: imagePlaceholderAspectRatioBySize[size]
}, /*#__PURE__*/React.createElement("div", {
className: classes.imagePlaceholder
}));
});
_defineProperty(_assertThisInitialized(_this), "_renderImageCell", function (span) {
var _this$props = _this.props,
image = _this$props.image,
imageBackgroundColor = _this$props.imageBackgroundColor;
return /*#__PURE__*/React.createElement(Cell, {
key: "image",
span: span
}, /*#__PURE__*/React.createElement("div", {
className: classes.imageWrapper
}, imageBackgroundColor && /*#__PURE__*/React.createElement("div", {
className: classes.imageBackground,
style: {
backgroundColor: colorsStVars[imageBackgroundColor] || imageBackgroundColor
}
}), /*#__PURE__*/React.createElement("div", {
className: classes.imageContainer
}, typeof image === 'string' ? /*#__PURE__*/React.createElement("img", {
src: image,
width: "100%"
}) : image || _this._renderImagePlaceholder())));
});
_defineProperty(_assertThisInitialized(_this), "_renderContentCell", function (span) {
var _this$props2 = _this.props,
size = _this$props2.size,
actions = _this$props2.actions,
title = _this$props2.title,
description = _this$props2.description,
badge = _this$props2.badge,
hiddenBadge = _this$props2.hiddenBadge;
return /*#__PURE__*/React.createElement(Cell, {
key: "content",
span: span
}, badge && !hiddenBadge && /*#__PURE__*/React.createElement("div", {
className: classes.badge
}, badge), /*#__PURE__*/React.createElement(Content, {
size: size,
actions: actions,
title: title,
description: description,
badge: badge
}));
});
_defineProperty(_assertThisInitialized(_this), "_renderContent", function () {
var _this$props3 = _this.props,
direction = _this$props3.direction,
size = _this$props3.size;
var isVertical = direction === DIRECTIONS.vertical;
return /*#__PURE__*/React.createElement(Layout, {
gap: size === SIZES.tiny ? '24px' : '30px'
}, isVertical ? _this._renderVerticalCells() : _this._renderHorizontalCells());
});
return _this;
}
_createClass(MarketingLayout, [{
key: "_renderHorizontalCells",
value: function _renderHorizontalCells() {
var _this$props4 = this.props,
inverted = _this$props4.inverted,
size = _this$props4.size;
var _cellSpansBySize$size = cellSpansBySize[size],
image = _cellSpansBySize$size.image,
spacer = _cellSpansBySize$size.spacer,
content = _cellSpansBySize$size.content;
var contentCell = this._renderContentCell(content);
var spacerCell = size !== SIZES.tiny && this._renderSpacerCell(spacer);
var imageCell = this._renderImageCell(image);
return inverted ? [imageCell, contentCell, spacerCell] : [contentCell, spacerCell, imageCell];
}
}, {
key: "_renderVerticalCells",
value: function _renderVerticalCells() {
var _this$props5 = this.props,
inverted = _this$props5.inverted,
image = _this$props5.image;
var imageCell = image && this._renderImageCell(12);
var contentCell = this._renderContentCell(12);
return inverted ? [contentCell, imageCell] : [imageCell, contentCell];
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props6 = this.props,
size = _this$props6.size,
badge = _this$props6.badge,
hiddenBadge = _this$props6.hiddenBadge,
alignItems = _this$props6.alignItems,
inverted = _this$props6.inverted,
actions = _this$props6.actions,
dataHook = _this$props6.dataHook,
imageBackgroundColor = _this$props6.imageBackgroundColor,
direction = _this$props6.direction;
if (size === SIZES.large) {
deprecationLog("<MarketingLayout/> size large wil be deprecated in the next major version");
}
return /*#__PURE__*/React.createElement(WixStyleReactContext.Consumer, null, function (_ref) {
var reducedSpacingAndImprovedLayout = _ref.reducedSpacingAndImprovedLayout;
return /*#__PURE__*/React.createElement("div", {
className: st(classes.root, {
size: size,
badge: !!badge,
hiddenBadge: hiddenBadge,
alignItems: alignItems,
inverted: inverted,
withActions: !!actions,
withImageBackground: !!imageBackgroundColor,
reducedSpacingAndImprovedLayout: reducedSpacingAndImprovedLayout,
direction: direction
}),
"data-hook": dataHook
}, _this2._renderContent());
});
}
}]);
return MarketingLayout;
}(React.PureComponent);
_defineProperty(MarketingLayout, "displayName", 'MarketingLayout');
_defineProperty(MarketingLayout, "propTypes", {
/** Applies a data-hook HTML attribute that can be used in the tests. */
dataHook: PropTypes.string,
/** Accepts image URL or a custom element to be displayed on the side of content. */
image: PropTypes.node,
/** Specifies image area background color. Can be a keyword from color palette or any supported CSS color value (HEX, RGB, etc.). */
imageBackgroundColor: PropTypes.string,
/**
* Controls the size of the marketing layout.<br/>
* Large size will be deprecated in the next major version.
*/
size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large']),
/** Controls content direction. */
direction: PropTypes.oneOf(['horizontal', 'vertical']),
/** Controls the vertical alignment of the content. */
alignItems: PropTypes.oneOf(['center', 'stretch']),
/** Flips content layout. If true, image will be displayed on the left side of the content. */
inverted: PropTypes.bool,
/** Sets marketing layout actions. Accepts single or multiple interactive components. Most commonly contain `<Button/>` or `<TextButton/>`. */
actions: PropTypes.node,
/** Sets the marketing layout title. Accepts text string or a custom element. */
title: PropTypes.node,
/** Sets the marketing layout description. Accepts text string or a custom element. */
description: PropTypes.node,
/** Adds a container for a `<Badge/>` component at the top left corner. Affect component height. */
badge: PropTypes.node,
/** Specifies whether the badge is hidden. Can be used to add additional vertical spacing, if no badge is given. */
hiddenBadge: PropTypes.bool
});
_defineProperty(MarketingLayout, "defaultProps", {
size: 'small',
alignItems: 'center',
inverted: false,
direction: 'horizontal',
hiddenBadge: false
});
export default MarketingLayout;