Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

refactor TabSwitcher

Browse source
This commit is contained in:
taehoon 2019-08-10 14:48:05 -04:00
parent 6e51774ccb
commit e8c22fbfa3
1 changed files with 12 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/components/tab_switcher/tab_switcher.js
View file

@ -10,6 +10,16 @@ export default Vue.component('tab-switcher', {
active: this.$slots.default.findIndex(_ => _.tag) active: this.$slots.default.findIndex(_ => _.tag)
} }
}, },
computed: {
activeIndex () {
// In case of controlled component
if (this.activeTab) {
return this.$slots.default.findIndex(slot => this.activeTab === slot.key)
} else {
return this.active
}
}
},
beforeUpdate () { beforeUpdate () {
const currentSlot = this.$slots.default[this.active] const currentSlot = this.$slots.default[this.active]
if (!currentSlot.tag) { if (!currentSlot.tag) {
@ -24,14 +34,6 @@ export default Vue.component('tab-switcher', {
} }
this.active = index this.active = index
} }
},
isActiveTab (index) {
// In case of controlled component
if (this.activeTab) {
return this.$slots.default.findIndex(slot => this.activeTab === slot.key) === index
} else {
return this.active === index
}
} }
}, },
render (h) { render (h) {
@ -41,7 +43,7 @@ export default Vue.component('tab-switcher', {
const classesTab = ['tab'] const classesTab = ['tab']
const classesWrapper = ['tab-wrapper'] const classesWrapper = ['tab-wrapper']
if (this.isActiveTab(index)) { if (this.activeIndex === index) {
classesTab.push('active') classesTab.push('active')
classesWrapper.push('active') classesWrapper.push('active')
} }
@ -71,7 +73,7 @@ export default Vue.component('tab-switcher', {
const contents = this.$slots.default.map((slot, index) => { const contents = this.$slots.default.map((slot, index) => {
if (!slot.tag) return if (!slot.tag) return
const active = this.isActiveTab(index) const active = this.activeIndex === index
if (this.renderOnlyFocused) { if (this.renderOnlyFocused) {
return active return active
? <div class="active">{slot}</div> ? <div class="active">{slot}</div>