diff --git a/.changeset/angry-bugs-fix.md b/.changeset/angry-bugs-fix.md new file mode 100644 index 000000000..ea0724f7a --- /dev/null +++ b/.changeset/angry-bugs-fix.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +feat(list): 支持配置字段别名 diff --git a/.changeset/slimy-spoons-jog.md b/.changeset/slimy-spoons-jog.md new file mode 100644 index 000000000..1166ee312 --- /dev/null +++ b/.changeset/slimy-spoons-jog.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/list": minor +--- + +feat: 支持配置字段别名 diff --git a/packages/ui/list/src/List.tsx b/packages/ui/list/src/List.tsx index b0454eba2..aebdce2e4 100644 --- a/packages/ui/list/src/List.tsx +++ b/packages/ui/list/src/List.tsx @@ -1,10 +1,11 @@ -import React, { forwardRef, useCallback } from 'react' +import React, { forwardRef, useCallback, useMemo } from 'react' import { cx, getPrefixCls } from '@hi-ui/classname' import { __DEV__ } from '@hi-ui/env' import { PaginationProps, Pagination } from '@hi-ui/pagination' import { EmptyState } from '@hi-ui/empty-state' -import { HiBaseHTMLProps } from '@hi-ui/core' +import { HiBaseFieldNames, HiBaseHTMLProps } from '@hi-ui/core' import { ListDataItem, ListPaginationPlacementEnum } from './types' +import { transformData } from './utils' const LIST_PREFIX = getPrefixCls('list') @@ -45,11 +46,17 @@ export const List = forwardRef( render, bordered = true, data, + fieldNames, emptyContent, ...rest }, ref ) => { + const transformedData = useMemo((): ListDataItem[] => transformData(data, fieldNames), [ + data, + fieldNames, + ]) + const cls = cx(prefixCls, className, { [`${prefixCls}--bordered`]: bordered, [`${prefixCls}--with-pagination`]: pagination, @@ -73,9 +80,9 @@ export const List = forwardRef( return (
- {data && data.length > 0 ? ( + {transformedData && transformedData.length > 0 ? (
    - {data.map((item, index) => { + {transformedData.map((item, index) => { return renderListItem(item, index) })}
@@ -106,6 +113,10 @@ export interface ListProps extends HiBaseHTMLProps<'div'> { * 列表展示的数据 */ data: ListDataItem[] + /** + * 设置data中的每一项对应的key + */ + fieldNames?: HiBaseFieldNames /** * 自定义渲染列表项 */ diff --git a/packages/ui/list/src/utils.ts b/packages/ui/list/src/utils.ts new file mode 100644 index 000000000..e14752336 --- /dev/null +++ b/packages/ui/list/src/utils.ts @@ -0,0 +1,32 @@ +import { HiBaseFieldNameKeys, HiBaseFieldNames } from '@hi-ui/core' +import { ListDataItem, ListActionPlacementEnum } from './types' + +export const transformData = ( + data: ListDataItem[], + fieldNames?: HiBaseFieldNames +): ListDataItem[] => { + const getKeyFields = (node: ListDataItem, key: HiBaseFieldNameKeys) => { + if (fieldNames) { + return node[(fieldNames[key] || key) as keyof ListDataItem] + } + return node[key as keyof ListDataItem] + } + + const traverseNode = (node: ListDataItem): ListDataItem => { + const newNode: ListDataItem = { ...node } + + newNode.title = getKeyFields(newNode, 'title' as HiBaseFieldNameKeys) + newNode.description = getKeyFields(newNode, 'description' as HiBaseFieldNameKeys) + newNode.extra = getKeyFields(newNode, 'extra' as HiBaseFieldNameKeys) + newNode.avatar = getKeyFields(newNode, 'avatar' as HiBaseFieldNameKeys) + newNode.action = getKeyFields(newNode, 'action' as HiBaseFieldNameKeys) + newNode.actionPlacement = getKeyFields( + newNode, + 'actionPlacement' as HiBaseFieldNameKeys + ) as ListActionPlacementEnum + + return newNode + } + + return data.map((node) => traverseNode(node)) +}