feat: statusBarService support extends addElement (#4503)

* feat: statusBarService support extends addElement

* feat: statusbar text supports React.ReactNode

Author: wangxiaojuan

packages/core-browser/src/services/status-bar-service.ts

@@ -51,7 +51,7 @@ export interface StatusBarEntry {
    * 可以通过 text 设置图标
    * $(iconClassName) :text
    */
-  text?: string;
+  text?: string | React.ReactNode;
   /**
    * 当前菜单显示名称
    * 标识当前状态栏组件 contextmenu 显示的名称，如果没有使用 text 代替

packages/status-bar/src/browser/status-bar-item.view.tsx

@@ -137,22 +137,23 @@ export const StatusBarItem = memo((props: StatusBarEntry) => {
       >
         <div className={styles.popover_item}>
           {iconClass && <span key={-1} className={cls(styles.icon, iconClass)}></span>}
-          {text &&
-            transformLabelWithCodicon(
-              text,
-              {},
-              iconService.fromString.bind(iconService),
-              (text: string, index: number) => (
-                <span
-                  key={`${text}-${index}`}
-                  style={{ height: '22px', lineHeight: '22px' }}
-                  aria-label={ariaLabel}
-                  role={role}
-                >
-                  {replaceLocalizePlaceholder(text)}
-                </span>
-              ),
-            )}
+          {typeof text === 'string'
+            ? transformLabelWithCodicon(
+                text,
+                {},
+                iconService.fromString.bind(iconService),
+                (text: string, index: number) => (
+                  <span
+                    key={`${text}-${index}`}
+                    style={{ height: '22px', lineHeight: '22px' }}
+                    aria-label={ariaLabel}
+                    role={role}
+                  >
+                    {replaceLocalizePlaceholder(text)}
+                  </span>
+                ),
+              )
+            : text}
         </div>
       </Popover>
     </div>

packages/status-bar/src/browser/status-bar.service.ts

@@ -27,7 +27,7 @@ export class StatusBarService extends Disposable implements IStatusBarService {
   private background: string | undefined;
   private foreground: string | undefined;
 
-  private entriesObservable = observableValue<Map<string, StatusBarEntry>>(this, new Map());
+  entriesObservable = observableValue<Map<string, StatusBarEntry>>(this, new Map());
 
   @Autowired(CommandService)
   private commandService: CommandService;
@@ -101,14 +101,14 @@ export class StatusBarService extends Disposable implements IStatusBarService {
    * @param id 状态栏 id
    * @returns
    */
-  private getEntriesById(id: string) {
+  getEntriesById(id: string) {
     return this.entriesArray.get().filter((entry) => entry.id === id);
   }
 
   /**
    * 从 storage 中读取 state
    */
-  private getStorageState(id: string) {
+  getStorageState(id: string) {
     return this.layoutState.getState<{ [id: string]: StatusBarState }>(LAYOUT_STATE.STATUSBAR, {})[id];
   }