panelComponent can be either of React element or

React component

Author: dev-javascript

src/panel/memoPanel.js

@@ -5,10 +5,12 @@ const Panel = memo(function Panel(props) {
     React.useContext(ForceUpdateContext);
     const { id, selectedTabID } = props
         , api = useContext(ApiContext)
-        , panelProps = panelPropsManager({ isSelected: id === selectedTabID, api, id });
+        , isSelected = id === selectedTabID
+        , panelProps = panelPropsManager({ isSelected, api, id })
+        , PanelComponent = api.getTab(id).panelComponent;
     return (
         <div {...panelProps}>
-            {api.getTab(id).panelComponent}
+            <PanelComponent id={id} isSelected={isSelected} api={api.userProxy} ></PanelComponent>
         </div>
     )
 }, (oldProps, newProps) => {

src/panel/panel.js

@@ -76,6 +76,10 @@ const _apiProps = {
             return tabId;
         };
     })(),
+    setTab: function (id, newData) {
+        this._setTab(id, newData, this.getOption('defaultPanelComponent'));
+        return this;
+    },
     open: function (tabObj = missingParamEr('open')) {
         const result = this._getOnChangePromise();
         this._open(tabObj.id);

src/panel/panel.tast.js

@@ -1,3 +1,4 @@
+import React from 'react';
 const DefaultOptions = function (DefaulTabInnerComponent = null) {
     this.defaultDirection = 'ltr';
     this._DefaulTabInnerComponent = DefaulTabInnerComponent;
@@ -20,7 +21,7 @@ DefaultOptions.prototype._getOptions = function () {
         onDestroy: function () { },
         onInit: function () { },
         accessibility: true,
-        defaultPanelComponent: null
+        defaultPanelComponent: function (props) { return <div></div>; }
     };
     let _direction = this.defaultDirection, _tabComponent = this._DefaulTabInnerComponent;
     const that = this;

src/utils/api/api.factory.js

@@ -1,22 +1,35 @@
 import React from 'react';
-import MemoPanel from '../../panel/memoPanel.js';
 function Tabs() {
     this._data = [];
 }
-Tabs.prototype._getDefaultTabData = function (defaultPanelComponent) {
-    return {
-        title: "",
-        tooltip: "",
-        panelComponent: defaultPanelComponent,
-        closable: true,
-        iconClass: "",
-        disable: false,
-        id: `tab_${(new (Date)()).getTime()}`
-    };
+Tabs.prototype._checkPanelComponent = function (DefaultPanelComponent, PanelComponent) {
+    let NewPanelCom = PanelComponent;
+    if (!PanelComponent)
+        NewPanelCom = DefaultPanelComponent;
+    else
+        if (typeof PanelComponent !== 'function' && React.isValidElement(PanelComponent))
+            NewPanelCom = function (props) { return PanelComponent; };
+    return NewPanelCom;
 };
+Tabs.prototype._prepareTabData = (function () {
+    const _getDefaultTabData = function (DefaultPanelComponent) {
+        return {
+            title: "",
+            tooltip: "",
+            panelComponent: DefaultPanelComponent,
+            closable: true,
+            iconClass: "",
+            disable: false,
+            id: `tab_${(new (Date)()).getTime()}`
+        };
+    };
+    return function (tabData, DefaultPanelComponent) {
+        tabData.panelComponent = this._checkPanelComponent(DefaultPanelComponent, tabData.panelComponent);
+        return Object.assign(_getDefaultTabData(DefaultPanelComponent), tabData);
+    };
+})();
 Tabs.prototype._addTab = function (tabObj, { defaultPanelComponent }) {
-    tabObj = Object.assign(this._getDefaultTabData(defaultPanelComponent), tabObj);
-    this._data.push(tabObj);
+    this._data.push(this._prepareTabData(tabObj, defaultPanelComponent));
     return this;
 };
 Tabs.prototype._removeTab = function (id) {
@@ -27,16 +40,14 @@ Tabs.prototype._removeTab = function (id) {
 Tabs.prototype.getTab = function (id) {
     return this._data.find(tab => tab.id === id);
 };
-Tabs.prototype.setTab = function (id, newData = {}, memoizePanel = true) {
+Tabs.prototype._setTab = function (id, newData = {}, DefaultPanelComponent) {
     const _index = this._data.findIndex(tab => tab.id === id);
     if (_index >= 0) {
+        newData.panelComponent = this._checkPanelComponent(DefaultPanelComponent, newData.panelComponent);
         const oldData = this._data[_index];
         newData.id = oldData.id; // can not change id
-        if (memoizePanel && newData.panelComponent !== oldData.panelComponent && React.isValidElement(newData.panelComponent)) {
-            newData.panelComponent = <MemoPanel>newData.panelComponent</MemoPanel>;
-        }
         Object.assign(this._data[_index], newData);
     }
-    return newData;
+    return this;
 };
 export default Tabs;