fix(output): disable the minimap and fix output can't refresh problem (#124)

fix #123

Author: wewoor

src/services/workbench/panelService.ts

@@ -126,7 +126,9 @@ export class PanelService extends Component<IPanel> implements IPanelService {
         const targetIndex = panes?.findIndex(searchById(data.id));
         if (targetIndex !== undefined && targetIndex > -1) {
             Object.assign(panes[targetIndex], data);
-            this.render();
+            this.setState({
+                data: [...panes],
+            });
             return panes[targetIndex];
         }
         return undefined;

src/workbench/panel/output.tsx

@@ -1,27 +1,33 @@
 import * as React from 'react';
-import { memo } from 'react';
 import { prefixClaName } from 'mo/common/className';
 import { IPanelItem } from 'mo/model/workbench/panel';
 import MonacoEditor from 'mo/components/monaco';
 
 const defaultClassName = prefixClaName('output');
 
 function Output(props: IPanelItem) {
-    const { data } = props;
+    const { data = '' } = props;
+    // TODO: Output should export the editorInstance, it's used for update the editor Language, Monarch
     return (
-        <div className={defaultClassName}>
+        <div
+            className={defaultClassName}
+            style={{ width: '100%', height: '100%' }}
+        >
             <MonacoEditor
+                key={data.length}
                 options={{
                     value: data,
                     readOnly: true,
                     lineDecorationsWidth: 0,
                     lineNumbers: 'off',
-                    minimap: undefined,
+                    minimap: {
+                        enabled: false,
+                    },
                     automaticLayout: true,
                 }}
             />
         </div>
     );
 }
 
-export default memo(Output);
+export default Output;

src/workbench/panel/panel.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { memo } from 'react';
 import { getBEMElement, prefixClaName } from 'mo/common/className';
 import { IPanel } from 'mo/model/workbench/panel';
 import { IPanelController } from 'mo/controller/panel';
@@ -40,4 +39,4 @@ function Panel(props: IPanel & IPanelController) {
     );
 }
 
-export default memo(Panel);
+export default Panel;

stories/extensions/test/testPane.tsx

@@ -65,6 +65,10 @@ export default class TestPane extends React.Component {
             panelService.showHide();
         };
 
+        const updateOutput = () => {
+            panelService.appendOutput('Number: ' + Math.random() * 10);
+        };
+
         const newEditor = function () {
             const key = (Math.random() * 10 + 1).toFixed(2);
             const tabData: IEditorTab = {
@@ -111,6 +115,7 @@ export type GenericClassDecorator<T> = (target: T) => void;`,
                     <h2>Add a new Panel:</h2>
                     <Button onClick={addPanel}>Add Panel</Button>
                     <Button onClick={showHidePanel}>Show/Hide Panel</Button>
+                    <Button onClick={updateOutput}>Update Output</Button>
                 </div>
                 <div style={{ margin: '50px 20px' }}>
                     <h2>Notification:</h2>