fix: Breadcrumb components rewrite

Author: woothu

src/CBreadcrumb.js

@@ -1,138 +1,33 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import {Route, Link, matchPath} from 'react-router-dom';
-import CBreadcrumbCustom from './CBreadcrumbCustom';
-import CBreadcrumbItem from './CBreadcrumbItem';
-
-let routes;
-
-const getPaths = pathname=>{
-  const paths = ['/'];
-  if (pathname === '/') return paths;
-  pathname.split('/').reduce((prev, curr) => {
-    const currPath = `${prev}/${curr}`;
-    paths.push(currPath);
-    return currPath;
-  });
-  return paths;
-};
-
-const findRouteName = url=>{
-  const aroute = routes.find(route => matchPath(url, {path: route.path, exact: route.exact}));
-  return (aroute && aroute.name) ? aroute.name : null
-};
-
-//component - CoreUI / CBreadcrumbRouteItem
-
-const CBreadcrumbRouteItem = ({ match }) => {
-  const routeName = findRouteName(match.url);
-  if (routeName) {
-    return (
-      match.isExact ?
-        <CBreadcrumbItem active>{routeName}</CBreadcrumbItem>
-       :
-        <CBreadcrumbItem>
-          <Link to={match.url || ''}>
-            {routeName}
-          </Link>
-        </CBreadcrumbItem>
-    );
-  }
-  return null;
-};
-
-CBreadcrumbRouteItem.propTypes = {
-  match: PropTypes.shape({
-    url: PropTypes.string,
-    isExact: PropTypes.bool
-  })
-};
-
-//component - CoreUI / CBreadcrumbRouter
-
-let postItems;
-
-const CBreadcrumbRouter = args=>{
-
-  const paths = getPaths(args.location.pathname);
-  const items = paths.map(
-    (path, i) => <Route key={i.toString()} path={path} component={CBreadcrumbRouteItem} />
-  );
-  if (postItems)
-    items.push(postItems);
-
-  // render
-
-  return items;
-  /*
-  return (
-    <CBreadcrumbCustom>
-      {items}
-    </CBreadcrumbCustom>
-  );
-  */
-
-};
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { mapToCssModules } from './Shared/helper.js'
 
 //component - CoreUI / CBreadcrumb
 
-const CBreadcrumb = props=>{
+const CBreadcrumb = props => {
 
   const {
-    children,
     className,
-    custom,
+    innerRef,
+    cssModule,
     //
-    routesProps,
     ...attributes
-  } = props;
+  } = props
 
-  if (children)
-    postItems = children;
-  else {
-    postItems = null;
-  }
-
-  routes = props.appRoutes;
+  const classes = mapToCssModules(classNames(className, 'breadcrumb'))
 
   //render
-
-  delete attributes.appRoutes;
-  const classes = classNames(className);
-
-  if (!custom){
-    return (
-      <CBreadcrumbCustom {...attributes} listClassName={classes}>
-        <Route path="/:path" component={CBreadcrumbRouter} {...routesProps} />
-      </CBreadcrumbCustom>
-    );
-  }
-
   return (
-    <CBreadcrumbCustom {...attributes} listClassName={classes}>
-      {children}
-    </CBreadcrumbCustom>
-  );
-
+    <ol {...attributes} className={classes} ref={innerRef}/>
+  )
 }
 
 CBreadcrumb.propTypes = {
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   children: PropTypes.node,
   className: PropTypes.string,
-  custom: PropTypes.bool,
   //
   innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),
-  appRoutes: PropTypes.any,
-  match: PropTypes.object,
-  routesProps: PropTypes.object
-};
-
-CBreadcrumb.defaultProps = {
-  tag: 'div',
-  className: '',
-  appRoutes: [{ path: '/', exact: true, name: 'Home', component: null }]
-};
+}
 
-export default CBreadcrumb;
+export default CBreadcrumb

src/CBreadcrumbCustom.js

