feat: support more ActionButton icon expression

packages/components/src/icon/icon.tsx

@@ -43,6 +43,8 @@ export interface IconBaseProps<T> extends IIconShapeOptions {
   onClick?: React.MouseEventHandler<HTMLSpanElement>;
   // 是否是文件资源类型的 icon
   resourceOptions?: IIconResourceOptions;
+  // 动画类型，当前仅支持 `spin`
+  animate?: string;
 }
 
 export type IconProps<T = any> = IconBaseProps<T> & React.HTMLAttributes<HTMLSpanElement>;
@@ -76,6 +78,8 @@ const IconBase = function <T>(props: IconProps<T>, ref: React.Ref<HTMLSpanElemen
     onClick,
     children,
     resourceOptions,
+    animate,
+    style = {},
     ...restProps
   } = props;
   const iconShapeOptions = { rotate, anim, fill };
@@ -102,6 +106,10 @@ const IconBase = function <T>(props: IconProps<T>, ref: React.Ref<HTMLSpanElemen
     iconClx = iconClass;
   }
 
+  if (animate && animate === 'spin') {
+    style['animation'] = 'kt-icon-spin 1.5s steps(30) infinite';
+  }
+
   return (
     <span
       {...restProps}
@@ -116,6 +124,7 @@ const IconBase = function <T>(props: IconProps<T>, ref: React.Ref<HTMLSpanElemen
         'kt-icon-resource': !!resourceOptions,
         expanded: !!resourceOptions && resourceOptions.isOpenedDirectory,
       })}
+      style={style}
     >
       {children}
     </span>

packages/components/src/icon/styles.less

@@ -12,7 +12,7 @@
   }
 
   &-loading {
-    animation: ktIconloadingCircle 1s infinite linear;
+    animation: kt-icon-spin 1s infinite linear;
   }
 
   &-small {
@@ -42,7 +42,7 @@
   }
 }
 
