mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-25 11:40:04 +08:00
Merge pull request #41075 from ant-design/feature
chore: merge feature into feature
This commit is contained in:
MadCcc
GitHub
commit
7a7305ce5a
@ -144,6 +144,7 @@ const AutoComplete: React.ForwardRefRenderFunction<RefSelectProps, AutoCompleteP
|
||||
return (
|
||||
<Select
|
||||
ref={ref}
|
||||
showArrow={false}
|
||||
{...omit(props, ['dataSource', 'dropdownClassName'])}
|
||||
prefixCls={prefixCls}
|
||||
popupClassName={popupClassName || dropdownClassName}
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import classNames from 'classnames';
|
||||
import toArray from 'rc-util/lib/Children/toArray';
|
||||
import pickAttrs from 'rc-util/lib/pickAttrs';
|
||||
import * as React from 'react';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import type { DropdownProps } from '../dropdown';
|
||||
import Menu from '../menu';
|
||||
import { cloneElement } from '../_util/reactNode';
|
||||
import warning from '../_util/warning';
|
||||
import type { BreadcrumbItemProps } from './BreadcrumbItem';
|
||||
@ -11,63 +10,92 @@ import BreadcrumbItem from './BreadcrumbItem';
|
||||
import BreadcrumbSeparator from './BreadcrumbSeparator';
|
||||
|
||||
import useStyle from './style';
|
||||
import useItems from './useItems';
|
||||
|
||||
/** @deprecated New of Breadcrumb using `items` instead of `routes` */
|
||||
export interface Route {
|
||||
path: string;
|
||||
breadcrumbName: string;
|
||||
children?: Omit<Route, 'children'>[];
|
||||
}
|
||||
|
||||
export interface BreadcrumbProps {
|
||||
export interface BreadcrumbItemType {
|
||||
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;
|
||||
menu?: BreadcrumbItemProps['menu'];
|
||||
/** @deprecated Please use `menu` instead */
|
||||
overlay?: React.ReactNode;
|
||||
}
|
||||
export interface BreadcrumbSeparatorType {
|
||||
type: 'separator';
|
||||
separator?: React.ReactNode;
|
||||
}
|
||||
|
||||
export type ItemType = BreadcrumbItemType | BreadcrumbSeparatorType;
|
||||
|
||||
type InternalRouteType = Partial<BreadcrumbItemType & BreadcrumbSeparatorType>;
|
||||
|
||||
export interface BaseBreadcrumbProps {
|
||||
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;
|
||||
rootClassName?: string;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
function getBreadcrumbName(route: Route, params: any) {
|
||||
if (!route.breadcrumbName) {
|
||||
export interface LegacyBreadcrumbProps extends BaseBreadcrumbProps {
|
||||
/** @deprecated Please use `items` instead */
|
||||
routes: Route[];
|
||||
|
||||
itemRender?: (route: Route, params: any, routes: Route[], paths: string[]) => React.ReactNode;
|
||||
}
|
||||
|
||||
export interface NewBreadcrumbProps extends BaseBreadcrumbProps {
|
||||
items: ItemType[];
|
||||
|
||||
itemRender?: (
|
||||
route: ItemType,
|
||||
params: any,
|
||||
routes: ItemType[],
|
||||
paths: string[],
|
||||
) => React.ReactNode;
|
||||
}
|
||||
|
||||
export type BreadcrumbProps = BaseBreadcrumbProps | LegacyBreadcrumbProps | NewBreadcrumbProps;
|
||||
|
||||
function getBreadcrumbName(route: InternalRouteType, params: any) {
|
||||
if (route.title === undefined) {
|
||||
return null;
|
||||
}
|
||||
const paramsKeys = Object.keys(params).join('|');
|
||||
const name = route.breadcrumbName.replace(
|
||||
new RegExp(`:(${paramsKeys})`, 'g'),
|
||||
(replacement, key) => params[key] || replacement,
|
||||
);
|
||||
return name;
|
||||
return typeof route.title === 'object'
|
||||
? route.title
|
||||
: String(route.title).replace(
|
||||
new RegExp(`:(${paramsKeys})`, 'g'),
|
||||
(replacement, key) => params[key] || replacement,
|
||||
);
|
||||
}
|
||||
|
||||
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);
|
||||
const getPath = (params: any, path?: string) => {
|
||||
if (path === undefined) {
|
||||
return path;
|
||||
}
|
||||
return originalPaths;
|
||||
|
||||
let mergedPath = (path || '').replace(/^\//, '');
|
||||
Object.keys(params).forEach((key) => {
|
||||
mergedPath = mergedPath.replace(`:${key}`, params[key]!);
|
||||
});
|
||||
return mergedPath;
|
||||
};
|
||||
|
||||
type CompoundedComponent = React.FC<BreadcrumbProps> & {
|
||||
@ -75,55 +103,87 @@ type CompoundedComponent = React.FC<BreadcrumbProps> & {
|
||||
Separator: typeof BreadcrumbSeparator;
|
||||
};
|
||||
|
||||
const Breadcrumb: CompoundedComponent = ({
|
||||
prefixCls: customizePrefixCls,
|
||||
separator = '/',
|
||||
style,
|
||||
className,
|
||||
rootClassName,
|
||||
routes,
|
||||
children,
|
||||
itemRender = defaultItemRender,
|
||||
params = {},
|
||||
...restProps
|
||||
}) => {
|
||||
const Breadcrumb: CompoundedComponent = (props) => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
separator = '/',
|
||||
style,
|
||||
className,
|
||||
rootClassName,
|
||||
routes: legacyRoutes,
|
||||
items,
|
||||
children,
|
||||
itemRender,
|
||||
params = {},
|
||||
...restProps
|
||||
} = props as LegacyBreadcrumbProps & NewBreadcrumbProps;
|
||||
|
||||
const { getPrefixCls, direction } = React.useContext(ConfigContext);
|
||||
|
||||
let crumbs: React.ReactNode;
|
||||
const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
|
||||
if (routes && routes.length > 0) {
|
||||
const mergedItems = useItems(items, legacyRoutes);
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
warning(!legacyRoutes, 'Breadcrumb', '`routes` is deprecated. Please use `items` instead.');
|
||||
}
|
||||
|
||||
const mergedItemRender =
|
||||
itemRender ||
|
||||
((route: BreadcrumbItemType) => {
|
||||
const name = getBreadcrumbName(route, params);
|
||||
|
||||
return name;
|
||||
});
|
||||
|
||||
if (mergedItems && mergedItems.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: DropdownProps['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)),
|
||||
}))}
|
||||
/>
|
||||
);
|
||||
const itemRenderRoutes: any = items || legacyRoutes;
|
||||
|
||||
crumbs = mergedItems.map((item, index) => {
|
||||
const { path, key, type, menu, overlay, separator: itemSeparator } = item;
|
||||
const mergedPath = getPath(params, path);
|
||||
|
||||
if (mergedPath !== undefined) {
|
||||
paths.push(mergedPath);
|
||||
}
|
||||
|
||||
const itemProps: BreadcrumbItemProps = { separator };
|
||||
const mergedKey = key ?? index;
|
||||
|
||||
if (overlay) {
|
||||
itemProps.overlay = overlay;
|
||||
if (type === 'separator') {
|
||||
return <BreadcrumbSeparator key={mergedKey}>{itemSeparator}</BreadcrumbSeparator>;
|
||||
}
|
||||
|
||||
const itemProps: BreadcrumbItemProps = {};
|
||||
const isLastItem = index === mergedItems.length - 1;
|
||||
|
||||
if (menu) {
|
||||
itemProps.menu = menu;
|
||||
} else if (overlay) {
|
||||
itemProps.overlay = overlay as any;
|
||||
}
|
||||
|
||||
let { href } = item;
|
||||
if (paths.length && mergedPath !== undefined) {
|
||||
href = `#/${paths.join('/')}`;
|
||||
}
|
||||
|
||||
return (
|
||||
<BreadcrumbItem {...itemProps} key={path || route.breadcrumbName}>
|
||||
{itemRender(route, params, routes, paths)}
|
||||
<BreadcrumbItem
|
||||
key={mergedKey}
|
||||
{...itemProps}
|
||||
{...pickAttrs(item, {
|
||||
data: true,
|
||||
aria: true,
|
||||
})}
|
||||
href={href}
|
||||
separator={isLastItem ? '' : separator}
|
||||
>
|
||||
{mergedItemRender(item as BreadcrumbItemType, params, itemRenderRoutes, paths)}
|
||||
</BreadcrumbItem>
|
||||
);
|
||||
});
|
||||
@ -133,7 +193,14 @@ const Breadcrumb: CompoundedComponent = ({
|
||||
if (!element) {
|
||||
return element;
|
||||
}
|
||||
|
||||
// =================== Warning =====================
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
warning(
|
||||
!element,
|
||||
'Breadcrumb',
|
||||
'`Breadcrumb.Item and Breadcrumb.Separator` is deprecated. Please use `items` instead.',
|
||||
);
|
||||
}
|
||||
warning(
|
||||
element.type &&
|
||||
(element.type.__ANT_BREADCRUMB_ITEM === true ||
|
||||
|
||||
@ -1,21 +1,34 @@
|
||||
import * as React from 'react';
|
||||
import DownOutlined from '@ant-design/icons/DownOutlined';
|
||||
import warning from '../_util/warning';
|
||||
import * as React from 'react';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import type { DropdownProps } from '../dropdown/dropdown';
|
||||
import Dropdown from '../dropdown/dropdown';
|
||||
import warning from '../_util/warning';
|
||||
import BreadcrumbSeparator from './BreadcrumbSeparator';
|
||||
|
||||
export interface BreadcrumbItemProps {
|
||||
prefixCls?: string;
|
||||
export interface SeparatorType {
|
||||
separator?: React.ReactNode;
|
||||
key?: React.Key;
|
||||
}
|
||||
|
||||
type MenuType = DropdownProps['menu'];
|
||||
interface MenuItem {
|
||||
title?: React.ReactNode;
|
||||
label?: React.ReactNode;
|
||||
path?: string;
|
||||
href?: string;
|
||||
menu?: DropdownProps['menu'];
|
||||
}
|
||||
|
||||
export interface BreadcrumbItemProps extends SeparatorType {
|
||||
prefixCls?: string;
|
||||
href?: string;
|
||||
menu?: Omit<MenuType, 'items'> & {
|
||||
items?: MenuItem[];
|
||||
};
|
||||
dropdownProps?: DropdownProps;
|
||||
onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
|
||||
className?: string;
|
||||
children?: React.ReactNode;
|
||||
|
||||
// Deprecated
|
||||
/** @deprecated Please use `menu` instead */
|
||||
overlay?: DropdownProps['overlay'];
|
||||
@ -31,6 +44,7 @@ const BreadcrumbItem: CompoundedComponent = (props: BreadcrumbItemProps) => {
|
||||
menu,
|
||||
overlay,
|
||||
dropdownProps,
|
||||
href,
|
||||
...restProps
|
||||
} = props;
|
||||
|
||||
@ -52,11 +66,31 @@ const BreadcrumbItem: CompoundedComponent = (props: BreadcrumbItemProps) => {
|
||||
const mergeDropDownProps: DropdownProps = {
|
||||
...dropdownProps,
|
||||
};
|
||||
if ('overlay' in props) {
|
||||
|
||||
if (menu) {
|
||||
const { items, ...menuProps } = menu! || {};
|
||||
mergeDropDownProps.menu = {
|
||||
...menuProps,
|
||||
items: items?.map(({ title, label, path, ...itemProps }, index) => {
|
||||
let mergedLabel: React.ReactNode = label ?? title;
|
||||
|
||||
if (path) {
|
||||
mergedLabel = <a href={`${href}${path}`}>{mergedLabel}</a>;
|
||||
}
|
||||
|
||||
return {
|
||||
...itemProps,
|
||||
key: index,
|
||||
label: mergedLabel as string,
|
||||
};
|
||||
}),
|
||||
};
|
||||
} else if (overlay) {
|
||||
mergeDropDownProps.overlay = overlay;
|
||||
}
|
||||
|
||||
return (
|
||||
<Dropdown menu={menu} placement="bottom" {...mergeDropDownProps}>
|
||||
<Dropdown placement="bottom" {...mergeDropDownProps}>
|
||||
<span className={`${prefixCls}-overlay-link`}>
|
||||
{breadcrumbItem}
|
||||
<DownOutlined />
|
||||
@ -68,9 +102,9 @@ const BreadcrumbItem: CompoundedComponent = (props: BreadcrumbItemProps) => {
|
||||
};
|
||||
|
||||
let link: React.ReactNode;
|
||||
if ('href' in restProps) {
|
||||
if (href !== undefined) {
|
||||
link = (
|
||||
<a className={`${prefixCls}-link`} {...restProps}>
|
||||
<a className={`${prefixCls}-link`} href={href} {...restProps}>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
|
||||
@ -3,7 +3,8 @@ import accessibilityTest from '../../../tests/shared/accessibilityTest';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
import { render } from '../../../tests/utils';
|
||||
import type { Route } from '../Breadcrumb';
|
||||
import { resetWarned } from '../../_util/warning';
|
||||
import type { ItemType } from '../Breadcrumb';
|
||||
import Breadcrumb from '../index';
|
||||
|
||||
describe('Breadcrumb', () => {
|
||||
@ -33,22 +34,96 @@ describe('Breadcrumb', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('overlay deprecation warning', () => {
|
||||
it('warns on routes', () => {
|
||||
render(
|
||||
<Breadcrumb
|
||||
routes={[
|
||||
{
|
||||
breadcrumbName: 'yyy',
|
||||
} as any,
|
||||
]}
|
||||
/>,
|
||||
);
|
||||
expect(errorSpy).toHaveBeenCalledWith(
|
||||
'Warning: [antd: Breadcrumb] `routes` is deprecated. Please use `items` instead.',
|
||||
);
|
||||
});
|
||||
|
||||
it('should render correct', () => {
|
||||
const { asFragment } = render(
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{
|
||||
path: '',
|
||||
title: <span>xxx</span>,
|
||||
},
|
||||
{
|
||||
title: 'yyy',
|
||||
},
|
||||
]}
|
||||
/>,
|
||||
);
|
||||
expect(asFragment().firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
describe('overlay deprecation warning set', () => {
|
||||
it('legacy jsx', () => {
|
||||
resetWarned();
|
||||
render(
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item overlay={<div>menu</div>}>
|
||||
<a href="">General</a>
|
||||
</Breadcrumb.Item>
|
||||
</Breadcrumb>,
|
||||
);
|
||||
expect(errorSpy).toHaveBeenCalledWith(
|
||||
'Warning: [antd: Breadcrumb.Item] `overlay` is deprecated. Please use `menu` instead.',
|
||||
);
|
||||
});
|
||||
|
||||
it('items', () => {
|
||||
resetWarned();
|
||||
render(
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{
|
||||
overlay: <div>menu</div>,
|
||||
title: 'General',
|
||||
},
|
||||
]}
|
||||
/>,
|
||||
);
|
||||
expect(errorSpy).toHaveBeenCalledWith(
|
||||
'Warning: [antd: Breadcrumb.Item] `overlay` is deprecated. Please use `menu` instead.',
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
it('Breadcrumb.Item deprecation warning', () => {
|
||||
render(
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item overlay={<div>menu</div>}>
|
||||
<a href="">General</a>
|
||||
</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>Location</Breadcrumb.Item>
|
||||
</Breadcrumb>,
|
||||
);
|
||||
expect(errorSpy).toHaveBeenCalledWith(
|
||||
'Warning: [antd: Breadcrumb.Item] `overlay` is deprecated. Please use `menu` instead.',
|
||||
'Warning: [antd: Breadcrumb] `Breadcrumb.Item and Breadcrumb.Separator` is deprecated. Please use `items` instead.',
|
||||
);
|
||||
});
|
||||
|
||||
it('Breadcrumb.separator deprecation warning', () => {
|
||||
render(
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Separator>:</Breadcrumb.Separator>
|
||||
</Breadcrumb>,
|
||||
);
|
||||
expect(errorSpy).toHaveBeenCalledWith(
|
||||
'Warning: [antd: Breadcrumb] `Breadcrumb.Item and Breadcrumb.Separator` is deprecated. Please use `items` instead.',
|
||||
);
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/40204
|
||||
it('wrong overlay deprecation warning in Dropdown', () => {
|
||||
const items = [
|
||||
const menuItems = [
|
||||
{
|
||||
key: '1',
|
||||
label: (
|
||||
@ -59,11 +134,14 @@ describe('Breadcrumb', () => {
|
||||
},
|
||||
];
|
||||
render(
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item menu={{ items }}>
|
||||
<a href="">General</a>
|
||||
</Breadcrumb.Item>
|
||||
</Breadcrumb>,
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{
|
||||
menu: { items: menuItems },
|
||||
title: <a href="">General</a>,
|
||||
},
|
||||
]}
|
||||
/>,
|
||||
);
|
||||
expect(errorSpy).not.toHaveBeenCalledWith(
|
||||
'Warning: [antd: Dropdown] `overlay` is deprecated. Please use `menu` instead.',
|
||||
@ -79,18 +157,23 @@ describe('Breadcrumb', () => {
|
||||
{undefined}
|
||||
</Breadcrumb>,
|
||||
);
|
||||
expect(errorSpy).not.toHaveBeenCalled();
|
||||
expect(asFragment().firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/5542
|
||||
it('should not display Breadcrumb Item when its children is falsy', () => {
|
||||
const { asFragment } = render(
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item />
|
||||
<Breadcrumb.Item>xxx</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>yyy</Breadcrumb.Item>
|
||||
</Breadcrumb>,
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{} as any,
|
||||
{
|
||||
title: 'xxx',
|
||||
},
|
||||
{
|
||||
title: 'yyy',
|
||||
},
|
||||
]}
|
||||
/>,
|
||||
);
|
||||
expect(asFragment().firstChild).toMatchSnapshot();
|
||||
});
|
||||
@ -111,53 +194,66 @@ describe('Breadcrumb', () => {
|
||||
});
|
||||
|
||||
it('should render a menu', () => {
|
||||
const routes: Route[] = [
|
||||
const items: ItemType[] = [
|
||||
{
|
||||
path: 'index',
|
||||
breadcrumbName: 'home',
|
||||
title: 'home',
|
||||
},
|
||||
{
|
||||
path: 'first',
|
||||
breadcrumbName: 'first',
|
||||
children: [
|
||||
{
|
||||
path: '/general',
|
||||
breadcrumbName: 'General',
|
||||
},
|
||||
{
|
||||
path: '/layout',
|
||||
breadcrumbName: 'Layout',
|
||||
},
|
||||
{
|
||||
path: '/navigation',
|
||||
breadcrumbName: 'Navigation',
|
||||
},
|
||||
],
|
||||
title: 'first',
|
||||
menu: {
|
||||
items: [
|
||||
{
|
||||
path: '/general',
|
||||
title: 'General',
|
||||
},
|
||||
{
|
||||
path: '/layout',
|
||||
title: 'Layout',
|
||||
},
|
||||
{
|
||||
path: '/navigation',
|
||||
title: 'Navigation',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'second',
|
||||
breadcrumbName: 'second',
|
||||
title: 'second',
|
||||
},
|
||||
{
|
||||
path: 'third',
|
||||
breadcrumbName: '',
|
||||
title: '',
|
||||
},
|
||||
];
|
||||
const { asFragment } = render(<Breadcrumb routes={routes} />);
|
||||
const { asFragment } = render(<Breadcrumb items={items} />);
|
||||
expect(asFragment().firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should accept undefined routes', () => {
|
||||
const { asFragment } = render(<Breadcrumb routes={undefined} />);
|
||||
it('should accept undefined items', () => {
|
||||
const { asFragment } = render(<Breadcrumb items={undefined!} />);
|
||||
expect(asFragment().firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should support custom attribute', () => {
|
||||
const { asFragment } = render(
|
||||
<Breadcrumb data-custom="custom">
|
||||
<Breadcrumb.Item data-custom="custom-item">xxx</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>yyy</Breadcrumb.Item>
|
||||
</Breadcrumb>,
|
||||
(
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{
|
||||
title: 'xxx',
|
||||
// @ts-ignore
|
||||
'data-custom': 'custom-item',
|
||||
},
|
||||
{
|
||||
title: 'yyy',
|
||||
},
|
||||
]}
|
||||
data-custom="custom"
|
||||
/>
|
||||
) as React.ReactElement<any, string | React.JSXElementConstructor<any>>,
|
||||
);
|
||||
expect(asFragment().firstChild).toMatchSnapshot();
|
||||
});
|
||||
@ -194,12 +290,19 @@ describe('Breadcrumb', () => {
|
||||
);
|
||||
expect(asFragment().firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should support string `0` and number `0`', () => {
|
||||
const { container } = render(
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item>{0}</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>0</Breadcrumb.Item>
|
||||
</Breadcrumb>,
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{
|
||||
title: 0,
|
||||
},
|
||||
{
|
||||
title: '0',
|
||||
},
|
||||
]}
|
||||
/>,
|
||||
);
|
||||
expect(container.querySelectorAll('.ant-breadcrumb-link')[0].textContent).toBe('0');
|
||||
expect(container.querySelectorAll('.ant-breadcrumb-link')[1].textContent).toBe('0');
|
||||
@ -207,6 +310,7 @@ describe('Breadcrumb', () => {
|
||||
});
|
||||
|
||||
it('should console Error when `overlay` in props', () => {
|
||||
resetWarned();
|
||||
const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
||||
render(
|
||||
<Breadcrumb>
|
||||
@ -221,7 +325,7 @@ describe('Breadcrumb', () => {
|
||||
|
||||
it('should not console Error when `overlay` not in props', () => {
|
||||
const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
||||
render(<Breadcrumb routes={[{ path: '/', breadcrumbName: 'Test' }]} />);
|
||||
render(<Breadcrumb items={[{ path: '/', title: 'Test' }]} />);
|
||||
expect(errSpy).not.toHaveBeenCalled();
|
||||
errSpy.mockRestore();
|
||||
});
|
||||
|
||||
@ -44,7 +44,7 @@ exports[`Breadcrumb rtl render component should be rendered correctly in RTL dir
|
||||
</nav>
|
||||
`;
|
||||
|
||||
exports[`Breadcrumb should accept undefined routes 1`] = `
|
||||
exports[`Breadcrumb should accept undefined items 1`] = `
|
||||
<nav
|
||||
class="ant-breadcrumb"
|
||||
>
|
||||
@ -103,15 +103,12 @@ exports[`Breadcrumb should render a menu 1`] = `
|
||||
>
|
||||
<ol>
|
||||
<li>
|
||||
<span
|
||||
<a
|
||||
class="ant-breadcrumb-link"
|
||||
href="#/index"
|
||||
>
|
||||
<a
|
||||
href="#/index"
|
||||
>
|
||||
home
|
||||
</a>
|
||||
</span>
|
||||
home
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
aria-hidden="true"
|
||||
@ -123,15 +120,12 @@ exports[`Breadcrumb should render a menu 1`] = `
|
||||
<span
|
||||
class="ant-dropdown-trigger ant-breadcrumb-overlay-link"
|
||||
>
|
||||
<span
|
||||
<a
|
||||
class="ant-breadcrumb-link"
|
||||
href="#/index/first"
|
||||
>
|
||||
<a
|
||||
href="#/index/first"
|
||||
>
|
||||
first
|
||||
</a>
|
||||
</span>
|
||||
first
|
||||
</a>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
@ -160,15 +154,43 @@ exports[`Breadcrumb should render a menu 1`] = `
|
||||
/
|
||||
</li>
|
||||
<li>
|
||||
<span
|
||||
<a
|
||||
class="ant-breadcrumb-link"
|
||||
href="#/index/first/second"
|
||||
>
|
||||
<a
|
||||
href="#/index/first/second"
|
||||
>
|
||||
second
|
||||
</a>
|
||||
</span>
|
||||
second
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
aria-hidden="true"
|
||||
class="ant-breadcrumb-separator"
|
||||
>
|
||||
/
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="ant-breadcrumb-link"
|
||||
href="#/index/first/second/third"
|
||||
/>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
`;
|
||||
|
||||
exports[`Breadcrumb should render correct 1`] = `
|
||||
<nav
|
||||
class="ant-breadcrumb"
|
||||
>
|
||||
<ol>
|
||||
<li>
|
||||
<a
|
||||
class="ant-breadcrumb-link"
|
||||
href="#/"
|
||||
>
|
||||
<span>
|
||||
xxx
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
aria-hidden="true"
|
||||
@ -180,15 +202,9 @@ exports[`Breadcrumb should render a menu 1`] = `
|
||||
<span
|
||||
class="ant-breadcrumb-link"
|
||||
>
|
||||
<span />
|
||||
yyy
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
aria-hidden="true"
|
||||
class="ant-breadcrumb-separator"
|
||||
>
|
||||
/
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
`;
|
||||
|
||||
@ -63,6 +63,177 @@ exports[`renders ./components/breadcrumb/demo/basic.tsx extend context correctly
|
||||
</nav>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/breadcrumb/demo/debug-routes.tsx extend context correctly 1`] = `
|
||||
<nav
|
||||
class="ant-breadcrumb"
|
||||
>
|
||||
<ol>
|
||||
<li>
|
||||
<a
|
||||
class="ant-breadcrumb-link"
|
||||
href="#/home"
|
||||
>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
aria-hidden="true"
|
||||
class="ant-breadcrumb-separator"
|
||||
>
|
||||
/
|
||||
</li>
|
||||
<li>
|
||||
<span
|
||||
class="ant-dropdown-trigger ant-breadcrumb-overlay-link"
|
||||
>
|
||||
<a
|
||||
class="ant-breadcrumb-link"
|
||||
href="#/home/user"
|
||||
>
|
||||
User
|
||||
</a>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<div>
|
||||
<div
|
||||
class="ant-dropdown"
|
||||
style="opacity:0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
>
|
||||
<li
|
||||
class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
class="ant-dropdown-menu-title-content"
|
||||
>
|
||||
<a
|
||||
href="#/home/user/user1"
|
||||
>
|
||||
User1
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
<div
|
||||
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||
style="left:-1000vw;top:-1000vh;box-sizing:border-box"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position:absolute;top:0;left:0"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<li
|
||||
class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
class="ant-dropdown-menu-title-content"
|
||||
>
|
||||
<a
|
||||
href="#/home/user/user2"
|
||||
>
|
||||
User2
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
<div
|
||||
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||
style="left:-1000vw;top:-1000vh;box-sizing:border-box"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position:absolute;top:0;left:0"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style="display:none"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||
style="left:-1000vw;top:-1000vh;box-sizing:border-box"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position:absolute;top:0;left:0"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||
style="left:-1000vw;top:-1000vh;box-sizing:border-box"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position:absolute;top:0;left:0"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/breadcrumb/demo/overlay.tsx extend context correctly 1`] = `
|
||||
<nav
|
||||
class="ant-breadcrumb"
|
||||
|
||||
@ -63,6 +63,60 @@ exports[`renders ./components/breadcrumb/demo/basic.tsx correctly 1`] = `
|
||||
</nav>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/breadcrumb/demo/debug-routes.tsx correctly 1`] = `
|
||||
<nav
|
||||
class="ant-breadcrumb"
|
||||
>
|
||||
<ol>
|
||||
<li>
|
||||
<a
|
||||
class="ant-breadcrumb-link"
|
||||
href="#/home"
|
||||
>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
aria-hidden="true"
|
||||
class="ant-breadcrumb-separator"
|
||||
>
|
||||
/
|
||||
</li>
|
||||
<li>
|
||||
<span
|
||||
class="ant-dropdown-trigger ant-breadcrumb-overlay-link"
|
||||
>
|
||||
<a
|
||||
class="ant-breadcrumb-link"
|
||||
href="#/home/user"
|
||||
>
|
||||
User
|
||||
</a>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/breadcrumb/demo/overlay.tsx correctly 1`] = `
|
||||
<nav
|
||||
class="ant-breadcrumb"
|
||||
|
||||
@ -6,15 +6,12 @@ exports[`react router react router 3 1`] = `
|
||||
>
|
||||
<ol>
|
||||
<li>
|
||||
<span
|
||||
<a
|
||||
class="ant-breadcrumb-link"
|
||||
href="#/"
|
||||
>
|
||||
<a
|
||||
href="#/"
|
||||
>
|
||||
Home
|
||||
</a>
|
||||
</span>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
aria-hidden="true"
|
||||
@ -23,15 +20,12 @@ exports[`react router react router 3 1`] = `
|
||||
/
|
||||
</li>
|
||||
<li>
|
||||
<span
|
||||
<a
|
||||
class="ant-breadcrumb-link"
|
||||
href="#//apps"
|
||||
>
|
||||
<a
|
||||
href="#/apps"
|
||||
>
|
||||
Application List
|
||||
</a>
|
||||
</span>
|
||||
Application List
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
aria-hidden="true"
|
||||
@ -40,15 +34,12 @@ exports[`react router react router 3 1`] = `
|
||||
/
|
||||
</li>
|
||||
<li>
|
||||
<span
|
||||
<a
|
||||
class="ant-breadcrumb-link"
|
||||
href="#//apps/1"
|
||||
>
|
||||
<a
|
||||
href="#/apps/1"
|
||||
>
|
||||
Application1
|
||||
</a>
|
||||
</span>
|
||||
Application1
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
aria-hidden="true"
|
||||
@ -57,19 +48,12 @@ exports[`react router react router 3 1`] = `
|
||||
/
|
||||
</li>
|
||||
<li>
|
||||
<span
|
||||
<a
|
||||
class="ant-breadcrumb-link"
|
||||
href="#//apps/1/detail"
|
||||
>
|
||||
<span>
|
||||
Detail
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
aria-hidden="true"
|
||||
class="ant-breadcrumb-separator"
|
||||
>
|
||||
/
|
||||
Detail
|
||||
</a>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
@ -2,16 +2,22 @@ import React from 'react';
|
||||
import { Breadcrumb } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item>Home</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>
|
||||
<a href="">Application Center</a>
|
||||
</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>
|
||||
<a href="">Application List</a>
|
||||
</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>An Application</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{
|
||||
title: 'Home',
|
||||
},
|
||||
{
|
||||
title: <a href="">Application Center</a>,
|
||||
},
|
||||
{
|
||||
title: <a href="">Application List</a>,
|
||||
},
|
||||
{
|
||||
title: 'An Application',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
7
components/breadcrumb/demo/debug-routes.md
Normal file
7
components/breadcrumb/demo/debug-routes.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
原 `routes` 调试。
|
||||
|
||||
## en-US
|
||||
|
||||
Origin `routes` debug.
|
||||
27
components/breadcrumb/demo/debug-routes.tsx
Normal file
27
components/breadcrumb/demo/debug-routes.tsx
Normal file
@ -0,0 +1,27 @@
|
||||
import { Breadcrumb } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
export default () => (
|
||||
<Breadcrumb
|
||||
routes={[
|
||||
{
|
||||
path: '/home',
|
||||
breadcrumbName: 'Home',
|
||||
},
|
||||
{
|
||||
path: '/user',
|
||||
breadcrumbName: 'User',
|
||||
children: [
|
||||
{
|
||||
path: '/user1',
|
||||
breadcrumbName: 'User1',
|
||||
},
|
||||
{
|
||||
path: '/user2',
|
||||
breadcrumbName: 'User2',
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { Breadcrumb } from 'antd';
|
||||
|
||||
const items = [
|
||||
const menuItems = [
|
||||
{
|
||||
key: '1',
|
||||
label: (
|
||||
@ -29,16 +29,23 @@ const items = [
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item>Ant Design</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>
|
||||
<a href="">Component</a>
|
||||
</Breadcrumb.Item>
|
||||
<Breadcrumb.Item menu={{ items }}>
|
||||
<a href="">General</a>
|
||||
</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>Button</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{
|
||||
title: 'Ant Design',
|
||||
},
|
||||
{
|
||||
title: <a href="">Component</a>,
|
||||
},
|
||||
{
|
||||
title: <a href="">General</a>,
|
||||
menu: { items: menuItems },
|
||||
},
|
||||
{
|
||||
title: 'Button',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -27,17 +27,17 @@ const Home = () => {
|
||||
|
||||
const extraBreadcrumbItems = pathSnippets.map((_, index) => {
|
||||
const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
|
||||
return (
|
||||
<Breadcrumb.Item key={url}>
|
||||
<Link to={url}>{breadcrumbNameMap[url]}</Link>
|
||||
</Breadcrumb.Item>
|
||||
);
|
||||
return {
|
||||
key: url,
|
||||
title: <Link to={url}>{breadcrumbNameMap[url]}</Link>,
|
||||
};
|
||||
});
|
||||
|
||||
const breadcrumbItems = [
|
||||
<Breadcrumb.Item key="home">
|
||||
<Link to="/">Home</Link>
|
||||
</Breadcrumb.Item>,
|
||||
{
|
||||
title: <Link to="/">Home</Link>,
|
||||
key: 'home',
|
||||
},
|
||||
].concat(extraBreadcrumbItems);
|
||||
|
||||
return (
|
||||
@ -51,7 +51,7 @@ const Home = () => {
|
||||
<Route path="*" element={<span>Home Page</span>} />
|
||||
</Routes>
|
||||
<Alert style={{ margin: '16px 0' }} message="Click the navigation above to switch:" />
|
||||
<Breadcrumb>{breadcrumbItems}</Breadcrumb>
|
||||
<Breadcrumb items={breadcrumbItems} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
使用 `Breadcrumb.Separator` 可以自定义分隔符。
|
||||
自定义单独的分隔符。
|
||||
|
||||
## en-US
|
||||
|
||||
The separator can be customized by setting the separator property: `Breadcrumb.Separator`.
|
||||
Customize separator for each other.
|
||||
|
||||
@ -1,16 +1,36 @@
|
||||
import React from 'react';
|
||||
import { Breadcrumb } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Breadcrumb separator="">
|
||||
<Breadcrumb.Item>Location</Breadcrumb.Item>
|
||||
<Breadcrumb.Separator>:</Breadcrumb.Separator>
|
||||
<Breadcrumb.Item href="">Application Center</Breadcrumb.Item>
|
||||
<Breadcrumb.Separator />
|
||||
<Breadcrumb.Item href="">Application List</Breadcrumb.Item>
|
||||
<Breadcrumb.Separator />
|
||||
<Breadcrumb.Item>An Application</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
<Breadcrumb
|
||||
separator=""
|
||||
items={[
|
||||
{
|
||||
title: 'Location',
|
||||
},
|
||||
{
|
||||
type: 'separator',
|
||||
separator: ':',
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
title: 'Application Center',
|
||||
},
|
||||
{
|
||||
type: 'separator',
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
title: 'Application List',
|
||||
},
|
||||
{
|
||||
type: 'separator',
|
||||
},
|
||||
{
|
||||
title: 'An Application',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -2,12 +2,25 @@ import React from 'react';
|
||||
import { Breadcrumb } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Breadcrumb separator=">">
|
||||
<Breadcrumb.Item>Home</Breadcrumb.Item>
|
||||
<Breadcrumb.Item href="">Application Center</Breadcrumb.Item>
|
||||
<Breadcrumb.Item href="">Application List</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>An Application</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
<Breadcrumb
|
||||
separator=">"
|
||||
items={[
|
||||
{
|
||||
title: 'Home',
|
||||
},
|
||||
{
|
||||
title: 'Application Center',
|
||||
href: '',
|
||||
},
|
||||
{
|
||||
title: 'Application List',
|
||||
href: '',
|
||||
},
|
||||
{
|
||||
title: 'An Application',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,18 +1,28 @@
|
||||
import React from 'react';
|
||||
import { HomeOutlined, UserOutlined } from '@ant-design/icons';
|
||||
import { Breadcrumb } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item href="">
|
||||
<HomeOutlined />
|
||||
</Breadcrumb.Item>
|
||||
<Breadcrumb.Item href="">
|
||||
<UserOutlined />
|
||||
<span>Application List</span>
|
||||
</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>Application</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{
|
||||
href: '',
|
||||
title: <HomeOutlined />,
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
title: (
|
||||
<>
|
||||
<UserOutlined />
|
||||
<span>Application List</span>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Application',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -16,6 +16,22 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
|
||||
- When you need to inform the user of where they are.
|
||||
- When the user may need to navigate back to a higher level.
|
||||
|
||||
```jsx
|
||||
// works when >=5.3.0, recommended ✅
|
||||
return <Breadcrumb items={[{ title: 'sample' }]} />;
|
||||
|
||||
// works when <5.3.0, deprecated when >=5.3.0 🙅🏻♀️
|
||||
return (
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item>sample</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
);
|
||||
|
||||
// or
|
||||
|
||||
return <Breadcrumb routes={[{ breadcrumbName: 'sample' }]} />;
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
@ -25,6 +41,7 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
|
||||
<code src="./demo/separator.tsx">Configuring the Separator</code>
|
||||
<code src="./demo/overlay.tsx">Bread crumbs with drop down menu</code>
|
||||
<code src="./demo/separator-component.tsx">Configuring the Separator</code>
|
||||
<code src="./demo/debug-routes.tsx">Debug Routes</code>
|
||||
|
||||
## API
|
||||
|
||||
@ -34,10 +51,14 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
|
||||
| --- | --- | --- | --- | --- |
|
||||
| itemRender | Custom item renderer | (route, params, routes, paths) => ReactNode | - | |
|
||||
| params | Routing parameters | object | - | |
|
||||
| routes | The routing stack information of router | [routes\[\]](#routes) | - | |
|
||||
| items | The routing stack information of router | [items\[\]](#ItemType) | - | 5.3.0 |
|
||||
| separator | Custom separator | ReactNode | `/` | |
|
||||
|
||||
### Breadcrumb.Item
|
||||
### ItemType
|
||||
|
||||
> type ItemType = [RouteItemType](#RouteItemType) | [SeparatorType](#SeparatorType)
|
||||
|
||||
### RouteItemType
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
@ -46,28 +67,22 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
|
||||
| href | Target of hyperlink | string | - | |
|
||||
| menu | The menu props | [MenuProps](/components/menu/#api) | - | 4.24.0 |
|
||||
| onClick | Set the handler to handle click event | (e:MouseEvent) => void | - | |
|
||||
| title | item name | ReactNode | - | |
|
||||
|
||||
### Breadcrumb.Separator
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| -------- | ---------------- | --------- | ------- | ------- |
|
||||
| children | Custom separator | ReactNode | `/` | |
|
||||
|
||||
> When using `Breadcrumb.Separator`,its parent component must be set to `separator=""`, otherwise the default separator of the parent component will appear.
|
||||
|
||||
### routes
|
||||
### SeparatorType
|
||||
|
||||
```ts
|
||||
interface Route {
|
||||
path: string;
|
||||
breadcrumbName: string;
|
||||
children: Array<{
|
||||
path: string;
|
||||
breadcrumbName: string;
|
||||
}>;
|
||||
}
|
||||
const item = {
|
||||
type: 'separator', // Must have
|
||||
separator: '/',
|
||||
};
|
||||
```
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --------- | ----------------- | ----------- | ------- | ------- |
|
||||
| type | Mark as separator | `separator` | | 5.3.0 |
|
||||
| separator | Custom separator | ReactNode | `/` | 5.3.0 |
|
||||
|
||||
### Use with browserHistory
|
||||
|
||||
The link of Breadcrumb item targets `#` by default, you can use `itemRender` to make a `browserHistory` Link.
|
||||
@ -75,42 +90,38 @@ The link of Breadcrumb item targets `#` by default, you can use `itemRender` to
|
||||
```jsx
|
||||
import { Link } from 'react-router';
|
||||
|
||||
const routes = [
|
||||
const items = [
|
||||
{
|
||||
path: 'index',
|
||||
breadcrumbName: 'home',
|
||||
title: 'home',
|
||||
},
|
||||
{
|
||||
path: 'first',
|
||||
breadcrumbName: 'first',
|
||||
title: 'first',
|
||||
children: [
|
||||
{
|
||||
path: '/general',
|
||||
breadcrumbName: 'General',
|
||||
title: 'General',
|
||||
},
|
||||
{
|
||||
path: '/layout',
|
||||
breadcrumbName: 'Layout',
|
||||
title: 'Layout',
|
||||
},
|
||||
{
|
||||
path: '/navigation',
|
||||
breadcrumbName: 'Navigation',
|
||||
title: 'Navigation',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'second',
|
||||
breadcrumbName: 'second',
|
||||
title: 'second',
|
||||
},
|
||||
];
|
||||
function itemRender(route, params, routes, paths) {
|
||||
const last = routes.indexOf(route) === routes.length - 1;
|
||||
return last ? (
|
||||
<span>{route.breadcrumbName}</span>
|
||||
) : (
|
||||
<Link to={paths.join('/')}>{route.breadcrumbName}</Link>
|
||||
);
|
||||
function itemRender(route, params, items, paths) {
|
||||
const last = items.indexOf(item) === items.length - 1;
|
||||
return last ? <span>{item.title}</span> : <Link to={paths.join('/')}>{item.title}</Link>;
|
||||
}
|
||||
|
||||
return <Breadcrumb itemRender={itemRender} routes={routes} />;
|
||||
return <Breadcrumb itemRender={itemRender} items={items} />;
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import Breadcrumb from './Breadcrumb';
|
||||
|
||||
export type { BreadcrumbProps } from './Breadcrumb';
|
||||
export type { BreadcrumbItemProps } from './BreadcrumbItem';
|
||||
export type { BreadcrumbItemProps, SeparatorType } from './BreadcrumbItem';
|
||||
|
||||
export default Breadcrumb;
|
||||
|
||||
@ -17,6 +17,22 @@ demo:
|
||||
- 当需要告知用户『你在哪里』时；
|
||||
- 当需要向上导航的功能时。
|
||||
|
||||
```jsx
|
||||
// >=5.3.0 可用，推荐的写法 ✅
|
||||
return <Breadcrumb items={[{ title: 'sample' }]} />;
|
||||
|
||||
// <5.3.0 可用，>=5.3.0 时不推荐 🙅🏻♀️
|
||||
return (
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item>sample</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
);
|
||||
|
||||
// 或
|
||||
|
||||
return <Breadcrumb routes={[{ breadcrumbName: 'sample' }]} />;
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
@ -26,6 +42,7 @@ demo:
|
||||
<code src="./demo/separator.tsx">分隔符</code>
|
||||
<code src="./demo/overlay.tsx">带下拉菜单的面包屑</code>
|
||||
<code src="./demo/separator-component.tsx">分隔符</code>
|
||||
<code src="./demo/debug-routes.tsx">Debug Routes</code>
|
||||
|
||||
## API
|
||||
|
||||
@ -35,10 +52,14 @@ demo:
|
||||
| --- | --- | --- | --- | --- |
|
||||
| itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => ReactNode | - | |
|
||||
| params | 路由的参数 | object | - | |
|
||||
| routes | router 的路由栈信息 | [routes\[\]](#routes) | - | |
|
||||
| items | 路由栈信息 | [items\[\]](#ItemType) | - | 5.3.0 |
|
||||
| separator | 分隔符自定义 | ReactNode | `/` | |
|
||||
|
||||
### Breadcrumb.Item
|
||||
### ItemType
|
||||
|
||||
> type ItemType = [RouteItemType](#RouteItemType) | [SeparatorType](#SeparatorType)
|
||||
|
||||
### RouteItemType
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
@ -47,28 +68,22 @@ demo:
|
||||
| href | 链接的目的地 | string | - | |
|
||||
| menu | 菜单配置项 | [MenuProps](/components/menu-cn/#api) | - | 4.24.0 |
|
||||
| onClick | 单击事件 | (e:MouseEvent) => void | - | |
|
||||
| title | 名称 | ReactNode | - | 5.3.0 |
|
||||
|
||||
### Breadcrumb.Separator
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| -------- | -------------- | --------- | ------ | ---- |
|
||||
| children | 要显示的分隔符 | ReactNode | `/` | |
|
||||
|
||||
> 注意：在使用 `Breadcrumb.Separator` 时，其父组件的分隔符必须设置为 `separator=""`，否则会出现父组件默认的分隔符。
|
||||
|
||||
### routes
|
||||
### SeparatorType
|
||||
|
||||
```ts
|
||||
interface Route {
|
||||
path: string;
|
||||
breadcrumbName: string;
|
||||
children: Array<{
|
||||
path: string;
|
||||
breadcrumbName: string;
|
||||
}>;
|
||||
}
|
||||
const item = {
|
||||
type: 'separator', // Must have
|
||||
separator: '/',
|
||||
};
|
||||
```
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --------- | -------------- | ----------- | ------ | ----- |
|
||||
| type | 标记为分隔符 | `separator` | | 5.3.0 |
|
||||
| separator | 要显示的分隔符 | ReactNode | `/` | 5.3.0 |
|
||||
|
||||
### 和 browserHistory 配合
|
||||
|
||||
和 react-router 一起使用时，默认生成的 url 路径是带有 `#` 的，如果和 browserHistory 一起使用的话，你可以使用 `itemRender` 属性定义面包屑链接。
|
||||
@ -76,43 +91,38 @@ interface Route {
|
||||
```jsx
|
||||
import { Link } from 'react-router';
|
||||
|
||||
const routes = [
|
||||
const items = [
|
||||
{
|
||||
path: 'index',
|
||||
breadcrumbName: 'home',
|
||||
title: 'home',
|
||||
},
|
||||
{
|
||||
path: 'first',
|
||||
breadcrumbName: 'first',
|
||||
title: 'first',
|
||||
children: [
|
||||
{
|
||||
path: '/general',
|
||||
breadcrumbName: 'General',
|
||||
title: 'General',
|
||||
},
|
||||
{
|
||||
path: '/layout',
|
||||
breadcrumbName: 'Layout',
|
||||
title: 'Layout',
|
||||
},
|
||||
{
|
||||
path: '/navigation',
|
||||
breadcrumbName: 'Navigation',
|
||||
title: 'Navigation',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'second',
|
||||
breadcrumbName: 'second',
|
||||
title: 'second',
|
||||
},
|
||||
];
|
||||
|
||||
function itemRender(route, params, routes, paths) {
|
||||
const last = routes.indexOf(route) === routes.length - 1;
|
||||
return last ? (
|
||||
<span>{route.breadcrumbName}</span>
|
||||
) : (
|
||||
<Link to={paths.join('/')}>{route.breadcrumbName}</Link>
|
||||
);
|
||||
function itemRender(item, params, items, paths) {
|
||||
const last = items.indexOf(item) === items.length - 1;
|
||||
return last ? <span>{item.title}</span> : <Link to={paths.join('/')}>{item.title}</Link>;
|
||||
}
|
||||
|
||||
return <Breadcrumb itemRender={itemRender} routes={routes} />;
|
||||
return <Breadcrumb itemRender={itemRender} items={items} />;
|
||||
```
|
||||
|
||||
43
components/breadcrumb/useItems.ts
Normal file
43
components/breadcrumb/useItems.ts
Normal file
@ -0,0 +1,43 @@
|
||||
import { useMemo } from 'react';
|
||||
import type { BreadcrumbItemType, BreadcrumbSeparatorType, ItemType, Route } from './Breadcrumb';
|
||||
|
||||
type MergedType = BreadcrumbItemType & {
|
||||
children?: Route['children'];
|
||||
};
|
||||
|
||||
function route2item(route: Route): MergedType {
|
||||
const { breadcrumbName, children, ...rest } = route;
|
||||
|
||||
const clone: MergedType = {
|
||||
title: breadcrumbName,
|
||||
...rest,
|
||||
};
|
||||
|
||||
if (children) {
|
||||
clone.menu = {
|
||||
items: children.map(({ breadcrumbName: itemBreadcrumbName, ...itemProps }) => ({
|
||||
...itemProps,
|
||||
title: itemBreadcrumbName,
|
||||
})),
|
||||
};
|
||||
}
|
||||
|
||||
return clone;
|
||||
}
|
||||
|
||||
export default function useItems(
|
||||
items?: ItemType[],
|
||||
routes?: Route[],
|
||||
): Partial<MergedType & BreadcrumbSeparatorType>[] | null {
|
||||
return useMemo<ItemType[] | null>(() => {
|
||||
if (items) {
|
||||
return items;
|
||||
}
|
||||
|
||||
if (routes) {
|
||||
return routes.map(route2item);
|
||||
}
|
||||
|
||||
return null;
|
||||
}, [items, routes]);
|
||||
}
|
||||
@ -1510,7 +1510,7 @@ exports[`renders ./components/cascader/demo/lazy.tsx extend context correctly 1`
|
||||
|
||||
exports[`renders ./components/cascader/demo/multiple.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear"
|
||||
class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -1655,6 +1655,32 @@ exports[`renders ./components/cascader/demo/multiple.tsx extend context correctl
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -2193,7 +2219,7 @@ exports[`renders ./components/cascader/demo/search.tsx extend context correctly
|
||||
exports[`renders ./components/cascader/demo/showCheckedStrategy.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear"
|
||||
class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -2351,6 +2377,32 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-clear"
|
||||
@ -2381,7 +2433,7 @@ Array [
|
||||
<br />,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear"
|
||||
class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -2539,6 +2591,32 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-clear"
|
||||
@ -3151,7 +3229,7 @@ exports[`renders ./components/cascader/demo/status.tsx extend context correctly
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-cascader ant-select-status-warning ant-select-multiple ant-select-allow-clear"
|
||||
class="ant-select ant-cascader ant-select-status-warning ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
@ -3267,6 +3345,32 @@ exports[`renders ./components/cascader/demo/status.tsx extend context correctly
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -618,7 +618,7 @@ exports[`renders ./components/cascader/demo/lazy.tsx correctly 1`] = `
|
||||
|
||||
exports[`renders ./components/cascader/demo/multiple.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear"
|
||||
class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -661,6 +661,32 @@ exports[`renders ./components/cascader/demo/multiple.tsx correctly 1`] = `
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -935,7 +961,7 @@ exports[`renders ./components/cascader/demo/search.tsx correctly 1`] = `
|
||||
exports[`renders ./components/cascader/demo/showCheckedStrategy.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear"
|
||||
class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -991,6 +1017,32 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-clear"
|
||||
@ -1021,7 +1073,7 @@ Array [
|
||||
<br />,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear"
|
||||
class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -1077,6 +1129,32 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-clear"
|
||||
@ -1353,7 +1431,7 @@ exports[`renders ./components/cascader/demo/status.tsx correctly 1`] = `
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-cascader ant-select-status-warning ant-select-multiple ant-select-allow-clear"
|
||||
class="ant-select ant-cascader ant-select-status-warning ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
@ -1397,6 +1475,32 @@ exports[`renders ./components/cascader/demo/status.tsx correctly 1`] = `
|
||||
Warning multiple
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -866,7 +866,7 @@ exports[`Cascader can be selected in RTL direction 3`] = `
|
||||
|
||||
exports[`Cascader legacy props should support showCheckedStrategy child 1`] = `
|
||||
<div
|
||||
class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-open"
|
||||
class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-open"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
@ -1012,12 +1012,38 @@ exports[`Cascader legacy props should support showCheckedStrategy child 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Cascader legacy props should support showCheckedStrategy parent 1`] = `
|
||||
<div
|
||||
class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-open"
|
||||
class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-open"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
@ -1163,6 +1189,32 @@ exports[`Cascader legacy props should support showCheckedStrategy parent 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
@ -29,8 +29,9 @@ import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
|
||||
import warning from '../_util/warning';
|
||||
|
||||
import useSelectStyle from '../select/style';
|
||||
import useStyle from './style';
|
||||
import useShowArrow from '../select/useShowArrow';
|
||||
import genPurePanel from '../_util/PurePanel';
|
||||
import useStyle from './style';
|
||||
|
||||
// Align the design since we use `rc-select` in root. This help:
|
||||
// - List search content will show all content
|
||||
@ -254,7 +255,7 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
|
||||
);
|
||||
|
||||
// ===================== Icons =====================
|
||||
const mergedShowArrow = showArrow !== undefined ? showArrow : props.loading || !multiple;
|
||||
const mergedShowArrow = useShowArrow(showArrow);
|
||||
const { suffixIcon, removeIcon, clearIcon } = getIcons({
|
||||
...props,
|
||||
hasFeedback,
|
||||
@ -314,7 +315,7 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
|
||||
)}
|
||||
getPopupContainer={getPopupContainer || getContextPopupContainer}
|
||||
ref={ref}
|
||||
showArrow={hasFeedback || showArrow}
|
||||
showArrow={hasFeedback || mergedShowArrow}
|
||||
/>
|
||||
);
|
||||
|
||||
|
||||
@ -935,7 +935,7 @@ Array [
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
|
||||
class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-arrow ant-select-show-search"
|
||||
style="width:70%"
|
||||
>
|
||||
<div
|
||||
@ -1123,6 +1123,32 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1338,7 +1364,7 @@ Array [
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
|
||||
class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-arrow ant-select-show-search"
|
||||
style="width:70%"
|
||||
>
|
||||
<div
|
||||
@ -1526,6 +1552,32 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -19053,7 +19105,7 @@ exports[`renders ./components/form/demo/validate-other.tsx extend context correc
|
||||
>
|
||||
<div
|
||||
aria-required="true"
|
||||
class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
|
||||
class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-arrow ant-select-show-search"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
@ -19179,6 +19231,32 @@ exports[`renders ./components/form/demo/validate-other.tsx extend context correc
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -775,7 +775,7 @@ Array [
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
|
||||
class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-arrow ant-select-show-search"
|
||||
style="width:70%"
|
||||
>
|
||||
<div
|
||||
@ -858,6 +858,32 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1073,7 +1099,7 @@ Array [
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
|
||||
class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-arrow ant-select-show-search"
|
||||
style="width:70%"
|
||||
>
|
||||
<div
|
||||
@ -1156,6 +1182,32 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -8161,7 +8213,7 @@ exports[`renders ./components/form/demo/validate-other.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
aria-required="true"
|
||||
class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
|
||||
class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-arrow ant-select-show-search"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
@ -8208,6 +8260,32 @@ exports[`renders ./components/form/demo/validate-other.tsx correctly 1`] = `
|
||||
Please select favourite colors
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`renders ./components/select/demo/automatic-tokenization.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-select ant-select-multiple ant-select-show-search"
|
||||
class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -375,6 +375,32 @@ exports[`renders ./components/select/demo/automatic-tokenization.tsx extend cont
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -2251,7 +2277,7 @@ exports[`renders ./components/select/demo/debug.tsx extend context correctly 1`]
|
||||
style="margin-right:8px;padding-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-multiple ant-select-show-search"
|
||||
class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
|
||||
style="width:120px"
|
||||
>
|
||||
<div
|
||||
@ -2460,6 +2486,32 @@ exports[`renders ./components/select/demo/debug.tsx extend context correctly 1`]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@ -2490,7 +2542,7 @@ exports[`renders ./components/select/demo/debug.tsx extend context correctly 1`]
|
||||
|
||||
exports[`renders ./components/select/demo/hide-selected.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-select ant-select-multiple ant-select-show-search"
|
||||
class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -2626,6 +2678,32 @@ exports[`renders ./components/select/demo/hide-selected.tsx extend context corre
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -2782,7 +2860,7 @@ exports[`renders ./components/select/demo/multiple.tsx extend context correctly
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-multiple ant-select-allow-clear ant-select-show-search"
|
||||
class="ant-select ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -3289,6 +3367,32 @@ exports[`renders ./components/select/demo/multiple.tsx extend context correctly
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-clear"
|
||||
@ -3321,7 +3425,7 @@ exports[`renders ./components/select/demo/multiple.tsx extend context correctly
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-multiple ant-select-disabled ant-select-show-search"
|
||||
class="ant-select ant-select-multiple ant-select-show-arrow ant-select-disabled ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -3778,6 +3882,32 @@ exports[`renders ./components/select/demo/multiple.tsx extend context correctly
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -4145,7 +4275,7 @@ exports[`renders ./components/select/demo/option-label-center.tsx extend context
|
||||
|
||||
exports[`renders ./components/select/demo/option-label-prop.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-select ant-select-multiple ant-select-show-search"
|
||||
class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -4417,6 +4547,32 @@ exports[`renders ./components/select/demo/option-label-prop.tsx extend context c
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -4661,7 +4817,7 @@ exports[`renders ./components/select/demo/responsive.tsx extend context correctl
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-multiple ant-select-show-search"
|
||||
class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -5180,13 +5336,39 @@ exports[`renders ./components/select/demo/responsive.tsx extend context correctl
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-multiple ant-select-disabled ant-select-show-search"
|
||||
class="ant-select ant-select-multiple ant-select-show-arrow ant-select-disabled ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -5707,6 +5889,32 @@ exports[`renders ./components/select/demo/responsive.tsx extend context correctl
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -6121,7 +6329,7 @@ exports[`renders ./components/select/demo/search-sort.tsx extend context correct
|
||||
|
||||
exports[`renders ./components/select/demo/select-users.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-select ant-select-multiple ant-select-show-search"
|
||||
class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -6179,6 +6387,32 @@ exports[`renders ./components/select/demo/select-users.tsx extend context correc
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -6810,7 +7044,7 @@ Array [
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-multiple ant-select-show-search"
|
||||
class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -7317,13 +7551,39 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-multiple ant-select-show-search"
|
||||
class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -7827,6 +8087,32 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
@ -8391,7 +8677,7 @@ exports[`renders ./components/select/demo/suffix.tsx extend context correctly 1`
|
||||
|
||||
exports[`renders ./components/select/demo/tags.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-select ant-select-multiple ant-select-show-search"
|
||||
class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -8766,5 +9052,31 @@ exports[`renders ./components/select/demo/tags.tsx extend context correctly 1`]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`renders ./components/select/demo/automatic-tokenization.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-select ant-select-multiple ant-select-show-search"
|
||||
class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -43,6 +43,32 @@ exports[`renders ./components/select/demo/automatic-tokenization.tsx correctly 1
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -357,7 +383,7 @@ Array [
|
||||
Items
|
||||
</h4>,
|
||||
<div
|
||||
class="ant-select ant-select-multiple ant-select-show-search"
|
||||
class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -454,6 +480,32 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal"
|
||||
@ -1032,7 +1084,7 @@ exports[`renders ./components/select/demo/debug.tsx correctly 1`] = `
|
||||
style="margin-right:8px;padding-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-multiple ant-select-show-search"
|
||||
class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
|
||||
style="width:120px"
|
||||
>
|
||||
<div
|
||||
@ -1114,6 +1166,32 @@ exports[`renders ./components/select/demo/debug.tsx correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@ -1144,7 +1222,7 @@ exports[`renders ./components/select/demo/debug.tsx correctly 1`] = `
|
||||
|
||||
exports[`renders ./components/select/demo/hide-selected.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-select ant-select-multiple ant-select-show-search"
|
||||
class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -1190,6 +1268,32 @@ exports[`renders ./components/select/demo/hide-selected.tsx correctly 1`] = `
|
||||
Inserted are removed
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -1266,7 +1370,7 @@ exports[`renders ./components/select/demo/multiple.tsx correctly 1`] = `
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-multiple ant-select-allow-clear ant-select-show-search"
|
||||
class="ant-select ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -1389,6 +1493,32 @@ exports[`renders ./components/select/demo/multiple.tsx correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-clear"
|
||||
@ -1421,7 +1551,7 @@ exports[`renders ./components/select/demo/multiple.tsx correctly 1`] = `
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-multiple ant-select-disabled ant-select-show-search"
|
||||
class="ant-select ant-select-multiple ant-select-show-arrow ant-select-disabled ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -1494,6 +1624,32 @@ exports[`renders ./components/select/demo/multiple.tsx correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1663,7 +1819,7 @@ exports[`renders ./components/select/demo/option-label-center.tsx correctly 1`]
|
||||
|
||||
exports[`renders ./components/select/demo/option-label-prop.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-select ant-select-multiple ant-select-show-search"
|
||||
class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -1745,6 +1901,32 @@ exports[`renders ./components/select/demo/option-label-prop.tsx correctly 1`] =
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -1906,7 +2088,7 @@ exports[`renders ./components/select/demo/responsive.tsx correctly 1`] = `
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-multiple ant-select-show-search"
|
||||
class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -1963,13 +2145,39 @@ exports[`renders ./components/select/demo/responsive.tsx correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-multiple ant-select-disabled ant-select-show-search"
|
||||
class="ant-select ant-select-multiple ant-select-show-arrow ant-select-disabled ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -2028,6 +2236,32 @@ exports[`renders ./components/select/demo/responsive.tsx correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -2185,7 +2419,7 @@ exports[`renders ./components/select/demo/search-sort.tsx correctly 1`] = `
|
||||
|
||||
exports[`renders ./components/select/demo/select-users.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-select ant-select-multiple ant-select-show-search"
|
||||
class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -2231,6 +2465,32 @@ exports[`renders ./components/select/demo/select-users.tsx correctly 1`] = `
|
||||
Select users
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -2374,7 +2634,7 @@ Array [
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-multiple ant-select-show-search"
|
||||
class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -2497,13 +2757,39 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-multiple ant-select-show-search"
|
||||
class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -2623,6 +2909,32 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
@ -2902,7 +3214,7 @@ exports[`renders ./components/select/demo/suffix.tsx correctly 1`] = `
|
||||
|
||||
exports[`renders ./components/select/demo/tags.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-select ant-select-multiple ant-select-show-search"
|
||||
class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -2945,5 +3257,31 @@ exports[`renders ./components/select/demo/tags.tsx correctly 1`] = `
|
||||
Tags Mode
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -22,6 +22,7 @@ import { useCompactItemContext } from '../space/Compact';
|
||||
import genPurePanel from '../_util/PurePanel';
|
||||
import warning from '../_util/warning';
|
||||
import useStyle from './style';
|
||||
import useShowArrow from './useShowArrow';
|
||||
|
||||
type RawValue = string | number;
|
||||
|
||||
@ -117,8 +118,7 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
|
||||
}, [props.mode]);
|
||||
|
||||
const isMultiple = mode === 'multiple' || mode === 'tags';
|
||||
const mergedShowArrow =
|
||||
showArrow !== undefined ? showArrow : props.loading || !(isMultiple || mode === 'combobox');
|
||||
const mergedShowArrow = useShowArrow(showArrow);
|
||||
|
||||
// ===================== Form Status =====================
|
||||
const {
|
||||
@ -225,7 +225,7 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
|
||||
className={mergedClassName}
|
||||
getPopupContainer={getPopupContainer || getContextPopupContainer}
|
||||
dropdownClassName={rcSelectRtlDropdownClassName}
|
||||
showArrow={hasFeedback || showArrow}
|
||||
showArrow={hasFeedback || mergedShowArrow}
|
||||
disabled={mergedDisabled}
|
||||
/>,
|
||||
);
|
||||
|
||||
9
components/select/useShowArrow.ts
Normal file
9
components/select/useShowArrow.ts
Normal file
@ -0,0 +1,9 @@
|
||||
/**
|
||||
* Since Select, TreeSelect, Cascader is same Select like component.
|
||||
* We just use same hook to handle this logic.
|
||||
*
|
||||
* If `showArrow` not configured, always show it.
|
||||
*/
|
||||
export default function useShowArrow(showArrow?: boolean) {
|
||||
return showArrow ?? true;
|
||||
}
|
||||
@ -614,7 +614,7 @@ exports[`renders ./components/space/demo/compact.tsx extend context correctly 1`
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-multiple ant-select-allow-clear ant-select-show-search"
|
||||
class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
|
||||
style="width:50%"
|
||||
>
|
||||
<div
|
||||
@ -790,6 +790,32 @@ exports[`renders ./components/space/demo/compact.tsx extend context correctly 1`
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-clear"
|
||||
|
||||
@ -437,7 +437,7 @@ exports[`renders ./components/space/demo/compact.tsx correctly 1`] = `
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-multiple ant-select-allow-clear ant-select-show-search"
|
||||
class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
|
||||
style="width:50%"
|
||||
>
|
||||
<div
|
||||
@ -519,6 +519,32 @@ exports[`renders ./components/space/demo/compact.tsx correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-clear"
|
||||
|
||||
@ -565,7 +565,7 @@ exports[`renders ./components/tree-select/demo/basic.tsx extend context correctl
|
||||
|
||||
exports[`renders ./components/tree-select/demo/checkable.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-select ant-tree-select ant-select-multiple ant-select-show-search"
|
||||
class="ant-select ant-tree-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -798,12 +798,38 @@ exports[`renders ./components/tree-select/demo/checkable.tsx extend context corr
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/tree-select/demo/multiple.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-select ant-tree-select ant-select-multiple ant-select-allow-clear ant-select-show-search"
|
||||
class="ant-select ant-tree-select ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -1131,6 +1157,32 @@ exports[`renders ./components/tree-select/demo/multiple.tsx extend context corre
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -1873,7 +1925,7 @@ exports[`renders ./components/tree-select/demo/status.tsx extend context correct
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-tree-select ant-select-status-warning ant-select-multiple ant-select-show-search"
|
||||
class="ant-select ant-tree-select ant-select-status-warning ant-select-multiple ant-select-show-arrow ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -1975,6 +2027,32 @@ exports[`renders ./components/tree-select/demo/status.tsx extend context correct
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -121,7 +121,7 @@ exports[`renders ./components/tree-select/demo/basic.tsx correctly 1`] = `
|
||||
|
||||
exports[`renders ./components/tree-select/demo/checkable.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-select ant-tree-select ant-select-multiple ant-select-show-search"
|
||||
class="ant-select ant-tree-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -202,12 +202,38 @@ exports[`renders ./components/tree-select/demo/checkable.tsx correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/tree-select/demo/multiple.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-select ant-tree-select ant-select-multiple ant-select-allow-clear ant-select-show-search"
|
||||
class="ant-select ant-tree-select ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -252,6 +278,32 @@ exports[`renders ./components/tree-select/demo/multiple.tsx correctly 1`] = `
|
||||
Please select
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -536,7 +588,7 @@ exports[`renders ./components/tree-select/demo/status.tsx correctly 1`] = `
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-tree-select ant-select-status-warning ant-select-multiple ant-select-show-search"
|
||||
class="ant-select ant-tree-select ant-select-status-warning ant-select-multiple ant-select-show-arrow ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -581,6 +633,32 @@ exports[`renders ./components/tree-select/demo/status.tsx correctly 1`] = `
|
||||
Warning multiple
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -144,7 +144,7 @@ exports[`TreeSelect TreeSelect Custom Icons should \`treeIcon\` work 1`] = `
|
||||
|
||||
exports[`TreeSelect TreeSelect Custom Icons should support customized icons 1`] = `
|
||||
<div
|
||||
class="ant-select ant-tree-select ant-select-multiple ant-select-allow-clear ant-select-show-search"
|
||||
class="ant-select ant-tree-select ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
@ -234,6 +234,32 @@ exports[`TreeSelect TreeSelect Custom Icons should support customized icons 1`]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-clear"
|
||||
|
||||
@ -26,6 +26,7 @@ import { useCompactItemContext } from '../space/Compact';
|
||||
import warning from '../_util/warning';
|
||||
|
||||
import useStyle from './style';
|
||||
import useShowArrow from '../select/useShowArrow';
|
||||
|
||||
type RawValue = string | number;
|
||||
|
||||
@ -138,7 +139,7 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
|
||||
);
|
||||
|
||||
const isMultiple = !!(treeCheckable || multiple);
|
||||
const mergedShowArrow = showArrow !== undefined ? showArrow : props.loading || !isMultiple;
|
||||
const mergedShowArrow = useShowArrow(showArrow);
|
||||
|
||||
// ===================== Form =====================
|
||||
const {
|
||||
@ -239,7 +240,7 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
|
||||
getTransitionDirection(placement),
|
||||
transitionName,
|
||||
)}
|
||||
showArrow={hasFeedback || showArrow}
|
||||
showArrow={hasFeedback || mergedShowArrow}
|
||||
treeExpandAction={treeExpandAction}
|
||||
/>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user