choerodon-ui/lib/breadcrumb/BreadcrumbItem.js

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

"use strict";

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

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

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

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 _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

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 _configure = require("../configure");

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

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

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

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, ["prefixCls", "separator", "menuList", "children", "overlay", "listProps", "dropdownProps"]);
  var prefixCls = (0, _configure.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 _react["default"].createElement("a", (0, _extends2["default"])({
        className: "".concat(prefixCls, "-").concat(classNameLink)
      }, restPropsLink), childrenLink);
    }

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


  var renderList = _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, ["listChildren", "listItemName"]);
      var titleItem = listItemName || href;
      titleItem = listChildren ? listChildren({
        href: href,
        listItemName: listItemName
      }) : listItemName;
      return _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);
  }, []);

  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 _react["default"].createElement(_dropdown["default"], (0, _extends2["default"])({}, dropDownProps), _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 || _react["default"].createElement(_icon["default"], {
        type: "arrow_drop_down"
      }), _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);

  if (children) {
    return _react["default"].createElement("span", null, link, separator && separator !== '' && _react["default"].createElement("span", {
      className: "".concat(prefixCls, "-separator")
    }, separator));
  }

  return null;
};

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