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

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

"use strict";

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

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

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

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

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

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

var _mobx = require("mobx");

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

var _trigger = _interopRequireDefault(require("../../../lib/trigger"));

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

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

var _placements = _interopRequireDefault(require("../trigger-field/placements"));

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

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

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

var _isFragment = _interopRequireDefault(require("../_util/isFragment"));

var _iteratorUtils = require("../_util/iteratorUtils");

var _excluded = ["viewMode", "children", "hidden", "text", "count"];

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] : 0;
  return _react.Children.map(children, function (child) {
    if ((0, _isFragment["default"])(child)) {
      return normalizeAttachments(child.props.children, getRef, index);
    }

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

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

      return /*#__PURE__*/(0, _react.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 = (0, _objectWithoutProperties2["default"])(props, _excluded);
  var hasCount = count !== undefined;

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

  var listRef = (0, _react.useRef)(_mobx.observable.map());
  var prefixCls = getProPrefixCls('attachment');
  var computedCount = hasCount ? count : (0, _iteratorUtils.iteratorReduce)(listRef.current.values(), function (sum, attachment) {
    return sum + (attachment.count || 0);
  }, 0);
  var attachments = (0, _react.useMemo)(function () {
    return children ? /*#__PURE__*/_react["default"].createElement("div", {
      className: "".concat(prefixCls, "-group")
    }, normalizeAttachments(children, hasCount ? undefined : (0, _mobx.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["default"].createElement("div", {
        className: "".concat(prefixCls, "-empty")
      }, getConfig('renderEmpty')('Attachment'));
    }
  };

  var content = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, renderEmpty(), attachments);

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

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

    return /*#__PURE__*/_react["default"].createElement(_trigger["default"], {
      prefixCls: prefixCls,
      popupContent: content,
      action: [_enum.Action.hover, _enum.Action.focus],
      builtinPlacements: _placements["default"],
      popupPlacement: "bottomLeft",
      forceRender: !hasCount
    }, /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
      icon: "attach_file",
      funcType: _enum2.FuncType.link,
      color: _enum2.ButtonColor.primary
    }, buttonProps), text || (0, _localeContext.$l)('Attachment', 'view_attachment'), " ", computedCount || undefined));
  };

  return renderGroup();
};

AttachmentGroup.defaultProps = {
  viewMode: 'popup'
};
AttachmentGroup.displayName = 'AttachmentGroup';

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

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