2
0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-02-23 13:31:06 +08:00

fix(tree): transition should be disabled when drop

This commit is contained in:
07akioni 2019-09-15 15:47:56 +08:00
parent 9b4ca92d21
commit 6833c999a2
8 changed files with 89 additions and 105 deletions

View File

@ -21,8 +21,6 @@
</template> </template>
<script> <script>
import { setTimeout } from 'timers'
let key = 0 let key = 0
function genData (layer = 4, depth = 0, prefix = '') { function genData (layer = 4, depth = 0, prefix = '') {
@ -44,20 +42,6 @@ export default {
return { return {
data: genData() data: genData()
} }
},
methods: {
handleClick () {
this.$refs.tree.handleDragStart({
key: 0,
isLeaf: false
})
setTimeout(() => {
this.$refs.tree.handleDragEnter({
key: 85,
isLeaf: false
})
}, 100)
}
} }
} }
</script> </script>

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="n-doc-section"> <div class="n-doc-section">
<div class="n-doc-section__header"> <div class="n-doc-section__header">
Scaffold Block Node
</div> </div>
<div <div
class="n-doc-section__view" class="n-doc-section__view"
@ -11,13 +11,9 @@
<n-tree <n-tree
ref="tree" ref="tree"
:data="data" :data="data"
block-node
/> <!--EXAMPLE_END--> /> <!--EXAMPLE_END-->
</div> </div>
<div class="n-doc-section__inspect">
<n-button @click="handleClick">
dragEnter
</n-button>
</div>
<n-doc-source-block> <n-doc-source-block>
<!--SOURCE--> <!--SOURCE-->
</n-doc-source-block> </n-doc-source-block>
@ -25,8 +21,6 @@
</template> </template>
<script> <script>
import { setTimeout } from 'timers'
let key = 0 let key = 0
function genData (layer = 2, depth = 0, prefix = '') { function genData (layer = 2, depth = 0, prefix = '') {
@ -48,20 +42,6 @@ export default {
return { return {
data: genData() data: genData()
} }
},
methods: {
handleClick () {
this.$refs.tree.handleDragStart({
key: 0,
isLeaf: false
})
setTimeout(() => {
this.$refs.tree.handleDragEnter({
key: 85,
isLeaf: false
})
}, 100)
}
} }
} }
</script> </script>

View File

