Merge branch 'fix/add-option-to-not-render-background-tabs' into 'develop'

Fix #298 Add option to tab switcher to not render background tabs

Closes #298

See merge request pleroma/pleroma-fe!504

1 files changed, 67 insertions, 0 deletions

diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
new file mode 100644
index 00000000..f9c3f927
--- /dev/null
+++ b/src/components/tab_switcher/tab_switcher.js
@@ -0,0 +1,67 @@
+import Vue from 'vue'
+
+import './tab_switcher.scss'
+
+export default Vue.component('tab-switcher', {
+  name: 'TabSwitcher',
+  props: ['renderOnlyFocused'],
+  data () {
+    return {
+      active: this.$slots.default.findIndex(_ => _.tag)
+    }
+  },
+  methods: {
+    activateTab (index) {
+      return () => {
+        this.active = index
+      }
+    }
+  },
+  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
+          .map((slot, index) => {
+            if (!slot.tag) return
+            const classesTab = ['tab']
+            const classesWrapper = ['tab-wrapper']
+
+            if (index === this.active) {
+              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.map((slot, index) => {
+      if (!slot.tag) return
+      const active = index === this.active
+      if (this.renderOnlyFocused) {
+        return active
+          ? <div class="active">{slot}</div>
+          : <div class="hidden"></div>
+      }
+      return <div class={active ? 'active' : 'hidden' }>{slot}</div>
+    })
+
+    return (
+      <div class="tab-switcher">
+        <div class="tabs">
+          {tabs}
+        </div>
+        <div class="contents">
+          {contents}
+        </div>
+      </div>
+    )
+  }
+})