wix-style-react/dist/src/ImageViewer/ImageViewer.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

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 = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _Delete = _interopRequireDefault(require("wix-ui-icons-common/Delete"));

var _Replace = _interopRequireDefault(require("wix-ui-icons-common/Replace"));

var _Download = _interopRequireDefault(require("wix-ui-icons-common/Download"));

var _More = _interopRequireDefault(require("wix-ui-icons-common/More"));

var _StatusIndicator = _interopRequireDefault(require("../StatusIndicator"));

var _Loader = _interopRequireDefault(require("../Loader"));

var _ImageViewerSt = require("./ImageViewer.st.css");

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 _classnames = _interopRequireDefault(require("classnames"));

var _constants = require("./constants");

var _TooltipCommon = require("../common/PropTypes/TooltipCommon");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

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 ImageViewer = /*#__PURE__*/function (_Component) {
  (0, _inherits2["default"])(ImageViewer, _Component);

  var _super = _createSuper(ImageViewer);

  function ImageViewer(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, ImageViewer);
    _this = _super.call(this, props);
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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
        })
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_renderImageElement", function (_ref) {
      var imageUrl = _ref.imageUrl,
          shouldDisplay = _ref.shouldDisplay,
          onLoad = _ref.onLoad,
          onError = _ref.onError,
          key = _ref.key,
          dataHook = _ref.dataHook;
      var dataAttributes = {
        'data-hook': dataHook,
        'data-image-visible': shouldDisplay
      };
      return /*#__PURE__*/_react["default"].createElement("img", (0, _extends2["default"])({
        className: (0, _classnames["default"])([_ImageViewerSt.classes.image, _ImageViewerSt.classes.stretch, shouldDisplay && _ImageViewerSt.classes.imageVisible]),
        src: imageUrl,
        onLoad: onLoad,
        onError: onError,
        key: key
      }, dataAttributes));
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_resetImageLoading", function () {
      _this.setState({
        imageLoading: false
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onImageLoad", function (e) {
      var onImageLoad = _this.props.onImageLoad;

      _this.setState({
        imageLoading: false
      }, function () {
        return onImageLoad(e);
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_getCurrentAndPreviousImages", function () {
      var currentImageUrl = _this.props.imageUrl;
      var previousImageUrl = _this.state.previousImageUrl;
      return {
        currentImageUrl: currentImageUrl,
        previousImageUrl: previousImageUrl
      };
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_renderImage", function () {
      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
      }, _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)
      }), _this._renderImageElement({
        imageUrl: previousImageUrl,
        shouldDisplay: imageLoading && !!previousImageUrl,
        dataHook: _constants.dataHooks.previousImage,
        key: generateKey(_constants.dataHooks.previousImage, previousImageUrl)
      }));
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_renderUpdateButton", function (ref) {
      var _this$props2 = _this.props,
          updateImageInfo = _this$props2.updateImageInfo,
          onUpdateImage = _this$props2.onUpdateImage,
          tooltipProps = _this$props2.tooltipProps;
      return /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], (0, _extends2["default"])({}, tooltipProps, {
        timeout: 0,
        dataHook: _constants.dataHooks.updateTooltip,
        content: updateImageInfo
      }), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
        ref: ref,
        dataHook: _constants.dataHooks.update,
        onClick: onUpdateImage,
        skin: "light",
        priority: "secondary"
      }, /*#__PURE__*/_react["default"].createElement(_Replace["default"], null)));
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_resetPreviousImage", function () {
      return _this.setState({
        previousImageUrl: undefined
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_renderRemoveButton", function (ref) {
      var _this$props3 = _this.props,
          removeImageInfo = _this$props3.removeImageInfo,
          onRemoveImage = _this$props3.onRemoveImage,
          tooltipProps = _this$props3.tooltipProps;
      return /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], (0, _extends2["default"])({}, tooltipProps, {
        timeout: 0,
        dataHook: _constants.dataHooks.removeTooltip,
        content: removeImageInfo
      }), /*#__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);
        }
      }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null)));
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_renderDownloadButton", function (ref) {
      var _this$props4 = _this.props,
          downloadImageInfo = _this$props4.downloadImageInfo,
          onDownloadImage = _this$props4.onDownloadImage,
          tooltipProps = _this$props4.tooltipProps;
      return /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], (0, _extends2["default"])({}, tooltipProps, {
        timeout: 0,
        dataHook: _constants.dataHooks.downloadTooltip,
        content: downloadImageInfo
      }), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
        ref: ref,
        dataHook: _constants.dataHooks.download,
        skin: "light",
        priority: "secondary",
        onClick: function onClick(e) {
          onDownloadImage && onDownloadImage(e);
        }
      }, /*#__PURE__*/_react["default"].createElement(_Download["default"], null)));
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_hidePopover", function () {
      return _this.setState({
        popoverOpen: false
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_showPopover", function () {
      return _this.setState({
        popoverOpen: true
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_renderMoreButton", function () {
      var _this$props5 = _this.props,
          tooltipProps = _this$props5.tooltipProps,
          moreImageInfo = _this$props5.moreImageInfo,
          downloadImageInfo = _this$props5.downloadImageInfo,
          onDownloadImage = _this$props5.onDownloadImage,
          removeImageInfo = _this$props5.removeImageInfo,
          onRemoveImage = _this$props5.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
          }), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
            onClick: toggle,
            dataHook: _constants.dataHooks.more,
            skin: "light",
            priority: _this.state.popoverOpen ? 'primary' : 'secondary'
          }, /*#__PURE__*/_react["default"].createElement(_More["default"], null)));
        }
      }, /*#__PURE__*/_react["default"].createElement(_PopoverMenu["default"].MenuItem, {
        prefixIcon: /*#__PURE__*/_react["default"].createElement(_Download["default"], null),
        text: downloadImageInfo,
        onClick: onDownloadImage
      }), /*#__PURE__*/_react["default"].createElement(_PopoverMenu["default"].MenuItem, {
        prefixIcon: /*#__PURE__*/_react["default"].createElement(_Delete["default"], null),
        text: removeImageInfo,
        onClick: onRemoveImage
      }));
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_renderFirstButton", function () {
      var _this$props6 = _this.props,
          showUpdateButton = _this$props6.showUpdateButton,
          showRemoveButton = _this$props6.showRemoveButton,
          showDownloadButton = _this$props6.showDownloadButton;
      if (showUpdateButton) return _this._renderUpdateButton(_this.focusNode);
      if (showDownloadButton) return _this._renderDownloadButton(_this.focusNode);
      if (showRemoveButton) return _this._renderRemoveButton(_this.focusNode);
      return null;
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_renderSecondButton", function () {
      var _this$props7 = _this.props,
          showUpdateButton = _this$props7.showUpdateButton,
          showRemoveButton = _this$props7.showRemoveButton,
          showDownloadButton = _this$props7.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;
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_renderLoader", function () {
      return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
        align: "center",
        verticalAlign: "middle",
        height: "100%",
        dataHook: _constants.dataHooks.loader
      }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], {
        size: "small"
      }));
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_renderButtons", function () {
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: _ImageViewerSt.classes.buttons
      }, _this._renderFirstButton(), _this._renderSecondButton());
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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
      }, content, /*#__PURE__*/_react["default"].createElement("span", null));
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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, _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$props8 = this.props,
          width = _this$props8.width,
          height = _this$props8.height,
          disabled = _this$props8.disabled,
          dataHook = _this$props8.dataHook,
          removeRoundedBorders = _this$props8.removeRoundedBorders,
          imageUrl = _this$props8.imageUrl,
          status = _this$props8.status,
          statusMessage = _this$props8.statusMessage,
          className = _this$props8.className;
      var _this$state = this.state,
          imageLoading = _this$state.imageLoading,
          previousImageUrl = _this$state.previousImageUrl,
          popoverOpen = _this$state.popoverOpen;
      var hasImage = !!imageUrl;
      var hasNoPreviousImageWhileLoading = imageLoading && !previousImageUrl;
      var imageLoaded = hasImage && !imageLoading;
      var cssStates = {
        disabled: disabled,
        status: !disabled && status,
        removeRadius: removeRoundedBorders,
        hasImage: hasImage,
        popoverOpen: popoverOpen
      };
      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), (hasNoPreviousImageWhileLoading || !hasImage) && this._renderAddImage(), this._renderImage(), this._renderOverlayWith(imageLoading ? this._renderLoader() : hasImage && this._renderButtons()), status && !disabled && /*#__PURE__*/_react["default"].createElement("div", {
        className: _ImageViewerSt.classes.statusContainer
      }, /*#__PURE__*/_react["default"].createElement(_StatusIndicator["default"], {
        status: status,
        message: statusMessage,
        dataHook: _constants.dataHooks.errorTooltip
      })));
    }
  }]);
  return ImageViewer;
}(_react.Component);