@ -5,23 +5,23 @@
> >
<div class="n-doc-header"> <div class="n-doc-header">
<n-gradient-text :font-size="20"> <n-gradient-text :font-size="20">
scaffold blockNode
</n-gradient-text> </n-gradient-text>
</div> </div>
<div class="n-doc-body"> <div class="n-doc-body">
<basic-usage /> <basic-usage />
<scaffold /> <block-node />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import basicUsage from './basicUsage.demo.vue' import basicUsage from './basicUsage.demo.vue'
import scaffold from './scaffold.demo.vue' import blockNode from './blockNode.demo.vue'
export default { export default {
components: { components: {
scaffold, blockNode,
basicUsage basicUsage
}, },
data () { data () {

View File

@ -1,4 +1,10 @@
export default { export default {
props: {
transitionDisabled: {
type: Boolean,
default: false
}
},
methods: { methods: {
handleBeforeLeave () { handleBeforeLeave () {
this.$el.style.maxHeight = this.$el.offsetHeight + 'px' this.$el.style.maxHeight = this.$el.offsetHeight + 'px'
@ -6,6 +12,7 @@ export default {
this.$el.getBoundingClientRect() this.$el.getBoundingClientRect()
}, },
handleLeave () { handleLeave () {
// debugger
this.$el.style.maxHeight = 0 this.$el.style.maxHeight = 0
this.$el.getBoundingClientRect() this.$el.getBoundingClientRect()
}, },
@ -22,6 +29,15 @@ export default {
this.$el.style.maxHeight = null this.$el.style.maxHeight = null
} }
}, },
beforeDestroy () {
if (this.transitionDisabled) {
const parent = this.$el.parentElement
if (parent) parent.removeChild(this.$el)
}
},
destroyed () {
console.log('destroyed')
},
render (h) { render (h) {
return h('transition', { return h('transition', {
props: { props: {

View File

@ -18,6 +18,7 @@
@drop="handleContentDrop" @drop="handleContentDrop"
@click="handleClick" @click="handleClick"
> >
<div class="n-tree-node-content__padding-box" />
<slot /> <slot />
</span> </span>
</template> </template>

View File

@ -30,25 +30,27 @@ function genSingleNode (node, h, self) {
blockNode: self.blockNode, blockNode: self.blockNode,
checked: self.synthesizedCheckedKeys.includes(node.key) checked: self.synthesizedCheckedKeys.includes(node.key)
} }
if (node.isLeaf) { return h(NTreeNode, {
return h(NTreeNode, { props,
props, on: listeners,
on: listeners, key: node.key
key: node.key },
}) [!node.isLeaf
} else if (node.children) { ? h(NTreeChildNodesExpandTransition, {
return h(NTreeNode, { props: {
props, transitionDisabled: self.transitionDisabled
on: listeners, }
key: node.key },
}, [h(NTreeChildNodesExpandTransition, {}, [
[ expanded expanded
? h('ul', { ? h('ul', {
staticClass: 'n-tree-children-wrapper' staticClass: 'n-tree-children-wrapper'
}, node.children.map(child => genSingleNode(child, h, self))) }, node.children.map(child => genSingleNode(child, h, self)))
: null] : null
)]) ]
} )
: null]
)
} }
function convertRootedOptionsToVNodeTree (root, h, self) { function convertRootedOptionsToVNodeTree (root, h, self) {
@ -115,7 +117,8 @@ export default {
draggingNodeKey: null, draggingNodeKey: null,
draggingNode: null, draggingNode: null,
dropNodeKey: null, dropNodeKey: null,
expandTimerId: null expandTimerId: null,
transitionDisabled: false
} }
}, },
watch: { watch: {
@ -165,6 +168,12 @@ export default {
mounted () { mounted () {
}, },
methods: { methods: {
disableTransition () {
this.transitionDisabled = true
},
enableTransition () {
this.transitionDisabled = false
},
handleCheck (node, checked) { handleCheck (node, checked) {
if (!this.hasCheckedKeys) { if (!this.hasCheckedKeys) {
if (checked) { if (checked) {
@ -180,7 +189,13 @@ export default {
handleDrop (node, dropType) { handleDrop (node, dropType) {
const drop = [this.draggingNode, node, dropType] const drop = [this.draggingNode, node, dropType]
if (dropIsValid(drop)) { if (dropIsValid(drop)) {
applyDrop(drop) this.disableTransition()
this.$nextTick().then(() => {
applyDrop(drop)
return this.$nextTick()
}).then(() => {
this.enableTransition()
})
} }
this.draggingNodeKey = null this.draggingNodeKey = null
this.draggingNode = null this.draggingNode = null
@ -238,10 +253,8 @@ export default {
} }
}, },
render (h) { render (h) {
console.log('render')
const lOptions = linkedCascaderOptions(this.treeData, 'multiple-all-options') const lOptions = linkedCascaderOptions(this.treeData, 'multiple-all-options')
const mOptions = menuOptions(lOptions)[0] const mOptions = menuOptions(lOptions)[0]
console.log(mOptions)
return h('div', { return h('div', {
staticClass: 'n-tree' staticClass: 'n-tree'
}, convertRootedOptionsToVNodeTree(mOptions, h, this)) }, convertRootedOptionsToVNodeTree(mOptions, h, this))

View File

@ -139,32 +139,6 @@ function rootedOptions (options) {
}]) }])
} }
function patchedOptionsUsingProp (options, patches, prop = 'key') {
const patchesMap = new Map()
for (const [id, children] of patches) {
patchesMap.set(id, children)
}
function traverse (options) {
if (!Array.isArray(options)) return
for (let i = 0; i < options.length; ++i) {
const option = options[i]
const id = option[prop]
// console.log('iterate on option', id)
if (!hasChildren(option)) {
if (patches.has(id)) {
// console.log('patched on option', id)
option.children = patches.get(id)
option.loaded = true
}
}
traverse(option.children)
}
}
traverse(options)
// console.log('patchedOptions output', options)
return options
}
/** /**
* *
* @param {*} options * @param {*} options
@ -229,7 +203,7 @@ function treedOptions (options) {
} }
function applyDrop ([sourceNode, targetNode, type]) { function applyDrop ([sourceNode, targetNode, type]) {
if (type === 'append') { if (type === 'append' || type === 'insertAfter') {
const parent = sourceNode.parent const parent = sourceNode.parent
const index = parent.children.findIndex(child => child.key === sourceNode.key) const index = parent.children.findIndex(child => child.key === sourceNode.key)
if (~index) { if (~index) {
@ -242,13 +216,17 @@ function applyDrop ([sourceNode, targetNode, type]) {
throw new Error('[n-tree]: switch error') throw new Error('[n-tree]: switch error')
} }
if (Array.isArray(targetNode.children)) { if (Array.isArray(targetNode.children)) {
targetNode.children.push(sourceNode) if (type === 'append') {
targetNode.children.push(sourceNode)
} else {
targetNode.children.unshift(sourceNode)
}
} else { } else {
targetNode.isLeaf = false targetNode.isLeaf = false
targetNode.children = [sourceNode] targetNode.children = [sourceNode]
} }
sourceNode.parent = targetNode sourceNode.parent = targetNode
} else if (type === 'insertBefore' || type === 'insertAfter') { } else if (type === 'insertBefore') {
let parent = sourceNode.parent let parent = sourceNode.parent
const sourceIndex = parent.children.findIndex(child => child.key === sourceNode.key) const sourceIndex = parent.children.findIndex(child => child.key === sourceNode.key)
if (~sourceIndex) { if (~sourceIndex) {
@ -263,11 +241,7 @@ function applyDrop ([sourceNode, targetNode, type]) {
parent = targetNode.parent parent = targetNode.parent
const targetIndex = parent.children.findIndex(child => child.key === targetNode.key) const targetIndex = parent.children.findIndex(child => child.key === targetNode.key)
if (~targetIndex) { if (~targetIndex) {
if (type === 'insertBefore') { parent.children.splice(targetIndex, 0, sourceNode)
parent.children.splice(targetIndex, 0, sourceNode)
} else {
parent.children.splice(targetIndex + 1, 0, sourceNode)
}
if (!parent.children.length) { if (!parent.children.length) {
parent.children = null parent.children = null
parent.isLeaf = true parent.isLeaf = true
@ -473,7 +447,6 @@ export {
firstOptionId, firstOptionId,
rootedOptions, rootedOptions,
patchedOptions, patchedOptions,
patchedOptionsUsingProp,
dropIsValid, dropIsValid,
applyDrop, applyDrop,
treedOptions, treedOptions,

View File

@ -1,6 +1,7 @@
@import './mixins/mixins.scss'; @import './mixins/mixins.scss';
@import './theme/default.scss'; @import './theme/default.scss';
// 0.55 * 0.7
$tree-content-hover-background-color: main-color-with-alpha(.45); $tree-content-hover-background-color: main-color-with-alpha(.45);
$tree-content-active-background-color: main-color-with-alpha(.3); $tree-content-active-background-color: main-color-with-alpha(.3);
$tree-content-selected-background-color: main-color-with-alpha(.3); $tree-content-selected-background-color: main-color-with-alpha(.3);
@ -17,7 +18,10 @@ $tree-content-selected-background-color: main-color-with-alpha(.3);
margin-left: 16px; margin-left: 16px;
} }
@include b(tree-node) { @include b(tree-node) {
padding: 4px 0 4px 0; padding: 3px 0 3px 0;
&:first-child {
padding-top: 6px;
}
&:last-child { &:last-child {
padding-bottom: 0; padding-bottom: 0;
} }
@ -67,23 +71,33 @@ $tree-content-selected-background-color: main-color-with-alpha(.3);
cursor: pointer; cursor: pointer;
border-radius: 3px; border-radius: 3px;
transition: .2s background-color $default-cubic-bezier, .2s border-color $default-cubic-bezier; transition: .2s background-color $default-cubic-bezier, .2s border-color $default-cubic-bezier;
// &:hover { &:hover {
// background-color: $tree-content-hover-background-color; background-color: $tree-content-hover-background-color;
// } }
&:active { &:active {
background-color: $tree-content-active-background-color; background-color: $tree-content-active-background-color;
} }
&:last-child {
margin-bottom: 0;
}
@include e(padding-box) {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: transparent;
}
@include m(block) { @include m(block) {
width: calc(100% - 24px); width: calc(100% - 24px);
@include m(checkable) { @include m(checkable) {
width: calc(100% - 48px); width: calc(100% - 48px);
} }
} }
@include m(selected) {
background-color: $tree-content-selected-background-color;
}
@include m(pending) { @include m(pending) {
&:hover {
background-color: transparent;
}
@include m(pending-bottom) { @include m(pending-bottom) {
border-bottom: 3px solid $tree-content-hover-background-color; border-bottom: 3px solid $tree-content-hover-background-color;
} }
@ -94,5 +108,8 @@ $tree-content-selected-background-color: main-color-with-alpha(.3);
background-color: $tree-content-hover-background-color; background-color: $tree-content-hover-background-color;
} }
} }
@include m(selected) {
background-color: $tree-content-selected-background-color;
}
} }
} }