-@keyframes ktIconloadingCircle {
+@keyframes kt-icon-spin {
   100% {
     transform: rotate(360deg);
   }

packages/core-browser/src/components/actions/index.tsx

@@ -20,7 +20,7 @@ import {
   generateMergedCtxMenu,
 } from '../../menu/next';
 import { useInjectable } from '../../react-hooks';
-import { useMenus, useContextMenus } from '../../utils';
+import { useMenus, useContextMenus, transformLabelWithCodicon } from '../../utils';
 
 import placements from './placements';
 import styles from './styles.module.less';
@@ -184,7 +184,7 @@ const InlineActionWidget: React.FC<
 
   const [title, label] = React.useMemo(() => {
     let title = data.tooltip || data.label;
-    let label = data.label;
+    const label = data.label;
     if (data.keybinding) {
       title = `${title} (${data.keybinding})`;
     }
@@ -226,29 +226,6 @@ const InlineActionWidget: React.FC<
     );
   }
 
-  const transformLabel = useCallback((label: string) => {
-    const SEPERATOR = ' ';
-    const ICON_REGX = /\$\(.*?\)/gi;
-    return label.split(SEPERATOR).map((e) => {
-      let icon;
-      if (iconService) {
-        icon = iconService.fromString(e);
-      }
-      if (icon) {
-        return <Icon className={iconService?.fromString(e)} style={{ marginRight: 5 }} key={e} />;
-      } else if (ICON_REGX.test(e)) {
-        const newStr = e.replaceAll(/\$\(.*?\)/gi, (e) => `${SEPERATOR}${e}${SEPERATOR}`);
-        return transformLabel(newStr);
-      } else {
-        return (
-          <span key={e} style={{ marginRight: 5 }}>
-            {e}
-          </span>
-        );
-      }
-    });
-  }, []);
-
   return (
     <Button
       className={clsx(className, styles.btnAction)}
@@ -259,7 +236,7 @@ const InlineActionWidget: React.FC<
       title={title}
       {...restProps}
     >
-      {transformLabel(label)}
+      {transformLabelWithCodicon(label, { margin: '0 3px' }, iconService?.fromString.bind(iconService))}
       {isSubmenuNode && <Icon icon='down' className='kt-button-secondary-more' />}
     </Button>
   );

packages/core-browser/src/utils/label.tsx

@@ -9,19 +9,28 @@ export function transformLabelWithCodicon(
   iconStyles: CSSProperties = {},
   transformer?: (str: string) => string | undefined,
 ) {
-  const ICON_REGX = /^\$\(([a-z.]+\/)?([a-z-]+)(~[a-z]+)?\)$/i;
-  return label.split(SEPERATOR).map((e) => {
-    let icon: string | undefined;
-    if (transformer) {
-      icon = transformer(e);
+  const ICON_REGX = /\$\(([a-z.]+\/)?([a-z-]+)(~[a-z]+)?\)/gi;
+  const ICON_WITH_ANIMATE_REGX = /\$\(([a-z.]+\/)?([a-z-]+)~([a-z]+)\)/gi;
+  return label.split(SEPERATOR).map((e, index) => {
+    if (!transformer) {
+      return e;
     }
-    if (icon && transformer) {
-      return <Icon className={icon} style={iconStyles} key={icon} />;
+    const icon = transformer(e);
+    if (icon) {
+      return <Icon className={icon} style={iconStyles} key={`${index}-${icon}`} />;
     } else if (ICON_REGX.test(e)) {
-      const newStr = e.replaceAll(/^\$\(([a-z.]+\/)?([a-z-]+)(~[a-z]+)?\)$/i, (e) => `${SEPERATOR}${e}${SEPERATOR}`);
+      if (e.includes('~')) {
+        const [, , icon, animate] = ICON_WITH_ANIMATE_REGX.exec(e) || [];
+        if (animate && icon) {
+          return (
+            <Icon className={transformer(`$(${icon})`)} style={iconStyles} animate={animate} key={`${index}-${icon}`} />
+          );
+        }
+      }
+      const newStr = e.replaceAll(ICON_REGX, (e) => `${SEPERATOR}${e}${SEPERATOR}`);
       return transformLabelWithCodicon(newStr, iconStyles, transformer);
     } else {
-      return <span key={e}>{e}</span>;
+      return <span key={`${index}-${e}`}>{e}</span>;
     }
   });
 }

packages/extension/src/browser/extension-management.service.ts

@@ -1,5 +1,6 @@
 import { Autowired, Injectable } from '@opensumi/di';
 import { getLanguageId, ILogger, WithEventBus } from '@opensumi/ide-core-common';
+import { IFileServiceClient } from '@opensumi/ide-file-service';
 
 import {
   AbstractExtensionManagementService,
@@ -32,6 +33,9 @@ export class ExtensionManagementService extends WithEventBus implements Abstract
   @Autowired(SumiContributionsServiceToken)
   private readonly sumiContributesService: SumiContributionsService;
 
+  @Autowired(IFileServiceClient)
+  private fileService: IFileServiceClient;
+
   @Autowired(ILogger)
   private readonly logger: ILogger;
 
@@ -172,6 +176,19 @@ export class ExtensionManagementService extends WithEventBus implements Abstract
     this.contributesService.initialize();
   }
 
+  /**
+   * 删除插件文件
+   */
+  private async removeExtension(extensionPath: string) {
+    try {
+      await this.fileService.delete(extensionPath);
+      return true;
+    } catch (err) {
+      this.logger.error(err);
+      return false;
+    }
+  }
+
   /**
    * 通过 extensionPath 来卸载插件
    */
@@ -181,7 +198,7 @@ export class ExtensionManagementService extends WithEventBus implements Abstract
       oldExtension.dispose();
       this.extInstanceManagementService.deleteExtensionInstanceByPath(extensionPath);
     }
-
+    await this.removeExtension(extensionPath);
     this.eventBus.fire(new ExtensionDidUninstalledEvent());
   }
 }