mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 05:05:48 +08:00
Code Issues Actions 43 Packages Projects Releases Wiki Activity

fix: List rowKey prop type (#32033)

Browse Source
This commit is contained in:
Liron Lavy 2021-09-07 07:05:59 +03:00 committed by GitHub
parent 4af66fbc9f
commit 02ca969711
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 45 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
components/list/index.en-US.md
View File

@ -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 | - | |

18
components/list/index.tsx
View File

@ -43,7 +43,7 @@ export interface ListProps<T> {
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<T>({
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<T>({
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<T>({
let childrenContent = isLoading && <div style={{ minHeight: 53 }} />;
if (splitDataSource.length > 0) {
const items = splitDataSource.map((item: any, index: number) => renderInnerItem(item, index));
const childrenList = React.Children.map(items, (child: any, index) => (
<div key={keys[index]} style={colStyle}>
const items = splitDataSource.map((item: T, index: number) => renderInnerItem(item, index));
const childrenList = React.Children.map(items, (child: React.ReactNode, index: number) => (
<div key={listItemsKeys[index]} style={colStyle}>
{child}
</div>
));

36
components/list/index.zh-CN.md
View File

@ -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 | - | |