@geneui/components/Breadcrumb/index.js

The Gene UI components library designed for BI tools

import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import React__default, { useState, useCallback, Fragment } from 'react';
import PropTypes from 'prop-types';
import { c as classnames } from '../index-031ff73c.js';
import { n as noop } from '../index-a0e4e333.js';
import Button from '../Button/index.js';
import Popover from '../Popover/index.js';
import Icon from '../Icon/index.js';
import Menu from '../Menu/index.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import '../dateValidation-67caec66.js';
import '../_commonjsHelpers-24198af3.js';
import 'react-dom';
import '../tslib.es6-f211516f.js';
import '../index-122432cd.js';
import '../hooks/useDeviceType.js';
import '../configs-00612ce0.js';
import '../hooks/useWindowSize.js';
import '../hooks/useDebounce.js';
import '../hooks/useUpdatableRef.js';
import '../hooks/useForceUpdate.js';
import '../GeneUIProvider/index.js';
import '../Portal/index.js';
import '../Scrollbar/index.js';
import '../guid-8ddf77b3.js';
import '../Option/index.js';
import '../useEllipsisDetection-4d997d5d.js';
import '../index-6d7e99cd.js';

function BreadcrumbItem(_ref) {
  let {
    data,
    active,
    onClick
  } = _ref;
  return /*#__PURE__*/React__default.createElement("button", {
    onClick: onClick,
    className: classnames('breadcrumbs-link', {
      active
    })
  }, data.title);
}

var css_248z = "[data-gene-ui-version=\"2.16.5\"] .bread-crumbs-holder{align-items:center;display:flex;font-weight:600;justify-content:flex-start;min-height:3.6rem;width:100%}[data-gene-ui-version=\"2.16.5\"] .bread-crumbs-holder>*+:not(button){margin:0 0 0 1rem}html[dir=rtl] .bread-crumbs-holder>*+:not(button){margin:0 1rem 0 0}[data-gene-ui-version=\"2.16.5\"] .bread-crumbs-holder>button{margin:0 .4rem}[data-gene-ui-version=\"2.16.5\"] .bread-crumbs-holder>button+.icon,html[dir=rtl] .bread-crumbs-holder>button+.icon{margin:0}[data-gene-ui-version=\"2.16.5\"] .breadcrumbs-link{color:inherit;cursor:pointer}@media (hover:hover){[data-gene-ui-version=\"2.16.5\"] .breadcrumbs-link:hover{color:var(--hero)}}[data-gene-ui-version=\"2.16.5\"] .breadcrumbs-link.active{color:var(--hero)}";
styleInject(css_248z);

function Breadcrumb(_ref) {
  let {
    data,
    onClick,
    collapsed,
    className,
    separator,
    ...restProps
  } = _ref;
  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
  const [firstItem, ...others] = data;
  const handlePopoverItemClick = useCallback((_, item) => {
    onClick(item);
    setIsPopoverOpen(false);
  }, [onClick]);
  const handlePopoverToggle = useCallback(() => {
    setIsPopoverOpen(prev => !prev);
  }, []);
  return /*#__PURE__*/React__default.createElement("div", _extends({
    className: classnames('bread-crumbs-holder', className)
  }, restProps), collapsed && data.length > 4 ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(BreadcrumbItem, {
    onClick: () => onClick(firstItem),
    data: firstItem
  }), separator, /*#__PURE__*/React__default.createElement(Popover, {
    isOpen: isPopoverOpen,
    align: "start",
    extendTargetWidth: false,
    Content: /*#__PURE__*/React__default.createElement(Menu, {
      onSelect: handlePopoverItemClick,
      data: others.slice(0, -2)
    })
  }, /*#__PURE__*/React__default.createElement(Button, {
    onClick: handlePopoverToggle,
    icon: "bc-icon-more-horizontal",
    appearance: "minimal",
    color: "default"
  })), separator, others.slice(-2).map((item, i) => /*#__PURE__*/React__default.createElement(Fragment, {
    key: item.slug
  }, /*#__PURE__*/React__default.createElement(BreadcrumbItem, {
    onClick: () => onClick(item),
    active: i === 1,
    key: item.slug,
    data: item
  }), i !== 1 && separator))) : data.map((item, i) => /*#__PURE__*/React__default.createElement(Fragment, {
    key: item.slug
  }, /*#__PURE__*/React__default.createElement(BreadcrumbItem, {
    onClick: () => onClick(item),
    active: data.length - 1 === i,
    data: item
  }), data.length - 1 !== i && separator)));
}
Breadcrumb.propTypes = {
  /**
   * Data items to display
   */
  data: PropTypes.arrayOf(PropTypes.shape({
    title: PropTypes.node.isRequired
  })).isRequired,
  /**
   * Additional className
   */
  className: PropTypes.string,
  /**
   * Breadcrumbs will render collapsed view when "data" length is greater than 4, when set to "true"
   */
  collapsed: PropTypes.bool,
  /**
   * Fires an event on breadcrumb item click((item: data[item] => void))
   */
  onClick: PropTypes.func,
  /**
   * Use this prop to define the middle component between breadcrumb items.
   */
  separator: PropTypes.node
};
Breadcrumb.defaultProps = {
  collapsed: false,
  onClick: noop,
  separator: /*#__PURE__*/React__default.createElement(Icon, {
    type: "bc-icon-arrow-right"
  })
};

export { Breadcrumb as default };