From 03873e720100300470f758057d7eb62cbbdf95cd Mon Sep 17 00:00:00 2001 From: luolin-ck Date: Thu, 25 Jul 2024 11:43:23 +0800 Subject: [PATCH] fix(Breadcrumb): fix comment issues --- components/breadcrumb/__docs__/index.en-us.md | 20 ++++---- components/breadcrumb/__docs__/index.md | 20 ++++---- components/breadcrumb/__tests__/a11y-spec.tsx | 1 - components/breadcrumb/index.tsx | 51 +++++++++---------- components/breadcrumb/item.tsx | 4 +- components/breadcrumb/types.ts | 18 +++---- 6 files changed, 52 insertions(+), 62 deletions(-) diff --git a/components/breadcrumb/__docs__/index.en-us.md b/components/breadcrumb/__docs__/index.en-us.md index aaf2bb3fa7..b6ff5c12e8 100644 --- a/components/breadcrumb/__docs__/index.en-us.md +++ b/components/breadcrumb/__docs__/index.en-us.md @@ -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 | - | | - | -| 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\ \| boolean \| null>
\| React.ReactElement\ | - | | - | +| 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\ \| string | 'nav' | | - | ### Breadcrumb.Item diff --git a/components/breadcrumb/__docs__/index.md b/components/breadcrumb/__docs__/index.md index 1e818f9a3c..ac1d36a41b 100644 --- a/components/breadcrumb/__docs__/index.md +++ b/components/breadcrumb/__docs__/index.md @@ -18,16 +18,16 @@ ### Breadcrumb -| 参数 | 说明 | 类型 | 默认值 | 是否必填 | 支持版本 | -| --------------- | ------------------------------------------------------------------ | ------------------------------------------ | ------ | -------- | -------- | -| children | 面包屑子节点，需传入 Breadcrumb.Item | Array\ \| 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\ \| boolean \| null>
\| React.ReactElement\ | - | | - | +| 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\ \| string | 'nav' | | - | ### Breadcrumb.Item diff --git a/components/breadcrumb/__tests__/a11y-spec.tsx b/components/breadcrumb/__tests__/a11y-spec.tsx index 0ad3ef9cf1..a4ecf9ae4d 100644 --- a/components/breadcrumb/__tests__/a11y-spec.tsx +++ b/components/breadcrumb/__tests__/a11y-spec.tsx @@ -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(); diff --git a/components/breadcrumb/index.tsx b/components/breadcrumb/index.tsx index 46136b8b46..5c7393fd9d 100644 --- a/components/breadcrumb/index.tsx +++ b/components/breadcrumb/index.tsx @@ -1,15 +1,15 @@ -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: { @@ -17,16 +17,15 @@ interface Child { }; } +interface BreadcrumbState { + maxNode: number; + prevMaxNode?: BreadcrumbProps['maxNode']; +} + /** * Breadcrumb */ -class Breadcrumb extends Component< - BreadcrumbProps, - { - maxNode: BreadcrumbProps['maxNode']; - prevMaxNode?: BreadcrumbProps['maxNode']; - } -> { +class Breadcrumb extends Component { static Item = Item; static propTypes = { @@ -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 {}; } @@ -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( @@ -152,7 +148,7 @@ class Breadcrumb extends Component< return ( ...} - {...(popupProps as DropdownProps)} + {...popupProps} container={popupContainer} followTrigger={followTrigger} > @@ -179,16 +175,16 @@ class Breadcrumb extends Component< ); - 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 = {}; // 增加空值判断 @@ -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 = {}; // 增加空值判断 if (!item) { @@ -255,11 +251,10 @@ class Breadcrumb extends Component< others.dir = 'rtl'; } - const BreadcrumbComponent = component as unknown as React.FC; + const BreadcrumbComponent = component!; - if ('maxNode' in others) { - delete others.maxNode; - } + // @ts-expect-error 属性 maxNode 不存在于类型 others 上 + delete others.maxNode; return ( - {Children.map(children, (item: React.ReactElement, i) => { + {Children.map(children, (item: ReactElement, i) => { return React.cloneElement(item, { separator, prefix, diff --git a/components/breadcrumb/item.tsx b/components/breadcrumb/item.tsx index 2a5336be16..7c29361d0b 100644 --- a/components/breadcrumb/item.tsx +++ b/components/breadcrumb/item.tsx @@ -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'; @@ -26,7 +26,7 @@ class Item extends Component { 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 {children}; } diff --git a/components/breadcrumb/types.ts b/components/breadcrumb/types.ts index da94d04a73..3bc9538712 100644 --- a/components/breadcrumb/types.ts +++ b/components/breadcrumb/types.ts @@ -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'; @@ -39,9 +37,11 @@ export interface ItemProps extends React.HTMLAttributes, CommonProp export interface BreadcrumbProps extends React.HTMLAttributes, CommonProps { /** * 面包屑子节点，需传入 Breadcrumb.Item - * @en Children components, hsould be an Breadcrumb.Item + * @en Children components, should be an Breadcrumb.Item */ - children?: Array | React.ReactNode; + children?: + | Array | boolean | null> + | React.ReactElement; /** * 面包屑最多显示个数，超出部分会被隐藏 * @en The maximum number of breadcrumbs is displayed and the excess is hidden, can set auto compute maximum number @@ -72,7 +72,7 @@ export interface BreadcrumbProps extends React.HTMLAttributes, 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 @@ -83,9 +83,5 @@ export interface BreadcrumbProps extends React.HTMLAttributes, Comm * @en Set Element type * @defaultValue 'nav' */ - component?: string | (() => void); -} - -export default class Breadcrumb extends React.Component { - static Item: typeof Item; + component?: React.ComponentType | string; }