@6thquake/react-material/es/Breadcrumb/Breadcrumb.js

React components that implement Google's Material Design.

import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import PropTypes from 'prop-types';
import withStyles from '../styles/withStyles';
import BreadcrumbItem from '../BreadcrumbItem';
import {
/* darken, */
fade } from '../styles/colorManipulator';
import classNames from 'classnames';

const styles = theme => ({
  root: _extends({
    '@global a': _extends({
      textDecoration: 'none',
      '&:hover': {
        color: theme.palette.primary.main
      }
    }, theme.typography.subheading),
    '@global span': {
      color: fade(theme.typography.subheading.color, 0.6)
    }
  }, theme.typography.subheading),
  black: {
    '@global a': {
      '&:hover': {
        color: theme.palette.primary.main
      },
      color: theme.palette.common.black
    },
    '@global span': {
      color: fade(theme.palette.common.black, 0.6)
    },
    color: theme.palette.common.black
  },
  white: {
    '@global a': {
      '&:hover': {
        color: theme.palette.common.white
      },
      color: fade(theme.palette.common.white, 0.8)
    },
    '@global span': {
      color: fade(theme.palette.common.white, 0.6)
    },
    color: fade(theme.palette.common.white, 0.8)
  },
  separator: {
    padding: '0 0.5em',
    fontStyle: 'normal'
  }
});

class Breadcrumb extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: React.Children.toArray(this.props.children).filter(i => i)
    };
  }

  render() {
    const {
      routes,
      itemRender,
      separator,
      params,
      color,
      classes
    } = this.props;
    const {
      items
    } = this.state;
    const className = classNames(classes.root, {
      [classes.white]: color === 'white',
      [classes.black]: color === 'black'
    });
    const sep = React.createElement("i", {
      className: classes.separator
    }, separator);
    const extraBreadcrumbItems = routes && routes.length > 0 ? routes.map((route, index) => {
      const {
        path,
        icon,
        name
      } = route;
      const last = routes.length === index + 1;
      const paths = [route.path];
      return React.createElement(React.Fragment, null, React.createElement(BreadcrumbItem, {
        key: path,
        path: path,
        icon: icon,
        name: name,
        notLink: last,
        classes: classes
      }, itemRender ? itemRender(route, params, routes, paths) : ''), !last ? sep : '');
    }) : items.map((child, index) => {
      const last = items.length === index + 1;
      return React.createElement(React.Fragment, null, child, !last ? sep : '');
    });
    return React.createElement("div", {
      className: className
    }, extraBreadcrumbItems);
  }

}

process.env.NODE_ENV !== "production" ? Breadcrumb.propTypes = {
  /**
   * Custom color of each items
   */
  color: PropTypes.oneOf(['default', 'black', 'white']),

  /**
   * Custom item renderer, itemRender(route, params, routes, paths) => ReactNode
   */
  itemRender: PropTypes.func,

  /**
   * Routing parameters
   */
  params: PropTypes.object,

  /**
   * The routing stack information of router
   */
  routes: PropTypes.array,

  /**
   * Custom separator
   */
  separator: PropTypes.string
} : void 0;
Breadcrumb.defaultProps = {
  separator: '/',
  color: 'default'
};
export default withStyles(styles, {
  name: 'RMBreadcrumb',
  withTheme: true
})(Breadcrumb);