@wix/design-system
Version:
@wix/design-system
583 lines (580 loc) • 23.5 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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
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 _react = _interopRequireWildcard(require("react"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _StatusIndicator = _interopRequireDefault(require("../StatusIndicator"));
var _Loader = _interopRequireDefault(require("../Loader"));
var _ImageViewerSt = require("./ImageViewer.st.css.js");
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _AddItem = _interopRequireDefault(require("../AddItem/AddItem"));
var _Box = _interopRequireDefault(require("../Box"));
var _PopoverMenu = _interopRequireDefault(require("../PopoverMenu"));
var _Image = _interopRequireDefault(require("../Image"));
var _constants = require("./constants");
var _StatusContext = require("../FormField/StatusContext");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/ImageViewer/ImageViewer.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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
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 ImageViewer = /*#__PURE__*/function (_Component) {
function ImageViewer(props) {
var _this;
(0, _classCallCheck2["default"])(this, ImageViewer);
_this = _callSuper(this, ImageViewer, [props]);
_this._renderAddImage = function () {
var _this$props = _this.props,
onAddImage = _this$props.onAddImage,
addImageInfo = _this$props.addImageInfo,
_this$props$tooltipPr = _this$props.tooltipProps,
tooltipProps = _this$props$tooltipPr === void 0 ? {} : _this$props$tooltipPr,
disabled = _this$props.disabled;
return /*#__PURE__*/_react["default"].createElement(_AddItem["default"], {
ref: _this.focusNode,
onClick: onAddImage,
theme: "image",
dataHook: _constants.dataHooks.addItem,
disabled: disabled,
tooltipProps: _objectSpread(_objectSpread({}, tooltipProps), {}, {
content: addImageInfo
}),
ariaLabel: addImageInfo,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 54,
columnNumber: 7
}
});
};
/** `display: none` is used to prefetch an image == it fetches the image but doesn't show it */
_this._renderImageElement = function (_ref) {
var imageUrl = _ref.imageUrl,
shouldDisplay = _ref.shouldDisplay,
onLoad = _ref.onLoad,
onError = _ref.onError,
key = _ref.key,
dataHook = _ref.dataHook,
fit = _ref.fit;
var _this$props2 = _this.props,
_this$props2$imagePro = _this$props2.imageProps,
imageProps = _this$props2$imagePro === void 0 ? {} : _this$props2$imagePro,
removeRoundedBorders = _this$props2.removeRoundedBorders;
return /*#__PURE__*/_react["default"].createElement(_Image["default"], (0, _extends2["default"])({
borderRadius: removeRoundedBorders && 0,
transparent: true
}, imageProps, {
className: (0, _ImageViewerSt.st)(_ImageViewerSt.classes.image, {
shouldDisplay: shouldDisplay,
fit: fit
}),
src: imageUrl,
onLoad: onLoad,
onError: onError,
key: key,
dataHook: dataHook,
"data-image-visible": shouldDisplay,
fit: fit,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 79,
columnNumber: 7
}
}));
};
_this._resetImageLoading = function () {
_this.setState({
imageLoading: false
});
};
_this._onImageLoad = function (e) {
var onImageLoad = _this.props.onImageLoad;
_this.setState({
imageLoading: false
}, function () {
return onImageLoad(e);
});
};
_this._getCurrentAndPreviousImages = function () {
var currentImageUrl = _this.props.imageUrl;
var previousImageUrl = _this.state.previousImageUrl;
return {
currentImageUrl: currentImageUrl,
previousImageUrl: previousImageUrl
};
};
_this._renderImage = function () {
var fit = _this.props.fit;
var imageLoading = _this.state.imageLoading;
if (!_this.props.imageUrl) {
return;
}
var _this$_getCurrentAndP = _this._getCurrentAndPreviousImages(),
currentImageUrl = _this$_getCurrentAndP.currentImageUrl,
previousImageUrl = _this$_getCurrentAndP.previousImageUrl;
var shouldDisplayContainer = !!(currentImageUrl || previousImageUrl);
var generateKey = function generateKey(imageName, imageUrl) {
return "".concat(imageName, "-").concat(imageUrl);
};
return /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _ImageViewerSt.st)(_ImageViewerSt.classes.imageContainer, {
/** hide container when no image provided, so AddItem behind it can be clickable */
shouldDisplay: shouldDisplayContainer
}),
"data-container-visible": shouldDisplayContainer,
"data-hook": _constants.dataHooks.imagesContainer,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 138,
columnNumber: 7
}
}, _this._renderImageElement({
imageUrl: currentImageUrl,
shouldDisplay: !!currentImageUrl && !imageLoading,
onLoad: _this._onImageLoad,
onError: function onError() {
_this._resetImageLoading();
},
dataHook: _constants.dataHooks.image,
key: generateKey(_constants.dataHooks.image, currentImageUrl),
fit: fit
}), _this._renderImageElement({
imageUrl: previousImageUrl,
shouldDisplay: imageLoading && !!previousImageUrl,
dataHook: _constants.dataHooks.previousImage,
key: generateKey(_constants.dataHooks.previousImage, previousImageUrl),
fit: fit
}));
};
_this._renderUpdateButton = function (ref) {
var _this$props3 = _this.props,
updateImageInfo = _this$props3.updateImageInfo,
onUpdateImage = _this$props3.onUpdateImage,
tooltipProps = _this$props3.tooltipProps,
updateButtonAriaLabel = _this$props3.updateButtonAriaLabel;
return /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], (0, _extends2["default"])({}, tooltipProps, {
timeout: 0,
dataHook: _constants.dataHooks.updateTooltip,
content: updateImageInfo,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 180,
columnNumber: 7
}
}), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
ref: ref,
dataHook: _constants.dataHooks.update,
onClick: onUpdateImage,
skin: "light",
priority: "secondary",
ariaLabel: updateButtonAriaLabel,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 186,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement(_wixUiIconsCommon.Replace, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 194,
columnNumber: 11
}
})));
};
_this._resetPreviousImage = function () {
return _this.setState({
previousImageUrl: undefined
});
};
_this._renderRemoveButton = function (ref) {
var _this$props4 = _this.props,
removeImageInfo = _this$props4.removeImageInfo,
onRemoveImage = _this$props4.onRemoveImage,
tooltipProps = _this$props4.tooltipProps,
removeButtonAriaLabel = _this$props4.removeButtonAriaLabel;
return /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], (0, _extends2["default"])({}, tooltipProps, {
timeout: 0,
dataHook: _constants.dataHooks.removeTooltip,
content: removeImageInfo,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 210,
columnNumber: 7
}
}), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
ref: ref,
dataHook: _constants.dataHooks.remove,
skin: "light",
priority: "secondary",
onClick: function onClick(e) {
_this._resetPreviousImage();
onRemoveImage && onRemoveImage(e);
},
ariaLabel: removeButtonAriaLabel,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 216,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement(_wixUiIconsCommon.Delete, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 227,
columnNumber: 11
}
})));
};
_this._renderDownloadButton = function (ref) {
var _this$props5 = _this.props,
downloadImageInfo = _this$props5.downloadImageInfo,
onDownloadImage = _this$props5.onDownloadImage,
tooltipProps = _this$props5.tooltipProps;
return /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], (0, _extends2["default"])({}, tooltipProps, {
timeout: 0,
dataHook: _constants.dataHooks.downloadTooltip,
content: downloadImageInfo,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 236,
columnNumber: 7
}
}), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
ref: ref,
dataHook: _constants.dataHooks.download,
skin: "light",
priority: "secondary",
onClick: function onClick(e) {
onDownloadImage && onDownloadImage(e);
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 242,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement(_wixUiIconsCommon.Download, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 251,
columnNumber: 11
}
})));
};
_this._hidePopover = function () {
return _this.setState({
popoverOpen: false
});
};
_this._showPopover = function () {
return _this.setState({
popoverOpen: true
});
};
_this._renderMoreButton = function () {
var _this$props6 = _this.props,
tooltipProps = _this$props6.tooltipProps,
moreImageInfo = _this$props6.moreImageInfo,
downloadImageInfo = _this$props6.downloadImageInfo,
onDownloadImage = _this$props6.onDownloadImage,
removeImageInfo = _this$props6.removeImageInfo,
onRemoveImage = _this$props6.onRemoveImage;
return /*#__PURE__*/_react["default"].createElement(_PopoverMenu["default"], {
dataHook: _constants.dataHooks.actionsMenu,
onHide: _this._hidePopover,
onShow: _this._showPopover,
triggerElement: function triggerElement(_ref2) {
var toggle = _ref2.toggle;
return /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], (0, _extends2["default"])({}, tooltipProps, {
timeout: 0,
dataHook: _constants.dataHooks.moreTooltip,
content: moreImageInfo,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 276,
columnNumber: 11
}
}), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
onClick: toggle,
dataHook: _constants.dataHooks.more,
skin: "light",
priority: _this.state.popoverOpen ? 'primary' : 'secondary',
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 282,
columnNumber: 13
}
}, /*#__PURE__*/_react["default"].createElement(_wixUiIconsCommon.More, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 288,
columnNumber: 15
}
})));
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 271,
columnNumber: 7
}
}, /*#__PURE__*/_react["default"].createElement(_PopoverMenu["default"].MenuItem, {
prefixIcon: /*#__PURE__*/_react["default"].createElement(_wixUiIconsCommon.Download, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 294,
columnNumber: 23
}
}),
text: downloadImageInfo,
onClick: onDownloadImage,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 293,
columnNumber: 9
}
}), /*#__PURE__*/_react["default"].createElement(_PopoverMenu["default"].MenuItem, {
prefixIcon: /*#__PURE__*/_react["default"].createElement(_wixUiIconsCommon.Delete, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 299,
columnNumber: 23
}
}),
text: removeImageInfo,
onClick: onRemoveImage,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 298,
columnNumber: 9
}
}));
};
_this._renderFirstButton = function () {
var _this$props7 = _this.props,
showUpdateButton = _this$props7.showUpdateButton,
showRemoveButton = _this$props7.showRemoveButton,
showDownloadButton = _this$props7.showDownloadButton;
if (showUpdateButton) return _this._renderUpdateButton(_this.focusNode);
if (showDownloadButton) return _this._renderDownloadButton(_this.focusNode);
if (showRemoveButton) return _this._renderRemoveButton(_this.focusNode);
return null;
};
_this._renderSecondButton = function () {
var _this$props8 = _this.props,
showUpdateButton = _this$props8.showUpdateButton,
showRemoveButton = _this$props8.showRemoveButton,
showDownloadButton = _this$props8.showDownloadButton;
// All three options - show more button
if (showUpdateButton && showDownloadButton && showRemoveButton) {
return _this._renderMoreButton();
}
// Two options - show second button
if (showUpdateButton && showRemoveButton) return _this._renderRemoveButton();
if (showUpdateButton && showDownloadButton) return _this._renderDownloadButton();
if (showDownloadButton && showRemoveButton) return _this._renderRemoveButton();
return null;
};
_this._renderLoader = function () {
return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
align: "center",
verticalAlign: "middle",
height: "100%",
dataHook: _constants.dataHooks.loader,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 338,
columnNumber: 5
}
}, /*#__PURE__*/_react["default"].createElement(_Loader["default"], {
size: "small",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 344,
columnNumber: 7
}
}));
};
_this._renderButtons = function () {
return /*#__PURE__*/_react["default"].createElement("div", {
className: _ImageViewerSt.classes.buttons,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 350,
columnNumber: 7
}
}, _this._renderFirstButton(), _this._renderSecondButton());
};
_this._renderOverlayWith = function (content) {
var removeRoundedBorders = _this.props.removeRoundedBorders;
var _this$_getCurrentAndP2 = _this._getCurrentAndPreviousImages(),
currentImageUrl = _this$_getCurrentAndP2.currentImageUrl,
previousImageUrl = _this$_getCurrentAndP2.previousImageUrl;
var shouldDisplayOverlay = !!(currentImageUrl || previousImageUrl);
return /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _ImageViewerSt.st)(_ImageViewerSt.classes.overlay, {
removeRadius: removeRoundedBorders,
shouldDisplay: shouldDisplayOverlay
}),
"data-remove-radius": removeRoundedBorders,
"data-hook": _constants.dataHooks.overlay,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 366,
columnNumber: 7
}
}, content, /*#__PURE__*/_react["default"].createElement("span", {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 375,
columnNumber: 9
}
}));
};
/**
* Sets focus on the element
*/
_this.focus = function () {
_this.focusNode.current && _this.focusNode.current.focus();
};
var _imageUrl = props.imageUrl;
_this.focusNode = /*#__PURE__*/_react["default"].createRef();
_this.state = {
imageLoading: !!_imageUrl,
previousImageUrl: undefined,
popoverOpen: false
};
return _this;
}
(0, _inherits2["default"])(ImageViewer, _Component);
return (0, _createClass2["default"])(ImageViewer, [{
key: "UNSAFE_componentWillReceiveProps",
value: function UNSAFE_componentWillReceiveProps(nextProps) {
var currentImageUrl = this.props.imageUrl;
var nextImageUrl = nextProps.imageUrl;
if (nextImageUrl && currentImageUrl !== nextImageUrl) {
this.setState({
imageLoading: true,
previousImageUrl: currentImageUrl
});
}
}
}, {
key: "render",
value: function render() {
var _this$props9 = this.props,
width = _this$props9.width,
height = _this$props9.height,
disabled = _this$props9.disabled,
dataHook = _this$props9.dataHook,
removeRoundedBorders = _this$props9.removeRoundedBorders,
imageUrl = _this$props9.imageUrl,
fit = _this$props9.fit,
status = _this$props9.status,
statusMessage = _this$props9.statusMessage,
className = _this$props9.className;
var _this$state = this.state,
imageLoading = _this$state.imageLoading,
previousImageUrl = _this$state.previousImageUrl,
popoverOpen = _this$state.popoverOpen;
var finalStatus = (0, _StatusContext.getStatusFromContext)(this.context, status);
var hasImage = !!imageUrl;
var imageLoaded = hasImage && !imageLoading;
var cssStates = {
disabled: disabled,
status: !disabled && finalStatus,
removeRadius: removeRoundedBorders,
hasImage: hasImage,
popoverOpen: popoverOpen,
imageLoading: imageLoading
};
var rootDataAttributes = {
'data-disabled': disabled,
'data-image-loaded': imageLoaded,
'data-hook': dataHook
};
return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
className: (0, _ImageViewerSt.st)(_ImageViewerSt.classes.root, cssStates, className),
style: {
width: width,
height: height
}
}, rootDataAttributes, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 422,
columnNumber: 7
}
}), !hasImage && this._renderAddImage(), this._renderImage(), !disabled && this._renderOverlayWith(imageLoading ? this._renderLoader() : hasImage && this._renderButtons()), (status || finalStatus === 'loading') && !disabled && /*#__PURE__*/_react["default"].createElement("div", {
className: _ImageViewerSt.classes.statusContainer,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 440,
columnNumber: 11
}
}, /*#__PURE__*/_react["default"].createElement(_StatusIndicator["default"], {
status: finalStatus,
message: statusMessage,
dataHook: _constants.dataHooks.errorTooltip,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 441,
columnNumber: 13
}
})));
}
}]);
}(_react.Component);
ImageViewer.contextType = _StatusContext.StatusContext;
ImageViewer.displayName = 'ImageViewer';
ImageViewer.defaultProps = {
showUpdateButton: true,
showDownloadButton: false,
showRemoveButton: true,
fit: 'cover',
addImageInfo: 'Add Image',
updateImageInfo: 'Update',
downloadImageInfo: 'Download',
removeImageInfo: 'Remove',
moreImageInfo: 'More actions',
onImageLoad: function onImageLoad() {
return {};
}
};
var _default = exports["default"] = ImageViewer;