|
| 1 | +import React, { Component } from 'react'; |
| 2 | +import { Breadcrumb, BreadcrumbItem } from 'reactstrap'; |
| 3 | +import PropTypes from 'prop-types'; |
| 4 | +import classNames from 'classnames'; |
| 5 | + |
| 6 | +let routes; |
| 7 | +let router; |
| 8 | + |
| 9 | +const getPaths = (pathname) => { |
| 10 | + const paths = ['/']; |
| 11 | + |
| 12 | + if (pathname === '/') return paths; |
| 13 | + |
| 14 | + pathname.split('/').reduce((prev, curr) => { |
| 15 | + const currPath = `${prev}/${curr}`; |
| 16 | + paths.push(currPath); |
| 17 | + return currPath; |
| 18 | + }); |
| 19 | + return paths; |
| 20 | +}; |
| 21 | + |
| 22 | +const findRouteName2 = (url) => { |
| 23 | + const matchPath = router.matchPath; |
| 24 | + const aroute = routes.find(route => matchPath(url, {path: route.path, exact: route.exact})); |
| 25 | + return (aroute && aroute.name) ? aroute.name : null |
| 26 | +}; |
| 27 | + |
| 28 | +const BreadcrumbsItem2 = ({ match }) => { |
| 29 | + const routeName = findRouteName2(match.url); |
| 30 | + const Link = router.Link; |
| 31 | + if (routeName) { |
| 32 | + return ( |
| 33 | + match.isExact ? |
| 34 | + <BreadcrumbItem active>{routeName}</BreadcrumbItem> |
| 35 | + : |
| 36 | + <BreadcrumbItem> |
| 37 | + <Link to={match.url || ''}> |
| 38 | + {routeName} |
| 39 | + </Link> |
| 40 | + </BreadcrumbItem> |
| 41 | + ); |
| 42 | + } |
| 43 | + return null; |
| 44 | +}; |
| 45 | + |
| 46 | +BreadcrumbsItem2.propTypes = { |
| 47 | + match: PropTypes.shape({ |
| 48 | + url: PropTypes.string |
| 49 | + }) |
| 50 | +}; |
| 51 | + |
| 52 | +const Breadcrumbs2 = (args) => { |
| 53 | + const Route = router.Route; |
| 54 | + const paths = getPaths(args.location.pathname); |
| 55 | + const items = paths.map((path, i) => <Route key={i.toString()} path={path} component={BreadcrumbsItem2} />); |
| 56 | + return ( |
| 57 | + <Breadcrumb> |
| 58 | + {items} |
| 59 | + </Breadcrumb> |
| 60 | + ); |
| 61 | +}; |
| 62 | + |
| 63 | +const propTypes = { |
| 64 | + children: PropTypes.node, |
| 65 | + className: PropTypes.string, |
| 66 | + appRoutes: PropTypes.any, |
| 67 | + tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), |
| 68 | + router: PropTypes.any |
| 69 | +}; |
| 70 | + |
| 71 | +const defaultProps = { |
| 72 | + tag: 'div', |
| 73 | + className: '', |
| 74 | + appRoutes: [{ path: '/', exact: true, name: 'Home', component: null }] |
| 75 | +}; |
| 76 | + |
| 77 | +class AppBreadcrumb2 extends Component { |
| 78 | + constructor(props) { |
| 79 | + super(props); |
| 80 | + |
| 81 | + this.state = { routes: props.appRoutes }; |
| 82 | + routes = this.state.routes; |
| 83 | + router = props.router; |
| 84 | + } |
| 85 | + |
| 86 | + render() { |
| 87 | + const { className, tag: Tag, ...attributes } = this.props; |
| 88 | + |
| 89 | + delete attributes.children |
| 90 | + delete attributes.appRoutes |
| 91 | + delete attributes.router |
| 92 | + |
| 93 | + const classes = classNames(className); |
| 94 | + |
| 95 | + const Route = router.Route; |
| 96 | + |
| 97 | + return ( |
| 98 | + <Tag className={classes}> |
| 99 | + <Route path="/:path" component={Breadcrumbs2} {...attributes} /> |
| 100 | + </Tag> |
| 101 | + ); |
| 102 | + } |
| 103 | +} |
| 104 | + |
| 105 | +AppBreadcrumb2.propTypes = propTypes; |
| 106 | +AppBreadcrumb2.defaultProps = defaultProps; |
| 107 | + |
| 108 | +export default AppBreadcrumb2; |
0 commit comments