From 8644a7a32314c880ca4101b5a1233921b85e1e1e Mon Sep 17 00:00:00 2001 From: xiamiao Date: Mon, 24 Jun 2024 11:14:02 +0800 Subject: [PATCH 1/5] =?UTF-8?q?feat(filter):=20=E6=94=AF=E6=8C=81=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E5=AD=97=E6=AE=B5=E5=88=AB=E5=90=8D(#2915)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/filter/src/use-filter.ts | 7 +++++++ packages/ui/filter/src/utils.ts | 24 ++++++++++++++++++++++++ 2 files changed, 31 insertions(+) create mode 100644 packages/ui/filter/src/utils.ts diff --git a/packages/ui/filter/src/use-filter.ts b/packages/ui/filter/src/use-filter.ts index 40e6f9dd2..727241aac 100644 --- a/packages/ui/filter/src/use-filter.ts +++ b/packages/ui/filter/src/use-filter.ts @@ -2,6 +2,7 @@ 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' const DEFAULT_DATA = [] as [] const DEFAULT_VALUE = [] as [] @@ -12,9 +13,11 @@ export const useFilter = ({ data: dataProp = DEFAULT_DATA, defaultValue = DEFAULT_VALUE, value: valueProp, + fieldNames, onChange, ...rest }: UseFilterProps) => { + dataProp = useMemo(() => transformTreeData(dataProp, fieldNames), [dataProp, fieldNames]) // 选中的级联路径 id 列表 const [value, tryChangeValue] = useUncontrolledState(defaultValue, valueProp, onChange) @@ -93,6 +96,10 @@ export interface UseFilterProps { * 筛选选项数据 */ data?: FilterDataItem[] + /** + * 设置 data 中 id, title, disabled, children 对应的 key + */ + fieldNames?: Record /** * 默认选中项的值 */ diff --git a/packages/ui/filter/src/utils.ts b/packages/ui/filter/src/utils.ts new file mode 100644 index 000000000..676376722 --- /dev/null +++ b/packages/ui/filter/src/utils.ts @@ -0,0 +1,24 @@ +import { FilterDataItem } from './types' + +export const transformTreeData = (data: FilterDataItem[] , fieldNames?: Record) : FilterDataItem[] => { + const getKeyFields = (node: any, key: any) => { + if(fieldNames ){ + return node[(fieldNames as any)[key] || key] + } + return node[key] + } + + const traverseNode = (node: FilterDataItem) : FilterDataItem => { + const newNode = { ...node } + newNode.id = getKeyFields(newNode, 'id') + newNode.title = getKeyFields(newNode, 'title') + newNode.disabled = getKeyFields(newNode, 'disabled')?? false + newNode.children = getKeyFields(newNode, 'children') + if(newNode.children){ + newNode.children = newNode.children.map(traverseNode) + } + return newNode + } + + return data.map(traverseNode) +} From 286e00c5bc84a09b0ee89f515022fa6120e85b65 Mon Sep 17 00:00:00 2001 From: xiamiao Date: Mon, 24 Jun 2024 11:15:21 +0800 Subject: [PATCH 2/5] =?UTF-8?q?chore:=20=E7=94=9F=E6=88=90=E5=8F=98?= =?UTF-8?q?=E6=9B=B4=E8=AE=B0=E5=BD=95=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/rich-geckos-study.md | 5 +++++ .changeset/young-grapes-melt.md | 5 +++++ 2 files changed, 10 insertions(+) create mode 100644 .changeset/rich-geckos-study.md create mode 100644 .changeset/young-grapes-melt.md diff --git a/.changeset/rich-geckos-study.md b/.changeset/rich-geckos-study.md new file mode 100644 index 000000000..b2ad33c99 --- /dev/null +++ b/.changeset/rich-geckos-study.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/filter": minor +--- + +feat: 支持配置字段别名 diff --git a/.changeset/young-grapes-melt.md b/.changeset/young-grapes-melt.md new file mode 100644 index 000000000..82eefa91e --- /dev/null +++ b/.changeset/young-grapes-melt.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +feat(filter): 支持配置字段别名 From 57b578afb6577ec0016549879293cdfd3d6dc289 Mon Sep 17 00:00:00 2001 From: xiamiao Date: Tue, 25 Jun 2024 15:37:33 +0800 Subject: [PATCH 3/5] =?UTF-8?q?feat(filter):=20=E4=BF=AE=E6=94=B9fieldName?= =?UTF-8?q?s=E7=B1=BB=E5=9E=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/filter/src/use-filter.ts | 3 ++- packages/ui/filter/src/utils.ts | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/ui/filter/src/use-filter.ts b/packages/ui/filter/src/use-filter.ts index 727241aac..18dd0dc3b 100644 --- a/packages/ui/filter/src/use-filter.ts +++ b/packages/ui/filter/src/use-filter.ts @@ -3,6 +3,7 @@ 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 [] @@ -99,7 +100,7 @@ export interface UseFilterProps { /** * 设置 data 中 id, title, disabled, children 对应的 key */ - fieldNames?: Record + fieldNames?: HiBaseFieldNames /** * 默认选中项的值 */ diff --git a/packages/ui/filter/src/utils.ts b/packages/ui/filter/src/utils.ts index 676376722..f2de9a7c0 100644 --- a/packages/ui/filter/src/utils.ts +++ b/packages/ui/filter/src/utils.ts @@ -1,6 +1,7 @@ +import { HiBaseFieldNames } from '@hi-ui/core' import { FilterDataItem } from './types' -export const transformTreeData = (data: FilterDataItem[] , fieldNames?: Record) : FilterDataItem[] => { +export const transformTreeData = (data: FilterDataItem[] , fieldNames?: HiBaseFieldNames) : FilterDataItem[] => { const getKeyFields = (node: any, key: any) => { if(fieldNames ){ return node[(fieldNames as any)[key] || key] From 4cda67d1e101a2ebd235b70a1c3c0da003e93fbb Mon Sep 17 00:00:00 2001 From: xiamiao Date: Wed, 26 Jun 2024 14:17:37 +0800 Subject: [PATCH 4/5] =?UTF-8?q?feat(filter):=20=E5=A2=9E=E5=8A=A0=E7=B1=BB?= =?UTF-8?q?=E5=9E=8B=E7=BA=A6=E6=9D=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/filter/src/use-filter.ts | 6 +++--- packages/ui/filter/src/utils.ts | 31 ++++++++++++++++------------ 2 files changed, 21 insertions(+), 16 deletions(-) diff --git a/packages/ui/filter/src/use-filter.ts b/packages/ui/filter/src/use-filter.ts index 18dd0dc3b..2469c146b 100644 --- a/packages/ui/filter/src/use-filter.ts +++ b/packages/ui/filter/src/use-filter.ts @@ -18,7 +18,7 @@ export const useFilter = ({ onChange, ...rest }: UseFilterProps) => { - dataProp = useMemo(() => transformTreeData(dataProp, fieldNames), [dataProp, fieldNames]) + const transformedData = useMemo(() => transformTreeData(dataProp, fieldNames), [dataProp, fieldNames]) // 选中的级联路径 id 列表 const [value, tryChangeValue] = useUncontrolledState(defaultValue, valueProp, onChange) @@ -26,7 +26,7 @@ export const useFilter = ({ * 根据级联路径生成面板数据 */ const menusData = useMemo(() => { - let lastMenu = dataProp + let lastMenu = transformedData const menus = [lastMenu] const menuPathLength = value.length @@ -45,7 +45,7 @@ export const useFilter = ({ } return menus - }, [dataProp, value]) + }, [transformedData, value]) const menusWithLabel = useMemo(() => { return labels.map((label, depth) => { diff --git a/packages/ui/filter/src/utils.ts b/packages/ui/filter/src/utils.ts index f2de9a7c0..9b0f50947 100644 --- a/packages/ui/filter/src/utils.ts +++ b/packages/ui/filter/src/utils.ts @@ -1,21 +1,26 @@ -import { HiBaseFieldNames } from '@hi-ui/core' -import { FilterDataItem } from './types' +import { HiBaseFieldNameKeys, HiBaseFieldNames } from "@hi-ui/core" +import { FilterDataItem } from "./types" -export const transformTreeData = (data: FilterDataItem[] , fieldNames?: HiBaseFieldNames) : FilterDataItem[] => { - const getKeyFields = (node: any, key: any) => { - if(fieldNames ){ - return node[(fieldNames as any)[key] || key] +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 = { ...node } - newNode.id = getKeyFields(newNode, 'id') - newNode.title = getKeyFields(newNode, 'title') - newNode.disabled = getKeyFields(newNode, 'disabled')?? false - newNode.children = getKeyFields(newNode, 'children') - if(newNode.children){ + 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 From 8a9e9aeb2a72fee020997d35dd0fea530cda254f Mon Sep 17 00:00:00 2001 From: xiamiao Date: Wed, 26 Jun 2024 15:16:39 +0800 Subject: [PATCH 5/5] =?UTF-8?q?feat(filter):=20=E4=BB=A3=E7=A0=81=E8=A7=84?= =?UTF-8?q?=E8=8C=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/filter/src/utils.ts | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/ui/filter/src/utils.ts b/packages/ui/filter/src/utils.ts index 9b0f50947..e010b1fc3 100644 --- a/packages/ui/filter/src/utils.ts +++ b/packages/ui/filter/src/utils.ts @@ -1,5 +1,6 @@ -import { HiBaseFieldNameKeys, HiBaseFieldNames } from "@hi-ui/core" -import { FilterDataItem } from "./types" +import { HiBaseFieldNameKeys, HiBaseFieldNames } from '@hi-ui/core' +import { FilterDataItem } from './types' +import React from 'react' export const transformTreeData = ( data: FilterDataItem[], @@ -15,14 +16,15 @@ export const transformTreeData = ( 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[] + 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 }