Skip to content

Commit

Permalink
fix(Breadcrumb): fix comment issues
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 997721c commit 03873e7
Show file tree
Hide file tree
Showing 6 changed files with 52 additions and 62 deletions.
20 changes: 10 additions & 10 deletions components/breadcrumb/__docs__/index.en-us.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,16 @@ It is used to inform the user of the current position and the position of the cu

### Breadcrumb

| 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' | | - |
| Param | Description | Type | Default Value | Required | Supported Version |
| --------------- | --------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | ------------- | -------- | ----------------- |
| children | Children components, should be an Breadcrumb.Item | \| Array\<React.ReactElement\<ItemProps> \| boolean \| null><br/> \| React.ReactElement\<ItemProps> | - | | - |
| 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) | DropdownProps | - | | 1.23 |
| separator | Separator, can be text or Icon | string \| React.ReactNode | - | | - |
| component | Set Element type | React.ComponentType\<BreadcrumbProps> \| string | 'nav' | | - |

### Breadcrumb.Item

Expand Down
20 changes: 10 additions & 10 deletions components/breadcrumb/__docs__/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,16 @@

### Breadcrumb

| 参数 | 说明 | 类型 | 默认值 | 是否必填 | 支持版本 |
| --------------- | ------------------------------------------------------------------ | ------------------------------------------ | ------ | -------- | -------- |
| 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' | | - |
| 参数 | 说明 | 类型 | 默认值 | 是否必填 | 支持版本 |
| --------------- | ------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------- | ------ | -------- | -------- |
| children | 面包屑子节点，需传入 Breadcrumb.Item | \| Array\<React.ReactElement\<ItemProps> \| boolean \| null><br/> \| React.ReactElement\<ItemProps> | - | | - |
| 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时才有意义） | DropdownProps | - | | 1.23 |
| separator | 分隔符，可以是文本或 Icon | string \| React.ReactNode | - | | - |
| component | 设置标签类型 | React.ComponentType\<BreadcrumbProps> \| string | 'nav' | | - |

### Breadcrumb.Item

Expand Down
1 change: 0 additions & 1 deletion components/breadcrumb/__tests__/a11y-spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import Breadcrumb from '../index';
import '../style';
import { testReact } from '../../util/__tests__/a11y/validate';

