mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-15 01:11:26 +08:00
338ec7dad7
* pref: better code style for production * refactor `devWarning` * don't use `useEffect` only wrap `devWarning` * chore: add 'noop' to coverage * chore: add test cases for devWarning * chore: add test case * chore: update test cases for devWarning * chore: restore test script command * fix: remove 'throw new Error' * should not use `throw` for browser * chore: update test case for AutoComplete * perf: add prefix for `devWarning` * update RegExp for UMD * add prefix for ES and CJS * chore: better code style * perf: * upgrade antd-tools * remove `injectWarningCondition` * rename `devWarning` to `warning` * chore: better code style * chore: better code style * chore: restore hasValidName
157 lines
4.0 KiB
TypeScript
Executable File
157 lines
4.0 KiB
TypeScript
Executable File
import * as React from 'react';
|
|
import classNames from 'classnames';
|
|
import toArray from 'rc-util/lib/Children/toArray';
|
|
import BreadcrumbItem from './BreadcrumbItem';
|
|
import BreadcrumbSeparator from './BreadcrumbSeparator';
|
|
import Menu from '../menu';
|
|
import { ConfigContext } from '../config-provider';
|
|
import warning from '../_util/warning';
|
|
import { cloneElement } from '../_util/reactNode';
|
|
|
|
export interface Route {
|
|
path: string;
|
|
breadcrumbName: string;
|
|
children?: Omit<Route, 'children'>[];
|
|
}
|
|
|
|
export interface BreadcrumbProps {
|
|
prefixCls?: string;
|
|
routes?: Route[];
|
|
params?: any;
|
|
separator?: React.ReactNode;
|
|
itemRender?: (
|
|
route: Route,
|
|
params: any,
|
|
routes: Array<Route>,
|
|
paths: Array<string>,
|
|
) => React.ReactNode;
|
|
style?: React.CSSProperties;
|
|
className?: string;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
function getBreadcrumbName(route: Route, params: any) {
|
|
if (!route.breadcrumbName) {
|
|
return null;
|
|
}
|
|
const paramsKeys = Object.keys(params).join('|');
|
|
const name = route.breadcrumbName.replace(
|
|
new RegExp(`:(${paramsKeys})`, 'g'),
|
|
(replacement, key) => params[key] || replacement,
|
|
);
|
|
return name;
|
|
}
|
|
|
|
function defaultItemRender(route: Route, params: any, routes: Route[], paths: string[]) {
|
|
const isLastItem = routes.indexOf(route) === routes.length - 1;
|
|
const name = getBreadcrumbName(route, params);
|
|
return isLastItem ? <span>{name}</span> : <a href={`#/${paths.join('/')}`}>{name}</a>;
|
|
}
|
|
|
|
const getPath = (path: string, params: any) => {
|
|
path = (path || '').replace(/^\//, '');
|
|
Object.keys(params).forEach(key => {
|
|
path = path.replace(`:${key}`, params[key]);
|
|
});
|
|
return path;
|
|
};
|
|
|
|
const addChildPath = (paths: string[], childPath: string, params: any) => {
|
|
const originalPaths = [...paths];
|
|
const path = getPath(childPath || '', params);
|
|
if (path) {
|
|
originalPaths.push(path);
|
|
}
|
|
return originalPaths;
|
|
};
|
|
|
|
interface BreadcrumbInterface extends React.FC<BreadcrumbProps> {
|
|
Item: typeof BreadcrumbItem;
|
|
Separator: typeof BreadcrumbSeparator;
|
|
}
|
|
|
|
const Breadcrumb: BreadcrumbInterface = ({
|
|
prefixCls: customizePrefixCls,
|
|
separator = '/',
|
|
style,
|
|
className,
|
|
routes,
|
|
children,
|
|
itemRender = defaultItemRender,
|
|
params = {},
|
|
...restProps
|
|
}) => {
|
|
const { getPrefixCls, direction } = React.useContext(ConfigContext);
|
|
|
|
let crumbs;
|
|
const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
|
|
if (routes && routes.length > 0) {
|
|
// generated by route
|
|
const paths: string[] = [];
|
|
crumbs = routes.map(route => {
|
|
const path = getPath(route.path, params);
|
|
|
|
if (path) {
|
|
paths.push(path);
|
|
}
|
|
// generated overlay by route.children
|
|
let overlay;
|
|
if (route.children && route.children.length) {
|
|
overlay = (
|
|
<Menu
|
|
items={route.children.map(child => ({
|
|
key: child.path || child.breadcrumbName,
|
|
label: itemRender(child, params, routes, addChildPath(paths, child.path, params)),
|
|
}))}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<BreadcrumbItem overlay={overlay} separator={separator} key={path || route.breadcrumbName}>
|
|
{itemRender(route, params, routes, paths)}
|
|
</BreadcrumbItem>
|
|
);
|
|
});
|
|
} else if (children) {
|
|
crumbs = toArray(children).map((element: any, index) => {
|
|
if (!element) {
|
|
return element;
|
|
}
|
|
|
|
warning(
|
|
element.type &&
|
|
(element.type.__ANT_BREADCRUMB_ITEM === true ||
|
|
element.type.__ANT_BREADCRUMB_SEPARATOR === true),
|
|
'Breadcrumb',
|
|
"Only accepts Breadcrumb.Item and Breadcrumb.Separator as it's children",
|
|
);
|
|
|
|
return cloneElement(element, {
|
|
separator,
|
|
key: index,
|
|
});
|
|
});
|
|
}
|
|
|
|
const breadcrumbClassName = classNames(
|
|
prefixCls,
|
|
{
|
|
[`${prefixCls}-rtl`]: direction === 'rtl',
|
|
},
|
|
className,
|
|
);
|
|
|
|
return (
|
|
<nav className={breadcrumbClassName} style={style} {...restProps}>
|
|
<ol>{crumbs}</ol>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
Breadcrumb.Item = BreadcrumbItem;
|
|
|
|
Breadcrumb.Separator = BreadcrumbSeparator;
|
|
|
|
export default Breadcrumb;
|