@opensumi/ide-core-browser 2.21.13 → 2.22.0

package/src/preferences/types.ts

@@ -0,0 +1,119 @@
+import { URI, IDisposable, Event } from '@opensumi/ide-core-common';
+
+import { PreferenceProvider } from './preference-provider';
+import { PreferenceScope } from './preference-scope';
+
+export interface PreferenceChange {
+  readonly preferenceName: string;
+  readonly newValue?: any;
+  readonly oldValue?: any;
+  readonly scope: PreferenceScope;
+  affects(resourceUri?: string): boolean;
+}
+
+export interface PreferenceResolveResult<T> {
+  configUri?: URI;
+  value?: T;
+  scope?: PreferenceScope;
+  // 是否存在来自针对语言的设置
+  languageSpecific?: boolean;
+}
+
+export interface PreferenceChanges {
+  [preferenceName: string]: PreferenceChange;
+}
+export const PreferenceService = Symbol('PreferenceService');
+
+export interface PreferenceService extends IDisposable {
+  readonly ready: Promise<void>;
+  /**
+   * 获取一个配置的值
+   * @param preferenceName  配置名称
+   * @param defaultValue 默认值
+   * @param resourceUri 资源路径
+   * @param overrideIdentifier 一般指语言偏好设置
+   */
+  get<T>(preferenceName: string, defaultValue: T, resourceUri?: string, overrideIdentifier?: string): T;
+  get<T>(preferenceName: string, defaultValue?: T, resourceUri?: string, overrideIdentifier?: string): T | undefined;
+
+  /**
+   * 简单通过 `preferenceName` 获取到有效的配置值，防止异常数据导致逻辑问题
+   * @param preferenceName 配置名称
+   * @param defaultValue 默认值
+   */
+  getValid<T>(preferenceName: string, defaultValue: T): T;
+  getValid<T>(preferenceName: string, defaultValue?: T): T | undefined;
+
+  /**
+   * 是否一个配置在指定 scope 存在针对语言的配置
+   * @param preferenceName 配置名称
+   * @param overrideIdentifier 语言
+   * @param resourceUri 资源路径
+   */
+  hasLanguageSpecific(preferenceName: any, overrideIdentifier: string, resourceUri: string): boolean;
+
+  /**
+   * 设置一个配置的值
+   * @param preferenceName 配置名称
+   * @param value 设置值
+   * @param scope 目标scope级别 如 User, Workspace
+   * @param resourceUri 资源路径
+   * @param overrideIdentifier 一般指语言偏好设置
+   */
+  set(
+    preferenceName: string,
+    value: any,
+    scope?: PreferenceScope,
+    resourceUri?: string,
+    overrideIdentifier?: string,
+  ): Promise<void>;
+
+  /**
+   * 设置一个配置值，优先设置最高 Scope 级别的配置
+   * 如，但设置了工作区配置的情况下，调用该方法将会优先更新工作区配置
+   * @param preferenceName 配置名称
+   * @param value 配置值
+   * @param defaultScope 默认作用域，当查找不到配置值情况下使用该作用域设置配置值
+   */
+  update(preferenceName: string, value: any, defaultScope?: PreferenceScope): Promise<void>;
+
+  onPreferenceChanged: Event<PreferenceChange>;
+
+  onPreferencesChanged: Event<PreferenceChanges>;
+
+  onLanguagePreferencesChanged: Event<{ overrideIdentifier: string; changes: PreferenceChanges }>;
+
+  inspect<T>(
+    preferenceName: string,
+    resourceUri?: string,
+    language?: string,
+  ):
+    | {
+        preferenceName: string;
+        defaultValue: T | undefined;
+        globalValue: T | undefined; // User Preference
+        workspaceValue: T | undefined; // Workspace Preference
+        workspaceFolderValue: T | undefined; // Folder Preference
+      }
+    | undefined;
+
+  getProvider(scope: PreferenceScope): PreferenceProvider | undefined;
+
+  resolve<T>(
+    preferenceName: string,
+    defaultValue?: T,
+    resourceUri?: string,
+    language?: string,
+    untilScope?: PreferenceScope,
+  ): PreferenceResolveResult<T>;
+
+  /**
+   * 都走 onPreferenceChanged 再用if判断性能太差了
+   * TODO: 将只监听一个偏好的使用这个方法
+   * @param preferenceName
+   */
+  onSpecificPreferenceChange(preferenceName, listener: (change: PreferenceChange) => void): IDisposable;
+}
+
+export const PreferenceProviderProvider = Symbol('PreferenceProviderProvider');
+export type PreferenceProviderProvider = (scope: PreferenceScope, uri?: URI) => PreferenceProvider;

package/src/progress/index.ts

@@ -0,0 +1,58 @@
+import {
+  IDisposable,
+  IProgressOptions,
+  IProgressNotificationOptions,
+  IProgressWindowOptions,
+  IProgress,
+  IProgressStep,
+  IProgressCompositeOptions,
+} from '@opensumi/ide-core-common';
+
+export interface IProgressModel {
+  show: boolean;
+  fade: boolean;
+  worked: number;
+  total: number | undefined;
+}
+
+export const IProgressService = Symbol('IProgressService');
+/**
+ * A progress service that can be used to report progress to various locations of the UI.
+ */
+export interface IProgressService {
+  registerProgressIndicator(location: string, indicator?: IProgressIndicator): IDisposable;
+  getIndicator(location: string): IProgressIndicator | undefined;
+  withProgress<R>(
+    options: IProgressOptions | IProgressNotificationOptions | IProgressWindowOptions | IProgressCompositeOptions,
+    task: (progress: IProgress<IProgressStep>) => Promise<R>,
+    onDidCancel?: (choice?: number) => void,
+  ): Promise<R>;
+}
+
+export interface IProgressIndicator {
+  progressModel: IProgressModel;
+  /**
+   * Show progress customized with the provided flags.
+   */
+  show(infinite: true, delay?: number): IProgressRunner;
+  // eslint-disable-next-line @typescript-eslint/unified-signatures
+  show(total: number, delay?: number): IProgressRunner;
+
+  /**
+   * Indicate progress for the duration of the provided promise. Progress will stop in
+   * any case of promise completion, error or cancellation.
+   */
+  showWhile(promise: Promise<unknown>, delay?: number): Promise<void>;
+}
+
+export interface IProgressRunner {
+  total(value: number): void;
+  worked(value: number): void;
+  done(): void;
+}
+
+export const emptyProgressRunner: IProgressRunner = Object.freeze({
+  total() {},
+  worked() {},
+  done() {},
+});

