From c7ab23c4cef71043e0ea46688fa191ff2ab75931 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Fri, 28 Sep 2018 14:35:26 +0800
Subject: [PATCH] feat: update tree
---
components/index.js | 43 +-
components/tree/DirectoryTree.jsx | 22 +-
components/tree/Tree.jsx | 8 +-
.../__tests__/__snapshots__/demo.test.js.snap | 139 ++++---
components/tree/__tests__/util.test.js | 38 ++
components/tree/demo/directory.md | 43 ++
components/tree/demo/index.vue | 4 +-
components/tree/demo/search.md | 14 +-
components/tree/index.jsx | 3 -
components/tree/index.old.jsx | 183 ---------
components/tree/util.js | 4 +-
components/vc-tree/src/Tree.jsx | 8 +-
components/vc-tree/src/TreeNode.jsx | 17 +-
components/vc-tree/src/util.1.js | 378 ------------------
14 files changed, 200 insertions(+), 704 deletions(-)
create mode 100644 components/tree/__tests__/util.test.js
create mode 100644 components/tree/demo/directory.md
delete mode 100644 components/tree/index.old.jsx
delete mode 100644 components/vc-tree/src/util.1.js
diff --git a/components/index.js b/components/index.js
index 417087748..1374a81f9 100644
--- a/components/index.js
+++ b/components/index.js
@@ -125,101 +125,60 @@ import { default as Drawer } from './drawer'
const components = [
Affix,
Anchor,
- Anchor.Link,
AutoComplete,
- AutoComplete.Option,
- AutoComplete.OptGroup,
Alert,
Avatar,
BackTop,
Badge,
Breadcrumb,
- Breadcrumb.Item,
Button,
- Button.Group,
Calendar,
Card,
- Card.Meta,
- Card.Grid,
Collapse,
- Collapse.Panel,
Carousel,
Cascader,
Checkbox,
- Checkbox.Group,
Col,
DatePicker,
- DatePicker.MonthPicker,
- DatePicker.RangePicker,
- DatePicker.WeekPicker,
Divider,
Dropdown,
- Dropdown.Button,
Form,
- Form.Item,
Icon,
Input,
- Input.Group,
- Input.Search,
- Input.TextArea,
InputNumber,
Layout,
- Layout.Header,
- Layout.Footer,
- Layout.Sider,
- Layout.Content,
List,
- List.Item,
- List.Item.Meta,
LocaleProvider,
Menu,
- Menu.Item,
- Menu.SubMenu,
- Menu.Divider,
- Menu.ItemGroup,
Modal,
Pagination,
Popconfirm,
Popover,
Progress,
Radio,
- Radio.Group,
- Radio.Button,
Rate,
Row,
Select,
- Select.Option,
- Select.OptGroup,
Slider,
Spin,
Steps,
- Steps.Step,
Switch,
Table,
- Table.Column,
- Table.ColumnGroup,
Transfer,
Tree,
- Tree.TreeNode,
TreeSelect,
- TreeSelect.TreeNode,
Tabs,
- Tabs.TabPane,
- Tabs.TabContent,
Tag,
- Tag.CheckableTag,
TimePicker,
Timeline,
- Timeline.Item,
Tooltip,
Upload,
- Upload.Dragger,
Drawer,
]
const install = function (Vue) {
components.map(component => {
- Vue.component(component.name, component)
+ Vue.use(component)
})
Vue.prototype.$message = message
diff --git a/components/tree/DirectoryTree.jsx b/components/tree/DirectoryTree.jsx
index 99eee935b..12c67659d 100644
--- a/components/tree/DirectoryTree.jsx
+++ b/components/tree/DirectoryTree.jsx
@@ -5,6 +5,7 @@ import { conductExpandParent, convertTreeToEntities } from '../vc-tree/src/util'
import Tree, { TreeProps } from './Tree'
import { calcRangeKeys, getFullKeyList } from './util'
import Icon from '../icon'
+import BaseMixin from '../_util/BaseMixin'
import { initDefaultProps, getOptionProps } from '../_util/props-util'
// export type ExpandAction = false | 'click' | 'doubleClick';
@@ -27,12 +28,13 @@ function getIcon (h, props) {
}
export default {
+ mixins: [BaseMixin],
name: 'ADirectoryTree',
model: {
prop: 'checkedKeys',
event: 'check',
},
- props: initDefaultProps({ ...TreeProps(), expandAction: PropTypes.oneOf([false, 'click', 'doubleClick']) }, {
+ props: initDefaultProps({ ...TreeProps(), expandAction: PropTypes.oneOf([false, 'click', 'doubleclick']) }, {
prefixCls: 'ant-tree',
showIcon: true,
expandAction: 'click',
@@ -55,7 +57,7 @@ export default {
// Expanded keys
if (defaultExpandAll) {
- state._expandedKeys = getFullKeyList(props.children)
+ state._expandedKeys = getFullKeyList(this.$slots.default)
} else if (defaultExpandParent) {
state._expandedKeys = conductExpandParent(expandedKeys || defaultExpandedKeys, keyEntities)
} else {
@@ -102,7 +104,7 @@ export default {
const { expandAction } = this.$props
// Expand the tree
- if (expandAction === 'doubleClick') {
+ if (expandAction === 'doubleclick') {
this.onDebounceExpand(event, node)
}
@@ -117,7 +119,6 @@ export default {
const { eventKey = '' } = node
const newState = {}
-
// Windows / Mac single pick
const ctrlPick = nativeEvent.ctrlKey || nativeEvent.metaKey
const shiftPick = nativeEvent.shiftKey
@@ -171,7 +172,7 @@ export default {
this.$emit('expand', newExpandedKeys, {
expanded: !expanded,
node,
- nativeEvent: event.nativeEvent,
+ nativeEvent: event,
})
},
@@ -195,10 +196,13 @@ export default {
selectedKeys,
},
class: `${prefixCls}-directory`,
- select: this.onSelect,
- click: this.onClick,
- doubleclick: this.onDoubleClick,
- expand: this.onExpand,
+ on: {
+ ...this.$listeners,
+ select: this.onSelect,
+ click: this.onClick,
+ doubleclick: this.onDoubleClick,
+ expand: this.onExpand,
+ },
}
return (
{this.$slots.default}
diff --git a/components/tree/Tree.jsx b/components/tree/Tree.jsx
index 1999db8d8..8dade4555 100644
--- a/components/tree/Tree.jsx
+++ b/components/tree/Tree.jsx
@@ -113,12 +113,8 @@ export default {
const { children, on = {}, slots = {}, scopedSlots = {}, key, class: cls, style, ...restProps } = item
const treeNodeProps = {
...restProps,
- icon: restProps.icon ||
- $slots[slots.icon] ||
- ($scopedSlots[scopedSlots.icon] && $scopedSlots[scopedSlots.icon]),
- title: restProps.title ||
- $slots[slots.title] ||
- ($scopedSlots[scopedSlots.title] && $scopedSlots[scopedSlots.title])(item),
+ icon: $slots[slots.icon] || ($scopedSlots[scopedSlots.icon] && $scopedSlots[scopedSlots.icon]) || restProps.icon,
+ title: $slots[slots.title] || ($scopedSlots[scopedSlots.title] && $scopedSlots[scopedSlots.title](item)) || restProps.title,
dataRef: item,
on,
key,
diff --git a/components/tree/__tests__/__snapshots__/demo.test.js.snap b/components/tree/__tests__/__snapshots__/demo.test.js.snap
index 184b65901..ebf2d87ca 100644
--- a/components/tree/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/tree/__tests__/__snapshots__/demo.test.js.snap
@@ -1,18 +1,18 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/tree/demo/basic.md correctly 1`] = `
-
- - parent 1
-
- - parent 1-0
-
- - leaf
- - leaf
+
+ - parent 1
+
+ - parent 1-0
+
- - parent 1-1
-
@@ -21,91 +21,108 @@ exports[`renders ./components/tree/demo/basic.md correctly 1`] = `
`;
exports[`renders ./components/tree/demo/basic-controlled.md correctly 1`] = `
-
- - 0-0
-
- - 0-0-0
-
- - 0-0-0-0
- - 0-0-0-1
- - 0-0-0-2
+
+ - 0-0
+
+ - 0-0-0
+
+ - 0-0-0-0
+ - 0-0-0-1
+ - 0-0-0-2
- - 0-0-1
-
- - 0-0-1-0
- - 0-0-1-1
- - 0-0-1-2
+ - 0-0-1
+
+ - 0-0-1-0
+ - 0-0-1-1
+ - 0-0-1-2
- - 0-0-2
+ - 0-0-2
- - 0-1
+
- 0-1
- - 0-2
+ - 0-2
`;
exports[`renders ./components/tree/demo/customized-icon.md correctly 1`] = `
-
- - parent 1
-
- - leaf
- - leaf
+
+`;
+
+exports[`renders ./components/tree/demo/directory.md correctly 1`] = `
+
+ - parent 0
+
+
+ - parent 1
+
`;
exports[`renders ./components/tree/demo/draggable.md correctly 1`] = `
-
- - 0-0
-
- - 0-0-0
-
- - 0-0-0-0
- - 0-0-0-1
- - 0-0-0-2
+
+ - 0-0
+
+ - 0-0-0
+
+ - 0-0-0-0
+ - 0-0-0-1
+ - 0-0-0-2
- - 0-0-1
+
- 0-0-1
- - 0-0-2
+ - 0-0-2
- - 0-1
+
- 0-1
- - 0-2
+ - 0-2
`;
exports[`renders ./components/tree/demo/dynamic.md correctly 1`] = `
-
- - Expand to load
- - Expand to load
- - Tree Node
+
+ - Expand to load
+ - Expand to load
+ - Tree Node
`;
exports[`renders ./components/tree/demo/line.md correctly 1`] = `
-
- - parent 1
-
- - parent 1-0
-
- - leaf
- - leaf
- - leaf
+
+ - parent 1
+
+ - parent 1-0
+
- - parent 1-1
+
- parent 1-1
- - parent 1-2
+
- parent 1-2
@@ -115,22 +132,22 @@ exports[`renders ./components/tree/demo/line.md correctly 1`] = `
exports[`renders ./components/tree/demo/search.md correctly 1`] = `
-
- -
+
+ -
0-0
- -
+
-
0-1
- -
+
-
0-2
diff --git a/components/tree/__tests__/util.test.js b/components/tree/__tests__/util.test.js
new file mode 100644
index 000000000..1fc00945b
--- /dev/null
+++ b/components/tree/__tests__/util.test.js
@@ -0,0 +1,38 @@
+import { mount } from '@vue/test-utils'
+import Tree from '../index'
+import { calcRangeKeys } from '../util'
+
+const TreeNode = Tree.TreeNode
+
+describe('Tree util', () => {
+ it('calc range keys', () => {
+ const wrapper = mount({
+ render () {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ },
+ })
+
+ const treeWrapper = wrapper.find({ name: 'ATree' })
+ const keys = calcRangeKeys(treeWrapper.vm.$slots.default, ['0-0', '0-2', '0-2-0'], '0-2-0-1', '0-0-0')
+ const target = ['0-0-0', '0-0-1', '0-1', '0-2', '0-2-0', '0-2-0-0', '0-2-0-1']
+ expect(keys.sort()).toEqual(target.sort())
+ })
+})
diff --git a/components/tree/demo/directory.md b/components/tree/demo/directory.md
new file mode 100644
index 000000000..3cf4bc464
--- /dev/null
+++ b/components/tree/demo/directory.md
@@ -0,0 +1,43 @@
+
+#### 目录
+内置的目录树，`multiple` 模式支持 `ctrl(Windows)` / `command(Mac)` 复选。
+
+
+
+#### Directory
+Built-in directory tree. `multiple` support `ctrl(Windows)` / `command(Mac)` selection.
+
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/components/tree/demo/index.vue b/components/tree/demo/index.vue
index 673e0d264..424efbbe5 100644
--- a/components/tree/demo/index.vue
+++ b/components/tree/demo/index.vue
@@ -6,6 +6,7 @@ import Draggable from './draggable'
import Dynamic from './dynamic'
import Line from './line'
import Search from './search'
+import Directory from './directory'
import CN from '../index.zh-CN.md'
import US from '../index.en-US.md'
@@ -20,7 +21,7 @@ const md = {
us: `# Tree
## When To Use
-Almost anything can be represented in a tree structure.
+Almost anything can be represented in a tree structure.
Examples include directories, organization hierarchies, biological classifications, countries, etc. The \`Tree\` component is a way of representing the hierarchical relationship between these things. You can also expand, collapse, and select a treeNode within a \`Tree\`.
## Examples
`,
@@ -41,6 +42,7 @@ export default {
+
diff --git a/components/tree/demo/search.md b/components/tree/demo/search.md
index f9fbd9c86..969155b11 100644
--- a/components/tree/demo/search.md
+++ b/components/tree/demo/search.md
@@ -16,15 +16,15 @@ Searchable Tree.
@expand="onExpand"
:expandedKeys="expandedKeys"
:autoExpandParent="autoExpandParent"
- :treeNodes="gData"
+ :treeData="gData"
>
-
-
- {{key.substr(0, key.indexOf(searchValue))}}
+
+
+ {{title.substr(0, title.indexOf(searchValue))}}
{{searchValue}}
- {{key.substr(key.indexOf(searchValue) + searchValue.length)}}
+ {{title.substr(title.indexOf(searchValue) + searchValue.length)}}
- {{key}}
+ {{title}}
)
diff --git a/components/vc-tree/src/util.1.js b/components/vc-tree/src/util.1.js
deleted file mode 100644
index 9f1b2c1c4..000000000
--- a/components/vc-tree/src/util.1.js
+++ /dev/null
@@ -1,378 +0,0 @@
-/* eslint no-loop-func: 0*/
-import warning from 'warning'
-import { getSlotOptions, getOptionProps } from '../../_util/props-util'
-const DRAG_SIDE_RANGE = 0.25
-const DRAG_MIN_GAP = 2
-
-let onlyTreeNodeWarned = false
-
-export function warnOnlyTreeNode () {
- if (onlyTreeNodeWarned) return
-
- onlyTreeNodeWarned = true
- warning(false, 'Tree only accept TreeNode as children.')
-}
-
-export function arrDel (list, value) {
- const clone = list.slice()
- const index = clone.indexOf(value)
- if (index >= 0) {
- clone.splice(index, 1)
- }
- return clone
-}
-
-export function arrAdd (list, value) {
- const clone = list.slice()
- if (clone.indexOf(value) === -1) {
- clone.push(value)
- }
- return clone
-}
-
-export function posToArr (pos) {
- return pos.split('-')
-}
-
-export function getPosition (level, index) {
- return `${level}-${index}`
-}
-
-export function isTreeNode (node) {
- return getSlotOptions(node).isTreeNode
-}
-
-export function getNodeChildren (children = []) {
- return children.filter(isTreeNode)
-}
-
-export function isCheckDisabled (node) {
- const { disabled, disableCheckbox } = getOptionProps(node) || {}
- return !!(disabled || disableCheckbox)
-}
-
-export function traverseTreeNodes (treeNodes, subTreeData, callback) {
- function processNode (node, index, parent) {
- const children = node ? node.componentOptions.children : treeNodes
- const pos = node ? getPosition(parent.pos, index) : 0
-
- // Filter children
- const childList = getNodeChildren(children)
-
- // Process node if is not root
- if (node) {
- const data = {
- node,
- index,
- pos,
- key: node.key || pos,
- parentPos: parent.node ? parent.pos : null,
- }
- callback(data)
- }
-
- // Process children node
- childList.forEach((subNode, subIndex) => {
- processNode(subNode, subIndex, { node, pos })
- })
- }
-
- processNode(null)
-}
-
-/**
- * Use `rc-util` `toArray` to get the children list which keeps the key.
- * And return single node if children is only one(This can avoid `key` missing check).
- */
-export function mapChildren (children = [], func) {
- const list = children.map(func)
- if (list.length === 1) {
- return list[0]
- }
- return list
-}
-
-/**
- * [Legacy] Return halfChecked when it has value.
- * @param checkedKeys
- * @param halfChecked
- * @returns {*}
- */
-export function getStrictlyValue (checkedKeys, halfChecked) {
- if (halfChecked) {
- return { checked: checkedKeys, halfChecked }
- }
- return checkedKeys
-}
-
-export function getFullKeyList (treeNodes) {
- const keyList = []
- traverseTreeNodes(treeNodes, ({ key }) => {
- keyList.push(key)
- })
- return keyList
-}
-
-/**
- * Check position relation.
- * @param parentPos
- * @param childPos
- * @param directly only directly parent can be true
- * @returns {boolean}
- */
-export function isParent (parentPos, childPos, directly = false) {
- if (!parentPos || !childPos || parentPos.length > childPos.length) return false
-
- const parentPath = posToArr(parentPos)
- const childPath = posToArr(childPos)
-
- // Directly check
- if (directly && parentPath.length !== childPath.length - 1) return false
-
- const len = parentPath.length
- for (let i = 0; i < len; i += 1) {
- if (parentPath[i] !== childPath[i]) return false
- }
-
- return true
-}
-
-/**
- * Statistic TreeNodes info
- * @param treeNodes
- * @returns {{}}
- */
-export function getNodesStatistic (treeNodes) {
- const statistic = {
- keyNodes: {},
- posNodes: {},
- nodeList: [],
- }
-
- traverseTreeNodes(treeNodes, true, ({ node, index, pos, key, subNodes, parentPos }) => {
- const data = { node, index, pos, key, subNodes, parentPos }
- statistic.keyNodes[key] = data
- statistic.posNodes[pos] = data
- statistic.nodeList.push(data)
- })
-
- return statistic
-}
-
-export function getDragNodesKeys (treeNodes, node) {
- const { eventKey, pos } = getOptionProps(node)
- const dragNodesKeys = []
-
- traverseTreeNodes(treeNodes, ({ pos: nodePos, key }) => {
- if (isParent(pos, nodePos)) {
- dragNodesKeys.push(key)
- }
- })
- dragNodesKeys.push(eventKey || pos)
- return dragNodesKeys
-}
-
-export function calcDropPosition (event, treeNode) {
- const { clientY } = event
- const { top, bottom, height } = treeNode.$refs.selectHandle.getBoundingClientRect()
- const des = Math.max(height * DRAG_SIDE_RANGE, DRAG_MIN_GAP)
-
- if (clientY <= top + des) {
- return -1
- } else if (clientY >= bottom - des) {
- return 1
- }
- return 0
-}
-
-/**
- * Auto expand all related node when sub node is expanded
- * @param keyList
- * @param props
- * @returns [string]
- */
-export function calcExpandedKeys (keyList, props, children = []) {
- if (!keyList) {
- return []
- }
-
- // Fill parent expanded keys
- const { keyNodes, nodeList } = getNodesStatistic(children)
- const needExpandKeys = {}
- const needExpandPathList = []
-
- // Fill expanded nodes
- keyList.forEach((key) => {
- const node = keyNodes[key]
- if (node) {
- needExpandKeys[key] = true
- needExpandPathList.push(node.pos)
- }
- })
-
- // Match parent by path
- nodeList.forEach(({ pos, key }) => {
- if (needExpandPathList.some(childPos => isParent(pos, childPos))) {
- needExpandKeys[key] = true
- }
- })
-
- const calcExpandedKeyList = Object.keys(needExpandKeys)
-
- // [Legacy] Return origin keyList if calc list is empty
- return calcExpandedKeyList.length ? calcExpandedKeyList : keyList
-}
-
-/**
- * Return selectedKeys according with multiple prop
- * @param selectedKeys
- * @param props
- * @returns [string]
- */
-export function calcSelectedKeys (selectedKeys, props) {
- if (!selectedKeys) {
- return undefined
- }
-
- const { multiple } = props
- if (multiple) {
- return selectedKeys.slice()
- }
-
- if (selectedKeys.length) {
- return [selectedKeys[0]]
- }
- return selectedKeys
-}
-
-/**
- * Check conduct is by key level. It pass though up & down.
- * When conduct target node is check means already conducted will be skip.
- * @param treeNodes
- * @param checkedKeys
- * @returns {{checkedKeys: Array, halfCheckedKeys: Array}}
- */
-export function calcCheckStateConduct (treeNodes, checkedKeys) {
- const { keyNodes, posNodes } = getNodesStatistic(treeNodes)
-
- const tgtCheckedKeys = {}
- const tgtHalfCheckedKeys = {}
-
- // Conduct up
- function conductUp (key, halfChecked) {
- if (tgtCheckedKeys[key]) return
-
- const { subNodes = [], parentPos, node } = keyNodes[key]
- if (isCheckDisabled(node)) return
-
- const allSubChecked = !halfChecked && subNodes
- .filter(sub => !isCheckDisabled(sub.node))
- .every(sub => tgtCheckedKeys[sub.key])
-
- if (allSubChecked) {
- tgtCheckedKeys[key] = true
- } else {
- tgtHalfCheckedKeys[key] = true
- }
-
- if (parentPos !== null) {
- conductUp(posNodes[parentPos].key, !allSubChecked)
- }
- }
-
- // Conduct down
- function conductDown (key) {
- if (tgtCheckedKeys[key]) return
- const { subNodes = [], node } = keyNodes[key]
-
- if (isCheckDisabled(node)) return
-
- tgtCheckedKeys[key] = true
-
- subNodes.forEach((sub) => {
- conductDown(sub.key)
- })
- }
-
- function conduct (key) {
- if (!keyNodes[key]) {
- warning(false, `'${key}' does not exist in the tree.`)
- return
- }
-
- const { subNodes = [], parentPos, node } = keyNodes[key]
-
- tgtCheckedKeys[key] = true
-
- if (isCheckDisabled(node)) return
-
- // Conduct down
- subNodes
- .filter(sub => !isCheckDisabled(sub.node))
- .forEach((sub) => {
- conductDown(sub.key)
- })
-
- // Conduct up
- if (parentPos !== null) {
- conductUp(posNodes[parentPos].key)
- }
- }
-
- checkedKeys.forEach((key) => {
- conduct(key)
- })
-
- return {
- checkedKeys: Object.keys(tgtCheckedKeys),
- halfCheckedKeys: Object.keys(tgtHalfCheckedKeys)
- .filter(key => !tgtCheckedKeys[key]),
- }
-}
-
-function keyListToString (keyList) {
- if (!keyList) return keyList
- return keyList.map(key => String(key))
-}
-
-/**
- * Calculate the value of checked and halfChecked keys.
- * This should be only run in init or props changed.
- */
-export function calcCheckedKeys (keys, props, children = []) {
- const { checkable, checkStrictly } = props
-
- if (!checkable || !keys) {
- return null
- }
-
- // Convert keys to object format
- let keyProps
- if (Array.isArray(keys)) {
- // [Legacy] Follow the api doc
- keyProps = {
- checkedKeys: keys,
- halfCheckedKeys: undefined,
- }
- } else if (typeof keys === 'object') {
- keyProps = {
- checkedKeys: keys.checked || undefined,
- halfCheckedKeys: keys.halfChecked || undefined,
- }
- } else {
- warning(false, '`CheckedKeys` is not an array or an object')
- return null
- }
-
- keyProps.checkedKeys = keyListToString(keyProps.checkedKeys)
- keyProps.halfCheckedKeys = keyListToString(keyProps.halfCheckedKeys)
-
- // Do nothing if is checkStrictly mode
- if (checkStrictly) {
- return keyProps
- }
-
- // Conduct calculate the check status
- const { checkedKeys = [] } = keyProps
- return calcCheckStateConduct(children, checkedKeys)
-}