feat(tree-select): add check strategy in tree-select #758

LYErin · 2021-08-02T08:39:47Z

close #624

vercel · 2021-08-02T08:39:51Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/tusimple/naive-ui/DpXwX8TajNy3v2mXqCWPck8By2sZ
✅ Preview: https://naive-ui-git-fork-lyerin-feat-tree-select-strategy-tusimple.vercel.app

codecov · 2021-08-02T08:46:33Z

Codecov Report

Merging #758 (39d8e7f) into main (a715dfd) will decrease coverage by 5.97%.
The diff coverage is 14.28%.

❗ Current head 39d8e7f differs from pull request most recent head 2644384. Consider uploading reports for the commit 2644384 to get more accurate results

@@            Coverage Diff             @@
##             main     #758      +/-   ##
==========================================
- Coverage   47.24%   41.27%   -5.98%     
==========================================
  Files         511      507       -4     
  Lines       12612    12418     -194     
  Branches     3550     3491      -59     
==========================================
- Hits         5959     5125     -834     
- Misses       5636     6367     +731     
+ Partials     1017      926      -91

Impacted Files	Coverage Δ
src/tree-select/src/TreeSelect.tsx	`22.51% <0.00%> (-1.65%)`	⬇️
src/tree-select/src/interface.ts	`100.00% <ø> (ø)`
src/tree/src/Tree.tsx	`16.62% <50.00%> (-6.53%)`	⬇️
src/preset.ts	`0.00% <0.00%> (-100.00%)`	⬇️
src/themes/dark.ts	`0.00% <0.00%> (-100.00%)`	⬇️
src/themes/light.ts	`0.00% <0.00%> (-100.00%)`	⬇️
src/_internal/icons/Search.tsx	`0.00% <0.00%> (-100.00%)`	⬇️
src/page-header/styles/dark.ts	`0.00% <0.00%> (-100.00%)`	⬇️
src/tree/src/MotionWrapper.tsx	`0.00% <0.00%> (-100.00%)`	⬇️
src/_utils/vue/create-data-key.ts	`0.00% <0.00%> (-100.00%)`	⬇️
... and 106 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 29577a2...2644384. Read the comment docs.

XieZongChen · 2021-08-02T10:09:22Z

src/tree-select/src/interface.ts

