@jfront/ui-breadcrumbs/dist/esm/Breadcrumbs.js

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }

import React, { useState, useRef } from "react";
import { forwardRef } from "@jfront/ui-utils";
import { Popup } from "@jfront/ui-popup";
import styled from "styled-components";
var Separator = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  box-sizing: border-box;\n  font-weight: bold;\n  color: currentColor;\n  margin: 0 5px;\n"])));
var ExpanderContent = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  &:hover {\n    opacity: 0.5;\n  }\n"])));
var Dot = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  height: 4px;\n  width: 4px;\n  background-color: currentColor;\n  border-radius: 50%;\n  margin: 0 1px;\n  display: inline-block;\n"])));
var Nav = styled.nav(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  font-family: tahoma, arial, helvetica, sans-serif;\n  box-sizing: border-box;\n  font-size: 11px;\n  padding: 0;\n  margin: 0;\n"])));
var Expander = /*#__PURE__*/React.forwardRef((props, ref) => {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ExpanderContent, {
    role: "button",
    onClick: props.onClick,
    ref: ref
  }, /*#__PURE__*/React.createElement(Dot, null), /*#__PURE__*/React.createElement(Dot, null), /*#__PURE__*/React.createElement(Dot, null)), props.children);
});
export var Breadcrumbs = forwardRef((_ref, ref) => {
  var {
    maxItems = 3,
    collapseMethod = "hidden",
    itemsAfterCollapse = 1,
    itemsBeforeCollapse = 1,
    expandText = "Развернуть",
    separator = "/",
    children
  } = _ref,
      rest = _objectWithoutPropertiesLoose(_ref, ["maxItems", "collapseMethod", "itemsAfterCollapse", "itemsBeforeCollapse", "expandText", "separator", "children"]);

  var expanderRef = useRef(null);
  var [expanded, setExpanded] = useState(false);

  var addSeparators = children => {
    for (var i = 1; i < children.length; i++) {
      if ((i + 1) % 2 == 0) {
        var element = void 0;

        if (typeof separator === "string") {
          element = /*#__PURE__*/React.createElement(Separator, {
            key: i
          }, separator);
        } else if (typeof separator === "function") {
          element = separator();
        } else {
          element = separator;
        }

        children.splice(i, 0, element);
      }
    }

    return children;
  };

  var render = () => {
    var childrenArray = React.Children.toArray(children);

    if (expanded && collapseMethod === "hidden" || childrenArray.length <= maxItems) {
      return addSeparators(childrenArray);
    } else if (collapseMethod === "dropdown" && childrenArray.length > maxItems) {
      return addSeparators([childrenArray.splice(0, itemsBeforeCollapse), /*#__PURE__*/React.createElement(Expander, {
        title: expandText,
        onClick: () => setExpanded(true),
        key: "expander",
        ref: expanderRef
      }, /*#__PURE__*/React.createElement(Popup, {
        style: {
          padding: "5px",
          borderRadius: "5px"
        },
        targetElementRef: expanderRef,
        targetRelativePosition: {
          horizontal: "left",
          vertical: "bottom"
        },
        visible: expanded,
        onClose: () => setExpanded(false)
      }, renderHidden())), childrenArray.splice(childrenArray.length - itemsAfterCollapse)]);
    } else {
      return addSeparators([childrenArray.splice(0, itemsBeforeCollapse), /*#__PURE__*/React.createElement(Expander, {
        title: expandText,
        onClick: () => setExpanded(true),
        key: "expander"
      }), childrenArray.splice(childrenArray.length - itemsAfterCollapse)]);
    }
  };

  var renderHidden = () => {
    var childrenArray = React.Children.toArray(children);
    return childrenArray.splice(itemsBeforeCollapse, childrenArray.length - itemsAfterCollapse - 1).map(child => {
      if (! /*#__PURE__*/React.isValidElement(child)) {
        throw new Error("Invalid React Element");
      }

      var props = child.props;
      return /*#__PURE__*/React.cloneElement(child, _extends({}, props, {
        style: _extends({}, props == null ? void 0 : props.style, {
          display: "block"
        })
      }));
    });
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Nav, _extends({}, rest, {
    ref: ref
  }), render()));
});
//# sourceMappingURL=Breadcrumbs.js.map