Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 15 commits into from
Sep 2, 2021
Merged
Show file tree
Hide file tree
Changes from 12 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
### Feats

- `n-loading-bar` add `loading-bar-style` props, closes [#457](https://github.com/TuSimple/naive-ui/issues/457).
- `n-tree-select` add `check-strategy` prop.
- `n-button` add `text-color` prop.
- `n-form` export `FormValidationError` type.
- `n-popconfirm` support not show action components, closes [#770](https://github.com/TuSimple/naive-ui/issues/770).
Expand Down
1 change: 1 addition & 0 deletions CHANGELOG.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
### Feats

- `n-loading-bar` 新增 `loading-bar-style` 属性,关闭 [#457](https://github.com/TuSimple/naive-ui/issues/457)
- `n-tree-select` 增加 `check-strategy` 属性.
- `n-button` 新增 `text-color` 属性
- `n-form` 导出 `FormValidationError` 类型
- `n-popconfirm` 支持不显示操作组件,关闭 [#770](https://github.com/TuSimple/naive-ui/issues/770)
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
"seemly": "^0.3.1",
"treemate": "^0.2.12",
"treemate": "^0.3",
"vdirs": "^0.1.4",
"vfonts": "^0.1.0",
"vooks": "^0.2.6",
Expand Down
121 changes: 121 additions & 0 deletions src/tree-select/demos/enUS/check-strategy.demo.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
# Set Check Strategy

# all: show all checked node; parent: show all checked parent node when all child node are checked; child: show all child node

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

把三种的用途写一下

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

```js
import { defineComponent } from 'vue'

export default defineComponent({
setup () {
return {
options: [
{
label: 'Rubber Soul',
key: 'Rubber Soul',
children: [
{
label:
"Everybody's Got Something to Hide Except Me and My Monkey",
key: "Everybody's Got Something to Hide Except Me and My Monkey"
},
{
label: 'Drive My Car',
key: 'Drive My Car',
disabled: true
},
{
label: 'Norwegian Wood',
key: 'Norwegian Wood'
},
{
label: "You Won't See",
key: "You Won't See",
disabled: true
},
{
label: 'Nowhere Man',
key: 'Nowhere Man'
},
{
label: 'Think For Yourself',
key: 'Think For Yourself'
},
{
label: 'The Word',
key: 'The Word'
},
{
label: 'Michelle',
key: 'Michelle',
disabled: true
},
{
label: 'What goes on',
key: 'What goes on'
},
{
label: 'Girl',
key: 'Girl'
},
{
label: "I'm looking through you",
key: "I'm looking through you"
},
{
label: 'In My Life',
key: 'In My Life'
},
{
label: 'Wait',
key: 'Wait'
}
]
},
{
label: 'Let It Be',
key: 'Let It Be Album',
children: [
{
label: 'Two Of Us',
key: 'Two Of Us'
},
{
label: 'Dig A Pony',
key: 'Dig A Pony'
},
{
label: 'Across The Universe',
key: 'Across The Universe',
children: [
{
label: 'Dig It',
key: 'Dig It'
},
{
label: 'go',
key: 'go'
}
]
}
]
}
],
updateValue: (values) => {
console.log(values)
}
}
}
})
```
2 changes: 2 additions & 0 deletions src/tree-select/demos/enUS/index.demo-entry.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ It's said that 99% of the people can't distinguish it from cascader.
basic
multiple
checkbox
check-strategy
filterable
debug
```
Expand All @@ -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'` | 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. |
| clearable | `boolean` | `false` | Whether it's clearable. |
| consistent-menu-width | `boolean` | `true` | Whether to make menu's width consistent with input. Set to `true` will disable virtual scroll. |
| default-value | `string \| number \| Array<string \| number> \| null` | `null` | Selected key (or keys when multiple) by default. |
Expand Down
119 changes: 119 additions & 0 deletions src/tree-select/demos/zhCN/check-strategy.demo.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
# 指定勾选策略

```html
<n-tree-select
multiple
cascade
checkable
checkStrategy="parent"
07akioni marked this conversation as resolved.
Show resolved Hide resolved
:options="options"
:default-value="['Dig It', 'go']"
@update:value="updateValue"
/>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

把三种策略都写进 demo

```

```js
import { defineComponent } from 'vue'

export default defineComponent({
setup () {
return {
options: [
{
label: 'Rubber Soul',
key: 'Rubber Soul',
children: [
{
label:
"Everybody's Got Something to Hide Except Me and My Monkey",
key: "Everybody's Got Something to Hide Except Me and My Monkey"
},
{
label: 'Drive My Car',
key: 'Drive My Car',
disabled: true
},
{
label: 'Norwegian Wood',
key: 'Norwegian Wood'
},
{
label: "You Won't See",
key: "You Won't See",
disabled: true
},
{
label: 'Nowhere Man',
key: 'Nowhere Man'
},
{
label: 'Think For Yourself',
key: 'Think For Yourself'
},
{
label: 'The Word',
key: 'The Word'
},
{
label: 'Michelle',
key: 'Michelle',
disabled: true
},
{
label: 'What goes on',
key: 'What goes on'
},
{
label: 'Girl',
key: 'Girl'
},
{
label: "I'm looking through you",
key: "I'm looking through you"
},
{
label: 'In My Life',
key: 'In My Life'
},
{
label: 'Wait',
key: 'Wait'
}
]
},
{
label: 'Let It Be',
key: 'Let It Be Album',
children: [
{
label: 'Two Of Us',
key: 'Two Of Us'
},
{
label: 'Dig A Pony',
key: 'Dig A Pony'
},
{
label: 'Across The Universe',
key: 'Across The Universe',
children: [
{
label: 'Dig It',
key: 'Dig It'
},
{
label: 'go',
key: 'go'
}
]
}
]
}
],
updateValue: (values) => {
console.log(values)
}
}
}
})
```
2 changes: 2 additions & 0 deletions src/tree-select/demos/zhCN/index.demo-entry.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
basic
multiple
checkbox
check-strategy
filterable
debug
```
Expand All @@ -20,6 +21,7 @@ debug
| --- | --- | --- | --- |
| cascade | `boolean` | `false` | 使用 checkbox 进行多选时是否级联 |
| checkable | `boolean` | `false` | 是否使用 checkbox 进行选择 |
| check-strategy | `string` | `'all'` | 设置勾选策略来指定显示的勾选节点,`all`:显示全部选中节点;`parent`:只显示父节点(当父节点下所有子节点都选中时);`child`:只显示子节点 |
| clearable | `boolean` | `false` | 是否可清除 |
| consistent-menu-width | `boolean` | `true` | 是否使菜单宽度和输入框一致,打开会禁用虚拟滚动 |
| default-value | `string \| number \| Array<string \| number> \| null` | `null` | 默认选中的 key |
Expand Down
16 changes: 13 additions & 3 deletions src/tree-select/src/TreeSelect.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ import type {
TreeSelectOption,
Value
} from './interface'
import { treeSelectInjectionKey } from './interface'
import { treeSelectInjectionKey, CheckStrategy } from './interface'
import {
treeOption2SelectOption,
filterTree,
Expand Down Expand Up @@ -81,6 +81,7 @@ const props = {
},
filterable: Boolean,
leafOnly: Boolean,
checkStrategy: String as PropType<CheckStrategy>,
maxTagCount: [String, Number] as PropType<number | 'responsive'>,
multiple: Boolean,
showPath: Boolean,
Expand Down Expand Up @@ -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)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

拿到 checkedKeys

checkedKeys.forEach((value) => {
const tmNode = treeMate.getNode(value)
if (tmNode !== null) {
res.push(
if (
props.checkStrategy === 'all' ||
(props.checkStrategy === 'parent' && !tmNode.isLeaf) ||
(props.checkStrategy === 'child' && tmNode.isLeaf)
) {
res.push(
showPath
? treeOption2SelectOptionWithPath(
tmNode,
Expand All @@ -277,6 +284,7 @@ export default defineComponent({
)
: treeOption2SelectOption(tmNode)
)
}
}
})
return res
Expand Down Expand Up @@ -669,6 +677,7 @@ export default defineComponent({
mergedClsPrefix,
filteredTreeInfo,
checkable,
checkStrategy,
multiple
} = this
return withDirectives(
Expand Down Expand Up @@ -700,6 +709,7 @@ export default defineComponent({
checkedKeys={this.treeCheckedKeys}
selectedKeys={this.treeSelectedKeys}
checkable={checkable}
checkStrategy={checkStrategy}
cascade={this.mergedCascade}
leafOnly={this.leafOnly}
multiple={this.multiple}
Expand Down
2 changes: 2 additions & 0 deletions src/tree-select/src/interface.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,3 +41,5 @@ export interface TreeSelectInjection {

export const treeSelectInjectionKey: InjectionKey<TreeSelectInjection> =
Symbol('tree-select')

export type CheckStrategy = 'all' | 'parent' | 'child'
Loading