feat(design): support multiple tree

packages/design/src/components/tree/Tree.stories.tsx

@@ -17,7 +17,7 @@
 import type { Meta } from '@storybook/react';
 import React, { useState } from 'react';
 
-import { Tree, TreeSelectionMode } from './Tree';
+import { Tree, TreeSelectionMode, ITreeNodeProps } from './Tree';
 
 const meta: Meta<typeof Tree> = {
  title: 'Components / Tree',
@@ -32,7 +32,7 @@ export default meta;
 
 export const TreeBasic = {
  render() {
- const [value, setValue] = useState<string | number | boolean>();
+ const [valueGroup, valueGroupSet] = useState<string[]>([]);
 
  const data = [
  {
@@ -111,17 +111,18 @@ export const TreeBasic = {
  },
  ];
 
- function handleChange(value: string | number | boolean) {
- setValue(value);
+ function handleSelected(node: ITreeNodeProps, result: ITreeNodeProps[]) {
+ valueGroupSet(result.map(e => e.key));
+ // console.log('all leafNode', node, result)
  }
 
  return (
  <Tree
  data={data}
  defaultExpandAll
  selectionMode={TreeSelectionMode.ONLY_LEAF_NODE}
- value={value}
- onChange={handleChange}
+ valueGroup={valueGroup}
+ onChange={handleSelected}
  />
  );
  },

packages/design/src/components/tree/Tree.tsx

@@ -14,12 +14,13 @@
  * limitations under the License.
  */
 
-import { CheckMarkSingle, DropdownSingle } from '@univerjs/icons';
+import { DropdownSingle } from '@univerjs/icons';
 import clsx from 'clsx';
+import { Checkbox } from '../checkbox'
 import React, { useEffect, useMemo, useState } from 'react';
 
 import styles from './index.module.less';
-
+import { isIntermediated, createCacheWithFindNodePathFromTree, mergeTreeSelected, filterLeafNode } from './util'
 export enum TreeSelectionMode {
  ONLY_LEAF_NODE,
 
@@ -51,33 +52,46 @@ export interface ITreeProps {
  selectionMode?: TreeSelectionMode;
 
  /**
- * Used for setting the currently selected value
+ * Used for setting the currently selected value,leaf node.
  */
- value?: string | number | boolean;
+ valueGroup?: string[];
 
  /**
  * Set the handler to handle `click` event
  */
- onChange?: (value: string | number | boolean) => void;
+ onChange?: (node: ITreeNodeProps, allSelectedNode: ITreeNodeProps[]) => void;
+
+ onExpend?: (value: string) => void
 }
 
 type TreeItemProps = ITreeNodeProps & {
  _selected?: boolean;
  _expand?: boolean;
+ _intermediated?: boolean
 };
 
 /**
  * Tree Component
  */
 export function Tree(props: ITreeProps) {
- const { data = [], defaultExpandAll = false, selectionMode = TreeSelectionMode.ALL, value, onChange } = props;
+ const { data = [], defaultExpandAll = false, selectionMode = TreeSelectionMode.ALL, valueGroup = [], onChange, onExpend } = props;
 
  const [expandKeys, setExpandKeys] = useState<Array<string | number | boolean>>([]);
 
+ const findNode = useMemo(() => createCacheWithFindNodePathFromTree(data), [data])
+
+ const selectedNodeKeySet = useMemo(() => {
+ const set = new Set<string>()
+ valueGroup.forEach(key => {
+ const path = findNode.findNodePathFromTreeWithCache(key)
+ path.forEach(k => set.add(k))
+ })
+ return set
+ }, [valueGroup, findNode])
+
  useEffect(() => {
  function walkData(item: ITreeNodeProps) {
  setExpandKeys((prev) => [...prev, item.key]);
-
  item.children?.forEach(walkData);
  }
  if (defaultExpandAll) {
@@ -86,21 +100,34 @@ export function Tree(props: ITreeProps) {
  }, [defaultExpandAll, data]);
 
  const computedData = useMemo(() => {
- return data.map(function walkData(item): TreeItemProps {
- const { title, key, children } = item;
-
- return {
- title,
- key,
- children: children && children.map(walkData),
- _selected: key === value,
- _expand: expandKeys.includes(key),
- };
+ return data.map((item) => {
+ function walkData(item: ITreeNodeProps): TreeItemProps {
+ const { title, key, children } = item;
+ const isExpand = expandKeys.includes(key)
+ const isSelected = selectedNodeKeySet.has(key)
+ const intermediated = isIntermediated(selectedNodeKeySet, item)
+
+ return {
+ title,
+ key,
+ children: children && children.map((item) => walkData(item)),
+ _selected: isSelected,
+ _expand: isExpand,
+ _intermediated: intermediated
+ };
+ }
+ return walkData(item)
  });
- }, [value, expandKeys]);
+ }, [selectedNodeKeySet, expandKeys]);
 
- function handleSelectItem(treeItem: ITreeNodeProps) {
- if (treeItem.children) {
+ function handleChange(treeItem: TreeItemProps) {
+ const path: string[] = findNode.findNodePathFromTreeWithCache(treeItem.key)
+ const result = mergeTreeSelected(data, [...selectedNodeKeySet], path)
+ onChange?.(treeItem, filterLeafNode(data, result))
+ }
+
+ function handleExpendItem(treeItem: ITreeNodeProps) {
+ if (treeItem.children?.length) {
  setExpandKeys((prev) => {
  const index = prev.findIndex((key) => key === treeItem.key);
 
@@ -111,27 +138,21 @@ export function Tree(props: ITreeProps) {
  return [...prev.slice(0, index), ...prev.slice(index + 1)];
  });
  }
-
  if (selectionMode === TreeSelectionMode.ONLY_LEAF_NODE) {
  if (treeItem.children) {
  return;
  }
  }
 
- onChange?.(treeItem.key);
+ onExpend?.(treeItem.key)
  }
 
  function walkTree(treeItem: TreeItemProps) {
- const { title, key, children, _selected, _expand } = treeItem;
-
+ const { title, key, children, _selected, _expand, _intermediated } = treeItem;
  return (
  <li
  key={key}
  className={styles.treeListItem}
- onClick={(e) => {
- e.stopPropagation();
- handleSelectItem(treeItem);
- }}
  >
  <a
  className={clsx(styles.treeListItemContent, {
@@ -143,15 +164,21 @@ export function Tree(props: ITreeProps) {
  className={clsx(styles.treeIcon, {
  [styles.treeIconExpand]: _expand,
  })}
+
+ onClick={(e) => {
+ e.stopPropagation();
+ handleExpendItem(treeItem);
+ }}
  >
  <DropdownSingle />
  </span>
  )}
- {_selected && (
- <span className={styles.treeListItemContentSelectedIcon}>
- <CheckMarkSingle />
- </span>
- )}
+ <Checkbox
+ checked={_selected && !_intermediated}
+ indeterminate={_selected && _intermediated}
+ onChange={() => {
+ handleChange(treeItem)
+ }} />
  <span>{title}</span>
  </a>
  {children && (

packages/design/src/components/tree/__tests__/index.spec.tsx

@@ -19,8 +19,67 @@ import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { Tree } from '../Tree';
+import { findNodePathFromTree, findSubTreeFromPath, findNodeFromPath, mergeTreeSelected, isIntermediated } from '../util'
 
 describe('Tree', () => {
+ const data = [
+ {
+ key: '0',
+ title: 'node 0',
+ children: [
+ { key: '0-0', title: 'node 0-0' },
+ { key: '0-1', title: 'node 0-1' },
+ ],
+ },
+ ]
+ it('test findNodePathFromTree', () => {
+ expect(findNodePathFromTree(data, '0-0')).toEqual(['0', '0-0'])
+ expect(findNodePathFromTree(data, '2-0')).toEqual([])
+ })
+
+ it('test findSubTreeFromPath', () => {
+ expect(findSubTreeFromPath(data, ['0'])).toEqual([
+ { key: '0-0', title: 'node 0-0' },
+ { key: '0-1', title: 'node 0-1' },
+ ])
+ expect(findSubTreeFromPath(data, [])).toEqual(data)
+ })
+
+ it('test findNodeFromPath', () => {
+ expect(findNodeFromPath(data, ['0'])).toEqual({
+ key: '0',
+ title: 'node 0',
+ children: [
+ { key: '0-0', title: 'node 0-0' },
+ { key: '0-1', title: 'node 0-1' },
+ ],
+ })
+ expect(findNodeFromPath(data, [])).toEqual(undefined)
+ })
+
+ it('test mergeTreeSelected', () => {
+ expect(mergeTreeSelected(data, [], ['0', '0-0'])).toEqual(['0', '0-0'])
+ })
+
+ it('test isIntermediated', () => {
+ expect(isIntermediated(new Set(['0-0', '0']), {
+ key: '0',
+ title: 'node 0',
+ children: [
+ { key: '0-0', title: 'node 0-0' },
+ { key: '0-1', title: 'node 0-1' },
+ ],
+ })).toBeTruthy()
+ expect(isIntermediated(new Set(['0-1', '0-0', '0']), {
+ key: '0',
+ title: 'node 0',
+ children: [
+ { key: '0-0', title: 'node 0-0' },
+ { key: '0-1', title: 'node 0-1' },
+ ],
+ })).toBeFalsy()
+ })
+
  it('defaultExpandAll', async () => {
  const { container } = render(
  <Tree

packages/design/src/components/tree/index.module.less

@@ -38,17 +38,18 @@
  position: relative;
  padding-left: var(--padding-xl);
 
- > a {
+ >a {
  cursor: pointer;
  position: relative;
- display: block;
+ display: flex;
+ align-items: center;
  }
 
  &-content {
  margin-bottom: 8px;
 
  &-selected {
- font-weight: 500;
+ // font-weight: 500;
  color: rgb(var(--primary-color));
 
  &-icon {

packages/design/src/components/tree/index.ts

@@ -15,3 +15,4 @@
  */
 
 export { type ITreeNodeProps, type ITreeProps, Tree, TreeSelectionMode } from './Tree';
+export { mergeTreeSelected, findSubTreeFromPath, findNodePathFromTree, filterLeafNode } from './util'