choerodon-ui/pro/lib/attachment/AttachmentList.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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

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

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

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

var _reactBeautifulDnd = require("react-beautiful-dnd");

var _isNumber = _interopRequireDefault(require("lodash/isNumber"));

var _Item = _interopRequireDefault(require("./Item"));

var _animate = _interopRequireDefault(require("../animate"));

var _utils = require("../data-set/utils");

var _PictureContext = require("../picture/PictureContext");

var AttachmentList = function AttachmentList(props) {
  var prefixCls = props.prefixCls,
      attachments = props.attachments,
      onUpload = props.onUpload,
      onRemove = props.onRemove,
      onOrderChange = props.onOrderChange,
      listType = props.listType,
      pictureWidth = props.pictureWidth,
      bucketName = props.bucketName,
      bucketDirectory = props.bucketDirectory,
      storageCode = props.storageCode,
      attachmentUUID = props.attachmentUUID,
      uploadButton = props.uploadButton,
      sortable = props.sortable,
      readOnly = props.readOnly,
      onFetchAttachments = props.onFetchAttachments,
      limit = props.limit,
      onHistory = props.onHistory,
      onPreview = props.onPreview,
      previewTarget = props.previewTarget,
      isPublic = props.isPublic,
      record = props.record,
      showSize = props.showSize;
  var isCard = listType === 'picture-card';
  var classString = (0, _classnames["default"])(prefixCls, isCard ? "".concat(prefixCls, "-card") : "".concat(prefixCls, "-no-card"));
  var handleDragEnd = (0, _react.useCallback)(function (result) {
    var destination = result.destination,
        source = result.source;

    if (destination && attachments) {
      var newAttachments = attachments.slice();
      (0, _utils.arrayMove)(newAttachments, source.index, destination.index);
      onOrderChange({
        attachments: newAttachments
      });
    }
  }, [attachments, onOrderChange]);
  (0, _react.useEffect)(function () {
    if (!attachments && attachmentUUID) {
      onFetchAttachments({
        bucketName: bucketName,
        bucketDirectory: bucketDirectory,
        storageCode: storageCode,
        attachmentUUID: attachmentUUID,
        isPublic: isPublic
      });
    }
  }, [onFetchAttachments, attachments, bucketName, bucketDirectory, storageCode, attachmentUUID, isPublic, record]);

  if (attachments) {
    var length = attachments.length;
    var draggable = sortable && !readOnly && length > 1;
    var previewIndex = 0;
    var list = attachments.map(function (attachment, index) {
      var type = attachment.type,
          uid = attachment.uid;
      var restCount = index + 1 === limit ? length - limit : undefined;
      var hidden = (0, _isNumber["default"])(limit) && index >= limit;
      var itemDraggable = draggable && !restCount;
      var itemIndex = type.startsWith('image') ? previewIndex++ : undefined;
      return /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Draggable, {
        draggableId: uid,
        index: index,
        key: uid,
        isDragDisabled: !itemDraggable
      }, function (provided) {
        return /*#__PURE__*/_react["default"].createElement(_Item["default"], {
          key: uid,
          provided: provided,
          prefixCls: "".concat(prefixCls, "-item"),
          attachment: attachment,
          pictureWidth: pictureWidth,
          listType: listType,
          bucketName: bucketName,
          bucketDirectory: bucketDirectory,
          storageCode: storageCode,
          showSize: showSize,
          attachmentUUID: attachmentUUID,
          onRemove: onRemove,
          onUpload: onUpload,
          isCard: isCard,
          readOnly: readOnly,
          restCount: restCount,
          draggable: itemDraggable,
          index: itemIndex,
          hidden: hidden,
          onHistory: onHistory,
          onPreview: onPreview,
          previewTarget: previewTarget,
          isPublic: isPublic
        });
      });
    });
    return /*#__PURE__*/_react["default"].createElement(_PictureContext.PictureProvider, null, /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.DragDropContext, {
      onDragEnd: handleDragEnd
    }, /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Droppable, {
      droppableId: "list",
      key: "list",
      isDropDisabled: !draggable,
      direction: isCard ? 'horizontal' : 'vertical'
    }, function (droppableProvided) {
      return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
        ref: droppableProvided.innerRef
      }, droppableProvided.droppableProps, {
        className: classString
      }), /*#__PURE__*/_react["default"].createElement(_animate["default"], {
        component: _react.Fragment,
        transitionName: "fade",
        exclusive: true
      }, list), droppableProvided.placeholder, uploadButton);
    })));
  }

  if (uploadButton) {
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: classString
    }, uploadButton);
  }

  return null;
};

AttachmentList.displayName = 'AttachmentList';

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

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