This commit is contained in:
2026-05-25 17:08:18 +08:00
parent df501f6151
commit f1259b71b5
9178 changed files with 1626125 additions and 0 deletions
+67
View File
@@ -0,0 +1,67 @@
import * as React from 'react';
import type { SemanticClassNamesType, SemanticStylesType } from '../_util/hooks';
import type { AnyObject } from '../_util/type';
import type { DropdownProps } from '../dropdown';
import type { BreadcrumbItemProps } from './BreadcrumbItem';
export interface BreadcrumbItemType extends React.AriaAttributes {
key?: React.Key;
/**
* Different with `path`. Directly set the link of this item.
*/
href?: string;
/**
* Different with `href`. It will concat all prev `path` to the current one.
*/
path?: string;
title?: React.ReactNode;
/** @deprecated Please use `title` instead */
breadcrumbName?: string;
menu?: BreadcrumbItemProps['menu'];
className?: string;
style?: React.CSSProperties;
dropdownProps?: DropdownProps;
onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
/** @deprecated Please use `menu` instead */
children?: Omit<BreadcrumbItemType, 'children'>[];
[key: `data-${string}`]: string;
}
export interface BreadcrumbSeparatorType {
type: 'separator';
separator?: React.ReactNode;
}
export type ItemType = Partial<BreadcrumbItemType & BreadcrumbSeparatorType>;
export type InternalRouteType = Partial<BreadcrumbItemType & BreadcrumbSeparatorType>;
export type BreadcrumbSemanticName = keyof BreadcrumbSemanticClassNames & keyof BreadcrumbSemanticStyles;
export type BreadcrumbSemanticClassNames = {
root?: string;
item?: string;
separator?: string;
};
export type BreadcrumbSemanticStyles = {
root?: React.CSSProperties;
item?: React.CSSProperties;
separator?: React.CSSProperties;
};
export type BreadcrumbClassNamesType<T extends AnyObject = AnyObject> = SemanticClassNamesType<BreadcrumbProps<T>, BreadcrumbSemanticClassNames>;
export type BreadcrumbStylesType<T extends AnyObject = AnyObject> = SemanticStylesType<BreadcrumbProps<T>, BreadcrumbSemanticStyles>;
export interface BreadcrumbProps<T extends AnyObject = AnyObject> {
prefixCls?: string;
params?: T;
separator?: React.ReactNode;
dropdownIcon?: React.ReactNode;
style?: React.CSSProperties;
className?: string;
rootClassName?: string;
children?: React.ReactNode;
/** @deprecated Please use `items` instead */
routes?: ItemType[];
items?: ItemType[];
classNames?: BreadcrumbClassNamesType<T>;
styles?: BreadcrumbStylesType<T>;
itemRender?: (route: ItemType, params: T, routes: ItemType[], paths: string[]) => React.ReactNode;
}
declare const Breadcrumb: {
<T extends AnyObject = AnyObject>(props: BreadcrumbProps<T>): React.JSX.Element;
displayName: string;
};
export default Breadcrumb;
+178
View File
@@ -0,0 +1,178 @@
"use client";
import * as React from 'react';
import DownOutlined from "@ant-design/icons/es/icons/DownOutlined";
import { toArray } from '@rc-component/util';
import pickAttrs from "@rc-component/util/es/pickAttrs";
import { clsx } from 'clsx';
import { useMergeSemantic } from '../_util/hooks';
import { cloneElement } from '../_util/reactNode';
import { devUseWarning } from '../_util/warning';
import { useComponentConfig } from '../config-provider/context';
import BreadcrumbContext from './BreadcrumbContext';
import { InternalBreadcrumbItem } from './BreadcrumbItem';
import BreadcrumbSeparator from './BreadcrumbSeparator';
import useStyle from './style';
import useItemRender from './useItemRender';
import useItems from './useItems';
const getPath = (params, path) => {
if (path === undefined) {
return path;
}
let mergedPath = (path || '').replace(/^\//, '');
Object.keys(params).forEach(key => {
mergedPath = mergedPath.replace(`:${key}`, params[key]);
});
return mergedPath;
};
const Breadcrumb = props => {
const {
prefixCls: customizePrefixCls,
separator,
style,
className,
rootClassName,
routes: legacyRoutes,
items,
children,
itemRender,
params = {},
classNames,
styles,
dropdownIcon,
...restProps
} = props;
const {
getPrefixCls,
direction,
className: contextClassName,
style: contextStyle,
classNames: contextClassNames,
styles: contextStyles,
separator: contextSeparator,
dropdownIcon: contextDropdownIcon
} = useComponentConfig('breadcrumb');
const mergedSeparator = separator ?? contextSeparator ?? '/';
const mergedDropdownIcon = dropdownIcon ?? contextDropdownIcon ?? /*#__PURE__*/React.createElement(DownOutlined, null);
let crumbs;
const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
const [hashId, cssVarCls] = useStyle(prefixCls);
const mergedItems = useItems(items, legacyRoutes);
// =========== Merged Props for Semantic ==========
const mergedProps = React.useMemo(() => {
return {
...props,
separator: mergedSeparator
};
}, [props, mergedSeparator]);
// ========================= Style ==========================
const [mergedClassNames, mergedStyles] = useMergeSemantic([contextClassNames, classNames], [contextStyles, styles], {
props: mergedProps
});
if (process.env.NODE_ENV !== 'production') {
const warning = devUseWarning('Breadcrumb');
warning.deprecated(!legacyRoutes, 'routes', 'items');
// Deprecated warning for breadcrumb children
if (!mergedItems || mergedItems.length === 0) {
const childList = toArray(children);
warning.deprecated(childList.length === 0, 'Breadcrumb.Item and Breadcrumb.Separator', 'items');
childList.forEach(element => {
if (element) {
process.env.NODE_ENV !== "production" ? warning(element.type && (element.type.__ANT_BREADCRUMB_ITEM === true || element.type.__ANT_BREADCRUMB_SEPARATOR === true), 'usage', "Only accepts Breadcrumb.Item and Breadcrumb.Separator as it's children") : void 0;
}
});
}
}
const mergedItemRender = useItemRender(prefixCls, itemRender);
if (mergedItems && mergedItems.length > 0) {
// generated by route
const paths = [];
const itemRenderRoutes = items || legacyRoutes;
crumbs = mergedItems.map((item, index) => {
const {
path,
key,
type,
menu,
onClick,
className: itemClassName,
style,
separator: itemSeparator,
dropdownProps
} = item;
const mergedPath = getPath(params, path);
if (mergedPath !== undefined) {
paths.push(mergedPath);
}
const mergedKey = key ?? index;
if (type === 'separator') {
return /*#__PURE__*/React.createElement(BreadcrumbSeparator, {
key: mergedKey
}, itemSeparator);
}
const itemProps = {};
const isLastItem = index === mergedItems.length - 1;
if (menu) {
itemProps.menu = menu;
}
let {
href
} = item;
if (paths.length && mergedPath !== undefined) {
href = `#/${paths.join('/')}`;
}
return /*#__PURE__*/React.createElement(InternalBreadcrumbItem, {
key: mergedKey,
...itemProps,
...pickAttrs(item, {
data: true,
aria: true
}),
className: itemClassName,
style: style,
dropdownProps: dropdownProps,
dropdownIcon: mergedDropdownIcon,
href: href,
separator: isLastItem ? '' : mergedSeparator,
onClick: onClick,
prefixCls: prefixCls
}, mergedItemRender(item, params, itemRenderRoutes, paths, href));
});
} else if (children) {
const childrenLength = toArray(children).length;
crumbs = toArray(children).map((element, index) => {
if (!element) {
return element;
}
const isLastItem = index === childrenLength - 1;
return cloneElement(element, {
separator: isLastItem ? '' : mergedSeparator,
// eslint-disable-next-line react/no-array-index-key
key: index
});
});
}
const breadcrumbClassName = clsx(prefixCls, contextClassName, {
[`${prefixCls}-rtl`]: direction === 'rtl'
}, className, rootClassName, mergedClassNames.root, hashId, cssVarCls);
const mergedStyle = {
...mergedStyles.root,
...contextStyle,
...style
};
const memoizedValue = React.useMemo(() => ({
classNames: mergedClassNames,
styles: mergedStyles
}), [mergedClassNames, mergedStyles]);
return /*#__PURE__*/React.createElement(BreadcrumbContext.Provider, {
value: memoizedValue
}, /*#__PURE__*/React.createElement("nav", {
className: breadcrumbClassName,
style: mergedStyle,
...restProps
}, /*#__PURE__*/React.createElement("ol", null, crumbs)));
};
if (process.env.NODE_ENV !== 'production') {
Breadcrumb.displayName = 'Breadcrumb';
}
export default Breadcrumb;
@@ -0,0 +1,8 @@
import React from 'react';
import type { BreadcrumbSemanticClassNames, BreadcrumbSemanticStyles } from './Breadcrumb';
export interface BreadcrumbContextProps {
classNames?: BreadcrumbSemanticClassNames;
styles?: BreadcrumbSemanticStyles;
}
declare const BreadcrumbContext: React.Context<BreadcrumbContextProps>;
export default BreadcrumbContext;
+3
View File
@@ -0,0 +1,3 @@
import React from 'react';
const BreadcrumbContext = /*#__PURE__*/React.createContext({});
export default BreadcrumbContext;
+31
View File
@@ -0,0 +1,31 @@
import * as React from 'react';
import type { DropdownProps } from '../dropdown/dropdown';
export interface SeparatorType {
separator?: React.ReactNode;
key?: React.Key;
}
type MenuType = NonNullable<DropdownProps['menu']>;
interface MenuItem {
key?: React.Key;
title?: React.ReactNode;
label?: React.ReactNode;
path?: string;
href?: string;
}
export interface BreadcrumbItemProps extends SeparatorType {
prefixCls?: string;
href?: string;
menu?: Omit<MenuType, 'items'> & {
items?: MenuItem[];
};
dropdownProps?: DropdownProps;
dropdownIcon?: React.ReactNode;
onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
className?: string;
style?: React.CSSProperties;
children?: React.ReactNode;
}
export declare const InternalBreadcrumbItem: React.FC<BreadcrumbItemProps>;
type CompoundedComponent = React.FC<BreadcrumbItemProps> & {};
declare const BreadcrumbItem: CompoundedComponent;
export default BreadcrumbItem;
+96
View File
@@ -0,0 +1,96 @@
"use client";
import * as React from 'react';
import { clsx } from 'clsx';
import { isNonNullable } from '../_util/is';
import { ConfigContext } from '../config-provider';
import Dropdown from '../dropdown/dropdown';
import BreadcrumbContext from './BreadcrumbContext';
import BreadcrumbSeparator from './BreadcrumbSeparator';
import { renderItem } from './useItemRender';
export const InternalBreadcrumbItem = props => {
const {
prefixCls,
separator = '/',
children,
menu,
dropdownProps,
href,
dropdownIcon
} = props;
const breadcrumbContext = React.useContext(BreadcrumbContext);
const {
classNames: mergedClassNames,
styles: mergedStyles
} = breadcrumbContext;
/** If overlay is have Wrap a Dropdown */
const renderBreadcrumbNode = breadcrumbItem => {
if (menu) {
const mergeDropDownProps = {
...dropdownProps
};
if (menu) {
const {
items,
...menuProps
} = menu || {};
mergeDropDownProps.menu = {
...menuProps,
items: items?.map(({
key,
title,
label,
path,
...itemProps
}, index) => {
let mergedLabel = label ?? title;
if (path) {
mergedLabel = /*#__PURE__*/React.createElement("a", {
href: `${href}${path}`
}, mergedLabel);
}
return {
...itemProps,
key: key ?? index,
label: mergedLabel
};
})
};
}
return /*#__PURE__*/React.createElement(Dropdown, {
placement: "bottom",
...mergeDropDownProps
}, /*#__PURE__*/React.createElement("span", {
className: `${prefixCls}-overlay-link`
}, breadcrumbItem, dropdownIcon));
}
return breadcrumbItem;
};
// wrap to dropDown
const link = renderBreadcrumbNode(children);
if (isNonNullable(link)) {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", {
className: clsx(`${prefixCls}-item`, mergedClassNames?.item),
style: mergedStyles?.item
}, link), separator && /*#__PURE__*/React.createElement(BreadcrumbSeparator, null, separator));
}
return null;
};
const BreadcrumbItem = props => {
const {
prefixCls: customizePrefixCls,
children,
href,
...restProps
} = props;
const {
getPrefixCls
} = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
return /*#__PURE__*/React.createElement(InternalBreadcrumbItem, {
...restProps,
prefixCls: prefixCls
}, renderItem(prefixCls, restProps, children, href));
};
BreadcrumbItem.__ANT_BREADCRUMB_ITEM = true;
export default BreadcrumbItem;
@@ -0,0 +1,4 @@
import * as React from 'react';
type CompoundedComponent = React.FC<React.PropsWithChildren> & {};
declare const BreadcrumbSeparator: CompoundedComponent;
export default BreadcrumbSeparator;
+26
View File
@@ -0,0 +1,26 @@
"use client";
import * as React from 'react';
import { clsx } from 'clsx';
import { ConfigContext } from '../config-provider';
import BreadcrumbContext from './BreadcrumbContext';
const BreadcrumbSeparator = ({
children
}) => {
const {
getPrefixCls
} = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('breadcrumb');
const breadcrumbContext = React.useContext(BreadcrumbContext);
const {
classNames: mergedClassNames,
styles: mergedStyles
} = breadcrumbContext;
return /*#__PURE__*/React.createElement("li", {
className: clsx(`${prefixCls}-separator`, mergedClassNames?.separator),
style: mergedStyles?.separator,
"aria-hidden": "true"
}, children === '' ? children : children || '/');
};
BreadcrumbSeparator.__ANT_BREADCRUMB_SEPARATOR = true;
export default BreadcrumbSeparator;
+13
View File
@@ -0,0 +1,13 @@
import InternalBreadcrumb from './Breadcrumb';
import BreadcrumbItem from './BreadcrumbItem';
import BreadcrumbSeparator from './BreadcrumbSeparator';
export type { BreadcrumbProps, BreadcrumbSemanticClassNames, BreadcrumbSemanticName, BreadcrumbSemanticStyles, } from './Breadcrumb';
export type { BreadcrumbItemProps, SeparatorType } from './BreadcrumbItem';
type CompoundedComponent = typeof InternalBreadcrumb & {
/** @deprecated Please use `items` instead. */
Item: typeof BreadcrumbItem;
/** @deprecated Please use `separator` instead. */
Separator: typeof BreadcrumbSeparator;
};
declare const Breadcrumb: CompoundedComponent;
export default Breadcrumb;
+9
View File
@@ -0,0 +1,9 @@
"use client";
import InternalBreadcrumb from './Breadcrumb';
import BreadcrumbItem from './BreadcrumbItem';
import BreadcrumbSeparator from './BreadcrumbSeparator';
const Breadcrumb = InternalBreadcrumb;
Breadcrumb.Item = BreadcrumbItem;
Breadcrumb.Separator = BreadcrumbSeparator;
export default Breadcrumb;
+41
View File
@@ -0,0 +1,41 @@
import type { GetDefaultToken } from '../../theme/internal';
export interface ComponentToken {
/**
* @desc 面包屑项文字颜色
* @descEN Text color of Breadcrumb item
*/
itemColor: string;
/**
* @desc 图标大小
* @descEN Icon size
*/
iconFontSize: number;
/**
* @desc 链接文字颜色
* @descEN Text color of link
*/
linkColor: string;
/**
* @desc 链接文字悬浮颜色
* @descEN Color of hovered link
*/
linkHoverColor: string;
/**
* @desc 最后一项文字颜色
* @descEN Text color of the last item
*/
lastItemColor: string;
/**
* @desc 分隔符外间距
* @descEN Margin of separator
*/
separatorMargin: number;
/**
* @desc 分隔符颜色
* @descEN Color of separator
*/
separatorColor: string;
}
export declare const prepareComponentToken: GetDefaultToken<'Breadcrumb'>;
declare const _default: (prefixCls: string, rootCls?: string) => readonly [string, string];
export default _default;
+97
View File
@@ -0,0 +1,97 @@
import { unit } from '@ant-design/cssinjs';
import { genFocusStyle, resetComponent } from '../../style';
import { genStyleHooks, mergeToken } from '../../theme/internal';
const genBreadcrumbStyle = token => {
const {
componentCls,
iconCls,
calc
} = token;
return {
[componentCls]: {
...resetComponent(token),
color: token.itemColor,
fontSize: token.fontSize,
[iconCls]: {
fontSize: token.iconFontSize
},
ol: {
display: 'flex',
flexWrap: 'wrap',
margin: 0,
padding: 0,
listStyle: 'none'
},
[`${componentCls}-item a`]: {
color: token.linkColor,
transition: `color ${token.motionDurationMid}`,
padding: `0 ${unit(token.paddingXXS)}`,
borderRadius: token.borderRadiusSM,
height: token.fontHeight,
display: 'inline-block',
marginInline: calc(token.marginXXS).mul(-1).equal(),
'&:hover': {
color: token.linkHoverColor,
backgroundColor: token.colorBgTextHover
},
...genFocusStyle(token)
},
[`${componentCls}-item:last-child`]: {
color: token.lastItemColor
},
[`${componentCls}-separator`]: {
marginInline: token.separatorMargin,
color: token.separatorColor
},
[`${componentCls}-link`]: {
[`
> ${iconCls} + span,
> ${iconCls} + a
`]: {
marginInlineStart: token.marginXXS
}
},
[`${componentCls}-overlay-link`]: {
borderRadius: token.borderRadiusSM,
height: token.fontHeight,
display: 'inline-block',
padding: `0 ${unit(token.paddingXXS)}`,
marginInline: calc(token.marginXXS).mul(-1).equal(),
[`> ${iconCls}`]: {
marginInlineStart: token.marginXXS,
fontSize: token.fontSizeIcon
},
'&:hover': {
color: token.linkHoverColor,
backgroundColor: token.colorBgTextHover,
a: {
color: token.linkHoverColor
}
},
a: {
'&:hover': {
backgroundColor: 'transparent'
}
}
},
// rtl style
[`&${token.componentCls}-rtl`]: {
direction: 'rtl'
}
}
};
};
export const prepareComponentToken = token => ({
itemColor: token.colorTextDescription,
lastItemColor: token.colorText,
iconFontSize: token.fontSize,
linkColor: token.colorTextDescription,
linkHoverColor: token.colorText,
separatorColor: token.colorTextDescription,
separatorMargin: token.marginXS
});
// ============================== Export ==============================
export default genStyleHooks('Breadcrumb', token => {
const breadcrumbToken = mergeToken(token, {});
return genBreadcrumbStyle(breadcrumbToken);
}, prepareComponentToken);
+8
View File
@@ -0,0 +1,8 @@
import * as React from 'react';
import type { BreadcrumbProps, ItemType } from './Breadcrumb';
type AddParameters<TFunction extends (...args: any) => any, TParameters extends [...args: any]> = (...args: [...Parameters<TFunction>, ...TParameters]) => ReturnType<TFunction>;
type ItemRender = NonNullable<BreadcrumbProps['itemRender']>;
type InternalItemRenderParams = AddParameters<ItemRender, [href?: string]>;
export declare function renderItem(prefixCls: string, item: ItemType, children: React.ReactNode, href?: string): React.JSX.Element | null;
export default function useItemRender(prefixCls: string, itemRender?: ItemRender): InternalItemRenderParams;
export {};
+51
View File
@@ -0,0 +1,51 @@
"use client";
import * as React from 'react';
import pickAttrs from "@rc-component/util/es/pickAttrs";
import { clsx } from 'clsx';
import { isNonNullable, isPlainObject } from '../_util/is';
function getBreadcrumbName(route, params) {
if (!isNonNullable(route.title)) {
return null;
}
const paramsKeys = Object.keys(params).join('|');
return isPlainObject(route.title) ? route.title : String(route.title).replace(new RegExp(`:(${paramsKeys})`, 'g'), (replacement, key) => params[key] || replacement);
}
export function renderItem(prefixCls, item, children, href) {
if (!isNonNullable(children)) {
return null;
}
const {
className,
onClick,
...restItem
} = item;
const passedProps = {
...pickAttrs(restItem, {
data: true,
aria: true
}),
onClick
};
if (href !== undefined) {
return /*#__PURE__*/React.createElement("a", {
...passedProps,
className: clsx(`${prefixCls}-link`, className),
href: href
}, children);
}
return /*#__PURE__*/React.createElement("span", {
...passedProps,
className: clsx(`${prefixCls}-link`, className)
}, children);
}
export default function useItemRender(prefixCls, itemRender) {
const mergedItemRender = (item, params, routes, path, href) => {
if (itemRender) {
return itemRender(item, params, routes, path);
}
const name = getBreadcrumbName(item, params);
return renderItem(prefixCls, item, name, href);
};
return mergedItemRender;
}
+6
View File
@@ -0,0 +1,6 @@
import type { BreadcrumbItemType, BreadcrumbSeparatorType, ItemType } from './Breadcrumb';
type MergedType = BreadcrumbItemType & {
children?: ItemType['children'];
};
export default function useItems(items?: ItemType[], routes?: ItemType[]): Partial<MergedType & BreadcrumbSeparatorType>[] | null;
export {};
+35
View File
@@ -0,0 +1,35 @@
import { useMemo } from 'react';
function route2item(route) {
const {
breadcrumbName,
children,
...rest
} = route;
const clone = {
title: breadcrumbName,
...rest
};
if (children) {
clone.menu = {
items: children.map(({
breadcrumbName: itemBreadcrumbName,
...itemProps
}) => ({
...itemProps,
title: itemBreadcrumbName
}))
};
}
return clone;
}
export default function useItems(items, routes) {
return useMemo(() => {
if (items) {
return items;
}
if (routes) {
return routes.map(route2item);
}
return null;
}, [items, routes]);
}