@opensumi/ide-overlay

--- id: overlay title: 浮层模块 ---

Usage no npm install needed!

<script type="module">
  import opensumiIdeOverlay from 'https://cdn.skypack.dev/@opensumi/ide-overlay';
</script>

README

id: overlay title: 浮层模块

overlay 模块为 IDE 上的浮层模块，例如包含 Dialog（弹窗）、Message（消息）等模块。如果需要在 IDE 通知用户一条消息或者需要一个模态对话框和用户交互时，可以使用该模块。

Message

Message 会在 IDE 右下角弹出一个提示信息。

接口

export interface IMessageService {
  info(message: string | React.ReactNode, buttons?: string[], closable?: boolean): Promise<string | undefined>;
  warning(message: string | React.ReactNode, buttons?: string[], closable?: boolean): Promise<string | undefined>;
  error(message: string | React.ReactNode, buttons?: string[], closable?: boolean): Promise<string | undefined>;
  open<T = string>(message: string | React.ReactNode, type: MessageType, buttons?: string[], closable?: boolean, from?: string): Promise<T | undefined>;
  hide<T = string>(value?: T): void;
}

参数说明

以下参数以 info 为例

message

message 主要指定了消息体，可以是一个普通的文本消息，也可以是一个 React 组件

Example
import { IMessageService } from '@opensumi/ide-overlay';

@Injectable()
export class MessageDemo {
  @Autowired(IMessageService)
  messageService: IMessageService;

  private showMessage() {
    this.messageService.info('复制成功');
  }
}

buttons

buttons 为弹窗右下角按钮，按照从左向右的顺序依次渲染，用户选择后会返回选择的结果

Example
import { IMessageService } from '@opensumi/ide-overlay';

@Injectable()
export class MessageDemo {
  @Autowired(IMessageService)
  messageService: IMessageService;

  private async showMessage() {
    const res = await this.messageService.info('是否要更新插件', ['确定', '取消']);

    if (res === '确定') {
      //...
    }
  }
}

closable

是否显示关闭按钮，默认为 true

常见问题

消息弹出时间是多久

  • info: 15 秒
  • warning: 18 秒
  • error: 20 秒

如何自定义消息组件

如果不想用默认消息图标，可以使用 open 接口自定义消息组件

Example
export const CustomMessage = () => {
  const messageService = useInjectable(IMessageService)
  return (
    <div>
      <div>这是一个自定义消息</div>
      <button onClick={() => messageService.hide('确定')}>确定</button>
    </div>
  )
}

const res = await this.messageService.open(<CustomMessage />, MessageType.EMPTY);

if (res === '确定') {
  //...
}

Dialog

Dialog 接口与消息一致，不过弹窗为模态

Example

import { IDialogService } from '@opensumi/ide-overlay';

@Injectable()
export class MessageDemo {
  @Autowired(IDialogService)
  dialogService: IDialogService;

  private async showMessage() {
    const res = await this.dialogService.info('这是一个模态弹窗');

    if (res === '确定') {
      //...
    }
  }
}