Quick Input Sample

quickinput-sample/.gitignore

@@ -0,0 +1,3 @@
+out
+node_modules
+*.vsix

quickinput-sample/.vscode/launch.json

@@ -0,0 +1,22 @@
+// A launch configuration that compiles the extension and then opens it inside a new window
+// Use IntelliSense to learn about possible attributes.
+// Hover to view descriptions of existing attributes.
+// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+{
+	"version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Extension",
+            "type": "extensionHost",
+            "request": "launch",
+            "runtimeExecutable": "${execPath}",
+            "args": [
+                "--extensionDevelopmentPath=${workspaceFolder}"
+            ],
+            "outFiles": [
+                "${workspaceFolder}/out/**/*.js"
+            ],
+            "preLaunchTask": "npm: watch"
+        }
+    ]
+}

quickinput-sample/.vscode/settings.json

@@ -0,0 +1,11 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+    "files.exclude": {
+        "out": false // set this to true to hide the "out" folder with the compiled JS files
+    },
+    "search.exclude": {
+        "out": true // set this to false to include "out" folder in search results
+    },
+    // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
+    "typescript.tsc.autoDetect": "off"
+}

quickinput-sample/.vscode/tasks.json

@@ -0,0 +1,20 @@
+// See https://go.microsoft.com/fwlink/?LinkId=733558
+// for the documentation about the tasks.json format
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "type": "npm",
+            "script": "watch",
+            "problemMatcher": "$tsc-watch",
+            "isBackground": true,
+            "presentation": {
+                "reveal": "never"
+            },
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            }
+        }
+    ]
+}

quickinput-sample/.vscodeignore

