@geezee/react-ui/esm/breadcrumbs/breadcrumbs.js

Modern and minimalist React UI library.

import _JSXStyle from "styled-jsx/style";
import React, { useMemo } from 'react';
import useTheme from '../styles/use-theme';
import BreadcrumbsSeparator from './breadcrumbs-separator';
import { addColorAlpha } from '../utils/color';
var defaultProps = {
  size: 'medium',
  separator: '/',
  className: ''
};

var getSize = function getSize(size) {
  var sizes = {
    mini: '.75rem',
    small: '.875rem',
    medium: '1rem',
    large: '1.125rem'
  };
  return sizes[size];
};

var Breadcrumbs = function Breadcrumbs(_ref) {
  var size = _ref.size,
      separator = _ref.separator,
      children = _ref.children,
      className = _ref.className;
  var theme = useTheme();
  var fontSize = useMemo(function () {
    return getSize(size);
  }, [size]);
  var hoverColor = useMemo(function () {
    return addColorAlpha(theme.palette.link, 0.85);
  }, [theme.palette.link]);
  var childrenArray = React.Children.toArray(children);
  var withSeparatorChildren = childrenArray.map(function (item, index) {
    if (!React.isValidElement(item)) return item;
    var last = childrenArray[index - 1];
    var lastIsSeparator = React.isValidElement(last) && last.type === BreadcrumbsSeparator;
    var currentIsSeparator = item.type === BreadcrumbsSeparator;

    if (!lastIsSeparator && !currentIsSeparator && index > 0) {
      return /*#__PURE__*/React.createElement(React.Fragment, {
        key: index
      }, /*#__PURE__*/React.createElement(BreadcrumbsSeparator, null, separator), item);
    }

    return item;
  });
  return /*#__PURE__*/React.createElement("nav", {
    className: _JSXStyle.dynamic([["3696119257", [theme.palette.accents_4, fontSize, hoverColor, theme.palette.accents_6]]]) + " " + (className || "")
  }, withSeparatorChildren, /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "3696119257",
    dynamic: [theme.palette.accents_4, fontSize, hoverColor, theme.palette.accents_6]
  }, "nav.__jsx-style-dynamic-selector{margin:0;padding:0;line-height:inherit;color:".concat(theme.palette.accents_4, ";font-size:").concat(fontSize, ";box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}nav.__jsx-style-dynamic-selector .link:hover{color:").concat(hoverColor, ";}nav.__jsx-style-dynamic-selector>span:last-of-type{color:").concat(theme.palette.accents_6, ";}nav.__jsx-style-dynamic-selector>.separator:last-child{display:none;}nav.__jsx-style-dynamic-selector svg{width:1em;height:1em;margin:0 4px;}nav.__jsx-style-dynamic-selector .breadcrums-item{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}")));
};

Breadcrumbs.defaultProps = defaultProps;
export default React.memo(Breadcrumbs);