Skip to content

Commit

Permalink
refactor(Breadcrumb): Upgrade tests and docs, convert to TypeScript
Browse files Browse the repository at this point in the history
  • Loading branch information
@luolin-ck @eternalsky
luolin-ck authored and eternalsky committed Aug 6, 2024
1 parent c197dbf commit 997721c
Show file tree
Hide file tree
Showing 10 changed files with 263 additions and 258 deletions.
18 changes: 12 additions & 6 deletions components/breadcrumb/__docs__/adaptor/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,14 @@
import React from 'react';
import { Breadcrumb } from '@alifd/next';
import type { BreadcrumbProps } from '@alifd/next/types/breadcrumb';
import { Types, parseData } from '@alifd/adaptor-helper';

const _propsValue = ({ ellipsis, data, ...others }) => {
interface adaptorProps extends BreadcrumbProps {
ellipsis: boolean;
data?: { icon: boolean; default: string };
}

const _propsValue = ({ ellipsis, data, ...others }: adaptorProps) => {
const props = ellipsis ? { maxNode: 3 } : {};
return {
...props,
Expand All @@ -26,12 +32,12 @@ export default {
},
}),
propsValue: _propsValue,
adaptor: ({ ellipsis, data, ...others }) => {
const props = _propsValue({ ellipsis, ...others });
const list = parseData(data).filter(it => it.type === 'node');
adaptor: ({ ellipsis, data, ...others }: adaptorProps) => {
const props: BreadcrumbProps = _propsValue({ ellipsis, ...others });
const list = parseData(data).filter((it: { type: string }) => it.type === 'node');
return (
<Breadcrumb {...props}>
{list.map((item, index) => (
{list.map((item: { value: string }, index: number) => (
<Breadcrumb.Item style={{ overflow: 'visible' }} key={`item_${index}`}>
{item.value}
</Breadcrumb.Item>
Expand All @@ -47,7 +53,7 @@ export default {
default: 'no',
},
],
transform: (props, { ellipsis }) => {
transform: (props: BreadcrumbProps, { ellipsis }: { ellipsis: 'yes' | 'no' }) => {
return {
...props,
ellipsis: ellipsis === 'yes',
Expand Down
2 changes: 1 addition & 1 deletion components/breadcrumb/__docs__/demo/custom-item/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { Breadcrumb } from '@alifd/next';
import { HashRouter, Route, Switch, Link, withRouter } from 'react-router-dom';
import { HashRouter, Route, Switch, Link } from 'react-router-dom';

ReactDOM.render(
<HashRouter>
Expand Down
33 changes: 19 additions & 14 deletions components/breadcrumb/__docs__/index.en-us.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,21 +17,26 @@ It is used to inform the user of the current position and the position of the cu

### Breadcrumb

| Param | Description | Type | Default Value |
| --------- | -------------------------- | --------- | ------------------------------ |
| children | Children components, hsould be an Breadcrumb.Item | custom | - |
| maxNode | The maximum number of breadcrumbs is displayed and the excess is hidden, can set auto compute maximum number | Number | 100, 'auto' |
| separator | Separator, can be text or Icon | ReactNode | &lt;Icon type="arrow-right" /> |
| component | Set Element type | String/Function | 'nav' |

| Param | Description | Type | Default Value | Required | Supported Version |
| --------------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | ------------- | -------- | ----------------- |
| children | Children components, hsould be an Breadcrumb.Item | Array\<React.ReactNode> \| React.ReactNode | - | | - |
| maxNode | The maximum number of breadcrumbs is displayed and the excess is hidden, can set auto compute maximum number | number \| 'auto' | 100 | | - |
| showHiddenItems | When the hidden items are exceeded, is it possible to click the ellipsis to display the menu (including hidden items) | boolean | false | | 1.23 |
| popupContainer | The container node that the popup mounts (meaningful only when showHiddenItems is true) | DropdownProps['container'] | - | | 1.23 |
| followTrigger | Whether to scroll with the trigger (meaningful only when showHiddenItems is true) | boolean | - | | 1.23 |
| popupProps | The attributes added to the popup (meaningful only when showHiddenItems is true) | PopupProps | - | | 1.23 |
| separator | Separator, can be text or Icon | string \| React.ReactNode | - | | - |
| component | Set Element type | string \| (() => void) | 'nav' | | - |

### Breadcrumb.Item

| Param | Description | Type | Default Value |
| ---- | -------------------------------------------- | ------ | --- |
| link | The breadcrumb item link, if this property is set, the node is `<a />`, otherwise it is `<span />` | String | - |
| onClick | Click event | Function (event: MouseEvent) => void
| Param | Description | Type | Default Value | Required |
| ------- | -------------------------------------------------------------------------------------------------- | ------------------------------------- | ------------- | -------- |
| link | The breadcrumb item link, if this property is set, the node is `<a />`, otherwise it is `<span />` | string | - | |
| onClick | Click event<br/><br/>**signature**:<br/>**params**:<br/>_e_: e | React.MouseEventHandler\<HTMLElement> | - | |

## ARIA and KeyBoard

| KeyBoard | Descripiton |
| :---------- | :------------------------------ |
| Tab | switch to next item |
| KeyBoard | Descripiton |
| :------- | :------------------ |
| Tab | switch to next item |
34 changes: 17 additions & 17 deletions components/breadcrumb/__docs__/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,26 +18,26 @@

### Breadcrumb

| 参数 | 说明 | 类型 | 默认值 | 版本支持 |
| --------------- | ------------------------------------------- | ---------------- | ----- | ---- |
| children | 面包屑子节点，需传入 Breadcrumb.Item | custom | - | |
| maxNode | 面包屑最多显示个数，超出部分会被隐藏, 设置为 auto 会自动根据父元素的宽度适配。 | Number/Enum | 100 | |
| showHiddenItems | 当超过的项被隐藏时，是否可通过点击省略号展示菜单（包含被隐藏的项） | Boolean | false | 1.23 |
| popupContainer | 弹层挂载的容器节点（在showHiddenItems为true时才有意义） | any | - | 1.23 |
| followTrigger | 是否跟随trigger滚动（在showHiddenItems为true时才有意义） | Boolean | - | 1.23 |
| popupProps | 添加到弹层上的属性（在showHiddenItems为true时才有意义） | Object | - | 1.23 |
| separator | 分隔符，可以是文本或 Icon | ReactNode/String | - | |
| component | 设置标签类型 | String/Function | 'nav' | |
| 参数 | 说明 | 类型 | 默认值 | 是否必填 | 支持版本 |
| --------------- | ------------------------------------------------------------------ | ------------------------------------------ | ------ | -------- | -------- |
| children | 面包屑子节点，需传入 Breadcrumb.Item | Array\<React.ReactNode> \| React.ReactNode | - | | - |
| maxNode | 面包屑最多显示个数，超出部分会被隐藏 | number \| 'auto' | 100 | | - |
| showHiddenItems | 当超过的项被隐藏时，是否可通过点击省略号展示菜单（包含被隐藏的项） | boolean | false | | 1.23 |
| popupContainer | 弹层挂载的容器节点（在showHiddenItems为true时才有意义） | DropdownProps['container'] | - | | 1.23 |
| followTrigger | 是否跟随trigger滚动（在showHiddenItems为true时才有意义） | boolean | - | | 1.23 |
| popupProps | 添加到弹层上的属性（在showHiddenItems为true时才有意义） | PopupProps | - | | 1.23 |
| separator | 分隔符，可以是文本或 Icon | string \| React.ReactNode | - | | - |
| component | 设置标签类型 | string \| (() => void) | 'nav' | | - |

### Breadcrumb.Item

| 参数 | 说明 | 类型 | 默认值 |
| ------- | --------------------------------------------------------------------------------------------------------------- | -------- | --- |
| link | 面包屑节点链接，如果设置这个属性，则该节点为`<a />` ，否则是`<span />` | String | - |
| onClick | 元素点击事件<br/><br/>**签名**:<br/>Function(e: MouseEvent) => void<br/>**参数**:<br/>_e_: {MouseEvent} Click Mouse Event | Function | - |
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
| ------- | ------------------------------------------------------------------------ | ------------------------------------- | ------ | -------- |
| link | 面包屑节点链接，如果设置这个属性，则该节点为`<a />` ，否则是`<span />` | string | - | |
| onClick | 元素点击事件<br/><br/>**签名**:<br/>**参数**:<br/>_e_: Click Mouse Event | React.MouseEventHandler\<HTMLElement> | - | |

## 无障碍键盘操作指南

| 按键 | 说明 |
| :-- | :----- |
| Tab | 切换到下一项 |
| 按键 | 说明 |
| :--- | :----------- |
| Tab | 切换到下一项 |
23 changes: 20 additions & 3 deletions components/breadcrumb/__docs__/theme/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import '../../../demo-helper/style';
import { Demo, DemoGroup, initDemo } from '../../../demo-helper';
import '../../style';
Expand All @@ -7,6 +9,18 @@ import ConfigProvider from '../../../config-provider';
import zhCN from '../../../locale/zh-cn';
import enUS from '../../../locale/en-us';

type DemoValue =
| {
ellipsis?: {
label: string;
value: string;
enum: { label: string; value: string }[];
};
valueName?: string;
trigger?: string;
}
| undefined;

// import demo helper

// import component
Expand Down Expand Up @@ -37,7 +51,9 @@ const demo = {
},
};
/* eslint-disable */
class FunctionDemo extends React.Component {
class FunctionDemo extends React.Component<{
i18n: { texts: string[]; results: string; keyword: string };
}> {
field = new Field(this, {
values: {
demo: demo,
Expand All @@ -46,15 +62,16 @@ class FunctionDemo extends React.Component {
render() {
const { texts, results, keyword } = this.props.i18n;
const { init, getValue } = this.field;
const maxNode = getValue('demo').ellipsis.value === 'normal' ? {} : { maxNode: 4 };
const demoValue: DemoValue = getValue('demo');
const maxNode = demoValue?.ellipsis?.value === 'normal' ? {} : { maxNode: 4 };
return (
<div className="demo-container">
<Demo
title="Breadcrumb"
{...init('demo', {
valueName: 'demoFunction',
trigger: 'onFunctionChange',
})}
title="Breadcrumb"
>
<Demo title="Basic">
<DemoGroup label="Normal">
Expand Down
31 changes: 5 additions & 26 deletions components/breadcrumb/__tests__/a11y-spec.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,39 @@
import React from 'react';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Breadcrumb from '../index';
import '../style';
import { unmount, testReact } from '../../util/__tests__/legacy/a11y/validate';

Enzyme.configure({ adapter: new Adapter() });
import { testReact } from '../../util/__tests__/a11y/validate';

/* eslint-disable no-undef, react/jsx-filename-extension */
describe('Breadcrumb A11y', () => {
let wrapper;

afterEach(() => {
if (wrapper) {
wrapper.unmount();
wrapper = null;
}
unmount();
});

it('should not have any violations when empty', async () => {
wrapper = await testReact(<Breadcrumb />);
return wrapper;
await testReact(<Breadcrumb />);
});

it('should not have any violations for breadcrumb items', async () => {
wrapper = await testReact(
await testReact(
<Breadcrumb>
<Breadcrumb.Item link="javascript:void(0);">Home</Breadcrumb.Item>
<Breadcrumb.Item>
T-shirts&nbsp; <b>78,999</b> Results
</Breadcrumb.Item>
</Breadcrumb>
);
return wrapper;
});

it('should not have any violations for max node limit', async () => {
wrapper = await testReact(
await testReact(
<Breadcrumb maxNode={2}>
<Breadcrumb.Item>1</Breadcrumb.Item>
<Breadcrumb.Item>2</Breadcrumb.Item>
<Breadcrumb.Item>3</Breadcrumb.Item>
</Breadcrumb>
);
return wrapper;
});

it('should not have any violations for separator', async () => {
wrapper = await testReact(
await testReact(
<Breadcrumb separator="/">
<Breadcrumb.Item>1</Breadcrumb.Item>
<Breadcrumb.Item>2</Breadcrumb.Item>
<Breadcrumb.Item>3</Breadcrumb.Item>
</Breadcrumb>
);
return wrapper;
});
});
Loading

0 comments on commit 997721c

Please sign in to comment.