package/src/progress/progress-bar.tsx

@@ -0,0 +1,34 @@
+import clsx from 'classnames';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
+import styles from './progress.module.less';
+
+import { IProgressModel } from '.';
+
+export const ProgressBar: React.FC<{ progressModel: IProgressModel; className?: string }> = observer(
+  ({ progressModel, className }) => {
+    const { worked, total, show, fade } = progressModel;
+    return (
+      <div className={clsx(className, styles.progressBar, { [styles.hide]: !show }, { [styles.fade]: fade })}>
+        <div
+          className={clsx(styles.progress, { [styles.infinite]: !total })}
+          style={total ? { width: (worked / total || 0.02) * 100 + '%' } : { width: '2%' }}
+        ></div>
+      </div>
+    );
+  },
+);
+
+export const Progress: React.FC<{
+  loading: boolean;
+}> = React.memo(({ loading }) => {
+  if (!loading) {
+    return null;
+  }
+  return (
+    <div className={styles.progressBar}>
+      <div className={clsx(styles.progress, styles.infinite)} style={{ width: '2%' }} />
+    </div>
+  );
+});

package/src/progress/progress-indicator.ts

@@ -0,0 +1,90 @@
+import { observable, action } from 'mobx';
+
+import { Injectable } from '@opensumi/di';
+
+import { IProgressIndicator, IProgressRunner, IProgressModel } from '.';
+
+@Injectable({ multiple: true })
+export class ProgressIndicator implements IProgressIndicator {
+  @observable
+  public progressModel: IProgressModel = {
+    show: false,
+    fade: false,
+    worked: 0,
+    total: undefined,
+  };
+
+  show(totalOrInfinite: true | number, delay?: number | undefined): IProgressRunner {
+    if (totalOrInfinite !== true) {
+      this.progressModel.total = totalOrInfinite;
+    }
+    this.showOnceScheduler(delay);
+    return {
+      total: (value) => {
+        this.progressModel.worked = 0;
+        this.progressModel.total = value;
+      },
+      worked: (value) => {
+        if (this.progressModel.total) {
+          const worked = Math.max(1, Number(value));
+          const fullWorked = Math.min(worked + this.progressModel.worked, this.progressModel.total);
+          this.progressModel.worked = fullWorked;
+        }
+        this.progressModel.show = true;
+      },
+      done: () => {
+        this.doDone(true);
+      },
+    };
+  }
+
+  async showWhile(promise: Promise<unknown>, delay?: number | undefined): Promise<void> {
+    this.progressModel.total = undefined;
+    this.showOnceScheduler(delay);
+    await promise;
+    this.doDone(false);
+  }
+
+  private scheduled: NodeJS.Timer;
+  private showOnceScheduler(delay?: number) {
+    if (typeof delay === 'number') {
+      clearTimeout(this.scheduled);
+      this.scheduled = global.setTimeout(this.on, delay);
+    } else {
+      this.on();
+    }
+  }
+
+  private doDone(delayed?: boolean) {
+    this.progressModel.fade = true;
+    if (this.progressModel.total) {
+      // 进度100%随后隐藏
+      this.progressModel.worked = this.progressModel.total;
+      if (delayed) {
+        global.setTimeout(this.off, 800);
+      } else {
+        this.off();
+      }
+    } else {
+      // 通过css淡出隐藏
+      if (delayed) {
+        global.setTimeout(this.off, 800);
+      } else {
+        this.off();
+      }
+    }
+  }
+
+  @action.bound
+  private off() {
+    this.progressModel.total = undefined;
+    this.progressModel.worked = 0;
+    this.progressModel.show = false;
+    this.progressModel.fade = false;
+  }
+
+  @action.bound
+  private on() {
+    this.progressModel.show = true;
+  }
+}

package/src/progress/progress.module.less

@@ -0,0 +1,46 @@
+.progressBar {
+  width: 100%;
+  height: 2px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  z-index: 999;
+}
+:global(.kt-notification) {
+  .progressBar {
+    bottom: 0;
+    top: auto;
+  }
+}
+.hide {
+  display: none;
+}
+.fade {
+  opacity: 0;
+  transition: opacity 800ms ease-out;
+}
+.progress {
+  height: 2px;
+  opacity: 1;
+  transition: width 100ms linear;
+  background-color: var(--progressBar-background);
+  &.infinite {
+    animation-name: progress;
+    animation-duration: 4s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    transform: translate3d(0px, 0px, 0px);
+  }
+}
+@keyframes progress {
+  from {
+    transform: translateX(0%) scaleX(1);
+  }
+  50% {
+    transform: translateX(2500%) scaleX(3);
+  }
+  to {
+    transform: translateX(4950%) scaleX(1);
+  }
+}