From 25f239323eaa6ffc2e8679da86a127e59a4d6eae Mon Sep 17 00:00:00 2001 From: andybuibui <917655399@qq.com> Date: Wed, 15 May 2024 23:39:30 +0800 Subject: [PATCH 1/5] feat: Recognizing empty ul as a folder --- .../theme-default/builtins/Tree/index.tsx | 48 ++++++++++++------- 1 file changed, 31 insertions(+), 17 deletions(-) diff --git a/src/client/theme-default/builtins/Tree/index.tsx b/src/client/theme-default/builtins/Tree/index.tsx index 4c1017db28..f7aad9722f 100644 --- a/src/client/theme-default/builtins/Tree/index.tsx +++ b/src/client/theme-default/builtins/Tree/index.tsx @@ -16,28 +16,36 @@ import type { ComponentProps, ReactNode } from 'react'; import React, { createRef, useEffect, useState } from 'react'; import './index.less'; -function getTreeFromList(nodes: ReactNode, prefix = '') { - const data: TreeProps['treeData'] = []; +const filterNonUlNodes = (nodes: ReactNode) => + ([] as ReactNode[]).concat(nodes).filter((child) => child?.type !== 'ul'); +const getTreeFromList = (nodes: ReactNode, prefix = '') => { + const data: TreeProps['treeData'] = []; ([] as ReactNode[]).concat(nodes).forEach((node, i) => { const key = `${prefix ? `${prefix}-` : ''}${i}`; - + const childrens = node?.props?.children || []; switch (node?.type) { case 'ul': { - const parent = data[data.length - 1]?.children || data; - const ulLeafs = getTreeFromList(node.props.children || [], key); - - parent.push(...ulLeafs); + const hasLeaf = ([] as ReactNode[]) + .concat(childrens) + .some((child) => ['li', 'ul'].includes(child?.type)) as boolean; + const ulLeafs = hasLeaf ? getTreeFromList(childrens, key) : [{ + title: filterNonUlNodes(childrens), + key: key, + children: [], + isLeaf: false, + disabled: true, + switcherIcon: , + }]; + data.push(...ulLeafs); break; } case 'li': { - const liLeafs = getTreeFromList(node.props.children, key); + const liLeafs = getTreeFromList(childrens, key); data.push({ - title: ([] as ReactNode[]) - .concat(node.props.children) - .filter((child) => child.type !== 'ul'), + title: filterNonUlNodes(childrens), key, children: liLeafs, isLeaf: !liLeafs.length, @@ -63,7 +71,7 @@ const useListToTree = (nodes: ReactNode) => { }; const getIcon = (props: TreeNodeProps) => { - const { isLeaf, expanded } = props; + const { isLeaf, expanded, data } = props; if (isLeaf) { return ( @@ -71,13 +79,13 @@ const getIcon = (props: TreeNodeProps) => { ); } - return expanded ? ( + return !expanded || !data?.children?.length ? ( - + ) : ( - + ); }; @@ -142,8 +150,14 @@ export default (props: ComponentProps<'div'>) => { node: EventDataNode, ) => { const { isLeaf } = node; - - if (isLeaf || event.shiftKey || event.metaKey || event.ctrlKey) { + const isEmptyUl = !isLeaf && !node.children?.length; + if ( + isLeaf || + isEmptyUl || + event.shiftKey || + event.metaKey || + event.ctrlKey + ) { return; } treeRef.current!.onNodeExpand(event as any, node); From a7162b26bbd8bcf640b37da468efaa972ca7ee47 Mon Sep 17 00:00:00 2001 From: andybuibui <917655399@qq.com> Date: Wed, 15 May 2024 23:44:19 +0800 Subject: [PATCH 2/5] feat: update the tree markdown doc --- docs/guide/markdown.md | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/docs/guide/markdown.md b/docs/guide/markdown.md index 60327b69d7..944cb23efb 100644 --- a/docs/guide/markdown.md +++ b/docs/guide/markdown.md @@ -169,9 +169,12 @@ features: ```md
    +
      components
  • src +
      hooks
      +
        components
    • index.md
    • @@ -184,9 +187,12 @@ features:
      +
        components
    • src +
        hooks
        +
          components
      • index.md
      • @@ -199,10 +205,22 @@ features: ```diff
        +
          + components ++ 这是 components 文件夹 +
      • src + 这是 src 文件夹
          + hooks ++ 这是 hooks 文件夹 +
        +
          +
            + components ++ 这是 components 文件夹 +
        • index.md + 这是 index.md @@ -221,10 +239,22 @@ features:
            +
              + components + 这是 components 文件夹 +
          • src 这是 src 文件夹
              + hooks + 这是 hooks 文件夹 +
            +
              +
                + components + 这是 components 文件夹 +
            • index.md 这是 index.md From 0b96a98baaf2ab7177a66fffaa7fdb7bf72b951f Mon Sep 17 00:00:00 2001 From: andybuibui <917655399@qq.com> Date: Mon, 20 May 2024 00:03:49 +0800 Subject: [PATCH 3/5] fix: Recognizing empty ul as a folder --- .../theme-default/builtins/Tree/index.tsx | 44 +++++++++---------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/src/client/theme-default/builtins/Tree/index.tsx b/src/client/theme-default/builtins/Tree/index.tsx index f7aad9722f..c2ea2cf959 100644 --- a/src/client/theme-default/builtins/Tree/index.tsx +++ b/src/client/theme-default/builtins/Tree/index.tsx @@ -16,39 +16,39 @@ import type { ComponentProps, ReactNode } from 'react'; import React, { createRef, useEffect, useState } from 'react'; import './index.less'; -const filterNonUlNodes = (nodes: ReactNode) => - ([] as ReactNode[]).concat(nodes).filter((child) => child?.type !== 'ul'); - -const getTreeFromList = (nodes: ReactNode, prefix = '') => { +function getTreeFromList(nodes: ReactNode, prefix = '') { const data: TreeProps['treeData'] = []; + ([] as ReactNode[]).concat(nodes).forEach((node, i) => { const key = `${prefix ? `${prefix}-` : ''}${i}`; - const childrens = node?.props?.children || []; + switch (node?.type) { case 'ul': { - const hasLeaf = ([] as ReactNode[]) - .concat(childrens) - .some((child) => ['li', 'ul'].includes(child?.type)) as boolean; - const ulLeafs = hasLeaf ? getTreeFromList(childrens, key) : [{ - title: filterNonUlNodes(childrens), - key: key, - children: [], - isLeaf: false, - disabled: true, - switcherIcon: , - }]; - data.push(...ulLeafs); + const parent = data[data.length - 1]?.children || data; + const ulLeafs = getTreeFromList(node.props.children || [], key); + + parent.push(...ulLeafs); break; } case 'li': { - const liLeafs = getTreeFromList(childrens, key); - + const hasEmptyUl = node.props?.children?.some?.( + (child) => child.type === 'ul' && !child.props.children?.length, + ); + const title = ([] as ReactNode[]) + .concat(node.props.children) + .filter((child) => child.type !== 'ul'); + const children = hasEmptyUl + ? [] + : getTreeFromList(node.props.children, key); data.push({ - title: filterNonUlNodes(childrens), + title, key, - children: liLeafs, - isLeaf: !liLeafs.length, + children, + isLeaf: !hasEmptyUl && !children.length, + switcherIcon: hasEmptyUl ? ( + + ) : undefined, }); break; } From 3ef58dd320668b6010f3db6260adcfe65d558f52 Mon Sep 17 00:00:00 2001 From: andybuibui <917655399@qq.com> Date: Mon, 20 May 2024 00:05:05 +0800 Subject: [PATCH 4/5] fix: update the tree markdown doc --- docs/guide/markdown.md | 42 ++++++++++++------------------------------ 1 file changed, 12 insertions(+), 30 deletions(-) diff --git a/docs/guide/markdown.md b/docs/guide/markdown.md index 944cb23efb..144d61e4e5 100644 --- a/docs/guide/markdown.md +++ b/docs/guide/markdown.md @@ -169,12 +169,10 @@ features: ```md
                -
                  components
              • src -
                  hooks
                  -
                    components
                  +
                • directory
                  • index.md
                  • @@ -187,12 +185,10 @@ features:
                    -
                      components
                  • src -
                      hooks
                      -
                        components
                      +
                    • directory
                      • index.md
                      • @@ -205,22 +201,15 @@ features: ```diff
                        -
                          - components -+ 这是 components 文件夹 -
                      • src + 这是 src 文件夹
                          - hooks -+ 这是 hooks 文件夹 -
                        -
                          -
                            - components -+ 这是 components 文件夹 -
                          +
                        • + directory ++ 没有子项的文件夹 +
                            +
                          • index.md + 这是 index.md @@ -239,22 +228,15 @@ features:
                              -
                                - components - 这是 components 文件夹 -
                            • src 这是 src 文件夹
                                - hooks - 这是 hooks 文件夹 -
                              -
                                -
                                  - components - 这是 components 文件夹 -
                                +
                              • + directory + 没有子项的文件夹 +
                                  +
                                • index.md 这是 index.md From 57969cca6962d2124583c0ec6b4368ea10ea4f85 Mon Sep 17 00:00:00 2001 From: andybuibui <917655399@qq.com> Date: Sat, 25 May 2024 15:28:29 +0800 Subject: [PATCH 5/5] fix: code --- src/client/theme-default/builtins/Tree/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/client/theme-default/builtins/Tree/index.tsx b/src/client/theme-default/builtins/Tree/index.tsx index c2ea2cf959..8195e50b59 100644 --- a/src/client/theme-default/builtins/Tree/index.tsx +++ b/src/client/theme-default/builtins/Tree/index.tsx @@ -32,7 +32,7 @@ function getTreeFromList(nodes: ReactNode, prefix = '') { } case 'li': { - const hasEmptyUl = node.props?.children?.some?.( + const hasEmptyUl = node.props.children?.some?.( (child) => child.type === 'ul' && !child.props.children?.length, ); const title = ([] as ReactNode[]) @@ -93,16 +93,16 @@ const getIcon = (props: TreeNodeProps) => { const renderSwitcherIcon = (props: TreeNodeProps) => { const { isLeaf, expanded } = props; if (isLeaf) { - return ; + return ; } return expanded ? ( - + ) : ( - +