choerodon-ui/pro/lib/attachment/Item.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

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

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

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

var _react = _interopRequireWildcard(require("react"));

var _mobxReactLite = require("mobx-react-lite");

var _classnames3 = _interopRequireDefault(require("classnames"));

var _isString = _interopRequireDefault(require("lodash/isString"));

var _isFunction = _interopRequireDefault(require("lodash/isFunction"));

var _enum = require("../../../lib/_util/enum");

var _ConfigContext = _interopRequireDefault(require("../../../lib/config-provider/ConfigContext"));

var _enum2 = require("../../../lib/progress/enum");

var _Progress = _interopRequireDefault(require("../progress/Progress"));

var _icon = _interopRequireDefault(require("../icon"));

var _Picture = _interopRequireDefault(require("../picture/Picture"));

var _Button = _interopRequireDefault(require("../button/Button"));

var _enum3 = require("../button/enum");

var _singleton = require("../tooltip/singleton");

var _utils = require("./utils");

var _Tooltip = _interopRequireDefault(require("../tooltip/Tooltip"));

var _localeContext = require("../locale-context");

var ATTACHMENT_TARGET = 'attachment-preview';

var Item = function Item(props) {
  var _classnames2;

  var attachment = props.attachment,
      listType = props.listType,
      prefixCls = props.prefixCls,
      onUpload = props.onUpload,
      onRemove = props.onRemove,
      width = props.pictureWidth,
      bucketName = props.bucketName,
      onHistory = props.onHistory,
      onPreview = props.onPreview,
      _props$previewTarget = props.previewTarget,
      previewTarget = _props$previewTarget === void 0 ? ATTACHMENT_TARGET : _props$previewTarget,
      bucketDirectory = props.bucketDirectory,
      storageCode = props.storageCode,
      attachmentUUID = props.attachmentUUID,
      isCard = props.isCard,
      provided = props.provided,
      readOnly = props.readOnly,
      restCount = props.restCount,
      draggable = props.draggable,
      index = props.index,
      hidden = props.hidden,
      isPublic = props.isPublic,
      showSize = props.showSize;
  var status = attachment.status,
      name = attachment.name,
      filename = attachment.filename,
      ext = attachment.ext,
      url = attachment.url,
      size = attachment.size,
      type = attachment.type;

  var _useContext = (0, _react.useContext)(_ConfigContext["default"]),
      getConfig = _useContext.getConfig,
      getTooltipTheme = _useContext.getTooltipTheme,
      getTooltipPlacement = _useContext.getTooltipPlacement;

  var attachmentConfig = getConfig('attachment');
  var tooltipRef = (0, _react.useRef)(false);
  var pictureRef = (0, _react.useRef)(null);
  var getPreviewUrl = attachmentConfig.getPreviewUrl,
      getDownloadUrl = attachmentConfig.getDownloadUrl;
  var src = getPreviewUrl ? getPreviewUrl({
    attachment: attachment,
    bucketName: bucketName,
    bucketDirectory: bucketDirectory,
    storageCode: storageCode,
    attachmentUUID: attachmentUUID,
    isPublic: isPublic
  }) : url;
  var downloadUrl = getDownloadUrl && getDownloadUrl({
    attachment: attachment,
    bucketName: bucketName,
    bucketDirectory: bucketDirectory,
    storageCode: storageCode,
    attachmentUUID: attachmentUUID,
    isPublic: isPublic
  });
  var dragProps = (0, _objectSpread2["default"])({}, provided.dragHandleProps);
  var isPicture = type.startsWith('image') || ['png', 'gif', 'jpg', 'webp', 'jpeg', 'bmp', 'tif', 'pic', 'svg'].includes(ext);
  var preview = !!src && (status === 'success' || status === 'done');
  var handlePreview = (0, _react.useCallback)(function () {
    var current = pictureRef.current;

    if (current) {
      current.preview();
    }
  }, [pictureRef]);

  var renderDragger = function renderDragger() {
    if (draggable && !isCard) {
      var iconProps = {
        className: "".concat(prefixCls, "-drag-icon"),
        type: 'baseline-drag_indicator'
      };

      if (status !== 'deleting') {
        (0, _extends2["default"])(iconProps, dragProps);
      }

      return /*#__PURE__*/_react["default"].createElement(_icon["default"], (0, _extends2["default"])({}, iconProps));
    }
  };

  var renderImagePreview = function renderImagePreview() {
    if (listType === 'text') {
      var renderIcon = attachmentConfig.renderIcon;

      var defaultIcon = /*#__PURE__*/_react["default"].createElement(_icon["default"], {
        type: "insert_drive_file"
      });

      var icon = renderIcon ? renderIcon(attachment, listType, defaultIcon) : defaultIcon;
      var isSrcIcon = (0, _isString["default"])(icon);
      return isPicture || isSrcIcon ? /*#__PURE__*/_react["default"].createElement(_Picture["default"], {
        width: 14,
        height: 14,
        alt: name,
        previewUrl: src,
        downloadUrl: downloadUrl,
        src: isSrcIcon ? icon : undefined,
        objectFit: "contain",
        status: "loaded",
        index: index,
        className: "".concat(prefixCls, "-icon"),
        previewTarget: isSrcIcon && !isPicture ? previewTarget : undefined,
        preview: preview,
        onPreview: onPreview,
        ref: pictureRef
      }, /*#__PURE__*/(0, _react.isValidElement)(icon) ? icon : undefined) : preview ? /*#__PURE__*/_react["default"].createElement(_Button["default"], {
        href: src,
        target: previewTarget,
        funcType: _enum3.FuncType.link,
        className: "".concat(prefixCls, "-icon")
      }, icon) : /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-icon")
      }, icon);
    }

    if (isCard || listType === 'picture') {
      if ((preview || status === 'deleting') && isPicture) {
        return /*#__PURE__*/_react["default"].createElement(_Picture["default"], {
          width: width,
          height: width,
          alt: name,
          src: src || url,
          downloadUrl: downloadUrl,
          lazy: true,
          objectFit: "contain",
          index: index,
          preview: preview
        });
      }

      return /*#__PURE__*/_react["default"].createElement(_Picture["default"], {
        width: width,
        height: width,
        alt: name,
        status: status === 'error' ? 'error' : 'empty',
        index: index
      });
    }
  };

  var renderPlaceholder = function renderPlaceholder() {
    if (restCount && isCard) {
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-placeholder")
      }, "+", restCount);
    }
  };

  var renderTitle = function renderTitle(isCardTitle) {
    var fileName = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
      className: "".concat(prefixCls, "-name")
    }, filename), ext && /*#__PURE__*/_react["default"].createElement("span", {
      className: "".concat(prefixCls, "-ext")
    }, ".", ext));

    var nameNode = preview && listType === 'text' ? /*#__PURE__*/_react["default"].createElement("a", (0, _extends2["default"])({}, isPicture ? {
      onClick: handlePreview
    } : {
      href: src,
      target: previewTarget
    }, {
      className: "".concat(prefixCls, "-link")
    }), fileName) : fileName;
    return /*#__PURE__*/_react["default"].createElement("span", {
      className: "".concat(prefixCls, "-title"),
      style: isCardTitle ? {
        width: width
      } : undefined
    }, nameNode, !isCardTitle && showSize && /*#__PURE__*/_react["default"].createElement("span", {
      className: "".concat(prefixCls, "-size")
    }, " (", (0, _utils.formatFileSize)(size), ")"));
  };

  var renderProgress = function renderProgress() {
    if (status === 'uploading') {
      return /*#__PURE__*/_react["default"].createElement(_Progress["default"], {
        value: attachment.percent || 0,
        size: _enum.Size.small,
        showInfo: false,
        strokeWidth: 2,
        className: "".concat(prefixCls, "-progress"),
        status: _enum2.ProgressStatus.normal
      });
    }
  };

  var renderButtons = function renderButtons() {
    var buttons = [];

    if (!readOnly && status === 'error' && !attachment.invalid) {
      var upProps = {
        key: 'upload',
        className: (0, _classnames3["default"])("".concat(prefixCls, "-icon")),
        icon: 'replay',
        onClick: function onClick() {
          return onUpload(attachment);
        },
        funcType: _enum3.FuncType.link,
        block: isCard
      };
      buttons.push( /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, upProps)));
    }

    if (!status || status === 'success' || status === 'done') {
      if (attachmentUUID && onHistory) {
        var historyProps = {
          className: (0, _classnames3["default"])("".concat(prefixCls, "-icon")),
          icon: 'library_books',
          onClick: function onClick() {
            return onHistory(attachment, attachmentUUID);
          },
          funcType: _enum3.FuncType.link,
          block: isCard
        };
        buttons.push( /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
          key: "history",
          title: (0, _localeContext.$l)('Attachment', 'view_operation_records')
        }, /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, historyProps))));
      }

      if (downloadUrl) {
        var downProps = {
          className: (0, _classnames3["default"])("".concat(prefixCls, "-icon")),
          icon: isCard ? 'arrow_downward' : 'get_app',
          funcType: _enum3.FuncType.link,
          href: (0, _isString["default"])(downloadUrl) ? downloadUrl : undefined,
          onClick: (0, _isFunction["default"])(downloadUrl) ? downloadUrl : undefined,
          target: previewTarget,
          block: isCard
        };
        buttons.push( /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
          key: "download",
          title: (0, _localeContext.$l)('Attachment', 'download')
        }, /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, downProps))));
      }
    }

    if (attachmentUUID && !readOnly && status !== 'uploading') {
      var rmProps = {
        className: (0, _classnames3["default"])("".concat(prefixCls, "-icon")),
        icon: isCard ? 'delete_forever-o' : 'close',
        onClick: function onClick() {
          return onRemove(attachment);
        },
        funcType: _enum3.FuncType.link,
        block: isCard
      };
      buttons.push( /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
        key: "remove",
        title: status === 'deleting' ? undefined : (0, _localeContext.$l)('Attachment', 'delete')
      }, /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, rmProps))));
    }

    if (buttons.length) {
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: (0, _classnames3["default"])("".concat(prefixCls, "-buttons"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-buttons-visible"), status === 'deleting'))
      }, buttons);
    }
  };

  var renderErrorMessage = function renderErrorMessage() {
    if (status === 'error') {
      var errorMessage = attachment.errorMessage;

      if (errorMessage) {
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: "".concat(prefixCls, "-error-content")
        }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
          type: "warning"
        }), /*#__PURE__*/_react["default"].createElement("span", {
          className: "".concat(prefixCls, "-error-message")
        }, errorMessage));
      }
    }
  };

  var errorMessageNode = renderErrorMessage();
  var handleMouseEnter = (0, _react.useCallback)(function (e) {
    if (errorMessageNode) {
      (0, _singleton.show)(e.currentTarget, {
        title: errorMessageNode,
        theme: getTooltipTheme('validation'),
        placement: getTooltipPlacement('validation') || 'bottomLeft'
      });
      tooltipRef.current = true;
    }
  }, [errorMessageNode, getTooltipTheme, getTooltipPlacement, tooltipRef]);
  var handleMouseLeave = (0, _react.useCallback)(function () {
    if (tooltipRef.current) {
      (0, _singleton.hide)();
      tooltipRef.current = false;
    }
  }, [tooltipRef]);
  (0, _react.useEffect)(function () {
    return function () {
      if (tooltipRef.current) {
        (0, _singleton.hide)();
        tooltipRef.current = false;
      }
    };
  }, []);
  var listProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
    ref: provided.innerRef,
    className: (0, _classnames3["default"])(prefixCls, (_classnames2 = {}, (0, _defineProperty2["default"])(_classnames2, "".concat(prefixCls, "-error"), status === 'error'), (0, _defineProperty2["default"])(_classnames2, "".concat(prefixCls, "-success"), status === 'success'), _classnames2))
  }, provided.draggableProps), {}, {
    style: (0, _objectSpread2["default"])({}, provided.draggableProps.style)
  });

  if (draggable && isCard) {
    (0, _extends2["default"])(listProps, dragProps);
  }

  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, listProps, {
    hidden: hidden
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(prefixCls, "-container"),
    onMouseEnter: isCard ? handleMouseEnter : undefined,
    onMouseLeave: isCard ? handleMouseLeave : undefined
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(prefixCls, "-content")
  }, renderDragger(), renderImagePreview(), renderPlaceholder(), !restCount && !isCard && renderTitle(), !restCount && renderButtons()), errorMessageNode, renderProgress()), !restCount && isCard && renderTitle(true));
};

Item.displayName = 'Item';

var _default = (0, _mobxReactLite.observer)(Item);

exports["default"] = _default;
//# sourceMappingURL=Item.js.map