choerodon-ui/lib/breadcrumb/BreadcrumbItem.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 _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

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

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

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

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

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

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

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

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

var _dropdown = _interopRequireDefault(require("../dropdown"));

var _enum = require("../dropdown/enum");

var _icon = _interopRequireDefault(require("../icon"));

var _list = _interopRequireDefault(require("../list"));

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

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

var _excluded = ["prefixCls", "separator", "menuList", "children", "overlay", "listProps", "dropdownProps"],
    _excluded2 = ["listChildren", "listItemName"];

var BreadcrumbItem = function BreadcrumbItem(_ref) {
  var customizePrefixCls = _ref.prefixCls,
      _ref$separator = _ref.separator,
      separator = _ref$separator === void 0 ? '/' : _ref$separator,
      _ref$menuList = _ref.menuList,
      menuList = _ref$menuList === void 0 ? [] : _ref$menuList,
      children = _ref.children,
      overlay = _ref.overlay,
      listProps = _ref.listProps,
      dropdownProps = _ref.dropdownProps,
      restProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);

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

  var prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);

  var _useState = (0, _react.useState)(false),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      active = _useState2[0],
      setActive = _useState2[1];

  var isMenuListOn = menuList ? menuList.length > 0 : false;
  var onVisibleChange = (0, _react.useCallback)( /*#__PURE__*/function () {
    var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(visible) {
      return _regenerator["default"].wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              if (isMenuListOn) {
                setActive(visible);
              }

            case 1:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    }));

    return function (_x) {
      return _ref2.apply(this, arguments);
    };
  }(), [isMenuListOn]);
  /**
   * 渲染Link
   * @param childrenLink
   * @param restPropsLink
   */

  var renderLink = function renderLink(childrenLink, restPropsLink, classNameLink, key) {
    if (key in restPropsLink) {
      return /*#__PURE__*/_react["default"].createElement("a", (0, _extends2["default"])({
        className: "".concat(prefixCls, "-").concat(classNameLink)
      }, restPropsLink), childrenLink);
    }

    return /*#__PURE__*/_react["default"].createElement("span", (0, _extends2["default"])({
      className: "".concat(prefixCls, "-").concat(classNameLink)
    }, restPropsLink), childrenLink);
  };
  /**
   * 渲染List列表
   */


  var renderList = /*#__PURE__*/_react["default"].createElement(_list["default"], (0, _extends2["default"])({
    className: "".concat(prefixCls, "-overlay-menu-list"),
    grid: {
      gutter: 0,
      column: 3
    }
  }, listProps, {
    dataSource: menuList,
    renderItem: function renderItem(item) {
      var href = item.href;
      var listChildren = item.listChildren,
          listItemName = item.listItemName,
          listRestProps = (0, _objectWithoutProperties2["default"])(item, _excluded2);
      var titleItem = listItemName || href;
      titleItem = listChildren ? listChildren({
        href: href,
        listItemName: listItemName
      }) : listItemName;
      return /*#__PURE__*/_react["default"].createElement(_list["default"].Item, null, renderLink(titleItem, listRestProps, 'overlay-menu-list-item', 'href'));
    }
  }));

  var overlayMenu = overlay || isMenuListOn && renderList;
  var onOverlayClick = (0, _react.useCallback)(function () {
    setTimeout(function () {
      setActive(false);
    }, 300);
  }, []);

  if (children) {
    var renderBreadcrumbMenu = function renderBreadcrumbMenu(linkItem) {
      if (overlayMenu) {
        var _classNames;

        var buildASPlacements = _placements["default"];
        var dropDownProps = (0, _objectSpread2["default"])({
          overlayClassName: isMenuListOn ? "".concat(prefixCls, "-overlay-popup") : undefined,
          onOverlayClick: onOverlayClick,
          overlay: overlayMenu,
          placement: isMenuListOn ? _enum.Placements.bottomLeft : _enum.Placements.bottomCenter,
          onVisibleChange: onVisibleChange,
          overlayPlacements: buildASPlacements
        }, dropdownProps);
        return /*#__PURE__*/_react["default"].createElement(_dropdown["default"], (0, _extends2["default"])({}, dropDownProps), /*#__PURE__*/_react["default"].createElement("span", {
          className: (0, _classnames["default"])("".concat(prefixCls, "-overlay-link"), (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-overlay-border"), active), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-overlay-menu"), isMenuListOn), _classNames))
        }, linkItem, isMenuListOn || /*#__PURE__*/_react["default"].createElement(_icon["default"], {
          type: "arrow_drop_down"
        }), /*#__PURE__*/_react["default"].createElement("i", {
          className: (0, _classnames["default"])("".concat(prefixCls, "-overlay-cover"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-overlay-cover-active"), active))
        })));
      }

      return linkItem;
    };

    var link = renderLink(children, restProps, "link", 'href'); // wrap to dropDown

    link = renderBreadcrumbMenu(link);
    return /*#__PURE__*/_react["default"].createElement("span", null, link, separator && separator !== '' && /*#__PURE__*/_react["default"].createElement("span", {
      className: "".concat(prefixCls, "-separator")
    }, separator));
  }

  return null;
};

BreadcrumbItem.displayName = 'BreadcrumbItem';
BreadcrumbItem.__C7N_BREADCRUMB_ITEM = true;

var _default = /*#__PURE__*/(0, _react.memo)(BreadcrumbItem);

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