fix: renderPane exec twice (#439)

Author: mortalYoung

src/components/tabs/__tests__/__snapshots__/tabs.test.tsx.snap

@@ -44,27 +44,5 @@ exports[`The Tabs Components The snapshot 1`] = `
       </a>
     </div>
   </div>
-  <div
-    className="mo-tabs__content"
-  >
-    <div
-      className="mo-tabs__content__item"
-    >
-      <div
-        data-testid="test1"
-      >
-        test1
-      </div>
-    </div>
-    <div
-      className="mo-tabs__content__item"
-    >
-      <div
-        data-testid="test2"
-      >
-        test2
-      </div>
-    </div>
-  </div>
 </div>
 `;

src/components/tabs/__tests__/tabs.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { cleanup, fireEvent, render, waitFor } from '@testing-library/react';
 import renderer from 'react-test-renderer';
 import '@testing-library/jest-dom';
-import { Tabs, tabsClassName, tabsContentActiveClassName } from '..';
+import { Tabs, tabsClassName } from '..';
 import { ITabProps, tabItemActiveClassName } from '../tab';
 import { dragToTargetNode } from '@test/utils';
 
@@ -32,10 +32,8 @@ describe('The Tabs Components', () => {
 
     test('Should render nothing', () => {
         const { container } = render(<Tabs />);
-        const content = container.querySelector('.mo-tabs__content');
         const header = container.querySelector('.mo-tabs__header');
 
-        expect(content?.childElementCount).toBe(0);
         expect(header?.childElementCount).toBe(0);
     });
 
@@ -49,18 +47,6 @@ describe('The Tabs Components', () => {
         expect(body.classList).toContain('test-tabs');
     });
 
-    test('Should support to renderPane via function', () => {
-        const data = mockData.concat();
-        data.push({
-            id: '3',
-            name: 'test-title-3',
-            renderPane: () => <div data-testid="test3">test3</div>,
-            closable: true,
-        });
-        const { getByTestId } = render(<Tabs data={data} />);
-        expect(getByTestId('test3')).toBeInTheDocument();
-    });
-
     test('Should render card type', () => {
         const { container } = render(<Tabs type="card" data={mockData} />);
 
@@ -69,13 +55,9 @@ describe('The Tabs Components', () => {
     });
 
     test('Should active specific tab', () => {
-        const { getByText, getByTestId } = render(
-            <Tabs activeTab="1" data={mockData} />
-        );
+        const { getByText } = render(<Tabs activeTab="1" data={mockData} />);
         const testHeader = getByText('test-title-1');
-        const testContent = getByTestId('test1').parentElement;
         expect(testHeader?.classList).toContain(tabItemActiveClassName);
-        expect(testContent?.classList).toContain(tabsContentActiveClassName);
     });
 
     test('Should trigger events', async () => {

src/components/tabs/index.tsx

@@ -9,7 +9,7 @@ import {
     classNames,
 } from 'mo/common/className';
 
-import { Tab, ITabProps, tabItemClassName } from './tab';
+import { Tab, ITabProps } from './tab';
 import DragAndDrop from './dragAndDrop';
 
 export type TabsType = 'line' | 'card';
@@ -28,13 +28,6 @@ export interface ITabsProps<T> extends React.ComponentProps<any> {
 
 export const tabsClassName = prefixClaName('tabs');
 export const tabsHeader = getBEMElement(tabsClassName, 'header');
-export const tabsContent = getBEMElement(tabsClassName, 'content');
-export const tabsContentItem = getBEMElement(tabsContent, 'item');
-export const tabsContentActiveClassName = getBEMModifier(
-    tabsContentItem,
-    'active'
-);
-export const tabItemCloseClassName = getBEMElement(tabItemClassName, 'close');
 
 export function Tabs<T>(props: ITabsProps<T>) {
     const {
@@ -88,23 +81,6 @@ export function Tabs<T>(props: ITabsProps<T>) {
                         );
                     })}
                 </div>
-                <div className={tabsContent}>
-                    {data?.map((tab: ITabProps<T>) => {
-                        return (
-                            <div
-                                key={tab.id}
-                                className={classNames(tabsContentItem, {
-                                    [tabsContentActiveClassName]:
-                                        activeTab === tab.id,
-                                })}
-                            >
-                                {tab.renderPane instanceof Function
-                                    ? tab.renderPane(tab)
-                                    : tab.renderPane}
-                            </div>
-                        );
-                    })}
-                </div>
             </div>
         </DragAndDrop>
     );

src/workbench/__tests__/__snapshots__/workbench.test.tsx.snap

@@ -433,19 +433,6 @@ exports[`Test Workbench Component Match The WorkbenchView snapshot 1`] = `
                           问题
                         </div>
                       </div>
-                      <div
-                        class="mo-tabs__content"
-                      >
-                        <div
-                          class="mo-tabs__content__item"
-                        >
-                          <div
-                            style="margin: 0px 18px; user-select: none;"
-                          >
-                            未在工作区检测到问题
-                          </div>
-                        </div>
-                      </div>
                     </div>
                     <div
                       class="mo-action-bar mo-panel__toolbar"

src/workbench/panel/__tests__/__snapshots__/panel.test.tsx.snap

@@ -32,32 +32,6 @@ exports[`Test Panel Component Match the Panel snapshot 1`] = `
           输出
         </div>
       </div>
-      <div
-        className="mo-tabs__content"
-      >
-        <div
-          className="mo-tabs__content__item"
-        />
-        <div
-          className="mo-tabs__content__item mo-tabs__content__item--active"
-        >
-          <div
-            className="mo-output"
-          >
-            <div
-              className="mo-monaco-editor"
-              style={
-                Object {
-                  "height": "100%",
-                  "minHeight": "400px",
-                  "position": "relative",
-                  "width": "100%",
-                }
-              }
-            />
-          </div>
-        </div>
-      </div>
     </div>
     <div
       className="mo-action-bar mo-panel__toolbar"
@@ -145,43 +119,6 @@ exports[`Test Panel Component Match the PanelView snapshot 1`] = `
           输出
         </div>
       </div>
-      <div
-        className="mo-tabs__content"
-      >
-        <div
-          className="mo-tabs__content__item"
-        >
-          <div
-            style={
-              Object {
-                "margin": "0 18px",
-                "userSelect": "none",
-              }
-            }
-          >
-            未在工作区检测到问题
-          </div>
-        </div>
-        <div
-          className="mo-tabs__content__item mo-tabs__content__item--active"
-        >
-          <div
-            className="mo-output"
-          >
-            <div
-              className="mo-monaco-editor"
-              style={
-                Object {
-                  "height": "100%",
-                  "minHeight": "400px",
-                  "position": "relative",
-                  "width": "100%",
-                }
-              }
-            />
-          </div>
-        </div>
-      </div>
     </div>
     <div
       className="mo-action-bar mo-panel__toolbar"

src/workbench/panel/__tests__/panel.test.tsx

@@ -82,9 +82,7 @@ describe('Test Panel Component', () => {
         expect(
             container.querySelector('.mo-monaco-editor')
         ).not.toBeInTheDocument();
-        // The customizedPane element are rendered in two places(mo-panel__container/mo-tabs__content),
-        // so the expect value is 2
-        expect(getAllByText('customizedPane').length).toBe(2);
+        expect(getAllByText('customizedPane').length).toBe(1);
     });
 
     test('Sort the Panel ', () => {