From 1583d83c2b51774200fbdbdb9faf61bee0d780e6 Mon Sep 17 00:00:00 2001 From: perfectFu Date: Mon, 27 Dec 2021 17:58:36 +0800 Subject: [PATCH 1/3] =?UTF-8?q?refactor(Tree):=20=E9=87=8D=E6=9E=84?= =?UTF-8?q?=E6=A0=91=E7=BB=84=E4=BB=B6=E9=AB=98=E4=BA=AE=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tree/src/composables/use-highlight.ts | 51 ++++++++++--------- packages/devui-vue/devui/tree/src/tree.tsx | 26 +++++----- 2 files changed, 41 insertions(+), 36 deletions(-) diff --git a/packages/devui-vue/devui/tree/src/composables/use-highlight.ts b/packages/devui-vue/devui/tree/src/composables/use-highlight.ts index 93f20dd5..81ea1cae 100644 --- a/packages/devui-vue/devui/tree/src/composables/use-highlight.ts +++ b/packages/devui-vue/devui/tree/src/composables/use-highlight.ts @@ -1,37 +1,42 @@ import { ref, Ref } from 'vue' -interface TypeHighlightClass { - [key: string]: 'active' | '' | 'devui-tree_isDisabledNode' -} +type TypeHighlightClass = 'active' | '' | 'devui-tree_isDisabledNode' + type TypeUseHighlightNode = () => { - nodeClassNameReflect: Ref - handleClickOnNode: (index: string) => void - handleInitNodeClassNameReflect: (isDisabled: boolean, ...keys: Array) => string + currentHighLightNodeKey: Ref + highLightClick: (index: string) => void + initHighLightNode: (isDisabled: boolean, key: string) => void, + getHighLightClass: (key: string) => TypeHighlightClass } const HIGHLIGHT_CLASS = 'active' const IS_DISABLED_FLAG = 'devui-tree_isDisabledNode' +const DISABLE_NODE_MAP = new Set() + const useHighlightNode: TypeUseHighlightNode = () => { - const nodeClassNameReflectRef = ref({}) - const prevActiveNodeKey = ref('') - const handleInit = (isDisabled = false, ...keys) => { - const key = keys.join('-') - nodeClassNameReflectRef.value[key] = isDisabled - ? IS_DISABLED_FLAG - : nodeClassNameReflectRef.value[key] || '' - return key + + const currentHighLightNodeKey = ref() + + const highLightClick = (key: string) => { + if (DISABLE_NODE_MAP.has(key)) return + currentHighLightNodeKey.value = key } - const handleClick = (key) => { - if (nodeClassNameReflectRef.value[key] === IS_DISABLED_FLAG) return - if (prevActiveNodeKey.value === key) return - if (prevActiveNodeKey.value) nodeClassNameReflectRef.value[prevActiveNodeKey.value] = '' - nodeClassNameReflectRef.value[key] = HIGHLIGHT_CLASS - prevActiveNodeKey.value = key + + const initHighLightNode = (isDisabled: boolean, key) => { + if (isDisabled) DISABLE_NODE_MAP.add(key) } + + const getHighLightClass = ((key: string) => { + if (DISABLE_NODE_MAP.has(key)) return IS_DISABLED_FLAG + if (key === currentHighLightNodeKey.value) return HIGHLIGHT_CLASS + return '' + }) + return { - nodeClassNameReflect: nodeClassNameReflectRef, - handleClickOnNode: handleClick, - handleInitNodeClassNameReflect: handleInit + currentHighLightNodeKey, + highLightClick, + initHighLightNode, + getHighLightClass } } export default useHighlightNode diff --git a/packages/devui-vue/devui/tree/src/tree.tsx b/packages/devui-vue/devui/tree/src/tree.tsx index 7239b04a..f99292c7 100644 --- a/packages/devui-vue/devui/tree/src/tree.tsx +++ b/packages/devui-vue/devui/tree/src/tree.tsx @@ -1,7 +1,7 @@ import { defineComponent, reactive, toRefs, provide } from 'vue' import type { SetupContext } from 'vue' import { treeProps, TreeProps, TreeItem, TreeRootType } from './tree-types' -import { CHECK_CONFIG } from './config' +import { CHECK_CONFIG } from './config' import { preCheckTree, deleteNode, getId } from './util' import Loading from '../../loading/src/service' import Checkbox from '../../checkbox/src/checkbox' @@ -24,7 +24,7 @@ export default defineComponent({ const { data, checkable, checkableRelation: cbr } = toRefs(reactive({ ...props, data: preCheckTree(props.data) })) const { mergeData } = useMergeNode(data.value) const { openedData, toggle } = useToggle(mergeData) - const { nodeClassNameReflect, handleInitNodeClassNameReflect, handleClickOnNode } = useHighlightNode() + const { getHighLightClass, initHighLightNode, highLightClick } = useHighlightNode() const { lazyNodesReflect, handleInitLazyNodeReflect, getLazyData } = useLazy() const { selected, onNodeClick } = useChecked(cbr, ctx, data.value) const { editStatusReflect, operateIconReflect, handleReflectIdToIcon } = useOperate(data) @@ -65,7 +65,7 @@ export default defineComponent({ }, } ) - handleInitNodeClassNameReflect(disabled, id) + initHighLightNode(disabled, id) handleInitLazyNodeReflect(item, { id, onGetNodeData: async () => { @@ -103,10 +103,10 @@ export default defineComponent({ } return ( isParent || children && children.length - ? open - ? - : - : + ? open + ? + : + : ) } const checkState = CHECK_CONFIG[selected.value[id] ?? 'none'] @@ -116,14 +116,14 @@ export default defineComponent({ style={{ paddingLeft: `${24 * (level - 1)}px` }} >
handleClickOnNode(id)} + class={`devui-tree-node__content ${getHighLightClass(id)}`} + onClick={() => highLightClick(id)} >
- { renderFoldIcon(item) } - { checkable.value && onNodeClick(item)} disabled={disabled} {...checkState} /> } + {renderFoldIcon(item)} + {checkable.value && onNodeClick(item)} disabled={disabled} {...checkState} />} - { operateIconReflect.value.find(({ id: d }) => id === d).renderIcon(item) } + {operateIconReflect.value.find(({ id: d }) => id === d).renderIcon(item)} { item.isParent ?
@@ -152,7 +152,7 @@ export default defineComponent({ return (
{/* { renderTree(data.value) } */} - { openedData.value.map(item => renderNode(item)) } + {openedData.value.map(item => renderNode(item))}
) } -- Gitee From 3fec5c3fdb83bb92df2e8b75c9934c9fcf6c11a7 Mon Sep 17 00:00:00 2001 From: perfectFu Date: Mon, 27 Dec 2021 18:11:17 +0800 Subject: [PATCH 2/3] =?UTF-8?q?refactor(Tree):=20=E4=BC=98=E5=8C=96use-hig?= =?UTF-8?q?hlight.ts=E4=B8=AD=E5=8F=98=E9=87=8F=E5=91=BD=E5=90=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui-vue/devui/tree/src/composables/use-highlight.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/devui-vue/devui/tree/src/composables/use-highlight.ts b/packages/devui-vue/devui/tree/src/composables/use-highlight.ts index 81ea1cae..e10f213b 100644 --- a/packages/devui-vue/devui/tree/src/composables/use-highlight.ts +++ b/packages/devui-vue/devui/tree/src/composables/use-highlight.ts @@ -11,23 +11,23 @@ type TypeUseHighlightNode = () => { const HIGHLIGHT_CLASS = 'active' const IS_DISABLED_FLAG = 'devui-tree_isDisabledNode' -const DISABLE_NODE_MAP = new Set() +const disabledNodeSet = new Set() const useHighlightNode: TypeUseHighlightNode = () => { const currentHighLightNodeKey = ref() const highLightClick = (key: string) => { - if (DISABLE_NODE_MAP.has(key)) return + if (disabledNodeSet.has(key)) return currentHighLightNodeKey.value = key } const initHighLightNode = (isDisabled: boolean, key) => { - if (isDisabled) DISABLE_NODE_MAP.add(key) + if (isDisabled) disabledNodeSet.add(key) } const getHighLightClass = ((key: string) => { - if (DISABLE_NODE_MAP.has(key)) return IS_DISABLED_FLAG + if (disabledNodeSet.has(key)) return IS_DISABLED_FLAG if (key === currentHighLightNodeKey.value) return HIGHLIGHT_CLASS return '' }) -- Gitee From 49f02760ce871a91c34e721b42591e36d4860271 Mon Sep 17 00:00:00 2001 From: perfectFu Date: Mon, 27 Dec 2021 18:19:10 +0800 Subject: [PATCH 3/3] =?UTF-8?q?refactor(Tree):=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E6=A0=91=E7=BB=84=E4=BB=B6=E9=AB=98=E4=BA=AE=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui-vue/devui/tree/src/composables/use-highlight.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/devui-vue/devui/tree/src/composables/use-highlight.ts b/packages/devui-vue/devui/tree/src/composables/use-highlight.ts index e10f213b..f63e45b7 100644 --- a/packages/devui-vue/devui/tree/src/composables/use-highlight.ts +++ b/packages/devui-vue/devui/tree/src/composables/use-highlight.ts @@ -11,22 +11,22 @@ type TypeUseHighlightNode = () => { const HIGHLIGHT_CLASS = 'active' const IS_DISABLED_FLAG = 'devui-tree_isDisabledNode' -const disabledNodeSet = new Set() +const disabledNodeSet = new Set() const useHighlightNode: TypeUseHighlightNode = () => { const currentHighLightNodeKey = ref() - const highLightClick = (key: string) => { + const highLightClick = (key: string): void => { if (disabledNodeSet.has(key)) return currentHighLightNodeKey.value = key } - const initHighLightNode = (isDisabled: boolean, key) => { + const initHighLightNode = (isDisabled: boolean, key: string): void => { if (isDisabled) disabledNodeSet.add(key) } - const getHighLightClass = ((key: string) => { + const getHighLightClass = ((key: string): TypeHighlightClass => { if (disabledNodeSet.has(key)) return IS_DISABLED_FLAG if (key === currentHighLightNodeKey.value) return HIGHLIGHT_CLASS return '' -- Gitee