choerodon-ui/es/breadcrumb/BreadcrumbItem.js

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

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _extends from "@babel/runtime/helpers/extends";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["prefixCls", "separator", "menuList", "children", "overlay", "listProps", "dropdownProps"],
    _excluded2 = ["listChildren", "listItemName"];
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { memo, useCallback, useContext, useState } from 'react';
import classNames from 'classnames';
import DropDown from '../dropdown';
import { Placements } from '../dropdown/enum';
import Icon from '../icon';
import List from '../list';
import buildPlacements from './placements';
import ConfigContext from '../config-provider/ConfigContext';

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 = _objectWithoutProperties(_ref, _excluded);

  var _useContext = useContext(ConfigContext),
      getPrefixCls = _useContext.getPrefixCls;

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

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      active = _useState2[0],
      setActive = _useState2[1];

  var isMenuListOn = menuList ? menuList.length > 0 : false;
  var onVisibleChange = useCallback( /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(visible) {
      return _regeneratorRuntime.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.createElement("a", _extends({
        className: "".concat(prefixCls, "-").concat(classNameLink)
      }, restPropsLink), childrenLink);
    }

    return /*#__PURE__*/React.createElement("span", _extends({
      className: "".concat(prefixCls, "-").concat(classNameLink)
    }, restPropsLink), childrenLink);
  };
  /**
   * 渲染List列表
   */


  var renderList = /*#__PURE__*/React.createElement(List, _extends({
    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 = _objectWithoutProperties(item, _excluded2);

      var titleItem = listItemName || href;
      titleItem = listChildren ? listChildren({
        href: href,
        listItemName: listItemName
      }) : listItemName;
      return /*#__PURE__*/React.createElement(List.Item, null, renderLink(titleItem, listRestProps, 'overlay-menu-list-item', 'href'));
    }
  }));
  var overlayMenu = overlay || isMenuListOn && renderList;
  var onOverlayClick = useCallback(function () {
    setTimeout(function () {
      setActive(false);
    }, 300);
  }, []);

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

        var buildASPlacements = buildPlacements;

        var dropDownProps = _objectSpread({
          overlayClassName: isMenuListOn ? "".concat(prefixCls, "-overlay-popup") : undefined,
          onOverlayClick: onOverlayClick,
          overlay: overlayMenu,
          placement: isMenuListOn ? Placements.bottomLeft : Placements.bottomCenter,
          onVisibleChange: onVisibleChange,
          overlayPlacements: buildASPlacements
        }, dropdownProps);

        return /*#__PURE__*/React.createElement(DropDown, _extends({}, dropDownProps), /*#__PURE__*/React.createElement("span", {
          className: classNames("".concat(prefixCls, "-overlay-link"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-overlay-border"), active), _defineProperty(_classNames, "".concat(prefixCls, "-overlay-menu"), isMenuListOn), _classNames))
        }, linkItem, isMenuListOn || /*#__PURE__*/React.createElement(Icon, {
          type: "arrow_drop_down"
        }), /*#__PURE__*/React.createElement("i", {
          className: classNames("".concat(prefixCls, "-overlay-cover"), _defineProperty({}, "".concat(prefixCls, "-overlay-cover-active"), active))
        })));
      }

      return linkItem;
    };

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

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

  return null;
};

BreadcrumbItem.displayName = 'BreadcrumbItem';
BreadcrumbItem.__C7N_BREADCRUMB_ITEM = true;
export default /*#__PURE__*/memo(BreadcrumbItem);
//# sourceMappingURL=BreadcrumbItem.js.map