Skip to content

Commit

Permalink
perf(QTree, QExpansionItem, date): only render collapsed content when…
Browse files Browse the repository at this point in the history 
… first expanded; use Map for QTree meta and for date regex cache
  • Loading branch information
@pdanpdan
pdanpdan committed Feb 13, 2022
1 parent 395fe31 commit 5c4024a
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 39 deletions.
19 changes: 10 additions & 9 deletions ui/dev/src/pages/components/tree.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -335,12 +335,12 @@ export default {
subnodes: [
{
key: 'KEY: Node q',
label: 'Node q',
label: 'Node q - Lazy load',
lazy: true
},
{
key: 'KEY: Node a',
label: 'Node a',
label: 'Node a - Lazy load',
lazy: true
}
]
Expand Down Expand Up @@ -437,7 +437,7 @@ export default {
]
},
{
key: 'KEY: Node 2.4 - Lazy load',
key: 'KEY: Node 2.4',
label: 'Node 2.4 - Lazy load',
lazy: true
},
Expand Down Expand Up @@ -551,7 +551,7 @@ export default {
},
methods: {
getNodeByKey () {
console.log(this.$refs.tree.getNodeByKey('Node 2.1.1'))
console.log(this.$refs.tree.getNodeByKey('KEY: Node 2.1.1'))
},
expandAll () {
this.$refs.tree.expandAll()
Expand All @@ -568,14 +568,15 @@ export default {
const label = node.label.replace(' - Lazy load', '')
done([
{ label: `${label}.1` },
{ label: `${label}.2` },
{ label: `${label}.3`, lazy: true },
{ key: `${key}.1`, label: `${label}.1` },
{ key: `${key}.2`, label: `${label}.2` },
{ key: `${key}.3`, label: `${label}.3 - Lazy load`, lazy: true },
{
key: `${key}.4`,
label: `${label}.4`,
subnodes: [
{ label: `${label}.4.1`, lazy: true },
{ label: `${label}.4.2`, lazy: true }
{ key: `${key}.4.1`, label: `${label}.4.1 - Lazy load`, lazy: true },
{ key: `${key}.4.2`, label: `${label}.4.2 - Lazy load`, lazy: true }
]
}
])
Expand Down
8 changes: 6 additions & 2 deletions ui/src/components/expansion-item/QExpansionItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,10 @@ export default Vue.extend({

watch: {
showing (val) {
val === true && this.group !== void 0 && this.$root.$emit(eventName, this)
if (val === true) {
this.shouldRenderContent !== true && (this.shouldRenderContent = true)
this.group !== void 0 && this.$root.$emit(eventName, this)
}
},

group (newVal, oldVal) {
Expand Down Expand Up @@ -265,7 +268,7 @@ export default Vue.extend({
staticClass: 'q-expansion-item__content relative-position',
style: this.contentStyle,
directives: [{ name: 'show', value: this.showing }]
}, slot(this, 'default'))
}, this.shouldRenderContent === true ? slot(this, 'default') : void 0)
])
]

Expand Down Expand Up @@ -300,6 +303,7 @@ export default Vue.extend({
},

created () {
this.shouldRenderContent = this.showing === true
this.group !== void 0 && this.$root.$on(eventName, this.__eventHandler)
},

Expand Down
68 changes: 44 additions & 24 deletions ui/src/components/tree/QTree.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,8 @@ export default Vue.extend({
},

meta () {
const meta = {}
const meta = this.metaMap
meta.clear()

const travel = (node, parent) => {
const tickStrategy = node.tickStrategy || (parent ? parent.tickStrategy : this.tickStrategy)
Expand Down Expand Up @@ -165,7 +166,11 @@ export default Vue.extend({
: (isLeaf === true ? this.innerTicked.includes(key) : false)
}

meta[key] = m
if (m.expanded === true && this.renderedMap.has(key) !== true) {
this.renderedMap.set(key, true)
}

meta.set(key, m)

if (isParent === true) {
m.children = node[this.childrenKey].map(n => travel(n, m))
Expand Down Expand Up @@ -272,8 +277,9 @@ export default Vue.extend({
},

isExpanded (key) {
return key && this.meta[key]
? this.meta[key].expanded
const m = this.meta.get(key)
return m !== void 0
? m.expanded
: false
},

Expand Down Expand Up @@ -308,7 +314,7 @@ export default Vue.extend({
}
},

setExpanded (key, state, node = this.getNodeByKey(key), meta = this.meta[key]) {
setExpanded (key, state, node = this.getNodeByKey(key), meta = this.meta.get(key)) {
if (meta.lazy && meta.lazy !== 'loaded') {
if (meta.lazy === 'loading') {
return
Expand All @@ -325,8 +331,8 @@ export default Vue.extend({
this.lazy[key] = 'loaded'
this.$set(node, this.childrenKey, Array.isArray(children) === true ? children : [])
this.$nextTick(() => {
const m = this.meta[key]
if (m && m.isParent === true) {
const m = this.meta.get(key)
if (m !== void 0 && m.isParent === true) {
this.__setExpanded(key, true)
}
})
Expand Down Expand Up @@ -354,10 +360,11 @@ export default Vue.extend({

if (state) {
if (this.accordion) {
if (this.meta[key]) {
const m = this.meta.get(key)
if (m !== void 0) {
const collapse = []
if (this.meta[key].parent) {
this.meta[key].parent.children.forEach(m => {
if (m.parent) {
m.parent.children.forEach(m => {
if (m.key !== key && m.expandable === true) {
collapse.push(m.key)
}
Expand Down Expand Up @@ -393,8 +400,9 @@ export default Vue.extend({
},

isTicked (key) {
return key && this.meta[key]
? this.meta[key].ticked
const m = this.meta.get(key)
return m !== void 0
? m.ticked
: false
},

Expand Down Expand Up @@ -441,7 +449,7 @@ export default Vue.extend({
__getChildren (h, nodes) {
return (
this.filter
? nodes.filter(n => this.meta[n[this.nodeKey]].matchesFilter)
? nodes.filter(n => this.meta.get(n[this.nodeKey]).matchesFilter)
: nodes
).map(child => this.__getNode(h, child))
},
Expand All @@ -465,7 +473,7 @@ export default Vue.extend({
__getNode (h, node) {
const
key = node[this.nodeKey],
meta = this.meta[key],
meta = this.meta.get(key),
header = node.header
? this.$scopedSlots[`header-${node.header}`] || this.$scopedSlots['default-header']
: this.$scopedSlots['default-header']
Expand Down Expand Up @@ -494,7 +502,7 @@ export default Vue.extend({
return h('div', {
key,
staticClass: 'q-tree__node relative-position',
class: { 'q-tree__node--parent': isParent, 'q-tree__node--child': !isParent }
class: { 'q-tree__node--parent': isParent, 'q-tree__node--child': isParent !== true }
}, [
h('div', {
staticClass: 'q-tree__node-header relative-position row no-wrap items-center',
Expand Down Expand Up @@ -583,14 +591,17 @@ export default Vue.extend({
staticClass: 'q-tree__node-collapsible',
class: this.textColorClass,
directives: [{ name: 'show', value: meta.expanded }]
}, [
body,

h('div', {
staticClass: 'q-tree__children',
class: { 'q-tree__node--disabled': meta.disabled }
}, children)
])
}, this.renderedMap.has(key) === true
? [
body,

h('div', {
staticClass: 'q-tree__children',
class: { 'q-tree__node--disabled': meta.disabled }
}, children)
]
: void 0
)
])
: body
])
Expand Down Expand Up @@ -626,7 +637,7 @@ export default Vue.extend({
stopAndPrevent(e)
}
keyboard !== true && this.__blur(meta.key)
this.setExpanded(meta.key, !meta.expanded, node, meta)
this.setExpanded(meta.key, meta.expanded !== true, node, meta)
},

__onTickedClick (meta, state) {
Expand Down Expand Up @@ -679,6 +690,15 @@ export default Vue.extend({
},

created () {
this.renderedMap = new Map()
this.metaMap = new Map()
this.defaultExpandAll === true && this.expandAll()
},

beforeDestroy () {
this.renderedMap.clear()
this.renderedMap = void 0
this.metaMap.clear()
this.metaMap = void 0
}
})
8 changes: 4 additions & 4 deletions ui/src/utils/date.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,15 @@ const
defaultMask = 'YYYY-MM-DDTHH:mm:ss.SSSZ',
token = /\[((?:[^\]\\]|\\]|\\)*)\]|d{1,4}|M{1,4}|m{1,2}|w{1,2}|Qo|Do|D{1,4}|YY(?:YY)?|H{1,2}|h{1,2}|s{1,2}|S{1,3}|Z{1,2}|a{1,2}|[AQExX]/g,
reverseToken = /(\[[^\]]*\])|d{1,4}|M{1,4}|m{1,2}|w{1,2}|Qo|Do|D{1,4}|YY(?:YY)?|H{1,2}|h{1,2}|s{1,2}|S{1,3}|Z{1,2}|a{1,2}|[AQExX]|([.*+:?^,\s${}()|\\]+)/g,
regexStore = {}
regexStore = new Map()

function getRegexData (mask, dateLocale) {
const
days = '(' + dateLocale.days.join('|') + '|)',
key = mask + days

if (regexStore[ key ] !== void 0) {
return regexStore[ key ]
if (regexStore.has(key) === true) {
return regexStore.get(key)
}

const
Expand Down Expand Up @@ -147,7 +147,7 @@ function getRegexData (mask, dateLocale) {
})

const res = { map, regex: new RegExp('^' + regexText) }
regexStore[ key ] = res
regexStore.set(key, res)

return res
}
Expand Down

0 comments on commit 5c4024a

Please sign in to comment.