feat: support right extra content

Author: bytemain

packages/core/src/core/diff-viewer/common.ts

@@ -105,10 +105,15 @@ export interface IOverrideAppRendererProps extends IOverrideAppRendererConfig {
   Landing?: React.ComponentType<LandingProps>;
 }
 
+export interface IExtraContent {
+  component?: React.ComponentType<any>;
+  initialProps?: any;
+}
+
 export const IDiffViewerProps = Symbol('IDiffViewerProps');
 export interface IDiffViewerProps extends Partial<IOverrideAppRendererProps> {
   onRef: (handle: IDiffViewerHandle) => void;
 
   onWillApplyTheme?: (theme: ITheme) => Record<string, string | undefined>;
-  tabBarRightExtraContent?: React.ReactNode;
+  tabBarRightExtraContent?: IExtraContent;
 }

packages/core/src/core/diff-viewer/internal/component.provider.ts

@@ -0,0 +1,21 @@
+import { Autowired } from '@opensumi/di';
+import { ComponentContribution, ComponentRegistry } from '@opensumi/ide-core-browser';
+import { Domain } from '@opensumi/ide-core-common';
+import { TabbarRightExtraContentId } from '@opensumi/ide-editor';
+import { IDiffViewerProps } from '../common';
+
+@Domain(ComponentContribution)
+export class DiffViewerComponentContribution implements ComponentContribution {
+  @Autowired(IDiffViewerProps)
+  protected diffViewerProps: IDiffViewerProps;
+
+  registerComponent(registry: ComponentRegistry) {
+    if (this.diffViewerProps.tabBarRightExtraContent) {
+      registry.register(TabbarRightExtraContentId, {
+        id: TabbarRightExtraContentId,
+        component: this.diffViewerProps.tabBarRightExtraContent.component,
+        initialProps: this.diffViewerProps.tabBarRightExtraContent.initialProps,
+      });
+    }
+  }
+}

packages/core/src/core/diff-viewer/module.ts

@@ -2,12 +2,14 @@ import { BrowserModule } from '@opensumi/ide-core-browser';
 
 import { Injectable } from '../../modules/opensumi__common-di';
 import { DiffViewerContribution } from './internal/base';
+import { DiffViewerComponentContribution } from './internal/component.provider';
 import { DiffViewerThemeProvider } from './internal/theme.provider';
 
 @Injectable()
 export class DiffViewerModule extends BrowserModule {
   providers = [
     DiffViewerContribution,
     DiffViewerThemeProvider,
+    DiffViewerComponentContribution,
   ];
 }

packages/startup/src/diff-viewer/index.tsx

@@ -37,6 +37,14 @@ const App = () => {
 
   const memo = useMemo(() => (
     <DiffViewerRenderer
+      tabBarRightExtraContent={{
+        component: () => <div>heelo</div>,
+      }}
+      onWillApplyTheme={() => {
+        return {
+          'editorGroupHeader.tabsBackground': '#fff',
+        };
+      }}
       onRef={(handle) => {
         handleRef.current = handle;
         console.log('=====', handle);
@@ -47,7 +55,7 @@ const App = () => {
         handle.onDidTabChange((e) => {
           console.log('onDidTabChange', e.newPath);
           setEventInfo(e);
-        })
+        });
         data.forEach(v => {
           handleRef.current!.openDiffInTab(
             v.path,