panelComponent property of tabData object can

be null

Author: dev-javascript

README.md

@@ -944,8 +944,8 @@ const {selectedTabID, openTabIDs} = instance.getPreviousData();
     </tr>
     <tr>
       <td>panelComponent</td>
-      <td>can be either of React Element or React Component</td>
-      <td></td>
+      <td>React Element | React Component | null</td>
+      <td>function component which returns empty div</td>
       <td>false</td>
     </tr>
     <tr>

src/panel/__snapshots__/panel.test.js.snap

@@ -79,11 +79,7 @@ exports[`panel structure :  default options 1`] = `
     id="rc-dyn-tabs-p-2"
     role="tabpanel"
     tab-id="2"
-  >
-    <p>
-      tab2 panel
-    </p>
-  </div>
+  />
   <div
     aria-hidden={true}
     aria-labelledby="rc-dyn-tabs-l-3"
@@ -136,11 +132,7 @@ exports[`panel structure :  rtl and none accessibility options 1`] = `
   <div
     className="rc-dyn-tabs-panel"
     tab-id="2"
-  >
-    <p>
-      tab2 panel
-    </p>
-  </div>
+  />
   <div
     className="rc-dyn-tabs-panel"
     tab-id="3"

src/panel/panel.js

@@ -11,7 +11,7 @@ const PanelComponent = function PanelComponent(props) {
     PanelComponent = api.getTab(id).panelComponent;
   return (
     <div {...panelProps}>
-      <PanelComponent id={id} isSelected={isSelected} api={api.userProxy}></PanelComponent>
+      {PanelComponent ? <PanelComponent id={id} isSelected={isSelected} api={api.userProxy}></PanelComponent> : null}
     </div>
   );
 };

src/panel/panel.test.js

@@ -5,7 +5,7 @@ import renderer from 'react-test-renderer';
 import Api from '../utils/api/api.js';
 let container = document.createElement('div'),
   realUseContext;
-const getDefaultApi = () => ({
+const getDefaultOptions = () => ({
   tabs: [
     {
       id: '1',
@@ -18,9 +18,7 @@ const getDefaultApi = () => ({
       id: '2',
       title: 'tab2',
       disable: true,
-      panelComponent: function panelComponent3(props) {
-        return <p>{props.api.getTab(props.id).title + ' panel'}</p>;
-      },
+      panelComponent: null,
     },
     {id: '3', title: 'tab3'},
     {
@@ -37,7 +35,7 @@ const getDefaultApi = () => ({
   ],
 });
 const setMockUseContext = (op = {}) => {
-  const defaultOp = getDefaultApi();
+  const defaultOp = getDefaultOptions();
   const instance = new Api({options: Object.assign({}, defaultOp, op)});
   React.useContext = jest.fn(() => instance);
 };

src/utils/api/optionManager/optionManager.test.js

@@ -144,6 +144,17 @@ describe('OptionManager.prototype.validateTabData :  ', () => {
     expect(tabData.disable === false).toBe(true);
     expect(typeof tabData.id === 'string').toBe(true);
   });
+  test('panelComponent parameter can be null', () => {
+    const tabData = obj.validateTabData({panelComponent: null});
+    expect(tabData.panelComponent).toBe(null);
+  });
+});
+describe('OptionManager.prototype.validatePanelComponent', () => {
+  it('validatePanelComponent function does not change value of panelComponent property when it is null', () => {
+    const tabData = {panelComponent: null};
+    obj.validatePanelComponent(tabData);
+    expect(tabData.panelComponent).toBe(null);
+  });
 });
 describe('OptionManager.prototype.setOption : ', () => {
   it('it can not set tabs option', () => {