wix-style-react
Version:
310 lines (260 loc) • 14.4 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _CSSTransition = _interopRequireDefault(require("react-transition-group/CSSTransition"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _FocusableHOC = require("wix-ui-core/dist/src/hocs/Focusable/FocusableHOC");
var _Content = _interopRequireDefault(require("./Content"));
var _DragHandle = _interopRequireDefault(require("./DragHandle"));
var _constants = require("./constants");
var _MediaOverlaySt = require("./MediaOverlay.st.css");
var _layerToVisiblePropMa;
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(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; } }
var layerToVisiblePropMap = (_layerToVisiblePropMa = {}, (0, _defineProperty2["default"])(_layerToVisiblePropMa, _constants.Layer.Default, _constants.Visible.Default), (0, _defineProperty2["default"])(_layerToVisiblePropMa, _constants.Layer.Hover, _constants.Visible.Hover), (0, _defineProperty2["default"])(_layerToVisiblePropMa, _constants.Layer.Top, _constants.Visible.Always), _layerToVisiblePropMa);
/** MediaOverlay */
var MediaOverlay = /*#__PURE__*/function (_React$PureComponent) {
(0, _inherits2["default"])(MediaOverlay, _React$PureComponent);
var _super = _createSuper(MediaOverlay);
function MediaOverlay() {
var _this;
(0, _classCallCheck2["default"])(this, MediaOverlay);
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));
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
isHovered: false
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onMouseEnter", function () {
if (_this.props.hovered === undefined) {
_this.setState({
isHovered: true
});
}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onMouseLeave", function () {
if (_this.props.hovered === undefined) {
_this.setState({
isHovered: false
});
}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_getFocusProps", function () {
var _this$props = _this.props,
onClick = _this$props.onClick,
focusableOnFocus = _this$props.focusableOnFocus,
focusableOnBlur = _this$props.focusableOnBlur;
if (onClick) {
return {
onFocus: focusableOnFocus,
onBlur: focusableOnBlur,
tabIndex: 0
};
}
return {
tabIndex: -1
};
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_getHoverSkin", function () {
var _this$props2 = _this.props,
skin = _this$props2.skin,
hoverSkin = _this$props2.hoverSkin;
return hoverSkin || skin; // hoverSkin defaults to skin prop value if not provided
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_hasSingleSkin", function () {
return _this.props.skin === _this._getHoverSkin();
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_filterContent", function (layer, placement) {
var children = _this.props.children;
var contentElements = _react["default"].Children.map(children, function (child) {
return child;
}) || [];
var filterProps = {
visible: layerToVisiblePropMap[layer]
};
if (placement !== undefined) {
filterProps.placement = placement;
}
return contentElements.filter(function (child) {
return /*#__PURE__*/_react["default"].isValidElement(child) && child.type.displayName === _Content["default"].displayName && Object.keys(filterProps).every(function (prop) {
return filterProps[prop] === child.props[prop];
});
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_isContentEmpty", function (layer, placement) {
return !_this._filterContent(layer, placement).length;
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_renderDefaultLayer", function () {
var skin = _this._hasSingleSkin() ? _constants.Skin.None : _this.props.skin;
return _this._renderTransitionOverlay(_constants.Layer.Default, skin, false);
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_renderHoverLayer", function () {
var skin = _this._hasSingleSkin() ? _constants.Skin.None : _this._getHoverSkin();
return _this._renderTransitionOverlay(_constants.Layer.Hover, skin, true);
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_renderTopLayer", function () {
return _this._renderOverlay(_constants.Layer.Top, _constants.Skin.None);
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_renderSingleSkinLayer", function () {
return _this._hasSingleSkin() && _this._renderOverlay(_constants.Layer.SingleSkin, _this.props.skin);
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_shouldRenderOverlay", function (layer, skin) {
return skin !== _constants.Skin.None || !_this._isContentEmpty(layer);
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_renderOverlay", function (layer, skin) {
if (!_this._shouldRenderOverlay(layer, skin)) {
return;
}
return /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _MediaOverlaySt.st)(_MediaOverlaySt.classes.overlay, {
layer: layer,
skin: skin
})
}, _this._renderContent(layer));
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_renderTransitionOverlay", function (layer, skin, mountOnEnter) {
if (!_this._shouldRenderOverlay(layer, skin)) {
return;
}
var hovered = _this.props.hovered;
var transitionProps = {
"in": hovered !== undefined ? hovered : _this.state.isHovered,
timeout: 200,
mountOnEnter: mountOnEnter,
unmountOnExit: mountOnEnter,
classNames: {
enter: _MediaOverlaySt.classes.hoverEnter,
enterActive: _MediaOverlaySt.classes.hoverEnterActive,
enterDone: _MediaOverlaySt.classes.hoverEnterDone,
exit: _MediaOverlaySt.classes.hoverExit
}
};
return /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], transitionProps, _this._renderOverlay(layer, skin));
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_renderContent", function (layer) {
if (_this._isContentEmpty(layer)) {
return;
}
var hasMiddleContent = !_this._isContentEmpty(layer, _constants.Placement.Middle);
var hasBottomContent = hasMiddleContent || !_this._isContentEmpty(layer, _constants.Placement.BottomStart) || !_this._isContentEmpty(layer, _constants.Placement.BottomEnd);
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _MediaOverlaySt.st)(_MediaOverlaySt.classes.contentRow, {
row: 'top'
})
}, _this._renderContentArea(layer, _constants.Placement.TopStart), _this._renderContentArea(layer, _constants.Placement.TopEnd)), hasMiddleContent && /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _MediaOverlaySt.st)(_MediaOverlaySt.classes.contentRow, {
row: 'middle'
})
}, _this._renderContentArea(layer, _constants.Placement.Middle)), hasBottomContent && /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _MediaOverlaySt.st)(_MediaOverlaySt.classes.contentRow, {
row: 'bottom'
})
}, _this._renderContentArea(layer, _constants.Placement.BottomStart), _this._renderContentArea(layer, _constants.Placement.BottomEnd)));
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_renderContentArea", function (layer, placement) {
var contentElements = _this._filterContent(layer, placement);
if (!contentElements.length) {
return;
}
return /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _MediaOverlaySt.st)(_MediaOverlaySt.classes.contentArea, {
placement: placement
}),
"data-hook": "content-area"
}, contentElements.map(function (_ref, index) {
var props = _ref.props;
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
key: index
}, props.children);
}));
});
return _this;
}
(0, _createClass2["default"])(MediaOverlay, [{
key: "render",
value: function render() {
var _this$props3 = this.props,
dataHook = _this$props3.dataHook,
skin = _this$props3.skin,
media = _this$props3.media,
onClick = _this$props3.onClick,
removeRoundedBorders = _this$props3.removeRoundedBorders,
className = _this$props3.className,
borderRadius = _this$props3.borderRadius;
var isMediaImageUrl = typeof media === 'string';
var Component = onClick ? 'button' : 'div';
return /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({
"data-hook": dataHook,
onMouseEnter: this._onMouseEnter,
onMouseLeave: this._onMouseLeave,
onClick: onClick
}, this._getFocusProps(), {
className: (0, _MediaOverlaySt.st)(_MediaOverlaySt.classes.root, {
clickable: !!onClick,
removeRadius: removeRoundedBorders
}, className),
"data-skin": skin,
"data-hoverskin": this._getHoverSkin(),
style: {
backgroundImage: isMediaImageUrl && "url(".concat(media, ")"),
borderRadius: borderRadius
}
}), !isMediaImageUrl && /*#__PURE__*/_react["default"].isValidElement(media) && media, this._renderSingleSkinLayer(), this._renderDefaultLayer(), this._renderHoverLayer(), this._renderTopLayer());
}
}]);
return MediaOverlay;
}(_react["default"].PureComponent);
(0, _defineProperty2["default"])(MediaOverlay, "displayName", 'MediaOverlay');
(0, _defineProperty2["default"])(MediaOverlay, "Content", _Content["default"]);
(0, _defineProperty2["default"])(MediaOverlay, "DragHandle", _DragHandle["default"]);
(0, _defineProperty2["default"])(MediaOverlay, "propTypes", {
/** Applies a data-hook HTML attribute that can be used in the tests. */
dataHook: _propTypes["default"].string,
/** Specifies a CSS class name to be appended to the component’s root element. */
className: _propTypes["default"].string,
/** Sets a default overlay skin. */
skin: _propTypes["default"].oneOf(['none', 'gradient', 'dark']),
/** Sets a hover overlay skin. */
hoverSkin: _propTypes["default"].oneOf(['none', 'gradient', 'dark']),
/** Accept image URL or a custom node as a media background. */
media: _propTypes["default"].node.isRequired,
/**
* Defines a click handler. When provided, component will be clickable and will have a pointer cursor on hover.
*/
onClick: _propTypes["default"].func,
/**
* Accepts any component as `<MediaOverlay.Content>` content.
* Each element has the following properties:
* - `visible` - define when to display this content. Possible values are:
* - `default` (default) - content is visible only when not hovered.
* - `hover` - content is visible only when hovered.
* - `always` - content is always visible.
* - `placement` - define where to place this content. Possible values are `top-start`,
* `top-end`, `middle` (default), `bottom-end` and `bottom-start`.
*/
children: _propTypes["default"].node,
/** Toggles hover state in a controlled mode. */
hovered: _propTypes["default"].bool,
/** Removes a default borders radius. */
removeRoundedBorders: _propTypes["default"].bool,
/** Control border radius of the media container. */
borderRadius: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
});
(0, _defineProperty2["default"])(MediaOverlay, "defaultProps", {
skin: 'none'
});
var _default = (0, _FocusableHOC.withFocusable)(MediaOverlay);
exports["default"] = _default;