@@ -0,0 +1,6 @@
+.vscode/**
+out/**/*.map
+src/**
+.gitignore
+tsconfig.json
+tslint.json

quickinput-sample/README.md

@@ -0,0 +1,3 @@
+# quickinput-sample README
+
+This is the README for your extension "quickinput-sample".

quickinput-sample/package.json

@@ -0,0 +1,39 @@
+{
+    "name": "quickinput-sample",
+    "displayName": "QuickInput Sample",
+    "description": "Samples for VS Code's QuickInput API",
+    "version": "0.0.1",
+    "publisher": "ms-vscode",
+    "engines": {
+        "vscode": "^1.24.0"
+    },
+    "enableProposedApi": true,
+    "categories": [
+        "Other"
+    ],
+    "activationEvents": [
+        "onCommand:samples.quickInput"
+    ],
+    "main": "./out/extension",
+    "contributes": {
+        "commands": [
+            {
+                "command": "samples.quickInput",
+                "title": "Quick Input Samples"
+            }
+        ]
+    },
+    "scripts": {
+        "vscode:prepublish": "npm run compile",
+        "compile": "tsc -p ./",
+        "watch": "tsc -watch -p ./",
+        "postinstall": "node ./node_modules/vscode/bin/install"
+    },
+    "devDependencies": {
+        "typescript": "^2.6.1",
+        "vscode": "^1.1.6",
+        "tslint": "^5.8.0",
+        "@types/node": "^7.0.43",
+        "@types/mocha": "^2.2.42"
+    }
+}

quickinput-sample/resources/dark/add.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><title>Layer 1</title><rect height="11" width="3" y="3" x="7" fill="#C5C5C5"/><rect height="3" width="11" y="7" x="3" fill="#C5C5C5"/></svg>

quickinput-sample/resources/dark/back.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#2d2d30;}.icon-canvas-transparent{opacity:0;}.icon-vs-bg{fill:#c5c5c5;}</style></defs><title>CollapseChevronLeft_md_16x</title><path class="icon-canvas-transparent" d="M16,0V16H0V0Z"/><path class="icon-vs-out" d="M7.725,8l4.97,4.97L10.22,15.444,2.775,8,10.22.556,12.694,3.03Z" style="display: none;"/><path class="icon-vs-bg" d="M6.311,8l4.97,4.97L10.22,14.03,4.189,8l6.03-6.03L11.28,3.03Z"/></svg>

quickinput-sample/resources/dark/forward.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#2d2d30;}.icon-canvas-transparent{opacity:0;}.icon-vs-bg{fill:#c5c5c5;}</style></defs><title>ExpandChevronRight_md_16x</title><path class="icon-canvas-transparent" d="M16,0V16H0V0Z"/><path class="icon-vs-out" d="M13.225,8,5.78,15.444,3.306,12.97,8.275,8,3.306,3.03,5.78.556Z" style="display: none;"/><path class="icon-vs-bg" d="M11.811,8,5.78,14.03,4.72,12.97,9.689,8,4.72,3.03,5.78,1.97Z"/></svg>

quickinput-sample/resources/light/add.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><title>Layer 1</title><rect height="11" width="3" y="3" x="7" fill="#424242"/><rect height="3" width="11" y="7" x="3" fill="#424242"/></svg>

quickinput-sample/resources/light/back.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#f6f6f6;}.icon-canvas-transparent{opacity:0;}.icon-vs-bg{fill:#424242;}</style></defs><title>CollapseChevronLeft_md_16x</title><path class="icon-canvas-transparent" d="M16,0V16H0V0Z"/><path class="icon-vs-out" d="M7.725,8l4.97,4.97L10.22,15.444,2.775,8,10.22.556,12.694,3.03Z" style="display: none;"/><path class="icon-vs-bg" d="M6.311,8l4.97,4.97L10.22,14.03,4.189,8l6.03-6.03L11.28,3.03Z"/></svg>

quickinput-sample/resources/light/forward.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#f6f6f6;}.icon-canvas-transparent{opacity:0;}.icon-vs-bg{fill:#424242;}</style></defs><title>ExpandChevronRight_md_16x</title><path class="icon-canvas-transparent" d="M16,0V16H0V0Z"/><path class="icon-vs-out" d="M13.225,8,5.78,15.444,3.306,12.97,8.275,8,3.306,3.03,5.78.556Z" style="display: none;"/><path class="icon-vs-bg" d="M11.811,8,5.78,14.03,4.72,12.97,9.689,8,4.72,3.03,5.78,1.97Z"/></svg>

quickinput-sample/src/basicInput.ts

@@ -0,0 +1,16 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { window } from 'vscode';
+
+export async function showInputBox() {
+	const result = await window.showInputBox({
+		value: 'abcdef',
+		valueSelection: [2, 4],
+		placeHolder: 'For example: fedcba. But not: 123',
+		validateInput: text => Promise.resolve(text === '123' ? 'Not 123!' : null)
+	});
+	window.showInformationMessage(`Got: ${result}`);
+}

quickinput-sample/src/extension.ts

@@ -0,0 +1,31 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+'use strict';
+
+import { window, commands, ExtensionContext } from 'vscode';
+import { showInputBox } from './basicInput';
+import { createQuickPick } from './generalInput';
+import { multiStepInput } from './multiStepInput';
+
+export function activate(context: ExtensionContext) {
+	context.subscriptions.push(commands.registerCommand('samples.quickInput', async () => {
+		const options: { [key: string]: (context: ExtensionContext) => Promise<void> } = {
+			showInputBox,
+			createQuickPick,
+			multiStepInput,
+		};
+		const quickPick = window.createQuickPick();
+		quickPick.items = Object.keys(options).map(label => ({ label }));
+		quickPick.onDidChangeSelection(selection => {
+			if (selection[0]) {
+				options[selection[0].label](context)
+					.catch(console.error);
+			}
+		});
+		quickPick.onDidHide(() => quickPick.dispose());
+		quickPick.show();
+	}));
+}

quickinput-sample/src/generalInput.ts

@@ -0,0 +1,29 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { window, ExtensionContext } from 'vscode';
+
+export async function createQuickPick(context: ExtensionContext) {
+	const quickPick = window.createQuickPick();
+	quickPick.onDidTriggerButton(button => {
+		window.showInformationMessage(`Button triggered`);
+	});
+	quickPick.items = ['eins', 'zwei', 'drei'].map(label => ({ label }));
+	quickPick.buttons = [
+		{
+			iconPath: {
+				dark: context.asAbsolutePath('resources/dark/back.svg'),
+				light: context.asAbsolutePath('resources/light/back.svg')
+			}
+		},
+		{
+			iconPath: {
+				dark: context.asAbsolutePath('resources/dark/forward.svg'),
+				light: context.asAbsolutePath('resources/light/forward.svg')
+			}
+		},
+	];
+	quickPick.show();
+}

quickinput-sample/src/multiStepInput.ts

@@ -0,0 +1,292 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { QuickPickItem, window, Disposable, CancellationToken, QuickInputButton, QuickInput, ExtensionContext } from 'vscode';
+
+export async function multiStepInput(context: ExtensionContext) {
+
+	class MyButton implements QuickInputButton {
+		constructor(public iconPath: { light: string; dark: string; }, public tooltip: string) { }
+	}
+
+	const createResourceGroupButton = new MyButton({
+		dark: context.asAbsolutePath('resources/dark/add.svg'),
+		light: context.asAbsolutePath('resources/light/add.svg')
+	}, 'Create Resource Group');
+
+	const resourceGroups: QuickPickItem[] = ['vscode-data-function', 'vscode-website-microservices', 'vscode-website-monitor', 'vscode-website-preview', 'vscode-website-prod']
+		.map(label => ({ label }));
+
+
+	interface State {
+		title: string;
+		step: number;
+		totalSteps: number;
+		resourceGroup: QuickPickItem | string;
+		name: string;
+		runtime: QuickPickItem;
+	}
+
+	async function collectInputs() {
+		const state = {} as Partial<State>;
+		await MultiStepInput.run(input => pickResourceGroup(input, state));
+		return state as State;
+	}
+
+	const title = 'Create Website';
+
+	async function pickResourceGroup(input: MultiStepInput, state: Partial<State>) {
+		const pick = await input.showQuickPick({
+			title,
+			step: 1,
+			totalSteps: 3,
+			placeholder: 'Pick a resource group',
+			items: resourceGroups,
+			buttons: [createResourceGroupButton],
+			shouldResume: shouldResume
+		});
+		if (pick instanceof MyButton) {
+			return (input: MultiStepInput) => inputResourceGroupName(input, state);
+		}
+		state.resourceGroup = pick;
+		return (input: MultiStepInput) => inputName(input, state);
+	}
+
+	async function inputResourceGroupName(input: MultiStepInput, state: Partial<State>) {
+		state.resourceGroup = await input.showInputBox({
+			title,
+			step: 2,
+			totalSteps: 4,
+			value: typeof state.resourceGroup === 'string' ? state.resourceGroup : '',
+			prompt: 'Choose a unique name for the resource group',
+			validate: validateNameIsUnique,
+			shouldResume: shouldResume
+		});
+		return (input: MultiStepInput) => inputName(input, state);
+	}
+
+	async function inputName(input: MultiStepInput, state: Partial<State>) {
+		const additionalSteps = typeof state.resourceGroup === 'string' ? 1 : 0;
+		state.name = await input.showInputBox({
+			title,
+			step: 2 + additionalSteps,
+			totalSteps: 3 + additionalSteps,
+			value: state.name || '',
+			prompt: 'Choose a unique name for the website',
+			validate: validateNameIsUnique,
+			shouldResume: shouldResume
+		});
+		return (input: MultiStepInput) => pickRuntime(input, state);
+	}
+
+	async function pickRuntime(input: MultiStepInput, state: Partial<State>) {
+		const additionalSteps = typeof state.resourceGroup === 'string' ? 1 : 0;
+		const runtimes = await getAvailableRuntimes(state.resourceGroup!, undefined /* TODO: token */);
+		state.runtime = await input.showQuickPick({
+			title,
+			step: 3 + additionalSteps,
+			totalSteps: 3 + additionalSteps,
+			placeholder: 'Pick a runtime',
+			items: runtimes,
+			shouldResume: shouldResume
+		});
+	}
+
+	function shouldResume() {
+		// Could show a notification with the option to resume.
+		return new Promise<boolean>((resolve, reject) => {
+
+		});
+	}
+
+	class InputFlowAction {
+		private constructor() { }
+		static back = new InputFlowAction();
+		static cancel = new InputFlowAction();
+		static resume = new InputFlowAction();
+	}
+
+	type InputStep = (input: MultiStepInput) => Thenable<InputStep | void>;
+
+	interface QuickPickParameters {
+		title: string;
+		step: number;
+		totalSteps: number;
+		items: QuickPickItem[];
+		placeholder: string;
+		buttons?: QuickInputButton[];
+		shouldResume: () => Thenable<boolean>;
+	}
+
+	interface InputBoxParameters {
+		title: string;
+		step: number;
+		totalSteps: number;
+		value: string;
+		prompt: string;
+		validate: (value: string) => Promise<string | undefined>;
+		buttons?: QuickInputButton[];
+		shouldResume: () => Thenable<boolean>;
+	}
+
+	class MultiStepInput {
+
+		static async run<T>(start: InputStep) {
+			const input = new MultiStepInput();
+			return input.stepThrough(start);
+		}
+
+		private current?: QuickInput;
+		private steps: InputStep[] = [];
+
+		private async stepThrough<T>(start: InputStep) {
+			let step: InputStep | void = start;
+			while (step) {
+				this.steps.push(step);
+				if (this.current) {
+					this.current.enabled = false;
+					this.current.busy = true;
+				}
+				try {
+					step = await step(this);
+				} catch (err) {
+					if (err === InputFlowAction.back) {
+						this.steps.pop();
+						step = this.steps.pop();
+					} else if (err === InputFlowAction.resume) {
+						step = this.steps.pop();
+					} else if (err === InputFlowAction.cancel) {
+						step = undefined;
+					} else {
+						throw err;
+					}
+				}
+			}
+			if (this.current) {
+				this.current.dispose();
+			}
+		}
+
+		async showQuickPick<P extends QuickPickParameters>({ title, step, totalSteps, items, placeholder, buttons, shouldResume }: P) {
+			const disposables: Disposable[] = [];
+			try {
+				return await new Promise<QuickPickItem | (P extends { buttons: (infer I)[] } ? I : never)>((resolve, reject) => {
+					const input = window.createQuickPick();
+					input.title = title;
+					input.step = step;
+					input.totalSteps = totalSteps;
+					input.placeholder = placeholder;
+					input.items = items;
+					input.buttons = [
+						...(this.steps.length > 1 ? [window.quickInputBackButton] : []),
+						...(buttons || [])
+					];
+					disposables.push(
+						input.onDidTriggerButton(item => {
+							if (item === window.quickInputBackButton) {
+								reject(InputFlowAction.back);
+							} else {
+								resolve(<any>item);
+							}
+						}),
+						input.onDidChangeSelection(items => resolve(items[0])),
+						input.onDidHide(() => {
+							(async () => {
+								reject(shouldResume && await shouldResume() ? InputFlowAction.resume : InputFlowAction.cancel);
+							})()
+								.catch(reject);
+						})
+					);
+					if (this.current) {
+						this.current.dispose();
+					}
+					this.current = input;
+					this.current.show();
+				});
+			} finally {
+				disposables.forEach(d => d.dispose());
+			}
+		}
+
+		async showInputBox<P extends InputBoxParameters>({ title, step, totalSteps, value, prompt, validate, buttons, shouldResume }: P) {
+			const disposables: Disposable[] = [];
+			try {
+				return await new Promise<string | (P extends { buttons: (infer I)[] } ? I : never)>((resolve, reject) => {
+					const input = window.createInputBox();
+					input.title = title;
+					input.step = step;
+					input.totalSteps = totalSteps;
+					input.value = value || '';
+					input.prompt = prompt;
+					input.buttons = [
+						...(this.steps.length > 1 ? [window.quickInputBackButton] : []),
+						...(buttons || [])
+					];
+					let validating = validate('');
+					disposables.push(
+						input.onDidTriggerButton(item => {
+							if (item === window.quickInputBackButton) {
+								reject(InputFlowAction.back);
+							} else {
+								resolve(<any>item);
+							}
+						}),
+						input.onDidAccept(async () => {
+							const value = input.value;
+							input.enabled = false;
+							input.busy = true;
+							if (!(await validate(value))) {
+								resolve(value);
+							}
+							input.enabled = true;
+							input.busy = false;
+						}),
+						input.onDidChangeValue(async text => {
+							const current = validate(text);
+							validating = current;
+							const validationMessage = await current;
+							if (current === validating) {
+								input.validationMessage = validationMessage;
+							}
+						}),
+						input.onDidHide(() => {
+							(async () => {
+								reject(shouldResume && await shouldResume() ? InputFlowAction.resume : InputFlowAction.cancel);
+							})()
+								.catch(reject);
+						})
+					);
+					if (this.current) {
+						this.current.dispose();
+					}
+					this.current = input;
+					this.current.show();
+				});
+			} finally {
+				disposables.forEach(d => d.dispose());
+			}
+		}
+	}
+
+
+	// ---------------------------------------------------------------------------------------
+
+
+	async function validateNameIsUnique(name: string) {
+		// ...validate...
+		await new Promise(resolve => setTimeout(resolve, 1000));
+		return name === 'vscode' ? 'Name not unique' : undefined;
+	}
+
+	async function getAvailableRuntimes(resourceGroup: QuickPickItem | string, token?: CancellationToken): Promise<QuickPickItem[]> {
+		// ...retrieve...
+		await new Promise(resolve => setTimeout(resolve, 1000));
+		return ['Node 8.9', 'Node 6.11', 'Node 4.5']
+			.map(label => ({ label }));
+	}
+
+	const state = await collectInputs();
+	window.showInformationMessage(`Got: ${typeof state.resourceGroup === 'string' ? state.resourceGroup : state.resourceGroup.label}, ${state.name}, ${state.runtime.label}`);
+}

quickinput-sample/src/ref.d.ts

@@ -0,0 +1,7 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+// TODO
+/// <reference path='../../../vscode/src/vs/vscode.proposed.d.ts'/>

quickinput-sample/tsconfig.json

@@ -0,0 +1,22 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "target": "es6",
+        "outDir": "out",
+        "lib": [
+            "es6"
+        ],
+        "sourceMap": true,
+        "rootDir": "src",
+        /* Strict Type-Checking Option */
+        "strict": true,   /* enable all strict type-checking options */
+        /* Additional Checks */
+        "noUnusedLocals": true /* Report errors on unused locals. */
+        // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
+        // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
+        // "noUnusedParameters": true,  /* Report errors on unused parameters. */
+    },
+    "exclude": [
+        "node_modules"
+    ]
+}

quickinput-sample/tslint.json

@@ -0,0 +1,15 @@
+{
+	"rules": {
+		"no-string-throw": true,
+		"no-unused-expression": true,
+		"no-duplicate-variable": true,
+		"curly": true,
+		"class-name": true,
+		"semicolon": [
+			true,
+			"always"
+		],
+		"triple-equals": true
+	},
+	"defaultSeverity": "warning"
+}