From 02ca96971153455f11eb5abff83e711b87de6279 Mon Sep 17 00:00:00 2001 From: Liron Lavy Date: Tue, 7 Sep 2021 07:05:59 +0300 Subject: [PATCH] fix: List rowKey prop type (#32033) --- components/list/index.en-US.md | 36 +++++++++++++++++----------------- components/list/index.tsx | 18 ++++++++--------- components/list/index.zh-CN.md | 36 +++++++++++++++++----------------- 3 files changed, 45 insertions(+), 45 deletions(-) diff --git a/components/list/index.en-US.md b/components/list/index.en-US.md index c6562c447f..2ed85b5b9c 100644 --- a/components/list/index.en-US.md +++ b/components/list/index.en-US.md @@ -29,7 +29,7 @@ A list can be used to display content related to a single subject. The content c | locale | The i18n text including empty text | object | {emptyText: `No Data`} | | | pagination | Pagination [config](/components/pagination/), hide it by setting it to false | boolean \| object | false | | | renderItem | Customize list item when using `dataSource` | (item) => ReactNode | - | | -| rowKey | Item's unique key, could be a string or function that returns a string | string \| Function(record): string | `key` | | +| rowKey | Item's unique value, could be an Item's key which holds a unique value of type `React.Key` or function that receives Item and returns a `React.Key` | `keyof` T \| (item: T) => `React.Key` | `"key"` | | | size | Size of list | `default` \| `large` \| `small` | `default` | | | split | Toggles rendering of the split under the list item | boolean | true | | @@ -37,24 +37,24 @@ A list can be used to display content related to a single subject. The content c Properties for pagination. -| Property | Description | Type | Default | -| --- | --- | --- | --- | +| Property | Description | Type | Default | +| -------- | ---------------------------------------- | --------------------------- | -------- | | position | The specify the position of `Pagination` | `top` \| `bottom` \| `both` | `bottom` | More about pagination, please check [`Pagination`](/components/pagination/). ### List grid props -| Property | Description | Type | Default | Version | -| --- | --- | --- | --- | --- | -| column | The column of grid | number | - | | -| gutter | The spacing between grid | number | 0 | | -| xs | `<576px` column of grid | number | - | | -| sm | `≥576px` column of grid | number | - | | -| md | `≥768px` column of grid | number | - | | -| lg | `≥992px` column of grid | number | - | | -| xl | `≥1200px` column of grid | number | - | | -| xxl | `≥1600px` column of grid | number | - | | +| Property | Description | Type | Default | Version | +| -------- | ------------------------ | ------ | ------- | ------- | +| column | The column of grid | number | - | | +| gutter | The spacing between grid | number | 0 | | +| xs | `<576px` column of grid | number | - | | +| sm | `≥576px` column of grid | number | - | | +| md | `≥768px` column of grid | number | - | | +| lg | `≥992px` column of grid | number | - | | +| xl | `≥1200px` column of grid | number | - | | +| xxl | `≥1600px` column of grid | number | - | | ### List.Item @@ -65,8 +65,8 @@ More about pagination, please check [`Pagination`](/components/pagination/). ### List.Item.Meta -| Property | Description | Type | Default | Version | -| --- | --- | --- | --- | --- | -| avatar | The avatar of list item | ReactNode | - | | -| description | The description of list item | ReactNode | - | | -| title | The title of list item | ReactNode | - | | +| Property | Description | Type | Default | Version | +| ----------- | ---------------------------- | --------- | ------- | ------- | +| avatar | The avatar of list item | ReactNode | - | | +| description | The description of list item | ReactNode | - | | +| title | The title of list item | ReactNode | - | | diff --git a/components/list/index.tsx b/components/list/index.tsx index 457f97a3de..717dd58a71 100644 --- a/components/list/index.tsx +++ b/components/list/index.tsx @@ -43,7 +43,7 @@ export interface ListProps { loadMore?: React.ReactNode; pagination?: PaginationConfig | false; prefixCls?: string; - rowKey?: ((item: T) => string) | string; + rowKey?: ((item: T) => React.Key) | keyof T; renderItem?: (item: T, index: number) => React.ReactNode; size?: ListSize; split?: boolean; @@ -99,7 +99,7 @@ function List({ total: 0, }; - const keys: { [key: string]: string } = {}; + const listItemsKeys: { [index: number]: React.Key } = {}; const triggerPaginationEvent = (eventName: string) => (page: number, pageSize: number) => { setPaginationCurrent(page); @@ -113,24 +113,24 @@ function List({ const onPaginationShowSizeChange = triggerPaginationEvent('onShowSizeChange'); - const renderInnerItem = (item: any, index: number) => { + const renderInnerItem = (item: T, index: number) => { if (!renderItem) return null; let key; if (typeof rowKey === 'function') { key = rowKey(item); - } else if (typeof rowKey === 'string') { + } else if (rowKey) { key = item[rowKey]; } else { - key = item.key; + key = (item as any).key; } if (!key) { key = `list-item-${index}`; } - keys[index] = key; + listItemsKeys[index] = key; return renderItem(item, index); }; @@ -240,9 +240,9 @@ function List({ let childrenContent = isLoading &&
; if (splitDataSource.length > 0) { - const items = splitDataSource.map((item: any, index: number) => renderInnerItem(item, index)); - const childrenList = React.Children.map(items, (child: any, index) => ( -
+ const items = splitDataSource.map((item: T, index: number) => renderInnerItem(item, index)); + const childrenList = React.Children.map(items, (child: React.ReactNode, index: number) => ( +
{child}
)); diff --git a/components/list/index.zh-CN.md b/components/list/index.zh-CN.md index c58c073360..4643b9e3ae 100644 --- a/components/list/index.zh-CN.md +++ b/components/list/index.zh-CN.md @@ -32,7 +32,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg | locale | 默认文案设置，目前包括空数据文案 | object | {emptyText: `暂无数据`} | | | pagination | 对应的 `pagination` 配置, 设置 false 不显示 | boolean \| object | false | | | renderItem | 当使用 dataSource 时，可以用 `renderItem` 自定义渲染列表项 | (item) => ReactNode | - | | -| rowKey | 当 `renderItem` 自定义渲染列表项有效时，自定义每一行的 `key` 的获取方式 | ((item: T) => string) | `list-item-${index}` | | +| rowKey | 当 `renderItem` 自定义渲染列表项有效时，自定义每一行的 `key` 的获取方式 | `keyof` T \| (item: T) => `React.Key` | `"key"` | | | size | list 的尺寸 | `default` \| `large` \| `small` | `default` | | | split | 是否展示分割线 | boolean | true | | @@ -40,24 +40,24 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg 分页的配置项。 -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | +| 参数 | 说明 | 类型 | 默认值 | +| -------- | ------------------ | --------------------------- | -------- | | position | 指定分页显示的位置 | `top` \| `bottom` \| `both` | `bottom` | 更多配置项，请查看 [`Pagination`](/components/pagination/)。 ### List grid props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| column | 列数 | number | - | | -| gutter | 栅格间隔 | number | 0 | | -| xs | `<576px` 展示的列数 | number | - | | -| sm | `≥576px` 展示的列数 | number | - | | -| md | `≥768px` 展示的列数 | number | - | | -| lg | `≥992px` 展示的列数 | number | - | | -| xl | `≥1200px` 展示的列数 | number | - | | -| xxl | `≥1600px` 展示的列数 | number | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| ------ | -------------------- | ------ | ------ | ---- | +| column | 列数 | number | - | | +| gutter | 栅格间隔 | number | 0 | | +| xs | `<576px` 展示的列数 | number | - | | +| sm | `≥576px` 展示的列数 | number | - | | +| md | `≥768px` 展示的列数 | number | - | | +| lg | `≥992px` 展示的列数 | number | - | | +| xl | `≥1200px` 展示的列数 | number | - | | +| xxl | `≥1600px` 展示的列数 | number | - | | ### List.Item @@ -68,8 +68,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg ### List.Item.Meta -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| avatar | 列表元素的图标 | ReactNode | - | | -| description | 列表元素的描述内容 | ReactNode | - | | -| title | 列表元素的标题 | ReactNode | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| ----------- | ------------------ | --------- | ------ | ---- | +| avatar | 列表元素的图标 | ReactNode | - | | +| description | 列表元素的描述内容 | ReactNode | - | | +| title | 列表元素的标题 | ReactNode | - | |