wix-style-react
Version:
307 lines (253 loc) • 12.1 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
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 _layerToVisiblePropMa;
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 CSSTransition from 'react-transition-group/CSSTransition';
import PropTypes from 'prop-types';
import { withFocusable } from "wix-ui-core/dist/es/src/hocs/Focusable/FocusableHOC";
import Content from './Content';
import DragHandle from './DragHandle';
import { Layer, Skin, Placement, Visible } from './constants';
import { st, classes } from './MediaOverlay.st.css';
var layerToVisiblePropMap = (_layerToVisiblePropMa = {}, _defineProperty(_layerToVisiblePropMa, Layer.Default, Visible.Default), _defineProperty(_layerToVisiblePropMa, Layer.Hover, Visible.Hover), _defineProperty(_layerToVisiblePropMa, Layer.Top, Visible.Always), _layerToVisiblePropMa);
/** MediaOverlay */
var MediaOverlay = /*#__PURE__*/function (_React$PureComponent) {
_inherits(MediaOverlay, _React$PureComponent);
var _super = _createSuper(MediaOverlay);
function MediaOverlay() {
var _this;
_classCallCheck(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));
_defineProperty(_assertThisInitialized(_this), "state", {
isHovered: false
});
_defineProperty(_assertThisInitialized(_this), "_onMouseEnter", function () {
if (_this.props.hovered === undefined) {
_this.setState({
isHovered: true
});
}
});
_defineProperty(_assertThisInitialized(_this), "_onMouseLeave", function () {
if (_this.props.hovered === undefined) {
_this.setState({
isHovered: false
});
}
});
_defineProperty(_assertThisInitialized(_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
};
});
_defineProperty(_assertThisInitialized(_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
});
_defineProperty(_assertThisInitialized(_this), "_hasSingleSkin", function () {
return _this.props.skin === _this._getHoverSkin();
});
_defineProperty(_assertThisInitialized(_this), "_filterContent", function (layer, placement) {
var children = _this.props.children;
var contentElements = React.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.isValidElement(child) && child.type.displayName === Content.displayName && Object.keys(filterProps).every(function (prop) {
return filterProps[prop] === child.props[prop];
});
});
});
_defineProperty(_assertThisInitialized(_this), "_isContentEmpty", function (layer, placement) {
return !_this._filterContent(layer, placement).length;
});
_defineProperty(_assertThisInitialized(_this), "_renderDefaultLayer", function () {
var skin = _this._hasSingleSkin() ? Skin.None : _this.props.skin;
return _this._renderTransitionOverlay(Layer.Default, skin, false);
});
_defineProperty(_assertThisInitialized(_this), "_renderHoverLayer", function () {
var skin = _this._hasSingleSkin() ? Skin.None : _this._getHoverSkin();
return _this._renderTransitionOverlay(Layer.Hover, skin, true);
});
_defineProperty(_assertThisInitialized(_this), "_renderTopLayer", function () {
return _this._renderOverlay(Layer.Top, Skin.None);
});
_defineProperty(_assertThisInitialized(_this), "_renderSingleSkinLayer", function () {
return _this._hasSingleSkin() && _this._renderOverlay(Layer.SingleSkin, _this.props.skin);
});
_defineProperty(_assertThisInitialized(_this), "_shouldRenderOverlay", function (layer, skin) {
return skin !== Skin.None || !_this._isContentEmpty(layer);
});
_defineProperty(_assertThisInitialized(_this), "_renderOverlay", function (layer, skin) {
if (!_this._shouldRenderOverlay(layer, skin)) {
return;
}
return /*#__PURE__*/React.createElement("div", {
className: st(classes.overlay, {
layer: layer,
skin: skin
})
}, _this._renderContent(layer));
});
_defineProperty(_assertThisInitialized(_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: classes.hoverEnter,
enterActive: classes.hoverEnterActive,
enterDone: classes.hoverEnterDone,
exit: classes.hoverExit
}
};
return /*#__PURE__*/React.createElement(CSSTransition, transitionProps, _this._renderOverlay(layer, skin));
});
_defineProperty(_assertThisInitialized(_this), "_renderContent", function (layer) {
if (_this._isContentEmpty(layer)) {
return;
}
var hasMiddleContent = !_this._isContentEmpty(layer, Placement.Middle);
var hasBottomContent = hasMiddleContent || !_this._isContentEmpty(layer, Placement.BottomStart) || !_this._isContentEmpty(layer, Placement.BottomEnd);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
className: st(classes.contentRow, {
row: 'top'
})
}, _this._renderContentArea(layer, Placement.TopStart), _this._renderContentArea(layer, Placement.TopEnd)), hasMiddleContent && /*#__PURE__*/React.createElement("div", {
className: st(classes.contentRow, {
row: 'middle'
})
}, _this._renderContentArea(layer, Placement.Middle)), hasBottomContent && /*#__PURE__*/React.createElement("div", {
className: st(classes.contentRow, {
row: 'bottom'
})
}, _this._renderContentArea(layer, Placement.BottomStart), _this._renderContentArea(layer, Placement.BottomEnd)));
});
_defineProperty(_assertThisInitialized(_this), "_renderContentArea", function (layer, placement) {
var contentElements = _this._filterContent(layer, placement);
if (!contentElements.length) {
return;
}
return /*#__PURE__*/React.createElement("div", {
className: st(classes.contentArea, {
placement: placement
}),
"data-hook": "content-area"
}, contentElements.map(function (_ref, index) {
var props = _ref.props;
return /*#__PURE__*/React.createElement(React.Fragment, {
key: index
}, props.children);
}));
});
return _this;
}
_createClass(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.createElement(Component, _extends({
"data-hook": dataHook,
onMouseEnter: this._onMouseEnter,
onMouseLeave: this._onMouseLeave,
onClick: onClick
}, this._getFocusProps(), {
className: st(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.isValidElement(media) && media, this._renderSingleSkinLayer(), this._renderDefaultLayer(), this._renderHoverLayer(), this._renderTopLayer());
}
}]);
return MediaOverlay;
}(React.PureComponent);
_defineProperty(MediaOverlay, "displayName", 'MediaOverlay');
_defineProperty(MediaOverlay, "Content", Content);
_defineProperty(MediaOverlay, "DragHandle", DragHandle);
_defineProperty(MediaOverlay, "propTypes", {
/** Applies a data-hook HTML attribute that can be used in the tests. */
dataHook: PropTypes.string,
/** Specifies a CSS class name to be appended to the component’s root element. */
className: PropTypes.string,
/** Sets a default overlay skin. */
skin: PropTypes.oneOf(['none', 'gradient', 'dark']),
/** Sets a hover overlay skin. */
hoverSkin: PropTypes.oneOf(['none', 'gradient', 'dark']),
/** Accept image URL or a custom node as a media background. */
media: PropTypes.node.isRequired,
/**
* Defines a click handler. When provided, component will be clickable and will have a pointer cursor on hover.
*/
onClick: PropTypes.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.node,
/** Toggles hover state in a controlled mode. */
hovered: PropTypes.bool,
/** Removes a default borders radius. */
removeRoundedBorders: PropTypes.bool,
/** Control border radius of the media container. */
borderRadius: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
});
_defineProperty(MediaOverlay, "defaultProps", {
skin: 'none'
});
export default withFocusable(MediaOverlay);