Skip to content

Commit 197a7cd

Browse files
RylanBotRylanBot
authored
fix(List): update ListRef to ListInstanceFunctions (#3883)
1 parent 75cb5fd commit 197a7cd

File tree

8 files changed

+61
-35
lines changed

8 files changed

+61
-35
lines changed

‎packages/components/list/List.tsx‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
1-
import React, { MouseEvent, useImperativeHandle, useMemo, useRef, WheelEvent } from 'react';
1+
import React, { useImperativeHandle, useMemo, useRef, WheelEvent } from 'react';
22
import classNames from 'classnames';
33
import { compact, isString } from 'lodash-es';
4-
import useConfig from '../hooks/useConfig';
5-
import { useLocaleReceiver } from '../locale/LocalReceiver';
64
import forwardRefWithStatics from '../_util/forwardRefWithStatics';
75
import noop from '../_util/noop';
8-
import { TdListProps } from './type';
9-
import { ComponentScrollToElementParams, StyledProps } from '../common';
6+
import parseTNode from '../_util/parseTNode';
7+
import useConfig from '../hooks/useConfig';
8+
import useDefaultProps from '../hooks/useDefaultProps';
109
import Loading from '../loading';
10+
import { useLocaleReceiver } from '../locale/LocalReceiver';
1111
import ListItem from './ListItem';
1212
import ListItemMeta from './ListItemMeta';
1313
import { listDefaultProps } from './defaultProps';
14-
import useDefaultProps from '../hooks/useDefaultProps';
1514
import { useListVirtualScroll } from './hooks/useListVirtualScroll';
16-
import parseTNode from '../_util/parseTNode';
15+
16+
import type { StyledProps } from '../common';
17+
import type { ListInstanceFunctions, TdListProps } from './type';
1718

1819
export interface ListProps extends TdListProps, StyledProps {
1920
/**
@@ -22,15 +23,11 @@ export interface ListProps extends TdListProps, StyledProps {
2223
children?: React.ReactNode;
2324
}
2425

25-
export type ListRef = {
26-
scrollTo: (params: ComponentScrollToElementParams) => void;
27-
};
28-
2926
/**
3027
* 列表组件
3128
*/
3229
const List = forwardRefWithStatics(
33-
(props: ListProps, ref: React.Ref<ListRef>) => {
30+
(props: ListProps, ref: React.Ref<ListInstanceFunctions>) => {
3431
const {
3532
header,
3633
footer,
@@ -61,7 +58,7 @@ const List = forwardRefWithStatics(
6158

6259
const COMPONENT_NAME = `${classPrefix}-list`;
6360

64-
const handleClickLoad = (e: MouseEvent<HTMLDivElement>) => {
61+
const handleClickLoad = (e: React.MouseEvent<HTMLDivElement>) => {
6562
if (asyncLoading === 'load-more') {
6663
onLoadMore({ e });
6764
}

‎packages/components/list/_example/virtual-scroll.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React, { useEffect, useRef, useState } from 'react';
2-
import { List, Space, Button } from 'tdesign-react';
3-
import type { ListRef } from '../List';
2+
import { Button, List, Space } from 'tdesign-react';
3+
import type { ListInstanceFunctions } from 'tdesign-react';
44

55
const { ListItem, ListItemMeta } = List;
66

77
const imageUrl = 'https://tdesign.gtimg.com/site/avatar.jpg';
88

99
const VirtualScroll = () => {
1010
const [data, setData] = useState([]); // 存储列表数据
11-
const listRef = useRef<ListRef>(null);
11+
const listRef = useRef<ListInstanceFunctions>(null);
1212
const handleScroll = () => {
1313
// scroll 属性需要设置 rowHeight 参数
1414
listRef.current?.scrollTo({

‎packages/components/list/list.en-US.md‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,35 +6,45 @@
66

77
name | type | default | description | required
88
-- | -- | -- | -- | --
9-
className | String | - | 类名 | N
10-
style | Object | - | 样式，Typescript：`React.CSSProperties` | N
9+
className | String | - | className of component | N
10+
style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
1111
asyncLoading | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
1212
footer | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
1313
header | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
14-
layout | String | horizontal | options：horizontal/vertical | N
14+
layout | String | horizontal | options: horizontal/vertical | N
1515
scroll | Object | - | lazy load and virtual scroll。Typescript：`TScroll`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
16-
size | String | medium | options：small/medium/large | N
16+
size | String | medium | options: small/medium/large | N
1717
split | Boolean | false | \- | N
1818
stripe | Boolean | false | \- | N
1919
onLoadMore | Function | | Typescript：`(options: { e: MouseEvent }) => void`<br/> | N
2020
onScroll | Function | | Typescript：`(options: { e: Event \| WheelEvent; scrollTop: number; scrollBottom: number }) => void`<br/> | N
2121

22+
### ListInstanceFunctions
23+
24+
name | params | return | description
25+
-- | -- | -- | --
26+
className | String | - | className of component | N
27+
style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
28+
scrollTo | `(scrollToParams: ScrollToElementParams)` | \- | support scrolling to a specific node when virtual scrolling 。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)
29+
30+
2231
### ListItem Props
2332

2433
name | type | default | description | required
2534
-- | -- | -- | -- | --
26-
className | String | - | 类名 | N
27-
style | Object | - | 样式，Typescript：`React.CSSProperties` | N
35+
className | String | - | className of component | N
36+
style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
2837
action | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
2938
children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
3039
content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
3140

41+
3242
### ListItemMeta Props
3343

3444
name | type | default | description | required
3545
-- | -- | -- | -- | --
36-
className | String | - | 类名 | N
37-
style | Object | - | 样式，Typescript：`React.CSSProperties` | N
46+
className | String | - | className of component | N
47+
style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
3848
description | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
3949
image | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
4050
title | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N

‎packages/components/list/list.md‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
:: BASE_DOC ::
22

33
## API
4+
45
### List Props
56

6-
名称 | 类型 | 默认值 | 说明 | 必传
7+
名称 | 类型 | 默认值 | 描述 | 必传
78
-- | -- | -- | -- | --
89
className | String | - | 类名 | N
910
style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
@@ -18,19 +19,29 @@ stripe | Boolean | false | 是否展示斑马纹 | N
1819
onLoadMore | Function | | TS 类型：`(options: { e: MouseEvent }) => void`<br/>点击加载更多时触发 | N
1920
onScroll | Function | | TS 类型：`(options: { e: Event \| WheelEvent; scrollTop: number; scrollBottom: number }) => void`<br/>列表滚动时触发，scrollTop 表示顶部滚动距离，scrollBottom 表示底部滚动距离 | N
2021

22+
### ListInstanceFunctions 组件实例方法
23+
24+
名称 | 参数 | 返回值 | 描述
25+
-- | -- | -- | --
26+
className | String | - | 类名 | N
27+
style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
28+
scrollTo | `(scrollToParams: ScrollToElementParams)` | \- | 虚拟滚动场景下，支持指定滚动到具体的节点。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)
29+
30+
2131
### ListItem Props
2232

23-
名称 | 类型 | 默认值 | 说明 | 必传
33+
名称 | 类型 | 默认值 | 描述 | 必传
2434
-- | -- | -- | -- | --
2535
className | String | - | 类名 | N
2636
style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
2737
action | TNode | - | 操作栏。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
2838
children | TNode | - | 内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
2939
content | TNode | - | 内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
3040

41+
3142
### ListItemMeta Props
3243

33-
名称 | 类型 | 默认值 | 说明 | 必传
44+
名称 | 类型 | 默认值 | 描述 | 必传
3445
-- | -- | -- | -- | --
3546
className | String | - | 类名 | N
3647
style | Object | - | 样式，TS 类型：`React.CSSProperties` | N

‎packages/components/list/type.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
55
* */
66

7-
import { TNode, TScroll } from '../common';
7+
import { TNode, TScroll, ScrollToElementParams } from '../common';
88
import { MouseEvent, WheelEvent } from 'react';
99

1010
export interface TdListProps {
@@ -54,6 +54,14 @@ export interface TdListProps {
5454
onScroll?: (options: { e: Event | WheelEvent<HTMLDivElement>; scrollTop: number; scrollBottom: number }) => void;
5555
}
5656

57+
/** 组件实例方法 */
58+
export interface ListInstanceFunctions {
59+
/**
60+
* 虚拟滚动场景下，支持指定滚动到具体的节点
61+
*/
62+
scrollTo?: (scrollToParams: ScrollToElementParams) => void;
63+
}
64+
5765
export interface TdListItemProps {
5866
/**
5967
* 操作栏

‎packages/components/select/select.en-US.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ defaultPopupVisible | Boolean | - | uncontrolled property | N
3939
prefixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
4040
readonly | Boolean | false | \- | N
4141
reserveKeyword | Boolean | false | \- | N
42-
scroll | Object | - | lazy load and virtual scroll。Typescript：`InfinityScroll`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
42+
scroll | Object | - | lazy load and virtual scroll。Typescript：`TScroll`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
4343
selectInputProps | Object | - | Typescript：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/select/type.ts) | N
4444
showArrow | Boolean | true | \- | N
4545
size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N

‎packages/components/select/select.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,13 @@ optionsLayout | String | vertical | 下拉选项布局方式，有纵向排列
3333
panelBottomContent | TNode | - | 面板内的底部内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
3434
panelTopContent | TNode | - | 面板内的顶部内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
3535
placeholder | String | undefined | 占位符 | N
36-
popupProps | Object | - | 透传给 popup 组件的全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/select/type.ts) | N
36+
popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/select/type.ts) | N
3737
popupVisible | Boolean | - | 是否显示下拉框 | N
3838
defaultPopupVisible | Boolean | - | 是否显示下拉框。非受控属性 | N
3939
prefixIcon | TElement | - | 组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
4040
readonly | Boolean | false | 只读状态，值为真会隐藏输入框，且无法打开下拉框 | N
4141
reserveKeyword | Boolean | false | 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 | N
42-
scroll | Object | - | 懒加载和虚拟滚动。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动，`scroll.threshold` 默认为 `100`。TS 类型：`InfinityScroll`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
42+
scroll | Object | - | 懒加载和虚拟滚动。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动，`scroll.threshold` 默认为 `100`。TS 类型：`TScroll`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
4343
selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/select/type.ts) | N
4444
showArrow | Boolean | true | 是否显示右侧箭头，默认显示 | N
4545
size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N

‎packages/components/select/type.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { TagInputProps } from '../tag-input';
1111
import { TagProps } from '../tag';
1212
import { SelectInputValueChangeContext } from '../select-input';
1313
import { PopupVisibleChangeContext } from '../popup';
14-
import { PlainObject, TNode, TElement, SizeEnum, InfinityScroll } from '../common';
14+
import { PlainObject, TNode, TElement, SizeEnum, TScroll } from '../common';
1515
import { MouseEvent, KeyboardEvent, FocusEvent } from 'react';
1616

1717
export interface TdSelectProps<T extends SelectOption = SelectOption> {
@@ -131,7 +131,7 @@ export interface TdSelectProps<T extends SelectOption = SelectOption> {
131131
*/
132132
placeholder?: string;
133133
/**
134-
* 透传给 popup 组件的全部属性
134+
* 透传 Popup 组件全部属性
135135
*/
136136
popupProps?: PopupProps;
137137
/**
@@ -159,7 +159,7 @@ export interface TdSelectProps<T extends SelectOption = SelectOption> {
159159
/**
160160
* 懒加载和虚拟滚动。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动，`scroll.threshold` 默认为 `100`
161161
*/
162-
scroll?: InfinityScroll;
162+
scroll?: TScroll;
163163
/**
164164
* 透传 SelectInput 筛选器输入框组件的全部属性
165165
*/
@@ -212,7 +212,7 @@ export interface TdSelectProps<T extends SelectOption = SelectOption> {
212212
*/
213213
valueDisplay?: string | TNode<{ value: SelectValue; onClose: (index: number) => void; displayValue?: SelectValue }>;
214214
/**
215-
* 用于控制选中值的类型。假设数据选项为：`[{ label: '姓名', value: 'name' }]`，value 表示值仅返回数据选项中的 value， object 表示值返回全部数据。
215+
* 用于控制选中值的类型。假设数据选项为：`[{ label: '姓名', value: 'name' }]`，value 表示值仅返回数据选项中的 value， object 表示值返回全部数据
216216
* @default value
217217
*/
218218
valueType?: 'value' | 'object';

0 commit comments

Comments
 (0)