@wix/design-system
Version:
@wix/design-system
377 lines (375 loc) • 15.7 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
exports.__esModule = 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 _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _CSSTransition = _interopRequireDefault(require("react-transition-group/CSSTransition"));
var _Focusable = require("../common/Focusable");
var _Content = _interopRequireDefault(require("./Content"));
var _DragHandle = _interopRequireDefault(require("./DragHandle"));
var _constants = require("./constants");
var _MediaOverlaySt = require("./MediaOverlay.st.css.js");
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/MediaOverlay/MediaOverlay.jsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var layerToVisiblePropMap = (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _constants.Layer.Default, _constants.Visible.Default), _constants.Layer.Hover, _constants.Visible.Hover), _constants.Layer.Top, _constants.Visible.Always);
var placementToRowAlignment = (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _constants.Placement.TopStart, 'top'), _constants.Placement.TopEnd, 'top'), _constants.Placement.Middle, 'middle'), _constants.Placement.BottomStart, 'bottom'), _constants.Placement.BottomEnd, 'bottom');
/** MediaOverlay */
var MediaOverlay = /*#__PURE__*/function (_React$PureComponent) {
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 = _callSuper(this, MediaOverlay, [].concat(args));
_this.state = {
isHovered: false,
isFocused: false,
isVideoPlaying: false
};
_this.videoRef = /*#__PURE__*/(0, _react.createRef)();
_this._onMouseEnter = function () {
if (_this.props.hovered === undefined) {
_this.setState({
isHovered: true
});
}
};
_this._onMouseLeave = function () {
if (_this.props.hovered === undefined) {
_this.setState({
isHovered: false
});
}
};
_this._onFocus = function () {
_this.setState({
isFocused: true
});
if (_this.props.focusableOnFocus) {
_this.props.focusableOnFocus();
}
};
_this._onBlur = function () {
_this.setState({
isFocused: false
});
if (_this.props.focusableOnBlur) {
_this.props.focusableOnBlur();
}
};
_this._handleVideoPlay = function () {
_this.setState({
isVideoPlaying: true
});
};
_this._handleVideoPause = function () {
_this.setState({
isVideoPlaying: false
});
};
_this._handleVideoEnd = function () {
_this.setState({
isVideoPlaying: false
});
};
_this._toggleVideoPlay = function (event) {
event.stopPropagation();
var video = _this.videoRef.current;
if (!video) return;
if (_this.state.isVideoPlaying) {
video.pause();
} else {
var playPromise = video.play();
if (playPromise !== undefined) {
playPromise["catch"](function (error) {
console.warn('Video play was prevented:', error);
});
}
}
};
_this._getFocusProps = function () {
var _this$props = _this.props,
onClick = _this$props.onClick,
ariaHidden = _this$props.ariaHidden;
if (onClick) {
return {
onFocus: _this._onFocus,
onBlur: _this._onBlur,
tabIndex: ariaHidden ? -1 : 0
};
}
return {
tabIndex: -1,
onFocus: _this._onFocus,
onBlur: _this._onBlur
};
};
_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
};
_this._hasSingleSkin = function () {
return _this.props.skin === _this._getHoverSkin();
};
_this._filterContent = function (layer) {
var children = _this.props.children;
var contentElements = _react["default"].Children.map(children, function (child) {
return child;
}) || [];
var filterProps = {
visible: layerToVisiblePropMap[layer]
};
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];
});
});
};
_this._isContentEmpty = function (layer) {
return !_this._filterContent(layer).length;
};
_this._renderDefaultLayer = function () {
var skin = _this._hasSingleSkin() ? _constants.Skin.None : _this.props.skin;
return _this._renderTransitionOverlay(_constants.Layer.Default, skin);
};
_this._renderHoverLayer = function () {
var skin = _this._hasSingleSkin() ? _constants.Skin.None : _this._getHoverSkin();
return _this._renderTransitionOverlay(_constants.Layer.Hover, skin);
};
_this._renderTopLayer = function () {
return _this._renderOverlay(_constants.Layer.Top, _constants.Skin.None);
};
// When both skins for default and hover layers are the same - we don't want to
// animate them with opacity transition as this will produce an undesired effect
// (but we still want to animate all the content inside an overlay layer). As a
// workaround we create this background layer that has no content or animations
// and will render here only the common skin background.
_this._renderSingleSkinLayer = function () {
return _this._hasSingleSkin() && _this._renderOverlay(_constants.Layer.SingleSkin, _this.props.skin);
};
_this._shouldRenderOverlay = function (layer, skin) {
return skin !== _constants.Skin.None || !_this._isContentEmpty(layer);
};
_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
}),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 171,
columnNumber: 7
}
}, _this._renderContent(layer));
};
_this._getIsVisible = function () {
var hovered = _this.props.hovered;
return hovered !== undefined ? hovered : _this.state.isHovered || _this.state.isFocused;
};
_this._renderTransitionOverlay = function (layer, skin) {
if (!_this._shouldRenderOverlay(layer, skin)) {
return;
}
var isVisible = _this._getIsVisible();
var transitionProps = {
"in": isVisible,
timeout: 200,
classNames: {
enter: _MediaOverlaySt.classes.hoverEnter,
enterActive: _MediaOverlaySt.classes.hoverEnterActive,
enterDone: _MediaOverlaySt.classes.hoverEnterDone,
exit: _MediaOverlaySt.classes.hoverExit
}
};
return /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], (0, _extends2["default"])({}, transitionProps, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 203,
columnNumber: 7
}
}), _this._renderOverlay(layer, skin));
};
_this._renderContent = function (layer) {
if (_this._isContentEmpty(layer)) {
return;
}
var contentElements = _this._filterContent(layer);
if (!contentElements.length) {
return;
}
return contentElements.map(function (_ref, index) {
var props = _ref.props;
return /*#__PURE__*/_react["default"].createElement("div", {
key: index,
className: (0, _MediaOverlaySt.st)(_MediaOverlaySt.classes.contentRow, {
placement: props.placement,
row: placementToRowAlignment[props.placement]
}),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 221,
columnNumber: 7
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _MediaOverlaySt.st)(_MediaOverlaySt.classes.contentArea, {
placement: props.placement
}),
"data-hook": "content-area",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 228,
columnNumber: 9
}
}, props.children));
});
};
_this._renderVideoElement = function () {
var _this$props3 = _this.props,
videoSrc = _this$props3.videoSrc,
_this$props3$videoPro = _this$props3.videoProps,
videoProps = _this$props3$videoPro === void 0 ? {} : _this$props3$videoPro;
return /*#__PURE__*/_react["default"].createElement("video", (0, _extends2["default"])({
"data-hook": "media-overlay-video",
ref: _this.videoRef,
src: videoSrc,
onPlay: _this._handleVideoPlay,
onPause: _this._handleVideoPause,
onEnded: _this._handleVideoEnd,
className: _MediaOverlaySt.classes.video,
playsInline: true
}, videoProps, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 242,
columnNumber: 7
}
}));
};
_this._renderPlayButton = function () {
var showPlayButton = _this.props.showPlayButton;
var isVideoPlaying = _this.state.isVideoPlaying;
if (!showPlayButton) {
return null;
}
return /*#__PURE__*/_react["default"].createElement("div", {
className: _MediaOverlaySt.classes.playButtonContainer,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 265,
columnNumber: 7
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: _MediaOverlaySt.classes.playButtonWrapper,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 266,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
size: "large",
priority: "secondary",
skin: "inverted",
onClick: _this._toggleVideoPlay,
dataHook: "media-overlay-play-button",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 267,
columnNumber: 11
}
}, isVideoPlaying ? /*#__PURE__*/_react["default"].createElement(_wixUiIconsCommon.PauseFilled, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 274,
columnNumber: 31
}
}) : /*#__PURE__*/_react["default"].createElement(_wixUiIconsCommon.PlayFilled, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 274,
columnNumber: 49
}
}))));
};
return _this;
}
(0, _inherits2["default"])(MediaOverlay, _React$PureComponent);
return (0, _createClass2["default"])(MediaOverlay, [{
key: "render",
value: function render() {
var _this$props4 = this.props,
dataHook = _this$props4.dataHook,
skin = _this$props4.skin,
media = _this$props4.media,
onClick = _this$props4.onClick,
removeRoundedBorders = _this$props4.removeRoundedBorders,
className = _this$props4.className,
borderRadius = _this$props4.borderRadius,
ariaHidden = _this$props4.ariaHidden,
isVideo = _this$props4.isVideo;
var isMediaImageUrl = typeof media === 'string';
var Component = onClick ? 'button' : 'div';
return /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({
"aria-hidden": ariaHidden,
"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(),
"data-isvisible": this._getIsVisible(),
style: {
backgroundImage: !isVideo && isMediaImageUrl && "url(".concat(media, ")"),
borderRadius: borderRadius
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 297,
columnNumber: 7
}
}), isVideo && this._renderVideoElement(), !isVideo && !isMediaImageUrl && /*#__PURE__*/_react["default"].isValidElement(media) && media, this._renderSingleSkinLayer(), this._renderDefaultLayer(), this._renderHoverLayer(), this._renderTopLayer(), isVideo && this._renderPlayButton());
}
}]);
}(_react["default"].PureComponent);
MediaOverlay.displayName = 'MediaOverlay';
MediaOverlay.Content = _Content["default"];
MediaOverlay.DragHandle = _DragHandle["default"];
MediaOverlay.defaultProps = {
skin: 'none',
showPlayButton: true
};
var _default = exports["default"] = (0, _Focusable.withFocusable)(MediaOverlay);