tab.BodyContainer #6761

Author: tobiu

apps/sharedcovid/view/MainContainer.mjs

@@ -28,12 +28,13 @@ class MainContainer extends Viewport {
          * @member {Object[]} items
          */
         items: [HeaderContainer, {
-            module     : TabContainer,
-            activeIndex: null, // render no items initially
-            flex       : 1,
-            reference  : 'tab-container',
-            sortable   : true,
-            style      : {margin: '10px', marginTop: 0},
+            module              : TabContainer,
+            activateInsertedTabs: true,
+            activeIndex         : null, // render no items initially
+            flex                : 1,
+            reference           : 'tab-container',
+            sortable            : true,
+            style               : {margin: '10px', marginTop: 0},
 
             items: [{
                 module   : () => import('./TableContainer.mjs'),

resources/scss/src/apps/docs/MainContainer.scss

@@ -2,7 +2,7 @@
     .neo-docs-navigation-tab-container {
         background-color: var(--docs-navigation-tab-container-background-color);
 
-        .neo-tab-content-container {
+        .neo-tab-body-container {
             border-right: none;
         }
     }

resources/scss/src/calendar/view/SettingsContainer.scss

@@ -6,7 +6,7 @@
         overflow-y: auto;
     }
 
-    .neo-tab-content-container {
+    .neo-tab-body-container {
         border: 0 !important;
     }
 }

resources/scss/src/code/LivePreview.scss

@@ -22,7 +22,7 @@
             margin-top: calc(var(--cmp-tab-strip-height) * (-1) - 1px);
         }
 
-        .neo-tab-content-container {
+        .neo-tab-body-container {
             background-color          : transparent;
             border                    : 1px solid #e6e6e6;
             border-bottom-left-radius : calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));

resources/scss/src/tab/Container.scss

@@ -1,24 +1,24 @@
 .neo-tab-container {
     &.neo-bottom {
-        > .neo-tab-content-container {
+        > .neo-tab-body-container {
             border-bottom: 0;
         }
     }
 
     &.neo-left {
-        > .neo-tab-content-container {
+        > .neo-tab-body-container {
             border-left: 0;
         }
     }
 
     &.neo-right {
-        > .neo-tab-content-container {
+        > .neo-tab-body-container {
             border-right: 0;
         }
     }
 
     &.neo-top {
-        > .neo-tab-content-container {
+        > .neo-tab-body-container {
             border-top: 0;
         }
     }
@@ -27,7 +27,7 @@
 
     }
 
-    .neo-tab-content-container {
+    .neo-tab-body-container {
         border  : var(--tab-container-content-border);
         overflow: hidden;
     }

src/tab/BodyContainer.mjs

@@ -0,0 +1,39 @@
+import Container from '../container/Base.mjs';
+
+/**
+ * @class Neo.tab.BodyContainer
+ * @extends Neo.container.Base
+ */
+class BodyContainer extends Container {
+    static config = {
+        /**
+         * @member {String} className='Neo.tab.BodyContainer'
+         * @protected
+         */
+        className: 'Neo.tab.BodyContainer',
+        /**
+         * @member {String[]} baseCls=['neo-container', 'neo-tab-body-container']
+         * @protected
+         */
+        baseCls: ['neo-container', 'neo-tab-body-container']
+    }
+
+    /**
+     * When adding an existing tab into a different container, it will get automatically from the closest parent.
+     * In this case, we also want to remove the tab.header.Button from the tab.header.Toolbar.
+     * Use case: SharedCovid.view.MainContainerController
+     * @param {Neo.component.Base} component
+     * @param {Boolean} [destroyItem=true]
+     * @param {Boolean} [silent=false]
+     * @returns {Neo.component.Base|null}
+     */
+    remove(component, destroyItem, silent) {
+        if (component?.isTab) {
+            this.parent.remove(component, destroyItem, silent)
+        } else {
+            super.remove(component, destroyItem, silent)
+        }
+    }
+}
+
+export default Neo.setupClass(BodyContainer);

src/tab/Container.mjs

@@ -1,4 +1,5 @@
 import BaseContainer from '../container/Base.mjs';
+import BodyContainer from './BodyContainer.mjs';
 import HeaderButton  from './header/Button.mjs';
 import HeaderToolbar from './header/Toolbar.mjs';
 import NeoArray      from '../util/Array.mjs';
@@ -44,14 +45,14 @@ class Container extends BaseContainer {
          */
         baseCls: ['neo-tab-container'],
         /**
-         * @member {String|null} cardContainerId=null
+         * Default configs for the tab.BodyContainer
+         * @member {Object|null} bodyContainer=null
          */
-        cardContainerId: null,
+        bodyContainer: null,
         /**
-         * Default configs for the tab.Strip
-         * @member {Object|null} contentContainer=null
+         * @member {String|null} bodyContainerId=null
          */
-        contentContainer: null,
+        bodyContainerId: null,
         /**
          * Default configs for the tab.HeaderToolbar
          * @member {Object|null} headerToolbar=null
@@ -125,7 +126,7 @@ class Container extends BaseContainer {
      */
      async afterSetActiveIndex(value, oldValue) {
         let me            = this,
-            cardContainer = Neo.getComponent(me.cardContainerId);
+            cardContainer = Neo.getComponent(me.bodyContainerId);
 
         if (Neo.isNumber(value) && value > -1 && !cardContainer) {
             me.on('constructed', () => {
@@ -236,12 +237,13 @@ class Container extends BaseContainer {
      */
     createItems() {
         let me            = this,
+            {activeIndex, removeInactiveCards, useActiveTabIndicator} = me,
             items         = me.items || [],
             tabButtons    = [],
             tabComponents = [];
 
         Object.assign(me, {
-            cardContainerId: me.cardContainerId || Neo.getId('container'),
+            bodyContainerId: me.bodyContainerId || Neo.getId('container'),
             tabBarId       : me.tabBarId        || Neo.getId('tab-header-toolbar'),
             tabStripId     : me.tabStripId      || Neo.getId('tab-strip')
         });
@@ -257,32 +259,31 @@ class Container extends BaseContainer {
         });
 
         me.items = [{
-            module               : HeaderToolbar,
-            dock                 : me.tabBarPosition,
-            flex                 : 'none',
-            id                   : me.tabBarId,
-            items                : tabButtons,
-            sortable             : me.sortable,
-            useActiveTabIndicator: me.useActiveTabIndicator,
+            module  : HeaderToolbar,
+            dock    : me.tabBarPosition,
+            flex    : 'none',
+            id      : me.tabBarId,
+            items   : tabButtons,
+            sortable: me.sortable,
+            useActiveTabIndicator,
             ...me.headerToolbar
         }, {
-            module               : Strip,
-            cls                  : ['neo-tab-strip', 'neo-dock-' + me.tabBarPosition],
-            flex                 : 'none',
-            id                   : me.tabStripId,
-            tabContainerId       : me.id,
-            useActiveTabIndicator: me.useActiveTabIndicator,
+            module        : Strip,
+            cls           : ['neo-dock-' + me.tabBarPosition],
+            flex          : 'none',
+            id            : me.tabStripId,
+            tabContainerId: me.id,
+            useActiveTabIndicator,
             ...me.tabStrip
         }, {
-            ntype                : 'container',
-            cls                  : ['neo-container', 'neo-tab-content-container'],
-            id                   : me.cardContainerId,
-            itemDefaults         : me.itemDefaults,
-            items                : tabComponents,
-            layout               : {ntype: 'card', activeIndex: me.activeIndex, removeInactiveCards: me.removeInactiveCards},
-            useActiveTabIndicator: me.useActiveTabIndicator,
-            ...me.contentContainer
-        }];
+            module      : BodyContainer,
+            id          : me.bodyContainerId,
+            itemDefaults: me.itemDefaults,
+            items       : tabComponents,
+            layout      : {ntype: 'card', activeIndex, removeInactiveCards},
+            useActiveTabIndicator,
+            ...me.bodyContainer
+        }]
 
         me.itemDefaults = null;
 
@@ -310,7 +311,7 @@ class Container extends BaseContainer {
      * @returns {Neo.container.Base}
      */
     getCardContainer() {
-        return Neo.getComponent(this.cardContainerId)
+        return Neo.getComponent(this.bodyContainerId)
     }
 
     /**