-
Notifications
You must be signed in to change notification settings - Fork 2.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
#2153 implement 'showInputBox' window API function
Signed-off-by: Yevhen Vydolob <yvydolob@redhat.com>
- Loading branch information
Showing
9 changed files
with
278 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
163 changes: 163 additions & 0 deletions
163
packages/monaco/src/browser/monaco-quick-input-service.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,163 @@ | ||
| /* | ||
| * Copyright (C) 2018 Red Hat, Inc. and others. | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 | ||
| */ | ||
| import { MonacoQuickOpenService } from "./monaco-quick-open-service"; | ||
| import { injectable, inject } from "inversify"; | ||
| import { ILogger } from "@theia/core/lib/common/logger"; | ||
| import { QuickOpenItem, QuickOpenItemOptions, QuickOpenMode } from "@theia/core/lib/browser/quick-open"; | ||
|
|
||
| export interface QuickInputOptions { | ||
|
|
||
| /** | ||
| * The prefill value. | ||
| */ | ||
| value?: string; | ||
|
|
||
| /** | ||
| * The text to display under the input box. | ||
| */ | ||
| prompt?: string; | ||
|
|
||
| /** | ||
| * The place holder in the input box to guide the user what to type. | ||
| */ | ||
| placeHolder?: string; | ||
|
|
||
| /** | ||
| * Set to `true` to show a password prompt that will not show the typed value. | ||
| */ | ||
| password?: boolean; | ||
|
|
||
| /** | ||
| * Set to `true` to keep the input box open when focus moves to another part of the editor or to another window. | ||
| */ | ||
| ignoreFocusOut?: boolean; | ||
|
|
||
| /** | ||
| * An optional function that will be called to validate input and to give a hint | ||
| * to the user. | ||
| * | ||
| * @param value The current value of the input box. | ||
| * @return Return `undefined`, or the empty string when 'value' is valid. | ||
| */ | ||
| validateInput?(value: string): string | undefined | PromiseLike<string | undefined>; | ||
| } | ||
|
|
||
| @injectable() | ||
| export class MonacoQuickInputService extends MonacoQuickOpenService { | ||
| private static promptMessage = "Press 'Enter' to confirm your input or 'Escape' to cancel"; | ||
| private options: QuickInputOptions; | ||
| constructor(@inject(ILogger) logger: ILogger) { | ||
| super(logger); | ||
|
|
||
| } | ||
|
|
||
| input(options: QuickInputOptions): Promise<string | undefined> { | ||
| this.options = options; | ||
| this.options.prompt = this.createPrompt(options.prompt); | ||
|
|
||
| const inputItem = new InputOpenItemOptions(this.options.prompt); | ||
| this.open({ | ||
| onType: (s, a) => this.validateInput(s, a, inputItem) | ||
| }, { | ||
| prefix: options.value, | ||
| placeholder: options.placeHolder, | ||
| onClose: () => inputItem.resolve(undefined) | ||
| }); | ||
| if (options.password) { | ||
| this.widget.setPassword(true); | ||
| } | ||
|
|
||
| return new Promise(r => { | ||
| inputItem.resolve = r; | ||
| }); | ||
| } | ||
|
|
||
| private createPrompt(prompt?: string): string { | ||
| if (prompt) { | ||
| return `${prompt} (${MonacoQuickInputService.promptMessage})`; | ||
| } else { | ||
| return MonacoQuickInputService.promptMessage; | ||
| } | ||
| } | ||
|
|
||
| private validateInput(str: string, acceptor: (items: QuickOpenItem[]) => void, inputItem: InputOpenItemOptions): void { | ||
| inputItem.currentText = str; | ||
| acceptor([new QuickOpenItem(inputItem)]); | ||
| if (this.options.validateInput) { | ||
| const hint = this.options.validateInput(str); | ||
| if (hint) { | ||
| if (typeof hint !== 'string') { | ||
| hint.then(p => { | ||
| if (p) { | ||
| this.setValidationState(inputItem, p, false); | ||
| } else { | ||
| this.setValidationState(inputItem, this.options.prompt!, true); | ||
| } | ||
| }); | ||
| } else { | ||
| this.setValidationState(inputItem, hint, false); | ||
| } | ||
| } else { | ||
| this.setValidationState(inputItem, this.options.prompt!, true); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| private setValidationState(inputItem: InputOpenItemOptions, label: string, isValid: boolean): void { | ||
| this.widget.clearInputDecoration(); | ||
| inputItem.isValid = isValid; | ||
| inputItem.label = label; | ||
| this.widget.refresh(); | ||
| if (isValid) { | ||
| this.widget.clearInputDecoration(); | ||
| } else { | ||
| this.widget.showInputDecoration(monaco.Severity.Error); | ||
| } | ||
| } | ||
|
|
||
| protected get widget(): monaco.quickOpen.QuickOpenWidget { | ||
| if (this._widget) { | ||
| return this._widget; | ||
| } | ||
| this._widget = new monaco.quickOpen.QuickOpenWidget(this.container, { | ||
| onOk: () => { | ||
| this.previousActiveElement = undefined; | ||
| this.onClose(false); | ||
| }, | ||
| onCancel: () => { | ||
| if (this.previousActiveElement instanceof HTMLElement) { | ||
| this.previousActiveElement.focus(); | ||
| } | ||
| this.previousActiveElement = undefined; | ||
| this.onClose(true); | ||
| }, | ||
| onType: lookFor => this.onType(lookFor || ''), | ||
| onFocusLost: () => this.options.ignoreFocusOut !== undefined ? this.options.ignoreFocusOut : false | ||
| }, {}); | ||
| this.attachQuickOpenStyler(); | ||
| this._widget.create(); | ||
| return this._widget; | ||
| } | ||
| } | ||
|
|
||
| class InputOpenItemOptions implements QuickOpenItemOptions { | ||
| currentText: string; | ||
| isValid = true; | ||
| resolve: (value?: string | PromiseLike<string> | undefined) => void; | ||
|
|
||
| constructor( | ||
| public label?: string) { | ||
| } | ||
|
|
||
| run(mode: QuickOpenMode): boolean { | ||
| if (this.isValid && mode === QuickOpenMode.OPEN) { | ||
| this.resolve(this.currentText); | ||
| return true; | ||
| } | ||
| return false; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.