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 _regeneratorRuntime from "@babel/runtime/regenerator";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import React, { useState, useCallback } from 'react';
import classNames from 'classnames';
import DropDown from '../dropdown';
import { Placements } from '../dropdown/enum';
import { getPrefixCls } from '../configure';
import Icon from '../icon';
import List from '../list';
import buildPlacements from './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 = _objectWithoutProperties(_ref, ["prefixCls", "separator", "menuList", "children", "overlay", "listProps", "dropdownProps"]);

  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 React.createElement("a", _extends({
        className: "".concat(prefixCls, "-").concat(classNameLink)
      }, restPropsLink), childrenLink);
    }

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


  var renderList = 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, ["listChildren", "listItemName"]);

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

  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 React.createElement(DropDown, _extends({}, dropDownProps), 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 || React.createElement(Icon, {
        type: "arrow_drop_down"
      }), 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);

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

  return null;
};

BreadcrumbItem.__C7N_BREADCRUMB_ITEM = true;
export default BreadcrumbItem;
//# sourceMappingURL=BreadcrumbItem.js.map