feat:Exposing more props to renderPane for EditorTab (#759)

* feat: tab.renderPane method arguments add tab and group

* feat: add renderPane example

* test: add the renderPane method use case

Author: Zaoei

src/components/tabs/tab.tsx

@@ -3,15 +3,17 @@ import { useRef } from 'react';
 import { findDOMNode } from 'react-dom';
 import { useDrag, useDrop } from 'react-dnd';
 
+import { IEditorGroup } from 'mo/model';
+import type { UniqueId } from 'mo/common/types';
 import {
     classNames,
     getBEMElement,
     getBEMModifier,
     prefixClaName,
 } from 'mo/common/className';
+
 import TabExtra from './tabExtra';
 import { Icon } from '../icon';
-import type { UniqueId } from 'mo/common/types';
 
 export interface ITabEvent {
     onDrag?: (
@@ -49,7 +51,9 @@ export interface ITabProps<T = any, P = any> {
     icon?: string | JSX.Element;
     id: UniqueId;
     name?: string;
-    renderPane?: ((item: P) => React.ReactNode) | React.ReactNode;
+    renderPane?:
+        | ((item: P, tab?: ITabProps, group?: IEditorGroup) => React.ReactNode)
+        | React.ReactNode;
     data?: T;
 }
 

src/workbench/editor/__tests__/group.test.tsx

@@ -1,8 +1,10 @@
+import 'reflect-metadata';
 import React from 'react';
 import { render, cleanup, fireEvent, waitFor } from '@testing-library/react';
 import { tabItemActiveClassName } from 'mo/components/tabs/tab';
 
 import EditorGroup from '../group';
+import { IEditorTab } from 'mo/model';
 
 const TEST_ID = 'test-id';
 const TEST_MENU = 'test-menu';
@@ -130,4 +132,24 @@ describe('The Editor Component', () => {
             expect(fn).toBeCalled();
         });
     });
+
+    test('use renderPane method', async () => {
+        const renderPane = jest.fn((tabData, tab, group) => {
+            return <div className={tab.id}>{tab.id}</div>;
+        });
+
+        const testTab: IEditorTab = {
+            id: TEST_ID,
+            name: TEST_ID,
+            data: {},
+            renderPane,
+        };
+
+        const { container } = render(
+            <EditorGroup id="test" onClickActions={jest.fn()} tab={testTab} />
+        );
+        const renderDiv = container.querySelector(`.${TEST_ID}`);
+
+        expect(renderDiv?.innerHTML).toEqual(TEST_ID);
+    });
 });

src/workbench/editor/editor.tsx

@@ -52,6 +52,7 @@ export function Editor(
                 <EditorGroup
                     editorOptions={editorOptions}
                     currentGroup={current!}
+                    group={groups[0]}
                     {...groups[0]}
                     {...getEvents(groups[0].id!)}
                 />
@@ -74,6 +75,7 @@ export function Editor(
                             <EditorGroup
                                 editorOptions={editorOptions}
                                 currentGroup={current!}
+                                group={g}
                                 {...g}
                                 {...getEvents(g.id!)}
                             />

src/workbench/editor/group.tsx

@@ -22,6 +22,7 @@ import { tabItemActiveClassName } from 'mo/components/tabs/tab';
 export interface IEditorGroupProps extends IEditorGroup {
     currentGroup?: IEditorGroup;
     editorOptions?: IEditorOptions;
+    group?: IEditorGroup;
 }
 
 export function EditorGroup(props: IEditorGroupProps & IEditorController) {
@@ -30,6 +31,7 @@ export function EditorGroup(props: IEditorGroupProps & IEditorController) {
         data,
         tab,
         currentGroup,
+        group,
         actions = [],
         menu = [],
         onMoveTab,
@@ -114,7 +116,13 @@ export function EditorGroup(props: IEditorGroupProps & IEditorController) {
                     // Default we use monaco editor, but also you can customize by renderPanel() function or a react element
                     tab?.renderPane ? (
                         typeof tab.renderPane === 'function' ? (
-                            tab.renderPane(tab.data)
+                            tab.renderPane(
+                                {
+                                    ...tab.data,
+                                },
+                                tab,
+                                group
+                            )
                         ) : (
                             tab.renderPane
                         )

stories/extensions/test/testPane.tsx

@@ -228,6 +228,31 @@ export type GenericClassDecorator<T> = (target: T) => void;`,
             }
         };
 
+        const newPane = function () {
+            const key = shortRandomId();
+            const name = `pane-${key}.ts`;
+            const tabData: IEditorTab = {
+                id: `${key}`,
+                name,
+                icon: 'selection',
+                data: {},
+                breadcrumb: [{ id: `${key}`, name }],
+                renderPane: (tabData, tab, group) => {
+                    console.log(tabData, tab, group);
+                    const style: React.CSSProperties = {
+                        display: 'flex',
+                        width: '100%',
+                        height: '100%',
+                        fontSize: 48,
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    };
+                    return <div style={style}>{name}</div>;
+                },
+            };
+            molecule.editor.open(tabData);
+        };
+
         const updateEntryPage = () => {
             const style: React.CSSProperties = {
                 display: 'flex',
@@ -435,6 +460,7 @@ PARTITIONED BY (DE STRING) LIFECYCLE 1000;
                         <Button onClick={toggleEditorStatus}>
                             Toggle Editor status
                         </Button>
+                        <Button onClick={newPane}>New Pane</Button>
                         <Button onClick={updateEntryPage}>
                             Update Entry Page
                         </Button>