Merge pull request #6175 from harryadel/remove-templates-tabs-package

Replace templates:tabs package with inline Blaze implementation

.eslintrc.json

@@ -110,7 +110,6 @@
     "Presence": true,
     "presences": true,
     "Ps": true,
-    "ReactiveTabs": false,
     "Restivus": false,
     "SimpleSchema": false,
     "SubsManager": false,

.meteor/packages

@@ -50,7 +50,6 @@ http@2.0.0! # force new http package
 # UI components
 ostrio:i18n
 reactive-var@1.0.12
-templates:tabs
 meteor-autosize
 shell-server@0.5.0
 email@2.2.5

.meteor/versions

@@ -120,7 +120,6 @@ socket-stream-client@0.5.2
 spacebars@1.4.1
 spacebars-compiler@1.3.1
 standard-minifier-js@2.8.1
-templates:tabs@2.3.0
 templating@1.4.1
 templating-compiler@1.4.1
 templating-runtime@1.5.0

client/components/lib/basicTabs.jade

@@ -0,0 +1,11 @@
+template(name="basicTabs")
+  .basicTabs-container(class="{{name}}")
+    ul.tabs-list
+      each tabs
+        li.tab-item(class="{{isActiveTab slug}} {{class}}") {{name}}
+    .tabs-content-container
+      +Template.contentBlock
+
+template(name="tabContent")
+  section.tabs-content(class="{{isActiveTab slug}}" data-tab="{{slug}}")
+    +Template.contentBlock

client/components/lib/basicTabs.js

@@ -0,0 +1,50 @@
+const { ReactiveVar } = require('meteor/reactive-var');
+
+Template.basicTabs.onCreated(function () {
+  const activeTab = this.data.activeTab
+    ? { slug: this.data.activeTab }
+    : this.data.tabs[0];
+  this._activeTab = new ReactiveVar(activeTab);
+
+  this.isActiveSlug = (slug) => {
+    const current = this._activeTab.get();
+    return current && current.slug === slug;
+  };
+});
+
+Template.basicTabs.helpers({
+  isActiveTab(slug) {
+    if (Template.instance().isActiveSlug(slug)) {
+      return 'active';
+    }
+  },
+});
+
+Template.basicTabs.events({
+  'click .tab-item'(e, t) {
+    t._activeTab.set(this);
+  },
+});
+
+function findBasicTabsInstance() {
+  let view = Blaze.currentView;
+  while (view) {
+    if (view.name === 'Template.basicTabs' && view.templateInstance) {
+      const inst = view.templateInstance();
+      if (inst && inst.isActiveSlug) {
+        return inst;
+      }
+    }
+    view = view.parentView;
+  }
+  return null;
+}
+
+Template.tabContent.helpers({
+  isActiveTab(slug) {
+    const inst = findBasicTabsInstance();
+    if (inst && inst.isActiveSlug(slug)) {
+      return 'active';
+    }
+  },
+});

client/components/main/layouts.css

@@ -477,9 +477,39 @@ a:not(.disabled).is-active i.fa {
 .viewer a:hover {
   color: #333;
 }
+.basicTabs-container .tabs-list {
+  text-align: left;
+  width: 100%;
+}
+.basicTabs-container .tabs-list .tab-item {
+  font-weight: 600;
+  font-size: 13px;
+  display: inline-block;
+  padding: 13px 15px;
+  margin: 0;
+  list-style: none;
+  cursor: pointer;
+  user-select: none;
+}
+.basicTabs-container .tabs-list .tab-item.active {
+  border-radius: 5px 5px 0 0;
+  border: 1px solid #ddd;
+  border-bottom: none;
+  margin-bottom: -1px !important;
+  padding: 12px 14px 14px 14px !important;
+  background-color: #fff;
+  color: #333;
+}
 .basicTabs-container .tabs-content-container {
   padding: 0;
   padding-top: 15px;
+  border-top: 1px solid #ddd;
+}
+.basicTabs-container .tabs-content {
+  display: none;
+}
+.basicTabs-container .tabs-content.active {
+  display: block;
 }
 .no-scrollbars {
   scrollbar-width: none;

client/config/reactiveTabs.js

@@ -1,4 +0,0 @@
-// XXX Since Blaze doesn't have a clean high component API, component API are
-// also tweaky to use. I guess React would be a solution.
-const template = 'basicTabs';
-ReactiveTabs.createInterface({ template });