@ucloud-fe/react-components/lib/components/Tag/Group.js

UCloud react components

"use strict";

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

var _typeof = require("@babel/runtime/helpers/typeof");

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

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

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

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

var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));

var _propTypes = _interopRequireDefault(require("prop-types"));

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

var _useOverflow3 = _interopRequireDefault(require("../../hooks/useOverflow"));

var _usePopoverConfig = _interopRequireDefault(require("../../hooks/usePopoverConfig"));

var _Popover = _interopRequireDefault(require("../../components/Popover"));

var _Menu = _interopRequireDefault(require("../../components/Menu"));

var _Tag = _interopRequireDefault(require("../../components/Tag"));

var _style = require("./style");

var _excluded = ["children", "exposeCount", "lens", "popoverProps"],
    _excluded2 = ["children", "exposeCount", "lens"],
    _excluded3 = ["autoAdjustment", "compact", "children"];

var _this = void 0;

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var _uid = 0;
var ID_KEY = 'data-urc-tag_list-id';

var TagMenu = function TagMenu(_ref) {
  var _this2 = this;

  (0, _newArrowCheck2.default)(this, _this);
  var list = _ref.list,
      popoverProps = _ref.popoverProps;
  var popoverConfigProps = (0, _usePopoverConfig.default)();
  if (!list.length) return null;

  var renderList = function renderList(list) {
    var _this3 = this;

    (0, _newArrowCheck2.default)(this, _this2);
    return list.map(function (info, i) {
      (0, _newArrowCheck2.default)(this, _this3);
      return /*#__PURE__*/_react.default.createElement(_style.TagPopoverWrap, {
        key: i
      }, info);
    }.bind(this));
  }.bind(this);

  return /*#__PURE__*/_react.default.createElement(_Popover.default, (0, _extends2.default)({
    trigger: ['hover'],
    popup: /*#__PURE__*/_react.default.createElement(_style.TagMenuWapper, null, /*#__PURE__*/_react.default.createElement(_Menu.default, {
      selectable: false,
      customStyle: {
        maxHeight: '380px'
      }
    }, renderList(list)))
  }, popoverConfigProps, popoverProps), /*#__PURE__*/_react.default.createElement(_style.TagMoreWapper, null, /*#__PURE__*/_react.default.createElement(_Tag.default, null, "+", list.length)));
}.bind(void 0);

var PureTagList = function PureTagList(props) {
  (0, _newArrowCheck2.default)(this, _this);
  var children = props.children,
      exposeCount = props.exposeCount,
      lens = props.lens,
      popoverProps = props.popoverProps,
      rest = (0, _objectWithoutProperties2.default)(props, _excluded);

  var childArray = _react.default.Children.toArray(children);

  var _exposeCount = exposeCount || 0;

  var tagList, menuList;

  if (lens > _exposeCount + 1) {
    tagList = childArray.slice(0, exposeCount);
    menuList = childArray.slice(exposeCount);
  } else {
    tagList = childArray;
    menuList = [];
  }

  return exposeCount === void 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tagList) : /*#__PURE__*/_react.default.createElement(_style.SWrap, (0, _extends2.default)({}, rest, {
    exposeCount: exposeCount,
    sharedProps: {
      size: 'sm'
    }
  }), tagList, menuList.length ? /*#__PURE__*/_react.default.createElement(TagMenu, {
    list: menuList,
    popoverProps: popoverProps
  }) : null);
}.bind(void 0);

PureTagList.propTypes = {
  children: _propTypes.default.node,
  compact: _propTypes.default.bool,
  exposeCount: _propTypes.default.number,
  autoAdjustment: _propTypes.default.bool,
  popoverProps: _propTypes.default.any
};

var AutoAdjustmentTagList = function AutoAdjustmentTagList(props) {
  var _this4 = this;

  (0, _newArrowCheck2.default)(this, _this);

  var children = props.children,
      _props$exposeCount = props.exposeCount,
      _exposeCount = _props$exposeCount === void 0 ? 3 : _props$exposeCount,
      lens = props.lens,
      rest = (0, _objectWithoutProperties2.default)(props, _excluded2);

  var _useState = (0, _react.useState)(function () {
    (0, _newArrowCheck2.default)(this, _this4);
    return _uid++;
  }.bind(this)),
      _useState2 = (0, _slicedToArray2.default)(_useState, 1),
      uid = _useState2[0];

  var containerRef = (0, _react.useRef)(null);
  (0, _react.useLayoutEffect)(function () {
    (0, _newArrowCheck2.default)(this, _this4);
    containerRef.current = document.querySelector("[".concat(ID_KEY, "=\"").concat(uid, "\"]"));
  }.bind(this), [uid]);
  var maxCount = (0, _react.useMemo)(function () {
    (0, _newArrowCheck2.default)(this, _this4);
    var maxCount = Math.min(lens, Math.max(_exposeCount, 0));
    return maxCount;
  }.bind(this), [_exposeCount, lens]);

  var _useOverflow = (0, _useOverflow3.default)({
    containerRef: containerRef,
    defaultCount: maxCount,
    maxCount: maxCount
  }),
      _useOverflow2 = (0, _slicedToArray2.default)(_useOverflow, 1),
      exposeCount = _useOverflow2[0];

  return /*#__PURE__*/_react.default.createElement(PureTagList, (0, _extends2.default)({}, rest, {
    lens: lens,
    children: children,
    exposeCount: exposeCount
  }, (0, _defineProperty2.default)({}, ID_KEY, uid)));
}.bind(void 0);

AutoAdjustmentTagList.propTypes = {
  children: _propTypes.default.node,
  compact: _propTypes.default.bool,
  exposeCount: _propTypes.default.number,
  autoAdjustment: _propTypes.default.bool,
  popoverProps: _propTypes.default.any
};

var Group = function Group(props) {
  (0, _newArrowCheck2.default)(this, _this);
  var autoAdjustment = props.autoAdjustment,
      compact = props.compact,
      children = props.children,
      rest = (0, _objectWithoutProperties2.default)(props, _excluded3);

  if (!children) {
    return null;
  }

  var lens = Array.isArray(children) ? children.length : 1;
  return !compact ? /*#__PURE__*/_react.default.createElement(_style.TagGroupWrapper, (0, _extends2.default)({
    compact: false
  }, rest), autoAdjustment ? /*#__PURE__*/_react.default.createElement(AutoAdjustmentTagList, (0, _extends2.default)({
    lens: lens,
    children: children
  }, rest)) : /*#__PURE__*/_react.default.createElement(PureTagList, (0, _extends2.default)({
    lens: lens,
    children: children
  }, rest))) : /*#__PURE__*/_react.default.createElement(_style.TagGroupWrapper, (0, _extends2.default)({
    compact: compact,
    children: children
  }, rest));
}.bind(void 0);

Group.propTypes = {
  children: _propTypes.default.node,
  compact: _propTypes.default.bool,
  exposeCount: _propTypes.default.number,
  autoAdjustment: _propTypes.default.bool,
  popoverProps: _propTypes.default.any
};

var _default = /*#__PURE__*/_react.default.memo(Group);

exports.default = _default;