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

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

import _extends from "@babel/runtime/helpers/extends";
import React, { Fragment, useCallback, useEffect, useRef } from 'react';
import { observer } from 'mobx-react-lite';
import classNames from 'classnames';
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
import isNumber from 'lodash/isNumber';
import Item from './Item';
import Animate from '../animate';
import { arrayMove } from '../data-set/utils';
import { PictureProvider } from '../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,
      disabled = props.disabled,
      onFetchAttachments = props.onFetchAttachments,
      onAttachmentsChange = props.onAttachmentsChange,
      limit = props.limit,
      onHistory = props.onHistory,
      onPreview = props.onPreview,
      previewTarget = props.previewTarget,
      isPublic = props.isPublic,
      record = props.record,
      showSize = props.showSize,
      buttons = props.buttons,
      getPreviewUrl = props.getPreviewUrl;
  var isCard = listType === 'picture-card';
  var classString = classNames(prefixCls, isCard ? "".concat(prefixCls, "-card") : "".concat(prefixCls, "-no-card"));
  var oldValues = useRef();
  var handleDragEnd = useCallback(function (result) {
    var destination = result.destination,
        source = result.source;

    if (destination && attachments) {
      var newAttachments = attachments.slice();
      arrayMove(newAttachments, source.index, destination.index);
      onOrderChange({
        attachments: newAttachments
      });
    }
  }, [attachments, onOrderChange]);
  useEffect(function () {
    if (attachmentUUID) {
      var current = oldValues.current;

      if (!current || current.attachmentUUID !== attachmentUUID || current.record !== record) {
        if (attachments) {
          onAttachmentsChange(undefined);
        }

        oldValues.current = {
          attachmentUUID: attachmentUUID,
          record: record
        };
        onFetchAttachments({
          bucketName: bucketName,
          bucketDirectory: bucketDirectory,
          storageCode: storageCode,
          attachmentUUID: attachmentUUID,
          isPublic: isPublic
        });
      }
    }
  }, [onFetchAttachments, 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 = isNumber(limit) && index >= limit;
      var itemDraggable = draggable && !restCount;
      var itemIndex = type.startsWith('image') ? previewIndex++ : undefined;
      return /*#__PURE__*/React.createElement(Draggable, {
        draggableId: uid,
        index: index,
        key: uid,
        isDragDisabled: !itemDraggable
      }, function (provided) {
        return /*#__PURE__*/React.createElement(Item, {
          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,
          disabled: disabled,
          restCount: restCount,
          draggable: itemDraggable,
          index: itemIndex,
          hidden: hidden,
          onHistory: onHistory,
          onPreview: onPreview,
          previewTarget: previewTarget,
          isPublic: isPublic,
          buttons: buttons,
          getPreviewUrl: getPreviewUrl
        });
      });
    });
    return /*#__PURE__*/React.createElement(PictureProvider, null, /*#__PURE__*/React.createElement(DragDropContext, {
      onDragEnd: handleDragEnd
    }, /*#__PURE__*/React.createElement(Droppable, {
      droppableId: "list",
      key: "list",
      isDropDisabled: !draggable,
      direction: isCard ? 'horizontal' : 'vertical'
    }, function (droppableProvided) {
      return /*#__PURE__*/React.createElement("div", _extends({
        ref: droppableProvided.innerRef
      }, droppableProvided.droppableProps, {
        className: classString
      }), /*#__PURE__*/React.createElement(Animate, {
        component: Fragment,
        transitionName: "fade",
        exclusive: true
      }, list), droppableProvided.placeholder, uploadButton);
    })));
  }

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

  return null;
};

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