ImageViewer.displayName = 'ImageViewer';
ImageViewer.defaultProps = {
  showUpdateButton: true,
  showDownloadButton: false,
  showRemoveButton: true,
  addImageInfo: 'Add Image',
  updateImageInfo: 'Update',
  downloadImageInfo: 'Download',
  removeImageInfo: 'Remove',
  moreImageInfo: 'More actions',
  onImageLoad: function onImageLoad() {
    return {};
  }
};
ImageViewer.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,

  /** Links to image asset source (URL). Leave it blank when image is not uploaded yet. */
  imageUrl: _propTypes["default"].string,

  /** Specifies the status of a viewer. */
  status: _propTypes["default"].oneOf(['error', 'warning', 'loading']),

  /** Defines the message to display on status icon hover. If not given or empty there will be no tooltip. */
  statusMessage: _propTypes["default"].node,

  /** Allows to pass all common tooltip props. Check `<Tooltip/>` for a full API. */
  tooltipProps: _propTypes["default"].shape(_TooltipCommon.TooltipCommonProps),

  /** Specifies whether the update button is visible. */
  showUpdateButton: _propTypes["default"].bool,

  /** Specifies whether the download button is visible. */
  showDownloadButton: _propTypes["default"].bool,

  /** Specifies whether the remove button is visible. */
  showRemoveButton: _propTypes["default"].bool,

  /** Defines a click handler, which is called every time a user clicks on an empty viewer (when no `imageUrl` is provided). */
  onAddImage: _propTypes["default"].func,

  /** Defines a handler function, which is called every time user clicks on the ‘Update image’ button. */
  onUpdateImage: _propTypes["default"].func,

  /** Defines a handler function, which is called every time user clicks on the download button. */
  onDownloadImage: _propTypes["default"].func,

  /** Defines a handler function, which is called every time user clicks on the ‘Remove image’ button. */
  onRemoveImage: _propTypes["default"].func,

  /** Defines a handler function which is called right after image loads. */
  onImageLoad: _propTypes["default"].func,

  /** Specifies a message to display in a tooltip when no image is uploaded yet. */
  addImageInfo: _propTypes["default"].string,

  /** Defines a message to display in a tooltip when ‘Update’ action button is hovered. */
  updateImageInfo: _propTypes["default"].string,

  /** Defines a message to display in a tooltip when ‘Download’ action button is hovered. */
  downloadImageInfo: _propTypes["default"].string,

  /** Defines a message to display in a tooltip, when ‘remove’ action button is hovered. */
  removeImageInfo: _propTypes["default"].string,

  /** Defines a message to display in a tooltip when the ‘More’ action button is hovered. Relevant only when all buttons are visible. */
  moreImageInfo: _propTypes["default"].string,

  /** Removes default border radius. */
  removeRoundedBorders: _propTypes["default"].bool,

  /** Sets the width of the viewer box. */
  width: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),

  /** Sets the height of the viewer box. */
  height: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),

  /** Specifies whether the component is disabled. */
  disabled: _propTypes["default"].bool
};
var _default = ImageViewer;
exports["default"] = _default;