fix: selecet issue

opensumi · Apr 27, 2022 · f718208 · f718208
1 parent 5dba3f7
commit f718208
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 34 deletions.
diff --git a/packages/components/src/select/index.tsx b/packages/components/src/select/index.tsx
@@ -261,15 +261,20 @@ export function Select<T = string>({
   const selectRef = React.useRef<HTMLDivElement | null>(null);
   const overlayRef = React.useRef<HTMLDivElement | null>(null);
 
-  const toggleOpen = useCallback(() => {
-    const target = !open;
-    if (target) {
-      if (onBeforeShowOptions && onBeforeShowOptions()) {
-        return;
+  const toggleOpen = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const target = !open;
+      if (target) {
+        if (onBeforeShowOptions && onBeforeShowOptions()) {
+          return;
+        }
       }
-    }
-    setOpen(target);
-  }, [open, onBeforeShowOptions, onBeforeShowOptions]);
+      setOpen(target);
+    },
+    [open, onBeforeShowOptions, onBeforeShowOptions],
+  );
 
   const getSelectedValue = useCallback(() => {
     if (options && isDataOptions(options)) {

diff --git a/packages/output/src/browser/output.service.ts b/packages/output/src/browser/output.service.ts
@@ -29,8 +29,8 @@ export class OutputService extends WithEventBus {
 
   private outputEditor?: ICodeEditor;
 
-  @observable
-  readonly channels = new Map<string, OutputChannel>();
+  @observable.shallow
+  readonly channels = observable.map<string, OutputChannel>();
 
   @observable.ref
   selectedChannel: OutputChannel;

diff --git a/packages/output/src/browser/output.view.tsx b/packages/output/src/browser/output.view.tsx
@@ -2,13 +2,22 @@ import { observer } from 'mobx-react-lite';
 import React from 'react';
 import { useEffect, createRef } from 'react';
 
-import { Select, Option } from '@opensumi/ide-components';
+import { Select } from '@opensumi/ide-components';
 import { useInjectable, isElectronRenderer, ViewState } from '@opensumi/ide-core-browser';
 import { Select as NativeSelect } from '@opensumi/ide-core-browser/lib/components/select';
 
 import styles from './output.module.less';
 import { OutputService } from './output.service';
 
+const NONE = '<no channels>';
+
+const NONE_CHANNELS = [
+  {
+    label: NONE,
+    value: NONE,
+  },
+];
+
 export const Output = observer(({ viewState }: { viewState: ViewState }) => {
   const outputService = useInjectable<OutputService>(OutputService);
   const outputRef = createRef<HTMLDivElement>();
@@ -31,34 +40,20 @@ export const Output = observer(({ viewState }: { viewState: ViewState }) => {
 });
 
 export const ChannelSelector = observer(() => {
-  const NONE = '<no channels>';
-
   const outputService = useInjectable<OutputService>(OutputService);
   const channelOptionElements: React.ReactNode[] = [];
   outputService.getChannels().forEach((channel, idx) => {
     channelOptionElements.push(
-      isElectronRenderer() ? (
-        <option value={channel.name} key={`${idx} - ${channel.name}`}>
-          {channel.name}
-        </option>
-      ) : (
-        <Option value={channel.name} key={`${idx} - ${channel.name}`}>
-          {channel.name}
-        </Option>
-      ),
+      <option value={channel.name} key={`${idx} - ${channel.name}`}>
+        {channel.name}
+      </option>,
     );
   });
   if (channelOptionElements.length === 0) {
     channelOptionElements.push(
-      isElectronRenderer() ? (
-        <option key={NONE} value={NONE}>
-          {NONE}
-        </option>
-      ) : (
-        <Option key={NONE} value={NONE}>
-          {NONE}
-        </Option>
-      ),
+      <option key={NONE} value={NONE}>
+        {NONE}
+      </option>,
     );
   }
 
@@ -75,6 +70,14 @@ export const ChannelSelector = observer(() => {
     }
   }
 
+  const options =
+    outputService.channels.size === 0
+      ? NONE_CHANNELS
+      : Array.from(outputService.channels.values()).map((channel) => ({
+          label: channel.name,
+          value: channel.name,
+        }));
+
   return isElectronRenderer() ? (
     <NativeSelect
       value={outputService.selectedChannel ? outputService.selectedChannel.name : NONE}
@@ -89,8 +92,7 @@ export const ChannelSelector = observer(() => {
       size='small'
       maxHeight={outputService.viewHeight}
       onChange={handleChange}
-    >
-      {channelOptionElements}
-    </Select>
+      options={options}
+    />
   );
 });