feat: Breadcrumb support data-* and aria-* attributes (#18941)

* add tree-select async demo

* breadcrumb support data against

* lint fix

* add ui test

* update ui test

* update ui test
This commit is contained in:
sosohime 2019-09-23 11:52:29 +08:00 committed by 骗你是小猫咪
parent c9cecde2e8
commit 9f78fd093a
4 changed files with 53 additions and 10 deletions

View File

@ -2,6 +2,7 @@ import * as React from 'react';
import * as PropTypes from 'prop-types'; import * as PropTypes from 'prop-types';
import classNames from 'classnames'; import classNames from 'classnames';
import toArray from 'rc-util/lib/Children/toArray'; import toArray from 'rc-util/lib/Children/toArray';
import omit from 'omit.js';
import BreadcrumbItem from './BreadcrumbItem'; import BreadcrumbItem from './BreadcrumbItem';
import BreadcrumbSeparator from './BreadcrumbSeparator'; import BreadcrumbSeparator from './BreadcrumbSeparator';
import Menu from '../menu'; import Menu from '../menu';
@ -144,6 +145,7 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
className, className,
routes, routes,
children, children,
...restProps
} = this.props; } = this.props;
const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls); const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
if (routes && routes.length > 0) { if (routes && routes.length > 0) {
@ -169,7 +171,11 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
}); });
} }
return ( return (
<div className={classNames(className, prefixCls)} style={style}> <div
className={classNames(className, prefixCls)}
style={style}
{...omit(restProps, ['itemRender', 'params'])}
>
{crumbs} {crumbs}
</div> </div>
); );

View File

@ -102,4 +102,14 @@ describe('Breadcrumb', () => {
const wrapper = render(<Breadcrumb routes={routes} />); const wrapper = render(<Breadcrumb routes={routes} />);
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
it('should support custom attribute', () => {
const wrapper = render(
<Breadcrumb data-custom="custom">
<Breadcrumb.Item data-custom="custom-item">xxx</Breadcrumb.Item>
<Breadcrumb.Item>yyy</Breadcrumb.Item>
</Breadcrumb>,
);
expect(wrapper).toMatchSnapshot();
});
}); });

View File

@ -157,3 +157,36 @@ exports[`Breadcrumb should render a menu 1`] = `
</span> </span>
</div> </div>
`; `;
exports[`Breadcrumb should support custom attribute 1`] = `
<div
class="ant-breadcrumb"
data-custom="custom"
>
<span>
<span
class="ant-breadcrumb-link"
data-custom="custom-item"
>
xxx
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
yyy
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
`;

View File

@ -656,16 +656,10 @@ describe('Menu', () => {
collapsedWidth={0} collapsedWidth={0}
openKeys={['3']} openKeys={['3']}
> >
<Menu.Item key="1"> <Menu.Item key="1">Option 1</Menu.Item>
Option 1 <Menu.Item key="2">Option 2</Menu.Item>
</Menu.Item>
<Menu.Item key="2">
Option 2
</Menu.Item>
<Menu.SubMenu key="3" title="Option 3"> <Menu.SubMenu key="3" title="Option 3">
<Menu.Item key="4"> <Menu.Item key="4">Option 4</Menu.Item>
Option 4
</Menu.Item>
</Menu.SubMenu> </Menu.SubMenu>
</Menu>, </Menu>,
); );