feat(filter): 支持配置字段别名(#2915)

* feat(filter): 支持配置字段别名(#2915)

* chore: 生成变更记录文件

* feat(filter): 修改fieldNames类型

* feat(filter): 增加类型约束

* feat(filter): 代码规范

---------

Co-authored-by: xiamiao <[email protected]>

.changeset/rich-geckos-study.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/filter": minor
+---
+
+feat: 支持配置字段别名

.changeset/young-grapes-melt.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(filter): 支持配置字段别名

packages/ui/filter/src/use-filter.ts

@@ -2,6 +2,8 @@ import React, { useCallback, useMemo } from 'react'
 import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state'
 import { isArray } from '@hi-ui/type-assertion'
 import { FilterDataItem } from './types'
+import { transformTreeData } from './utils'
+import { HiBaseFieldNames } from '@hi-ui/core'
 
 const DEFAULT_DATA = [] as []
 const DEFAULT_VALUE = [] as []
@@ -12,17 +14,19 @@ export const useFilter = ({
   data: dataProp = DEFAULT_DATA,
   defaultValue = DEFAULT_VALUE,
   value: valueProp,
+  fieldNames,
   onChange,
   ...rest
 }: UseFilterProps) => {
+  const transformedData = useMemo(() => transformTreeData(dataProp, fieldNames), [dataProp, fieldNames])
   // 选中的级联路径 id 列表
   const [value, tryChangeValue] = useUncontrolledState(defaultValue, valueProp, onChange)
 
   /**
    * 根据级联路径生成面板数据
    */
   const menusData = useMemo(() => {
-    let lastMenu = dataProp
+    let lastMenu = transformedData
     const menus = [lastMenu]
 
     const menuPathLength = value.length
@@ -41,7 +45,7 @@ export const useFilter = ({
     }
 
     return menus
-  }, [dataProp, value])
+  }, [transformedData, value])
 
   const menusWithLabel = useMemo(() => {
     return labels.map((label, depth) => {
@@ -93,6 +97,10 @@ export interface UseFilterProps {
    * 筛选选项数据
    */
   data?: FilterDataItem[]
+  /**
+   * 设置 data 中 id, title, disabled, children 对应的 key
+   */
+  fieldNames?: HiBaseFieldNames
   /**
    * 默认选中项的值
    */

packages/ui/filter/src/utils.ts

@@ -0,0 +1,32 @@
+import { HiBaseFieldNameKeys, HiBaseFieldNames } from '@hi-ui/core'
+import { FilterDataItem } from './types'
+import React from 'react'
+
+export const transformTreeData = (
+  data: FilterDataItem[],
+  fieldNames?: HiBaseFieldNames
+): FilterDataItem[] => {
+  const getKeyFields = (node: FilterDataItem, key: HiBaseFieldNameKeys) => {
+    if (fieldNames) {
+      return node[(fieldNames[key] || key) as keyof FilterDataItem]
+    }
+    return node[key]
+  }
+
+  const traverseNode = (node: FilterDataItem): FilterDataItem => {
+    const newNode: FilterDataItem = { ...node }
+
+    newNode.id = getKeyFields(newNode, 'id') as React.ReactText
+    newNode.title = getKeyFields(newNode, 'title') as React.ReactText
+    newNode.disabled = (getKeyFields(newNode, 'disabled') ?? false) as boolean
+    newNode.children = getKeyFields(newNode, 'children') as FilterDataItem[]
+
+    if (newNode.children) {
+      newNode.children = newNode.children.map(traverseNode)
+    }
+
+    return newNode
+  }
+
+  return data.map(traverseNode)
+}