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

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

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["viewMode", "children", "hidden", "text", "count"];
import React, { Children, cloneElement, isValidElement, useContext, useMemo, useRef } from 'react';
import { action, observable } from 'mobx';
import { observer } from 'mobx-react-lite';
import Trigger from '../../../es/trigger';
import { Action } from '../../../es/trigger/enum';
import ConfigContext from '../../../es/config-provider/ConfigContext';
import BUILT_IN_PLACEMENTS from '../trigger-field/placements';
import { ButtonColor, FuncType } from '../button/enum';
import Button from '../button/Button';
import { $l } from '../locale-context';
import isFragment from '../_util/isFragment';
import { iteratorReduce } from '../_util/iteratorUtils';

function getRefCallback(callback, index) {
  return function (item) {
    return callback(item, index);
  };
}

function normalizeAttachments(children, getRef) {
  var index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
    count: 0
  };
  return Children.map(children, function (child) {
    if (isFragment(child)) {
      return normalizeAttachments(child.props.children, getRef, index);
    }

    if ( /*#__PURE__*/isValidElement(child) && child.type.__PRO_ATTACHMENT) {
      var props = {
        viewMode: 'list',
        readOnly: true,
        __inGroup: true
      };

      if (getRef) {
        var count = index.count;
        props.ref = getRefCallback(getRef, count);
        index.count = count + 1;
      }

      return /*#__PURE__*/cloneElement(child, props);
    }

    return undefined;
  });
}

var AttachmentGroup = function AttachmentGroup(props) {
  var viewMode = props.viewMode,
      children = props.children,
      hidden = props.hidden,
      text = props.text,
      count = props.count,
      buttonProps = _objectWithoutProperties(props, _excluded);

  var hasCount = count !== undefined;

  var _useContext = useContext(ConfigContext),
      getProPrefixCls = _useContext.getProPrefixCls,
      getConfig = _useContext.getConfig;

  var listRef = useRef(observable.map());
  var prefixCls = getProPrefixCls('attachment');
  var computedCount = hasCount ? count : iteratorReduce(listRef.current.values(), function (sum, attachment) {
    return sum + (attachment.count || 0);
  }, 0);
  var attachments = useMemo(function () {
    return children ? /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-group")
    }, normalizeAttachments(children, hasCount ? undefined : action(function (attachment, index) {
      if (attachment) {
        listRef.current.set(index, attachment);
      } else {
        listRef.current["delete"](index);
      }
    }))) : undefined;
  }, [children, hasCount, viewMode, prefixCls]);

  var renderEmpty = function renderEmpty() {
    if (computedCount === 0) {
      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-empty")
      }, getConfig('renderEmpty')('Attachment'));
    }
  };

  var content = /*#__PURE__*/React.createElement(React.Fragment, null, renderEmpty(), attachments);

  var renderGroup = function renderGroup() {
    if (hidden) {
      return null;
    }

    if (viewMode === 'list') {
      return content;
    }

    return /*#__PURE__*/React.createElement(Trigger, {
      prefixCls: prefixCls,
      popupContent: content,
      action: [Action.hover, Action.focus],
      builtinPlacements: BUILT_IN_PLACEMENTS,
      popupPlacement: "bottomLeft",
      forceRender: !hasCount
    }, /*#__PURE__*/React.createElement(Button, _extends({
      icon: "attach_file",
      funcType: FuncType.link,
      color: ButtonColor.primary
    }, buttonProps), text || $l('Attachment', 'view_attachment'), " ", computedCount || undefined));
  };

  return renderGroup();
};

AttachmentGroup.defaultProps = {
  viewMode: 'popup'
};
AttachmentGroup.displayName = 'AttachmentGroup';
export default observer(AttachmentGroup);
//# sourceMappingURL=AttachmentGroup.js.map