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

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

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import React, { isValidElement, useCallback, useContext, useEffect, useRef } from 'react';
import { observer } from 'mobx-react-lite';
import classnames from 'classnames';
import isString from 'lodash/isString';
import isFunction from 'lodash/isFunction';
import { Size } from '../../../es/_util/enum';
import ConfigContext from '../../../es/config-provider/ConfigContext';
import { ProgressStatus } from '../../../es/progress/enum';
import Progress from '../progress/Progress';
import Icon from '../icon';
import Picture from '../picture/Picture';
import Button from '../button/Button';
import { FuncType } from '../button/enum';
import { hide, show } from '../tooltip/singleton';
import { formatFileSize } from './utils';
import Tooltip from '../tooltip/Tooltip';
import { $l } from '../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 = useContext(ConfigContext),
      getConfig = _useContext.getConfig,
      getTooltipTheme = _useContext.getTooltipTheme,
      getTooltipPlacement = _useContext.getTooltipPlacement;

  var attachmentConfig = getConfig('attachment');
  var tooltipRef = useRef(false);
  var pictureRef = 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 = _objectSpread({}, 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 = 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') {
        _extends(iconProps, dragProps);
      }

      return /*#__PURE__*/React.createElement(Icon, _extends({}, iconProps));
    }
  };

  var renderImagePreview = function renderImagePreview() {
    if (listType === 'text') {
      var renderIcon = attachmentConfig.renderIcon;
      var defaultIcon = /*#__PURE__*/React.createElement(Icon, {
        type: "insert_drive_file"
      });
      var icon = renderIcon ? renderIcon(attachment, listType, defaultIcon) : defaultIcon;
      var isSrcIcon = isString(icon);
      return isPicture || isSrcIcon ? /*#__PURE__*/React.createElement(Picture, {
        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__*/isValidElement(icon) ? icon : undefined) : preview ? /*#__PURE__*/React.createElement(Button, {
        href: src,
        target: previewTarget,
        funcType: FuncType.link,
        className: "".concat(prefixCls, "-icon")
      }, icon) : /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-icon")
      }, icon);
    }

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

      return /*#__PURE__*/React.createElement(Picture, {
        width: width,
        height: width,
        alt: name,
        status: status === 'error' ? 'error' : 'empty',
        index: index
      });
    }
  };

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

  var renderTitle = function renderTitle(isCardTitle) {
    var fileName = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-name")
    }, filename), ext && /*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-ext")
    }, ".", ext));
    var nameNode = preview && listType === 'text' ? /*#__PURE__*/React.createElement("a", _extends({}, isPicture ? {
      onClick: handlePreview
    } : {
      href: src,
      target: previewTarget
    }, {
      className: "".concat(prefixCls, "-link")
    }), fileName) : fileName;
    return /*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-title"),
      style: isCardTitle ? {
        width: width
      } : undefined
    }, nameNode, !isCardTitle && showSize && /*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-size")
    }, " (", formatFileSize(size), ")"));
  };

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

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

    if (!readOnly && status === 'error' && !attachment.invalid) {
      var upProps = {
        key: 'upload',
        className: classnames("".concat(prefixCls, "-icon")),
        icon: 'replay',
        onClick: function onClick() {
          return onUpload(attachment);
        },
        funcType: FuncType.link,
        block: isCard
      };
      buttons.push( /*#__PURE__*/React.createElement(Button, _extends({}, upProps)));
    }

    if (!status || status === 'success' || status === 'done') {
      if (attachmentUUID && onHistory) {
        var historyProps = {
          className: classnames("".concat(prefixCls, "-icon")),
          icon: 'library_books',
          onClick: function onClick() {
            return onHistory(attachment, attachmentUUID);
          },
          funcType: FuncType.link,
          block: isCard
        };
        buttons.push( /*#__PURE__*/React.createElement(Tooltip, {
          key: "history",
          title: $l('Attachment', 'view_operation_records')
        }, /*#__PURE__*/React.createElement(Button, _extends({}, historyProps))));
      }

      if (downloadUrl) {
        var downProps = {
          className: classnames("".concat(prefixCls, "-icon")),
          icon: isCard ? 'arrow_downward' : 'get_app',
          funcType: FuncType.link,
          href: isString(downloadUrl) ? downloadUrl : undefined,
          onClick: isFunction(downloadUrl) ? downloadUrl : undefined,
          target: previewTarget,
          block: isCard
        };
        buttons.push( /*#__PURE__*/React.createElement(Tooltip, {
          key: "download",
          title: $l('Attachment', 'download')
        }, /*#__PURE__*/React.createElement(Button, _extends({}, downProps))));
      }
    }

    if (attachmentUUID && !readOnly && status !== 'uploading') {
      var rmProps = {
        className: classnames("".concat(prefixCls, "-icon")),
        icon: isCard ? 'delete_forever-o' : 'close',
        onClick: function onClick() {
          return onRemove(attachment);
        },
        funcType: FuncType.link,
        block: isCard
      };
      buttons.push( /*#__PURE__*/React.createElement(Tooltip, {
        key: "remove",
        title: status === 'deleting' ? undefined : $l('Attachment', 'delete')
      }, /*#__PURE__*/React.createElement(Button, _extends({}, rmProps))));
    }

    if (buttons.length) {
      return /*#__PURE__*/React.createElement("div", {
        className: classnames("".concat(prefixCls, "-buttons"), _defineProperty({}, "".concat(prefixCls, "-buttons-visible"), status === 'deleting'))
      }, buttons);
    }
  };

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

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

  var errorMessageNode = renderErrorMessage();
  var handleMouseEnter = useCallback(function (e) {
    if (errorMessageNode) {
      show(e.currentTarget, {
        title: errorMessageNode,
        theme: getTooltipTheme('validation'),
        placement: getTooltipPlacement('validation') || 'bottomLeft'
      });
      tooltipRef.current = true;
    }
  }, [errorMessageNode, getTooltipTheme, getTooltipPlacement, tooltipRef]);
  var handleMouseLeave = useCallback(function () {
    if (tooltipRef.current) {
      hide();
      tooltipRef.current = false;
    }
  }, [tooltipRef]);
  useEffect(function () {
    return function () {
      if (tooltipRef.current) {
        hide();
        tooltipRef.current = false;
      }
    };
  }, []);

  var listProps = _objectSpread(_objectSpread({
    ref: provided.innerRef,
    className: classnames(prefixCls, (_classnames2 = {}, _defineProperty(_classnames2, "".concat(prefixCls, "-error"), status === 'error'), _defineProperty(_classnames2, "".concat(prefixCls, "-success"), status === 'success'), _classnames2))
  }, provided.draggableProps), {}, {
    style: _objectSpread({}, provided.draggableProps.style)
  });

  if (draggable && isCard) {
    _extends(listProps, dragProps);
  }

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

Item.displayName = 'Item';
export default observer(Item);
//# sourceMappingURL=Item.js.map