@@ -1,47 +1,47 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import {tagPropType, mapToCssModules} from './Shared/helper.js';
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { mapToCssModules } from './Shared/helper.js'
 
 //component - CoreUI / CBreadcrumbItem
 
-const CBreadcrumbItem = props=>{
+const CBreadcrumbItem = props => {
 
   const {
-    tag: Tag,
     className,
     cssModule,
     //
     innerRef,
     active,
     ...attributes
-  } = props;
+  } = props
 
   //render
 
   const classes = mapToCssModules(classNames(
     className,
     active ? 'active' : false,
     'breadcrumb-item'
-  ), cssModule);
+  ), cssModule)
 
   return (
-    <Tag {...attributes} className={classes} aria-current={active ? 'page' : undefined} ref={innerRef} />
-  );
+    <li 
+      className={classes}
+      role="presentation"
+      aria-current={active ? 'page' : undefined}
+      {...attributes}
+      ref={innerRef} 
+    />
+  )
 
 }
 
 CBreadcrumbItem.propTypes = {
-  tag: tagPropType,
   className: PropTypes.string,
   cssModule: PropTypes.object,
   //
   innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),
   active: PropTypes.bool
-};
-
-CBreadcrumbItem.defaultProps = {
-  tag: 'li'
-};
+}
 
-export default CBreadcrumbItem;
+export default CBreadcrumbItem

src/CBreadcrumbItem.js

@@ -0,0 +1,75 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { mapToCssModules } from './Shared/helper.js'
+import { CBreadcrumb, CBreadcrumbItem } from './index'
+import { Link, useLocation } from 'react-router-dom';
+
+//component - CoreUI / CBreadcrumbRouter
+
+const getPaths = pathname => {
+  const paths = ['/']
+  if (pathname === '/') return paths;
+  pathname.split('/').reduce((prev, curr) => {
+    const currPath = `${prev}/${curr}`
+    paths.push(currPath)
+    return currPath
+  })
+  return paths
+}
+
+const CBreadcrumbRouteItem = ({name, path}, currPath) => {
+  if (path === currPath) {
+    return <CBreadcrumbItem active>{name}</CBreadcrumbItem>
+  } else {
+    return <CBreadcrumbItem>
+      <Link to={path}>
+        {name}
+      </Link>
+    </CBreadcrumbItem>
+  }
+}
+
+const CBreadcrumbRouter = props => {
+
+  const {
+    className,
+    cssModule,
+    //
+    innerRef,
+    routes,
+    ...attributes
+  } = props;
+
+  const currPath = useLocation().pathname
+  const paths = getPaths(currPath)
+  const currRoutes = routes.filter(route => paths.includes(route.path))
+
+  //render
+
+  const classes = mapToCssModules(classNames(className), cssModule)
+
+  return (
+    <CBreadcrumb 
+      className={classes} 
+      {...attributes}
+      ref={innerRef}
+    >
+      {
+        currRoutes.map(route => {
+          return CBreadcrumbRouteItem(route, currPath)
+        })
+      }
+    </CBreadcrumb>
+  )
+}
+
+CBreadcrumbRouter.propTypes = {
+  className: PropTypes.string,
+  cssModule: PropTypes.object,
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),
+  routes: PropTypes.array
+}
+
+export default CBreadcrumbRouter

src/CBreadcrumbRouter.js

@@ -76,6 +76,7 @@ export {default as CCollapse} from './CCollapse';
 export {default as CTooltip} from './CTooltip';
 //export {default as CTooltipPopoverWrapper} from './CTooltipPopoverWrapper';
 export {default as CBreadcrumb} from './CBreadcrumb';
+export {default as CBreadcrumbRouter} from './CBreadcrumbRouter';
 export {default as CBreadcrumbItem} from './CBreadcrumbItem';
 export {default as CFooter} from './CFooter';
 export {default as CHeader} from './CHeader';