From 5cf57f4f28d4c4b578404e0c69c6c707a0ff4950 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Wed, 26 Feb 2020 12:03:27 +0800 Subject: [PATCH] feat: tree add blockNode selectable --- build/config.js | 2 +- components/tree/DirectoryTree.jsx | 25 +++++- components/tree/Tree.jsx | 66 +++++++++------- .../__tests__/__snapshots__/demo.test.js.snap | 48 ++++++----- components/tree/demo/basic-controlled.md | 4 +- components/tree/demo/directory.md | 4 +- components/tree/demo/line.md | 46 +++++++++-- components/tree/demo/search.md | 2 +- components/tree/index.en-US.md | 79 ++++++++++--------- components/tree/index.zh-CN.md | 79 ++++++++++--------- components/tree/util.js | 29 ++++++- components/vc-tree/src/TreeNode.jsx | 4 +- site/components/layout.vue | 6 +- types/tree/tree.d.ts | 16 +++- 14 files changed, 259 insertions(+), 151 deletions(-) diff --git a/build/config.js b/build/config.js index 0a4597ad3..f9333a91d 100644 --- a/build/config.js +++ b/build/config.js @@ -1,5 +1,5 @@ module.exports = { dev: { - componentName: 'tree-select', // dev components + componentName: 'tree', // dev components }, }; diff --git a/components/tree/DirectoryTree.jsx b/components/tree/DirectoryTree.jsx index a9e3ae97e..727d13ba1 100644 --- a/components/tree/DirectoryTree.jsx +++ b/components/tree/DirectoryTree.jsx @@ -4,7 +4,12 @@ import PropTypes from '../_util/vue-types'; import warning from '../_util/warning'; import { conductExpandParent, convertTreeToEntities } from '../vc-tree/src/util'; import Tree, { TreeProps } from './Tree'; -import { calcRangeKeys, getFullKeyList } from './util'; +import { + calcRangeKeys, + getFullKeyList, + convertDirectoryKeysToNodes, + getFullKeyListByTreeData, +} from './util'; import Icon from '../icon'; import BaseMixin from '../_util/BaseMixin'; import { @@ -64,7 +69,11 @@ export default { // Expanded keys if (defaultExpandAll) { - state._expandedKeys = getFullKeyList(this.$slots.default); + if (props.treeData) { + state._expandedKeys = getFullKeyListByTreeData(props.treeData); + } else { + state._expandedKeys = getFullKeyList(this.$slots.default); + } } else if (defaultExpandParent) { state._expandedKeys = conductExpandParent(expandedKeys || defaultExpandedKeys, keyEntities); } else { @@ -125,6 +134,13 @@ export default { const { eventKey = '' } = node; const newState = {}; + + // We need wrap this event since some value is not same + const newEvent = { + ...event, + selected: true, // Directory selected always true + }; + // Windows / Mac single pick const ctrlPick = nativeEvent.ctrlKey || nativeEvent.metaKey; const shiftPick = nativeEvent.shiftKey; @@ -136,6 +152,7 @@ export default { newSelectedKeys = keys; this.lastSelectedKey = eventKey; this.cachedSelectedKeys = newSelectedKeys; + newEvent.selectedNodes = convertDirectoryKeysToNodes(children, newSelectedKeys); } else if (multiple && shiftPick) { // Shift click newSelectedKeys = Array.from( @@ -144,16 +161,18 @@ export default { ...calcRangeKeys(children, expandedKeys, eventKey, this.lastSelectedKey), ]), ); + newEvent.selectedNodes = convertDirectoryKeysToNodes(children, newSelectedKeys); } else { // Single click newSelectedKeys = [eventKey]; this.lastSelectedKey = eventKey; this.cachedSelectedKeys = newSelectedKeys; + newEvent.selectedNodes = [event.node]; } newState._selectedKeys = newSelectedKeys; this.$emit('update:selectedKeys', newSelectedKeys); - this.$emit('select', newSelectedKeys, event); + this.$emit('select', newSelectedKeys, newEvent); this.setUncontrolledState(newState); }, diff --git a/components/tree/Tree.jsx b/components/tree/Tree.jsx index 485730d0d..5292eef38 100644 --- a/components/tree/Tree.jsx +++ b/components/tree/Tree.jsx @@ -93,6 +93,7 @@ function TreeProps() { * 替换treeNode中 title,key,children字段为treeData中对应的字段 */ replaceFields: PropTypes.object, + blockNode: PropTypes.bool, }; } @@ -111,6 +112,7 @@ export default { on: animation, props: { appear: null }, }, + blockNode: false, }), inject: { configProvider: { default: () => ConfigConsumerProps }, @@ -128,32 +130,27 @@ export default { if (loading) { return ; } - if (showLine) { - if (isLeaf) { - return ; - } - return ( - - ); - } else { - const switcherCls = `${prefixCls}-switcher-icon`; - if (isLeaf) { - return null; - } else if (switcherIcon) { - const switcherOriginCls = getClass(switcherIcon[0]); - return cloneElement(switcherIcon, { - class: { - [switcherCls]: true, - }, - }); - } else { - return ; - } + + if (isLeaf) { + return showLine ? : null; } + const switcherCls = `${prefixCls}-switcher-icon`; + if (switcherIcon) { + return cloneElement(switcherIcon, { + class: { + [switcherCls]: true, + }, + }); + } + return showLine ? ( + + ) : ( + + ); }, updateTreeData(treeData) { const { $slots, $scopedSlots } = this; @@ -166,12 +163,17 @@ export default { const treeNodeProps = { ...restProps, icon: - $slots[slots.icon] || ($scopedSlots[scopedSlots.icon] && $scopedSlots[scopedSlots.icon](item)) || + $slots[slots.icon] || restProps.icon, + switcherIcon: + ($scopedSlots[scopedSlots.switcherIcon] && + $scopedSlots[scopedSlots.switcherIcon](item)) || + $slots[slots.switcherIcon] || + restProps.switcherIcon, title: - $slots[slots.title] || ($scopedSlots[scopedSlots.title] && $scopedSlots[scopedSlots.title](item)) || + $slots[slots.title] || restProps[replaceFields.title], dataRef: item, on, @@ -188,7 +190,8 @@ export default { }, render() { const props = getOptionProps(this); - const { prefixCls: customizePrefixCls, showIcon, treeNodes } = props; + const { $slots, $scopedSlots } = this; + const { prefixCls: customizePrefixCls, showIcon, treeNodes, blockNode } = props; const getPrefixCls = this.configProvider.getPrefixCls; const prefixCls = getPrefixCls('tree', customizePrefixCls); const switcherIcon = getComponentFromProp(this, 'switcherIcon'); @@ -202,13 +205,16 @@ export default { ...props, prefixCls, checkable: checkable ? : checkable, - children: filterEmpty(this.$slots.default || []), + children: filterEmpty($scopedSlots.default ? $scopedSlots.default() : $slots.default), __propsSymbol__: Symbol(), switcherIcon: nodeProps => this.renderSwitcherIcon(prefixCls, switcherIcon, nodeProps), }, on: getListeners(this), ref: 'tree', - class: !showIcon && `${prefixCls}-icon-hide`, + class: { + [`${prefixCls}-icon-hide`]: !showIcon, + [`${prefixCls}-block-node`]: blockNode, + }, }; if (treeData) { vcTreeProps.props.treeData = treeData; diff --git a/components/tree/__tests__/__snapshots__/demo.test.js.snap b/components/tree/__tests__/__snapshots__/demo.test.js.snap index c92d5eeda..24bb7d0fd 100644 --- a/components/tree/__tests__/__snapshots__/demo.test.js.snap +++ b/components/tree/__tests__/__snapshots__/demo.test.js.snap @@ -109,25 +109,35 @@ exports[`renders ./components/tree/demo/dynamic.md correctly 1`] = ` `; exports[`renders ./components/tree/demo/line.md correctly 1`] = ` -
    -
  • parent 1 -
      -
    • parent 1-0 -
        -
      • leaf
      • -
      • leaf
      • -
      • leaf
      • -
      -
    • -
    • parent 1-1 - -
    • -
    • parent 1-2 - -
    • -
    -
  • -
+
+
+ showLine:

+ showIcon:
+
    +
  • parent 1 +
      +
    • parent 1-0 +
        +
      • leaf
      • +
      • leaf
      • +
      • leaf
      • +
      +
    • +
    • parent 1-1 +
        +
      • leaf
      • +
      +
    • +
    • parent 1-2 +
        +
      • leaf
      • +
      • leaf
      • +
      +
    • +
    +
  • +
+
`; exports[`renders ./components/tree/demo/replaceFields.md correctly 1`] = ` diff --git a/components/tree/demo/basic-controlled.md b/components/tree/demo/basic-controlled.md index eb8cda392..5b5601e93 100644 --- a/components/tree/demo/basic-controlled.md +++ b/components/tree/demo/basic-controlled.md @@ -4,8 +4,8 @@ -#### basic controlled example -basic controlled example +#### Controlled Tree +Controlled mode lets parent nodes reflect the status of child nodes more intelligently. ```tpl diff --git a/components/tree/demo/directory.md b/components/tree/demo/directory.md index 1d7e91ce0..230008fda 100644 --- a/components/tree/demo/directory.md +++ b/components/tree/demo/directory.md @@ -24,8 +24,8 @@ Built-in directory tree. `multiple` support `ctrl(Windows)` / `command(Mac)` sel