@@ -38,3 +38,5 @@ export interface TreeSelectInjection {

 export const treeSelectInjectionKey: InjectionKey<TreeSelectInjection> =
  Symbol('tree-select')
+
+export type CheckStrategy = 'SHOW_ALL' | 'SHOW_PARENT' | 'SHOW_CHILD'


命名不要全字母大写，也不用这么啰嗦，'all'、'parent'、'child' 即可

XieZongChen · 2021-08-02T10:18:52Z

src/tree-select/demos/zhCN/index.demo-entry.md

@@ -20,6 +21,7 @@ debug
 | --- | --- | --- | --- |
 | cascade | `boolean` | `false` | 使用 checkbox 进行多选时是否级联 |
 | checkable | `boolean` | `false` | 是否使用 checkbox 进行选择 |
+| check-strategy | `string` | `'SHOW_ALL'` | 设置勾选策略来指定显示勾选的子节点还是父节点,SHOW_ALL: 默认显示所有选中节点(包括父节点);SHOW_PARENT: 只显示父节点(当父节点下所有子节点都选中时);SHOW_CHILD: 只显示子节点 |


API 的 value 取名不好（其他地方有解释）

类型可以用 'all' | 'parent' | 'child'

描述内容太多太啰嗦太口语化，不用解释每个 value 的含义

07akioni

这个 Strategy 具体的运算应该在 treemate 那个仓库实现。

比如

const res = dataTreeMateRef.value![checked ? 'check' : 'uncheck'](
        node.key,
        displayedCheckedKeysRef.value,
        {
          cascade: props.cascade,
          leafOnly: props.leafOnly,
          strategy: xxx
        }
      )

可以把相关的逻辑转移一下，treemate 的测试比较完善

LYErin · 2021-08-03T07:23:18Z

这个 Strategy 具体的运算应该在 treemate 那个仓库实现。

比如
const res = dataTreeMateRef.value![checked ? 'check' : 'uncheck'](
        node.key,
        displayedCheckedKeysRef.value,
        {
          cascade: props.cascade,
          leafOnly: props.leafOnly,
          strategy: xxx
        }
      )
可以把相关的逻辑转移一下，treemate 的测试比较完善

treemate 仓库已实现等你这边合并发布

07akioni · 2021-08-03T16:09:58Z

这个 Strategy 具体的运算应该在 treemate 那个仓库实现。
比如
const res = dataTreeMateRef.value![checked ? 'check' : 'uncheck'](
        node.key,
        displayedCheckedKeysRef.value,
        {
          cascade: props.cascade,
          leafOnly: props.leafOnly,
          strategy: xxx
        }
      )
可以把相关的逻辑转移一下，treemate 的测试比较完善
treemate 仓库已实现等你这边合并发布

那边 Review 了，可能需要麻烦你想想有没有更好的方法。

LYErin · 2021-08-04T08:13:11Z

这个 Strategy 具体的运算应该在 treemate 那个仓库实现。
比如
const res = dataTreeMateRef.value![checked ? 'check' : 'uncheck'](
        node.key,
        displayedCheckedKeysRef.value,
        {
          cascade: props.cascade,
          leafOnly: props.leafOnly,
          strategy: xxx
        }
      )
可以把相关的逻辑转移一下，treemate 的测试比较完善
treemate 仓库已实现等你这边合并发布
那边 Review 了，可能需要麻烦你想想有没有更好的方法。

已进一步优化，测试已添加

07akioni · 2021-08-04T16:59:19Z

这个 Strategy 具体的运算应该在 treemate 那个仓库实现。
比如
const res = dataTreeMateRef.value![checked ? 'check' : 'uncheck'](
        node.key,
        displayedCheckedKeysRef.value,
        {
          cascade: props.cascade,
          leafOnly: props.leafOnly,
          strategy: xxx
        }
      )
可以把相关的逻辑转移一下，treemate 的测试比较完善
treemate 仓库已实现等你这边合并发布
那边 Review 了，可能需要麻烦你想想有没有更好的方法。
已进一步优化，测试已添加

Review 了，感觉总体比昨天好很多，还有一点小的疑问需要处理。

07akioni/treemate#34 (review)

…/naive-ui into feat-tree-select-strategy

07akioni

要注意的是 mergedCheckedKeys 也需要使用 treeMate.getCheckedKeys 过滤一波。

例如在 strategy = parent，value = [0-0] 的时候

- 0
  - 0-0

我们应该在选择框中显示 0 而不是 0-0。所以这就要求我们不能直接把选中的值交给选择框，而是通过 treeMate.getCheckedKeys 滤一遍。

07akioni · 2021-08-07T14:25:13Z

src/tree-select/demos/enUS/check-strategy.demo.md

@@ -0,0 +1,141 @@
+# set checkedStrategy


Suggested change

# set checkedStrategy

# Set Check Strategy

07akioni · 2021-08-07T14:25:35Z

src/tree-select/demos/enUS/check-strategy.demo.md

+<n-tree-select
+  multiple
+  cascade
+  checkable
+  checkStrategy="SHOW_PARENT"
+  :options="options"
+  :default-value="['Norwegian Wood']"
+/>


把三种都写上

注意 SHOW_PARENT 变成 parent 了

07akioni · 2021-08-07T14:26:22Z

src/tree-select/demos/enUS/check-strategy.demo.md

@@ -0,0 +1,141 @@
+# set checkedStrategy
+


把三种的用途写一下

07akioni · 2021-08-07T14:39:45Z

src/tree-select/demos/enUS/index.demo-entry.md

@@ -20,6 +21,7 @@ debug
 | --- | --- | --- | --- |
 | cascade | `boolean` | `false` | Whether to do cascade check when use checkboxes. |
 | checkable | `boolean` | `false` | Whether to use checkbox to select value. |
+| check-strategy | `string` | `'all'` | set Check Strategy to show parent node or children. all: show all checked node; parent: show all checked parent node when all child node are checked; child: show all child node |


Suggested change

| check-strategy | `string` | `'all'` | set Check Strategy to show parent node or children. all: show all checked node; parent: show all checked parent node when all child node are checked; child: show all child node |

| check-strategy | `string` | `'all'` | The way to show checked options. `all`: Show all checked node. `parent`: Show all checked parent node when all child node are checked. `child`: show all child node. |

中文也顺带改一下

07akioni · 2021-08-07T14:40:16Z

src/tree-select/demos/zhCN/check-strategy.demo.md

@@ -0,0 +1,119 @@
+# 勾选指定策略


Suggested change

# 勾选指定策略

# 指定勾选策略

07akioni · 2021-08-07T14:41:50Z

src/tree-select/demos/zhCN/index.demo-entry.md

@@ -20,6 +21,7 @@ debug
 | --- | --- | --- | --- |
 | cascade | `boolean` | `false` | 使用 checkbox 进行多选时是否级联 |
 | checkable | `boolean` | `false` | 是否使用 checkbox 进行选择 |
+| check-strategy | `string` | `'all'` | 设置勾选策略来指定显示勾选的子节点还是父节点,all: 默认显示全部选中节点;parent: 只显示父节点(当父节点下所有子节点都选中时);child: 只显示子节点 |


07akioni · 2021-08-07T14:49:21Z

src/tree/src/Tree.tsx

-        leafOnly: props.leafOnly
-      })
-      doUpdateCheckedKeys(checkedKeys)
+      const res = dataTreeMateRef.value![checked ? 'check' : 'uncheck'](


用原来的解构写法

pipinet · 2021-08-07T17:47:09Z

代码没有细看，只是回显做了merge还是emit出去的值也merge了？应该是值也merge了才是正解的。

07akioni · 2021-08-07T18:00:28Z

了merge还是emit出去的值也merge了？应该

期望的处理方式是 emit 和回显的都要处理

07akioni · 2021-08-07T18:05:01Z

了merge还是emit出去的值也merge了？应该

期望的处理方式是 emit 和回显的都要处理

例如在 strategy = parent，value = [0-0] 的时候

0
- 0-0
  我们应该在选择框中显示 0 而不是 0-0。所以这就要求我们不能直接把选中的值交给选择框，而是通过 treeMate.getCheckedKeys 滤一遍。

例如在 strategy = parent，value = [] 的时候

0
- 0-0

这个时候点了 0-0，emit 的值应该是 0

07akioni · 2021-08-07T18:19:17Z

@LYErin @pipinet treemate 0.3 已经可以用了

pipinet · 2021-08-08T02:09:22Z

@LYErin @pipinet treemate 0.3 已经可以用了

太棒了！

LYErin · 2021-08-08T04:03:45Z

了merge还是emit出去的值也merge了？应该

期望的处理方式是 emit 和回显的都要处理

例如在 strategy = parent，value = [0-0] 的时候

0

0-0
我们应该在选择框中显示 0 而不是 0-0。所以这就要求我们不能直接把选中的值交给选择框，而是通过 treeMate.getCheckedKeys 滤一遍。

例如在 strategy = parent，value = [] 的时候

0

0-0

这个时候点了 0-0，emit 的值应该是 0

了解你的意思

07akioni · 2021-08-08T04:44:13Z

可以 rebase 一下，tree-select 有一点更新

LYErin · 2021-08-08T05:22:27Z

可以 rebase 一下，tree-select 有一点更新
解决冲突啦，你看看，回显那边也兼容策略了

07akioni · 2021-08-08T16:18:21Z

CI 挂了

07akioni · 2021-08-09T15:40:22Z

src/tree-select/src/TreeSelect.tsx

@@ -265,10 +266,16 @@ export default defineComponent({
      if (Array.isArray(mergedValue)) {
        const res: SelectBaseOption[] = []
        const { value: treeMate } = dataTreeMateRef
-        mergedValue.forEach((value) => {
+        const { checkedKeys } = treeMate.getCheckedKeys(mergedValue)


不是下面那样处理，那样干的话 treemate 白改了😂。是通过 getCheckedKeys 的第二个 options。

拿到 checkedKeys

07akioni · 2021-08-09T15:48:08Z

src/tree-select/demos/zhCN/check-strategy.demo.md

+<n-tree-select
+  multiple
+  cascade
+  checkable
+  checkStrategy="parent"
+  :options="options"
+  :default-value="['Dig It', 'go']"
+  @update:value="updateValue"
+/>


把三种策略都写进 demo

src/tree-select/demos/zhCN/check-strategy.demo.md

feat(tree-select): 增加勾选指定中策略属性

d7606d3

vercel bot deployed to Preview August 2, 2021 08:39 View deployment

feat(tree-select): 更新日志

feb138d

vercel bot deployed to Preview August 2, 2021 08:50 View deployment

XieZongChen reviewed Aug 2, 2021

View reviewed changes

07akioni reviewed Aug 2, 2021

View reviewed changes

feat(tree): update treemate to add check strategy

b9aa421

vercel bot had a problem deploying to Preview August 3, 2021 07:16 Failure

Merge branch 'main' into feat-tree-select-strategy

b2844be

vercel bot had a problem deploying to Preview August 3, 2021 07:21 Failure

LYErin added 3 commits August 5, 2021 15:40

feat(select): disabled option hide close iocn

ac544a9

feat(tree): 兼容合并leaf-only与子策略属性

1837816

Merge branch 'feat-tree-select-strategy' of https://github.com/LYErin…

8028f06

…/naive-ui into feat-tree-select-strategy

vercel bot had a problem deploying to Preview August 6, 2021 01:41 Failure

Merge branch 'main' into feat-tree-select-strategy

7743c1d

vercel bot had a problem deploying to Preview August 6, 2021 01:44 Failure

07akioni reviewed Aug 7, 2021

View reviewed changes

LYErin closed this Aug 8, 2021

feat: 回显值跟随策略优化

5d275d8

LYErin reopened this Aug 8, 2021

vercel bot deployed to Preview August 8, 2021 04:37 View deployment

feat: 优化回显结果

2c350e3

vercel bot deployed to Preview August 8, 2021 05:15 View deployment

Merge branch 'main' into feat-tree-select-strategy

77b67b1

vercel bot had a problem deploying to Preview August 8, 2021 05:19 Failure

Update TreeSelect.tsx

094e67c

vercel bot deployed to Preview August 9, 2021 08:10 View deployment

07akioni reviewed Aug 9, 2021

View reviewed changes

Merge branch 'main' into feat-tree-select-strategy

39d8e7f

vercel bot deployed to Preview August 11, 2021 08:42 View deployment

Apply suggestions from code review

b2deea8

vercel bot deployed to Preview September 2, 2021 17:13 View deployment

Merge branch 'main' into feat-tree-select-strategy

2644384

07akioni merged commit 6ccbe86 into tusen-ai:main Sep 2, 2021

vercel bot deployed to Preview September 2, 2021 17:22 View deployment

LYErin deleted the feat-tree-select-strategy branch September 20, 2021 01:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(tree-select): add check strategy in tree-select #758

feat(tree-select): add check strategy in tree-select #758

LYErin commented Aug 2, 2021 •

edited

Loading

vercel bot commented Aug 2, 2021 •

edited

Loading

codecov bot commented Aug 2, 2021 •

edited

Loading

XieZongChen Aug 2, 2021

XieZongChen Aug 2, 2021

07akioni left a comment

LYErin commented Aug 3, 2021

07akioni commented Aug 3, 2021

LYErin commented Aug 4, 2021 •

edited

Loading

07akioni commented Aug 4, 2021

07akioni left a comment

07akioni Aug 7, 2021

07akioni Aug 7, 2021

07akioni Aug 7, 2021

07akioni Aug 7, 2021

07akioni Aug 7, 2021

07akioni Aug 7, 2021

07akioni Aug 7, 2021

07akioni Aug 7, 2021

pipinet commented Aug 7, 2021

07akioni commented Aug 7, 2021 •

edited

Loading

07akioni commented Aug 7, 2021

07akioni commented Aug 7, 2021

pipinet commented Aug 8, 2021

LYErin commented Aug 8, 2021

07akioni commented Aug 8, 2021

LYErin commented Aug 8, 2021

07akioni commented Aug 8, 2021

07akioni Aug 9, 2021

07akioni Aug 9, 2021

07akioni Aug 9, 2021

	\| check-strategy \| `string` \| `'all'` \| set Check Strategy to show parent node or children. all: show all checked node; parent: show all checked parent node when all child node are checked; child: show all child node \|
	\| check-strategy \| `string` \| `'all'` \| The way to show checked options. `all`: Show all checked node. `parent`: Show all checked parent node when all child node are checked. `child`: show all child node. \|

feat(tree-select): add check strategy in tree-select #758

feat(tree-select): add check strategy in tree-select #758

Conversation

LYErin commented Aug 2, 2021 • edited Loading

vercel bot commented Aug 2, 2021 • edited Loading

codecov bot commented Aug 2, 2021 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

07akioni left a comment

Choose a reason for hiding this comment

LYErin commented Aug 3, 2021

07akioni commented Aug 3, 2021

LYErin commented Aug 4, 2021 • edited Loading

07akioni commented Aug 4, 2021

07akioni left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pipinet commented Aug 7, 2021

07akioni commented Aug 7, 2021 • edited Loading

07akioni commented Aug 7, 2021

07akioni commented Aug 7, 2021

pipinet commented Aug 8, 2021

LYErin commented Aug 8, 2021

07akioni commented Aug 8, 2021

LYErin commented Aug 8, 2021

07akioni commented Aug 8, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

LYErin commented Aug 2, 2021 •

edited

Loading

vercel bot commented Aug 2, 2021 •

edited

Loading

codecov bot commented Aug 2, 2021 •

edited

Loading

LYErin commented Aug 4, 2021 •

edited

Loading

07akioni commented Aug 7, 2021 •

edited

Loading