diff options
| author | HJ <spam@hjkos.com> | 2019-01-22 17:46:08 +0000 |
|---|---|---|
| committer | HJ <spam@hjkos.com> | 2019-01-22 17:46:08 +0000 |
| commit | 3a3cf1d48a67c82bb2c94cafb0150b1fa8e4de1a (patch) | |
| tree | 5e39bb41c1e73191b2ff6222eee8720420f13dfd /src/components/tab_switcher/tab_switcher.jsx | |
| parent | 7651290e2be72ed35d7582757251eb151fdce953 (diff) | |
| parent | 92dedcd53e56562205e704eea2754f159eb9707d (diff) | |
Merge branch 'favorites' into 'develop'
Add Favorites TL to user profile, add some initial support for MastoAPI
Closes #265 and #262
See merge request pleroma/pleroma-fe!462
Diffstat (limited to 'src/components/tab_switcher/tab_switcher.jsx')
| -rw-r--r-- | src/components/tab_switcher/tab_switcher.jsx | 28 |
1 files changed, 20 insertions, 8 deletions
diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx index 2f362c4d..9038733c 100644 --- a/src/components/tab_switcher/tab_switcher.jsx +++ b/src/components/tab_switcher/tab_switcher.jsx @@ -6,18 +6,26 @@ export default Vue.component('tab-switcher', { name: 'TabSwitcher', data () { return { - active: 0 + active: this.$slots.default.findIndex(_ => _.tag) } }, methods: { - activateTab(index) { - return () => this.active = index; + activateTab (index) { + return () => { + this.active = index + } } }, - render(h) { + beforeUpdate () { + const currentSlot = this.$slots.default[this.active] + if (!currentSlot.tag) { + this.active = this.$slots.default.findIndex(_ => _.tag) + } + }, + render (h) { const tabs = this.$slots.default - .filter(slot => slot.data) .map((slot, index) => { + if (!slot.tag) return const classesTab = ['tab'] const classesWrapper = ['tab-wrapper'] @@ -25,20 +33,24 @@ export default Vue.component('tab-switcher', { classesTab.push('active') classesWrapper.push('active') } + return ( <div class={ classesWrapper.join(' ')}> <button onClick={this.activateTab(index)} class={ classesTab.join(' ') }>{slot.data.attrs.label}</button> </div> ) - }); - const contents = this.$slots.default.filter(_=>_.data).map(( slot, index ) => { + }) + + const contents = this.$slots.default.map((slot, index) => { + if (!slot.tag) return const active = index === this.active return ( <div class={active ? 'active' : 'hidden'}> {slot} </div> ) - }); + }) + return ( <div class="tab-switcher"> <div class="tabs"> |
