feat: breadcrumb support activeIndex

packages/semi-ui/_base/baseComponent.tsx

@@ -16,7 +16,8 @@ export type ValidateStatus = ArrayElement<typeof VALIDATE_STATUS>;
 export interface BaseProps {
     style?: React.CSSProperties;
     className?: string;
-    children?: ReactNode | undefined | any
+    children?: ReactNode | undefined | any;
+    activeIndex?: number
 }
 
 // eslint-disable-next-line

packages/semi-ui/breadcrumb/index.tsx

@@ -13,6 +13,7 @@ import BreadcrumbItem, { RouteProps, BreadcrumbItemInfo } from './item';
 import BreadContext, { BreadContextType } from './bread-context';
 import { TooltipProps } from '../tooltip';
 import { IconMore } from '@douyinfe/semi-icons';
+import PropTypes from "prop-types";
 
 const clsPrefix = cssClasses.PREFIX;
 
@@ -53,6 +54,7 @@ class Breadcrumb extends BaseComponent<BreadcrumbProps, BreadcrumbState> {
     static Item: typeof BreadcrumbItem = BreadcrumbItem;
 
     static propTypes = {
+        activeIndex: PropTypes.number,
         routes: propTypes.array,
         onClick: propTypes.func,
         separator: propTypes.node,
@@ -199,7 +201,7 @@ class Breadcrumb extends BaseComponent<BreadcrumbProps, BreadcrumbState> {
                     <BreadcrumbItem
                         {...route}
                         key={key}
-                        active={idx === items.length - 1}
+                        active={this.props.activeIndex !== undefined ? this.props.activeIndex===idx : idx === items.length - 1}
                         route={route._origin}
                         shouldRenderSeparator={!(shouldCollapse && (hasRenderMore || moreTypeIsPopover) && inCollapseArea)}
                     >
@@ -252,8 +254,8 @@ class Breadcrumb extends BaseComponent<BreadcrumbProps, BreadcrumbState> {
 
                     return React.cloneElement(item, {
                         key: `${idx}-item`,
-                        active: idx === items.length - 1,
-                        shouldRenderSeparator: !(shouldCollapse && (hasRenderMore || moreTypeIsPopover) && inCollapseArea)
+                        active: this.props.activeIndex !== undefined ? this.props.activeIndex === idx : idx === items.length - 1,
+                        shouldRenderSeparator: (idx !== items.length - 1) && (!(shouldCollapse && (hasRenderMore || moreTypeIsPopover) && inCollapseArea))
                     });
                 })
             );

packages/semi-ui/breadcrumb/item.tsx

@@ -199,9 +199,7 @@ export default class BreadcrumbItem extends BaseComponent<BreadcrumbItemProps, B
         } = this.props;
         const pageLabel = active ? { 'aria-current': 'page' as const } : {};
         const item = this.renderItem();
-        const separator = !active ?
-            this.props.separator || <span className={`${clsPrefix}-separator`}>{this.context.separator}</span> :
-            null;
+        const separator = this.props.separator || <span className={`${clsPrefix}-separator`}>{this.context.separator}</span>;
         const wrapperCLs = cls({
             [`${clsPrefix}-item-wrap`]: true,
             // [`${clsPrefix}-item-wrap-iconOnly`]: !!children && this.props.icon,