feat: support QuickPickItem.iconPath

Author: bk1012

packages/core-browser/src/quick-open/index.ts

@@ -125,6 +125,7 @@ export interface QuickOpenItemOptions {
    * 图标
    */
   iconClass?: string;
+  iconPath?: URI | { light: URI; dark: URI } | ThemeIcon;
   /**
    * 对应绑定的快捷键
    */
@@ -198,6 +199,9 @@ export class QuickOpenItem {
   getIconClass(): string | undefined {
     return this.options.iconClass;
   }
+  getIconPath(): URI | { light: URI; dark: URI } | ThemeIcon | undefined {
+    return this.options.iconPath;
+  }
   getKeybinding(): Keybinding | undefined {
     return this.options.keybinding;
   }
@@ -401,6 +405,7 @@ export interface QuickPickItem<T> {
   value: T;
   description?: string;
   detail?: string;
+  iconPath?: URI | { light: URI; dark: URI } | ThemeIcon;
   iconClass?: string;
   buttons?: QuickInputButton[];
 }

packages/extension/src/hosted/api/vscode/ext.host.quickopen.ts

@@ -95,6 +95,7 @@ export class ExtHostQuickOpen implements IExtHostQuickOpen {
           pickItems.push({
             label: item.label,
             groupLabel,
+            iconPath: item.iconPath as QuickPickItem<number>['iconPath'],
             description: item.description,
             detail: item.detail,
             value: index, // handle

packages/quick-open/src/browser/quick-open-item.service.ts

@@ -1,7 +1,8 @@
 import { Autowired, Injectable } from '@opensumi/di';
+import { getExternalIcon } from '@opensumi/ide-core-browser';
 import { IQuickPickItemButtonEvent, QuickInputButton } from '@opensumi/ide-core-browser/lib/quick-open';
 import { StaticResourceService } from '@opensumi/ide-core-browser/lib/static-resource';
-import { Emitter, Event } from '@opensumi/ide-core-common';
+import { Emitter, Event, ThemeIcon, URI } from '@opensumi/ide-core-common';
 import { IIconService, IThemeService, IconType } from '@opensumi/ide-theme';
 
 import { iconPath2URI } from '../common/icon';
@@ -35,7 +36,18 @@ export class QuickOpenItemService {
       return [];
     }
     return buttons.map((btn, i) => {
-      const iconUri = iconPath2URI(btn.iconPath, this.themeService.getCurrentThemeSync().type);
+      if (ThemeIcon.isThemeIcon(btn.iconPath)) {
+        return {
+          ...btn,
+          iconClass: getExternalIcon(btn.iconPath.id),
+          handle: i,
+        };
+      }
+
+      const iconUri = iconPath2URI(
+        btn.iconPath as URI | { light: URI; dark: URI },
+        this.themeService.getCurrentThemeSync().type,
+      );
       const iconPath = iconUri && this.staticResourceService.resolveStaticResource(iconUri).toString();
       const iconClass = iconPath && this.iconService.fromIcon('', iconPath, IconType.Background);
       return {
@@ -45,4 +57,26 @@ export class QuickOpenItemService {
       };
     });
   }
+
+  getIconClass(data: { iconPath?: URI | { light: URI; dark: URI } | ThemeIcon; iconClass?: string }) {
+    const { iconClass, iconPath } = data;
+
+    if (iconClass) {
+      return iconClass;
+    }
+
+    if (!iconPath) {
+      return undefined;
+    }
+
+    if (ThemeIcon.isThemeIcon(iconPath)) {
+      return getExternalIcon(iconPath.id);
+    }
+
+    const iconUri = iconPath2URI(iconPath, this.themeService.getCurrentThemeSync().type);
+    const iconPathString = iconUri && this.staticResourceService.resolveStaticResource(iconUri).toString();
+    const iconCls = iconPath && this.iconService.fromIcon('', iconPathString, IconType.Background);
+
+    return iconCls;
+  }
 }

packages/quick-open/src/browser/quick-open.view.tsx

@@ -186,6 +186,17 @@ const QuickOpenItemView: React.FC<IQuickOpenItemProps> = observer(({ data, index
 
   const showBorder = React.useMemo(() => data.showBorder(), [data]);
 
+  const iconPath = React.useMemo(() => data.getIconPath(), [data]);
+
+  const finalIconClass = React.useMemo(
+    () =>
+      quickOpenItemService.getIconClass({
+        iconPath,
+        iconClass,
+      }),
+    [iconClass, iconPath],
+  );
+
   const buttons = React.useMemo(() => quickOpenItemService.getButtons(data.getButtons()), [data]);
 
   const [labelHighlights, descriptionHighlights, detailHighlights] = React.useMemo(() => data.getHighlights(), [data]);
@@ -257,7 +268,7 @@ const QuickOpenItemView: React.FC<IQuickOpenItemProps> = observer(({ data, index
       {/* tabIndex is needed here, pls see https://stackoverflow.com/questions/42764494/blur-event-relatedtarget-returns-null */}
       <div tabIndex={0} className={styles.item_label_container} onMouseDown={runQuickOpenItem}>
         <div className={styles.item_label}>
-          {iconClass && <span className={cls(styles.item_icon, iconClass)}></span>}
+          {finalIconClass && <span className={cls(styles.item_icon, finalIconClass)}></span>}
           <HighlightLabel
             className={styles.item_label_name}
             labelClassName={styles.label_icon_container}

packages/quick-open/src/browser/quick-pick.service.ts

@@ -89,6 +89,7 @@ export class QuickPickServiceImpl implements QuickPickService {
     const groupLabel = typeof element === 'string' ? undefined : element.groupLabel;
     const showBorder = typeof element === 'string' ? undefined : element.showBorder;
     const buttons = typeof element === 'string' ? undefined : element.buttons;
+    const iconPath = typeof element === 'string' ? undefined : element.iconPath;
     const [icon, text] = getIconClass(label);
 
     if (icon) {
@@ -103,6 +104,7 @@ export class QuickPickServiceImpl implements QuickPickService {
       groupLabel,
       showBorder,
       buttons,
+      iconPath,
       run: (mode) => {
         if (mode !== Mode.OPEN) {
           return false;

packages/quick-open/src/common/icon.ts

@@ -1,8 +1,10 @@
 import { URI } from '@opensumi/ide-core-common';
 
-export function iconPath2URI(iconPath: any, themeType?: string): URI | undefined {
+export function iconPath2URI(iconPath: URI | { light: URI; dark: URI }, themeType?: string): URI | undefined {
   if (URI.isUri(iconPath)) {
-    return iconPath;
+    const tmpIconPath = iconPath as URI;
+
+    return Object.prototype.hasOwnProperty.call(tmpIconPath, 'codeUri') ? tmpIconPath : new URI(tmpIconPath.toString());
   }
 
   if ((iconPath.dark || iconPath.light) && themeType) {

packages/types/vscode/typings/vscode.quickpick.d.ts

@@ -31,6 +31,11 @@ declare module 'vscode' {
      */
     kind?: QuickPickItemKind;
 
+    /**
+     * The icon path or {@link ThemeIcon} for the QuickPickItem.
+     */
+    iconPath?: Uri | { light: Uri; dark: Uri } | ThemeIcon;
+
     /**
      * A human readable string which is rendered less prominent.
      */