/* eslint-disable no-undef, react/jsx-filename-extension */
describe('Breadcrumb A11y', () => {
it('should not have any violations when empty', async () => {
await testReact(<Breadcrumb />);
Expand Down
51 changes: 23 additions & 28 deletions components/breadcrumb/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,31 @@
import React, { Component, Children } from 'react';
import React, { type ReactNode, type ReactElement, Component, Children } from 'react';
import PropTypes from 'prop-types';
import { polyfill } from 'react-lifecycles-compat';
import Icon from '../icon';
import ConfigProvider from '../config-provider';
import Dropdown, { type DropdownProps } from '../dropdown';
import Dropdown from '../dropdown';
import Menu from '../menu';
import Item from './item';
import { events } from '../util';
import type { BreadcrumbProps } from './types';

export type { BreadcrumbProps } from './types';
export type { BreadcrumbProps, ItemProps } from './types';

interface Child {
type: {
_typeMark: string;
};
}

interface BreadcrumbState {
maxNode: number;
prevMaxNode?: BreadcrumbProps['maxNode'];
}

/**
* Breadcrumb
*/
class Breadcrumb extends Component<
BreadcrumbProps,
{
maxNode: BreadcrumbProps['maxNode'];
prevMaxNode?: BreadcrumbProps['maxNode'];
}
> {
class Breadcrumb extends Component<BreadcrumbProps, BreadcrumbState> {
static Item = Item;

static propTypes = {
Expand Down Expand Up @@ -68,14 +67,11 @@ class Breadcrumb extends Component<
constructor(props: BreadcrumbProps) {
super(props);
this.state = {
maxNode: props.maxNode === 'auto' ? 100 : props.maxNode,
maxNode: props.maxNode === 'auto' ? 100 : props.maxNode!,
};
}

static getDerivedStateFromProps(
props: { maxNode: BreadcrumbProps['maxNode'] },
state: { prevMaxNode: BreadcrumbProps['maxNode'] }
) {
static getDerivedStateFromProps(props: BreadcrumbProps, state: BreadcrumbState) {
if (state.prevMaxNode === props.maxNode) {
return {};
}
Expand Down Expand Up @@ -133,10 +129,10 @@ class Breadcrumb extends Component<
this.breadcrumbEl = ref;
};

renderEllipsisNodeWithMenu(children: React.ReactNode, breakpointer: number) {
renderEllipsisNodeWithMenu(children: ReactNode, breakpointer: number) {
// 拿到被隐藏的项
const hiddenItems: React.ReactNode[] = [];
Children.forEach(children, (item: React.ReactElement, i) => {
const hiddenItems: ReactNode[] = [];
Children.forEach(children, (item: ReactElement, i) => {
const { link, children: itemChildren, onClick } = item.props;
if (i > 0 && i <= breakpointer) {
hiddenItems.push(
Expand All @@ -152,7 +148,7 @@ class Breadcrumb extends Component<
return (
<Dropdown
trigger={<span>...</span>}
{...(popupProps as DropdownProps)}
{...popupProps}
container={popupContainer}
followTrigger={followTrigger}
>
Expand All @@ -179,16 +175,16 @@ class Breadcrumb extends Component<
<Icon type="arrow-right" className={`${prefix}breadcrumb-icon-sep`} />
);

const maxNode = this.state.maxNode as number;
const maxNode = this.state.maxNode;

let items;
const length: number = Children.count(children);
const length = Children.count(children);

if (maxNode > 1 && length > maxNode) {
const breakpointer = length - maxNode + 1;
items = [];

Children.forEach(children, (item: React.ReactElement, i) => {
Children.forEach(children, (item: ReactElement, i) => {
const ariaProps: Record<string, string> = {};

// 增加空值判断
Expand Down Expand Up @@ -231,7 +227,7 @@ class Breadcrumb extends Component<
}
});
} else {
items = Children.map(children, (item: React.ReactElement, i) => {
items = Children.map(children, (item: ReactElement, i) => {
const ariaProps: Record<string, string> = {};
// 增加空值判断
if (!item) {
Expand All @@ -255,11 +251,10 @@ class Breadcrumb extends Component<
others.dir = 'rtl';
}

const BreadcrumbComponent = component as unknown as React.FC<BreadcrumbProps>;
const BreadcrumbComponent = component!;

if ('maxNode' in others) {
delete others.maxNode;
}
// @ts-expect-error 属性 maxNode 不存在于类型 others 上
delete others.maxNode;

return (
<BreadcrumbComponent
Expand All @@ -281,7 +276,7 @@ class Breadcrumb extends Component<
ref={this.saveBreadcrumbRef}
className={`${prefix}breadcrumb`}
>
{Children.map(children, (item: React.ReactElement, i) => {
{Children.map(children, (item: ReactElement, i) => {
return React.cloneElement(item, {
separator,
prefix,
Expand Down
4 changes: 2 additions & 2 deletions components/breadcrumb/item.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { Component } from 'react';
import React, { type ReactNode, Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import ConfigProvider from '../config-provider';
Expand Down Expand Up @@ -26,7 +26,7 @@ class Item extends Component<ItemProps> {
static _typeMark = 'breadcrumb_item';

// stateless separator component
static Separator({ prefix, children }: { prefix?: string; children: React.ReactNode }) {
static Separator({ prefix, children }: { prefix?: string; children: ReactNode }) {
return <span className={`${prefix}breadcrumb-separator`}>{children}</span>;
}

Expand Down
18 changes: 7 additions & 11 deletions components/breadcrumb/types.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import React from 'react';
import type Item from './item';
import type { PopupProps } from '../overlay';
import type React from 'react';
import type { DropdownProps } from '../dropdown';
import type { CommonProps } from '../util';

Expand Down Expand Up @@ -39,9 +37,11 @@ export interface ItemProps extends React.HTMLAttributes<HTMLElement>, CommonProp
export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
/**
* 面包屑子节点，需传入 Breadcrumb.Item
* @en Children components, hsould be an Breadcrumb.Item
* @en Children components, should be an Breadcrumb.Item
*/
children?: Array<React.ReactNode> | React.ReactNode;
children?:
| Array<React.ReactElement<ItemProps> | boolean | null>
| React.ReactElement<ItemProps>;
/**
* 面包屑最多显示个数，超出部分会被隐藏
* @en The maximum number of breadcrumbs is displayed and the excess is hidden, can set auto compute maximum number
Expand Down Expand Up @@ -72,7 +72,7 @@ export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement>, Comm
* @en The attributes added to the popup (meaningful only when showHiddenItems is true)
* @version 1.23
*/
popupProps?: PopupProps;
popupProps?: DropdownProps;
/**
* 分隔符，可以是文本或 Icon
* @en Separator, can be text or Icon
Expand All @@ -83,9 +83,5 @@ export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement>, Comm
* @en Set Element type
* @defaultValue 'nav'
*/
component?: string | (() => void);
}

export default class Breadcrumb extends React.Component<BreadcrumbProps> {
static Item: typeof Item;
component?: React.ComponentType<BreadcrumbProps> | string;
}

0 comments on commit 03873e7

Please sign in to comment.