Merge pull request #1624 from Adslot/breadcrumb

fix: proptypes & add className to Breadcrumb
Adslot · May 10, 2023 · 9aeb696 · 9aeb696
2 parents 45fb40d + f66f327
commit 9aeb696
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/src/components/Breadcrumb/index.d.ts b/src/components/Breadcrumb/index.d.ts
@@ -1,12 +1,12 @@
 import * as React from 'react';
 
 export interface BreadcrumbRootNode {
-  id: string;
+  id: string | number;
   label: string;
 }
 
 export interface BreadcrumbNodes {
-  id: string;
+  id: string | number;
   label: string;
 }
 
@@ -16,6 +16,7 @@ export interface BreadcrumbProps {
   nodes?: BreadcrumbNodes[];
   onClick?: (...args: any[]) => any;
   disabled?: boolean;
+  className?: string;
 }
 
 declare const Breadcrumb: React.FC<BreadcrumbProps>;

diff --git a/src/components/Breadcrumb/index.jsx b/src/components/Breadcrumb/index.jsx
@@ -5,17 +5,17 @@ import PropTypes from 'prop-types';
 import BreadcrumbNode from './Node';
 import './styles.css';
 
-const Breadcrumb = ({ rootNode, divider, nodes, onClick, disabled }) => {
+const Breadcrumb = ({ rootNode, className, divider, nodes, onClick, disabled }) => {
   const baseClass = 'aui--breadcrumb';
-  const className = classnames(baseClass, { [`${baseClass}--disabled`]: disabled });
+  const classNames = classnames(baseClass, { [`${baseClass}--disabled`]: disabled }, className);
   const onClickFunc = (newActiveId) => !disabled && onClick(newActiveId);
 
   if (nodes.length === 0) {
-    return <div data-testid="breadcrumb-wrapper" className={className} />;
+    return <div data-testid="breadcrumb-wrapper" className={classNames} />;
   }
 
   return (
-    <div data-testid="breadcrumb-wrapper" className={className}>
+    <div data-testid="breadcrumb-wrapper" className={classNames}>
       <BreadcrumbNode isLast={false} node={rootNode} onClick={onClickFunc} />
       {_.map(nodes, (node, index) => (
         <React.Fragment key={node.id}>
@@ -31,18 +31,19 @@ const Breadcrumb = ({ rootNode, divider, nodes, onClick, disabled }) => {
 
 Breadcrumb.propTypes = {
   rootNode: PropTypes.shape({
-    id: PropTypes.string.isRequired,
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
     label: PropTypes.string.isRequired,
   }),
   divider: PropTypes.node,
   nodes: PropTypes.arrayOf(
     PropTypes.shape({
-      id: PropTypes.string.isRequired,
+      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
       label: PropTypes.string.isRequired,
     })
   ),
   onClick: PropTypes.func,
   disabled: PropTypes.bool,
+  className: PropTypes.string,
 };
 
 Breadcrumb.defaultProps = {