vscode#QuickPickItem TypeScript Examples

/** Prompt the user if they agree to have their vault folder moved.
   *
   * @return true if the user agreed to the prompt, false if they cancelled or dismissed it.
   */
  async promptForFolderMove(
    vault: DVault,
    remote: string | null
  ): Promise<boolean> {
    const fromPath = VaultUtils.getRelPath(vault);
    const toPath = GitUtils.getDependencyPathWithRemote({ vault, remote });
    const acceptLabel = "Accept";

    const items: QuickPickItem[] = [
      {
        label: acceptLabel,
        description: `${fromPath} will be moved to ${toPath}`,
      },
      {
        label: "Cancel",
      },
    ];
    const out = await window.showQuickPick(items, {
      canPickMany: false,
      ignoreFocusOut: true,
      title: "The vault folder will be moved",
    });
    if (out?.label === acceptLabel) return true;
    return false;
  }

// TODO: rename
export function filter(editor: TextEditor) {
	const quickPick = window.createQuickPick();
	quickPick.items = $config.savedFilters.map(fl => ({
		label: fl.title,
	}) as QuickPickItem);
	let value: string | undefined;
	let selected: string | undefined;
	quickPick.onDidChangeValue(e => {
		value = e;
	});
	quickPick.onDidChangeSelection(e => {
		selected = e[0].label;
	});
	quickPick.show();
	quickPick.onDidAccept(() => {
		let filterStr;
		if (selected) {
			filterStr = $config.savedFilters.find(fl => fl.title === selected)?.filter;
		} else {
			filterStr = value;
		}
		quickPick.hide();
		quickPick.dispose();
		if (!filterStr || !filterStr.length) {
			return;
		}
		tasksView.description = filterStr;
		setContext(VscodeContext.FilterActive, true);
		$state.taskTreeViewFilterValue = filterStr;
		updateTasksTreeView();
	});
}

async removeTag() {
    const items = (await PageUtil.pageToAllList(tagApi.list)).map(
      (tag) =>
        ({
          label: tag.title,
          tag,
        } as vscode.QuickPickItem & { tag: TagGetRes }),
    )
    const selectItem = await vscode.window.showQuickPick(items, {
      placeHolder: i18n.t('Please select the tag to delete'),
    })
    if (!selectItem) {
      return
    }
    await tagApi.remove(selectItem.tag.id)
    vscode.window.showInformationMessage(
      i18n.t('Remove tag [{{title}}] success', {
        title: selectItem.tag.title,
      }),
    )
  }

/**
   * 删除附件
   */
  async removeResource() {
    const list = (
      await PageUtil.pageToAllList(resourceApi.list, {
        order_by: 'user_updated_time',
        order_dir: 'DESC',
      })
    ).map(
      (item) =>
        ({
          label: item.title,
          id: item.id,
        } as vscode.QuickPickItem & { id: string }),
    )
    const selectItemList = await vscode.window.showQuickPick(list, {
      canPickMany: true,
      placeHolder: '请选择要删除的附件资源',
    })
    if (!selectItemList || selectItemList.length === 0) {
      return
    }
    await Promise.all(selectItemList.map(async (item) => resourceApi.remove(item.id)))
    vscode.window.showInformationMessage(selectItemList.map((item) => item.label).join('\n'), {
      title: '删除附件成功',
    })
  }

/**
   * show search input box
   */
  async search() {
    interface SearchNoteItem extends QuickPickItem {
      noteId: string
    }

    const searchQuickPickBox = vscode.window.createQuickPick<SearchNoteItem>()
    searchQuickPickBox.placeholder = i18n.t('Please enter key words')
    searchQuickPickBox.canSelectMany = false
    searchQuickPickBox.items = await this.loadLastNoteList()

    searchQuickPickBox.onDidChangeValue(async (value: string) => {
      if (value.trim() === '') {
        searchQuickPickBox.items = await this.loadLastNoteList()
        return
      }
      const { items: noteList } = await searchApi.search({
        query: value,
        type: TypeEnum.Note,
        fields: ['id', 'title'],
        limit: 100,
        order_by: 'user_updated_time',
        order_dir: 'DESC',
      })
      searchQuickPickBox.items = noteList.map((note) => ({
        label: note.title,
        noteId: note.id,
        alwaysShow: true,
      }))
      console.log('search: ', value, JSON.stringify(searchQuickPickBox.items))
    })
    searchQuickPickBox.onDidAccept(() => {
      const selectItem = searchQuickPickBox.selectedItems[0]
      GlobalContext.handlerService.openNote(selectItem.noteId)
    })
    searchQuickPickBox.show()
  }

dropDownList = async (itemOptions, quickPickOptions) => {
  let items: QuickPickItem[] = [];
  const keys = Object.keys(itemOptions);
  keys.forEach((key) => {
    items.push({
      label: key,
      //@ts-ignore
      description: itemOptions[key],
    });
  });

  const userOption = await window.showQuickPick(items, quickPickOptions);
  if (!userOption) {
    return;
  }
  console.log(userOption);

  //@ts-ignore
  return userOption.label;
}

/**
   * Prompt user to select custom pod Id
   */
  public static async promptToSelectCustomPodId(): Promise<string | undefined> {
    const { wsRoot } = ExtensionProvider.getDWorkspace();
    const configs = PodV2ConfigManager.getAllPodConfigs(
      path.join(PodUtils.getPodDir({ wsRoot }), "custom")
    );
    const items = configs.map<QuickPickItem>((value) => {
      return { label: value.podId, description: value.podType };
    });
    const podIdQuickPick = await VSCodeUtils.showQuickPick(items, {
      title: "Pick a pod configuration Id",
      ignoreFocusOut: true,
    });
    return podIdQuickPick?.label;
  }

/**
   * Prompt user to pick an {@link ExternalService}
   * @returns
   */
  public static async promptForExternalServiceType(): Promise<
    ExternalService | undefined
  > {
    const newConnectionOptions = Object.keys(ExternalService)
      .filter((key) => Number.isNaN(Number(key)))
      .map<QuickPickItem>((value) => {
        return { label: value };
      });
    const picked = await vscode.window.showQuickPick(newConnectionOptions, {
      title: "Pick the Service Connection Type",
      ignoreFocusOut: true,
    });

    if (!picked) {
      return;
    }
    return picked.label as ExternalService;
  }

/**
   * Prompt user to pick a pod (v2) type
   * @returns a runnable code command for the selected pod
   */
  public static async promptForPodType(): Promise<PodV2Types | undefined> {
    const newConnectionOptions = Object.keys(PodV2Types)
      .filter((key) => Number.isNaN(Number(key)))
      .map<QuickPickItem>((value) => {
        return {
          label: value,
          detail: PodUIControls.getDescriptionForPodType(value as PodV2Types),
        };
      });
    const picked = await vscode.window.showQuickPick(newConnectionOptions, {
      title: "Pick the Pod Type",
      ignoreFocusOut: true,
    });

    if (!picked) {
      return;
    }

    return picked.label as PodV2Types;
  }

/**
   * Ask the user if they want to save their input choices as a new pod config,
   * enabling them to run it again later.
   * @returns a pod ID for the new config if they want to save it, false if they
   * don't want to save it, or undefined if they closed out the quick pick.
   */
  public static async promptToSaveInputChoicesAsNewConfig(): Promise<
    false | string | undefined
  > {
    const items: vscode.QuickPickItem[] = [
      {
        label: "Yes",
        detail:
          "Select this option if you anticipate running this pod multiple-times",
      },
      {
        label: "No",
        detail: "Run this pod now",
      },
    ];
    const picked = await vscode.window.showQuickPick(items, {
      title: "Would you like to save this configuration?",
      ignoreFocusOut: true,
    });

    if (picked === undefined) {
      return;
    }

    if (picked.label === "No") {
      return false;
    }

    return this.promptForGenericId();
  }

/**
   * Prompts user with a quick pick to specify the {@link PodExportScope}
   */
  public static async promptForExportScope(): Promise<
    PodExportScope | undefined
  > {
    return new Promise<PodExportScope | undefined>((resolve) => {
      const qp = vscode.window.createQuickPick();
      qp.ignoreFocusOut = true;
      qp.title = "Select the Export Scope";
      qp.items = Object.keys(PodExportScope)
        .filter((key) => Number.isNaN(Number(key)))
        .map<QuickPickItem>((value) => {
          return {
            label: value,
            detail: PodUIControls.getDescriptionForScope(
              value as PodExportScope
            ),
          };
        });

      qp.onDidAccept(() => {
        resolve(
          PodExportScope[
            qp.selectedItems[0].label as keyof typeof PodExportScope
          ]
        );
        qp.dispose();
      });

      qp.show();
    });
  }

async execute(_opts: CommandOpts) {
    const ctx = { ctx: "ConfigureServiceConnection" };
    this.L.info({ ctx, msg: "enter" });
    let configFilePath: string;
    const mngr = new ExternalConnectionManager(getExtension().podsDir);
    const allServiceConfigs = await mngr.getAllValidConfigs();
    const items = allServiceConfigs.map<QuickPickItem>((value) => {
      return { label: value.connectionId, description: value.serviceType };
    });
    const createNewServiceLabel = { label: "Create New Service Connection" };
    const userChoice = await window.showQuickPick(
      items.concat(createNewServiceLabel),
      {
        title: "Pick the Service Connection Configuration or Create a New One",
        ignoreFocusOut: true,
      }
    );
    if (!userChoice) return;
    if (userChoice.label === createNewServiceLabel.label) {
      const serviceType = await PodUIControls.promptForExternalServiceType();
      if (!serviceType) return;
      await PodUIControls.createNewServiceConfig(serviceType);
    } else {
      const configRoothPath = mngr.configRootPath;
      configFilePath = path.join(
        configRoothPath,
        `svcconfig.${userChoice.label}.yml`
      );
      await VSCodeUtils.openFileInEditor(Uri.file(configFilePath));
    }
  }

private async promptBackupEntrySelection(opts: { backups: string[] }) {
    const { backups } = opts;
    const options: QuickPickItem[] = backups.map((backupName) => {
      return {
        label: backupName,
      };
    });
    const selectedBackupName = await VSCodeUtils.showQuickPick(options, {
      title: "Pick which backup file you want to open.",
      ignoreFocusOut: true,
      canPickMany: false,
    });
    return selectedBackupName;
  }

private convertItemsToVSCodeApi(items: IPickItem[]): QuickPickItem[] {
        const vscodeItems: QuickPickItem[] = [];
        items.forEach(i => {
            vscodeItems.push({
                label: i.label,
                description: i.description
            });
        });
        return vscodeItems;
    }

export async function run(args: any) {
  const optionalSMHomes: OptionalSMAPI[] = Workspace.getConfiguration(
    "sourcepawn"
  ).get("availableAPIs");
  let newSMHomeChoices: QuickPickItem[] = optionalSMHomes.map(
    (optionalHome) => {
      return {
        label: optionalHome.name,
        detail: optionalHome.SMHomePath,
      };
    }
  );

  const QuickPickOptions: QuickPickOptions = {
    canPickMany: false,
  };
  window
    .showQuickPick(newSMHomeChoices, QuickPickOptions)
    .then(async (newSMHome) => {
      if (newSMHome.detail == undefined) {
        return;
      }
      await Workspace.getConfiguration("sourcepawn").update(
        "SourcemodHome",
        newSMHome.detail
      );
      let spCompPath = optionalSMHomes.find((e) => e.name === newSMHome.label)
        .compilerPath;
      await Workspace.getConfiguration("sourcepawn").update(
        "SpcompPath",
        spCompPath
      );
      commands.executeCommand("workbench.action.reloadWindow");
    });
  return 0;
}

export class FileItem implements QuickPickItem {
    name: string;
    label: string;
    alwaysShow: boolean;
    detail?: string;
    description?: string;
    fileType?: FileType;
    action?: Action;

    constructor(record: [string, FileType]) {
        const [name, fileType] = record;
        this.name = name;
        this.fileType = fileType;
        this.alwaysShow = config(ConfigItem.HideDotfiles) ? !name.startsWith(".") : true;
        switch (this.fileType) {
            case FileType.Directory:
                this.label = `$(folder) ${name}`;
                break;
            case FileType.Directory | FileType.SymbolicLink:
                this.label = `$(file-symlink-directory) ${name}`;
                break;
            case FileType.File | FileType.SymbolicLink:
                this.label = `$(file-symlink-file) ${name}`;
            default:
                this.label = `$(file) ${name}`;
                break;
        }
    }
}

// Select the import conflict mode
              class PickItem implements QuickPickItem {
                constructor(
                  public mode: ConflictMode,
                  public label: string,
                  public description?: string | undefined,
                  public detail?: string | undefined,
                  public picked?: boolean | undefined,
                  public alwaysShow?: boolean | undefined,
                ) {}
              }

private static getExportConfigChooserQuickPick(): QuickPick<QuickPickItem> {
    const qp = vscode.window.createQuickPick();
    qp.title = "Pick a Pod Configuration or Create a New One";
    qp.matchOnDetail = true;
    qp.matchOnDescription = true;
    qp.ignoreFocusOut = true;

    const items: QuickPickItem[] = [];

    const configs = PodV2ConfigManager.getAllPodConfigs(
      path.join(getExtension().podsDir, "custom")
    );

    configs.forEach((config) => {
      let keybinding;

      try {
        keybinding = KeybindingUtils.getKeybindingForPodIfExists(config.podId);
      } catch (e: any) {
        if (
          e.message &&
          e.message.includes(KeybindingUtils.MULTIPLE_KEYBINDINGS_MSG_FMT)
        ) {
          keybinding = "Multiple Keybindings";
        }
      }

      let description = config.podType.toString();

      if (keybinding) {
        description = description + "  " + keybinding;
      }

      items.push({
        label: config.podId,
        detail: config.description ?? undefined,
        description,
      });
    });

    items.push({
      label: "New Export",
      detail:
        "Create a new export for either one-time use or to save to a new pod configuration",
    });

    qp.items = items;
    return qp;
  }

private convertVSCodeApiToItem(vscodeItem: QuickPickItem): IPickItem {
        const item: IPickItem = {
            label: vscodeItem.label,
            description: vscodeItem.description!
        }
        return item;
    }

/**
   * 管理标签
   * 有两种模式
   * 1. 在笔记侧边栏
   * 2. 在笔记编辑器中
   * @param item
   */
  async manageTags(item?: Omit<FolderOrNote, 'item'> & { item: JoplinListNote }) {
    const noteId = item?.id || JoplinNoteUtil.getNoteIdByFileName(vscode.window.activeTextEditor?.document.fileName)
    if (!noteId) {
      return
    }
    const oldSelectIdList = (await noteApi.tagsById(noteId)).map((tag) => tag.id)

    const lastUseTimeMap = await this.tagUseService.getMap()
    const selectTagSet = new Set(oldSelectIdList)
    const items = sortBy(
      await PageUtil.pageToAllList(tagApi.list),
      (item) => -(selectTagSet.has(item.id) ? Date.now() : lastUseTimeMap.get(item.id)?.lastUseTime ?? 0),
    ).map(
      (tag) =>
        ({
          label: tag.title,
          picked: selectTagSet.has(tag.id),
          tag,
        } as vscode.QuickPickItem & { tag: TagGetRes }),
    )

    const selectItems = await vscode.window.showQuickPick(items, {
      placeHolder: i18n.t('Please select a tag for this note'),
      canPickMany: true,
    })
    if (!selectItems) {
      return
    }
    const selectIdList = selectItems.map((item) => item.tag.id)
    const { left: addIdList } = diffBy(selectIdList, oldSelectIdList)
    const { left: deleteIdList } = diffBy(oldSelectIdList, selectIdList)
    console.log('选择项: ', selectItems, addIdList, deleteIdList)
    await Promise.all(addIdList.map((id) => tagApi.addTagByNoteId(id, noteId)))
    await Promise.all(deleteIdList.map((id) => tagApi.removeTagByNoteId(id, noteId)))
    await this.tagUseService.save(selectItems.map((item) => item.tag))
  }

processProjectCommand = async (
  actionPrompt: string,
  projectActivator: (selectedProject: WorkspaceProject) => void,
  projectDeactivator: (selectedProject: WorkspaceProject) => void
) => {
  const allProjectsPickList: QuickPickItem[] = [];
  const workspaceFolderPaths = new Set<string>([...workspaceProjects].map(project => project.workspaceFolderPath));

  workspaceFolderPaths.forEach(workspaceFolderPath => {
    const projectPickList: QuickPickItem[] = [...workspaceProjects]
      .filter(project => project.workspaceFolderPath === workspaceFolderPath)
      .sort((project1, project2) =>
        project1.isDefault === project2.isDefault
          ? project1.name.toLocaleLowerCase().localeCompare(project2.name.toLocaleLowerCase())
          : project1.isDefault
          ? -1
          : 1
      )
      .map(project => ({
        label: project.name,
        description:
          `$(debug-stackframe-dot)` +
          (project.shortProjectPath ? `${project.shortProjectPath}   ` : '') +
          (project.isDefault ? '(default)' : ''),
        picked: project.adapter !== undefined
      }));

    allProjectsPickList.push(
      { label: basename(workspaceFolderPath), kind: QuickPickItemKind.Separator },
      ...projectPickList
    );
  });

  const projectPicks = await window.showQuickPick(allProjectsPickList, {
    placeHolder: actionPrompt,
    canPickMany: true
  });

  if (projectPicks === undefined) {
    return;
  }
  const selectedProjectNames = projectPicks.map(projectPick => projectPick.label) ?? [];

  workspaceProjects.forEach(project => {
    const isProjectSelected = selectedProjectNames.includes(project.name);

    if (isProjectSelected && project.adapter === undefined) {
      projectActivator(project);
    } else if (!isProjectSelected && project.adapter !== undefined) {
      projectDeactivator(project);
    }
  });
}

export class Board implements QuickPickItem {
  public vid: string;
  public pid: string;
  public product: string;
  public manufacturer: string;
  public label: string;
  public description: string = "";

  public constructor(m: Map<string, string>) {
    this.vid = m["vid"];
    this.pid = m["pid"];
    this.product = m["product"];
    this.manufacturer = m["manufacturer"];
    this.label = this.manufacturer + ":" + this.product;
  }

  private static _boards: Map<string, Board> = null;
  public static loadBoards(metadataFile: string) {
    if (Board._boards === null) {
      Board._boards = new Map<string, Board>();
    }
    let jsonData: Buffer = fs.readFileSync(metadataFile);
    let boardMetadata: Array<Map<string, string>> = JSON.parse(jsonData.toString());
    boardMetadata.forEach(b => {
      Board._boards.set(Board.key(b["vid"], b["pid"]), new Board(b));
    });
  }
  public static getBoardChoices(): Array<Board> {
    return Array.from(Board._boards.values());
  }
  public static lookup(vid: string, pid: string): Board {
    let key: string = Board.key(vid, pid);
    return Board._boards.get(key);
  }
  public static key(vid: string, pid: string): string {
    return Board._normalizeHex(vid) + ":" + Board._normalizeHex(pid);
  }
  private static _normalizeHex(hex: string): string {
    let n: string = hex;
    if (hex.length === 4)  {
      n = "0x" + hex.toUpperCase();
    } else if(hex.length === 6) {
      n = "0x" + hex.substring(2).toUpperCase();
    }
    return n;
  }
}

async showQuickPick<T extends QuickPickItem>(
    _: QuickPickParameters<T>
  ): Promise<T>;

@action.bound
	private async linkSymbolWithSelectedNode(
		storeTopLevelSymbol: boolean = false
	) {
		const lastActiveDrawioEditor =
			this.editorManager.lastActiveDrawioEditor;
		if (!lastActiveDrawioEditor) {
			window.showErrorMessage("No active drawio instance.");
			return;
		}
		const editor = window.activeTextEditor;
		if (editor == undefined) {
			window.showErrorMessage("No text editor active.");
			return;
		}
		const uri = editor.document.uri;
		const hasSelection = !editor.selection.start.isEqual(
			editor.selection.end
		);
		const result = (await commands.executeCommand(
			"vscode.executeDocumentSymbolProvider",
			uri
		)) as DocumentSymbol[];
		let items: QuickPickItem[] = [];
		function recurse(symb: DocumentSymbol[], path: string) {
			for (let x of symb) {
				// If there is a selection and we do not intersect it, omit the symbol
				let intersectSelection = true;
				if (hasSelection && editor) {
					intersectSelection = editor.selections.reduce(
						(prev: boolean, cur) => {
							return (
								prev &&
								cur.intersection(x.selectionRange) !== undefined
							);
						},
						intersectSelection
					);
				}
				// Add the symbol and descend into children
				let curpath = path == "" ? x.name : `${path}.${x.name}`;
				if (intersectSelection) {
					items.push(<QuickPickItem>{
						label: `$(${symbolNameMap[x.kind]}) ${x.name}`,
						description: x.detail,
						detail: curpath,
					});
				}
				recurse(x.children, curpath);
			}
		}
		recurse(result, "");
		window
			.showQuickPick(items, <QuickPickOptions>{
				matchOnDescription: true,
				matchOnDetail: true,
				placeHolder: `Choose symbol from ${path.basename(uri.fsPath)}`,
			})
			.then(async (v) => {
				if (v == undefined) return;
				const pos: CodePosition = new CodePosition(
					storeTopLevelSymbol ? undefined : uri,
					v.detail
				);
				lastActiveDrawioEditor.drawioClient.linkSelectedNodeWithData(
					pos.serialize(lastActiveDrawioEditor.uri)
				);
				// Validate upon exist, as some languages do not export workspace symbols
				if (
					storeTopLevelSymbol &&
					v.detail &&
					!(await resolveTopSymbol(v.detail))
				) {
					window.showWarningMessage(
						`Cannot resolve symbol ${v.detail}. This likely means workspace symbols are not supported by your language. Try "Link Symbol With Selected Node" instead.`
					);
				}
			});
	}

async showQuickPick<T extends QuickPickItem>(
    _: QuickPickParameters<T> & { canSelectMany: true }
  ): Promise<readonly T[]>;

/**
   * Prompt the user via Quick Pick(s) to select the destination of the export
   * @returns
   */
  public static async promptUserForDestination(
    exportScope: PodExportScope,
    options: vscode.OpenDialogOptions
  ): Promise<"clipboard" | string | undefined> {
    const items: vscode.QuickPickItem[] = [
      {
        label: "clipboard",
        detail: "Puts the contents of the export into your clipboard",
      },
      {
        label: "local filesystem",
        detail: "Exports the contents to a local directory",
      },
    ];
    // Cannot have clipboard be the destination on a multi-note export
    if (exportScope === PodExportScope.Note) {
      const picked = await vscode.window.showQuickPick(items);

      if (!picked) {
        return;
      }

      if (picked.label === "clipboard") {
        return "clipboard";
      }
    }

    // Else, local filesystem, show a file picker dialog:

    const fileUri = await vscode.window.showOpenDialog(options);

    if (fileUri && fileUri[0]) {
      return fileUri[0].fsPath;
    }

    return;
  }

/**
   * Prompt user to pick an existing service connection, or to create a new one.
   * @returns
   */
  public static async promptForExternalServiceConnectionOrNew<
    T extends ExternalTarget
  >(connectionType: ExternalService): Promise<undefined | T> {
    const { wsRoot } = ExtensionProvider.getDWorkspace();
    const mngr = new ExternalConnectionManager(PodUtils.getPodDir({ wsRoot }));

    const existingConnections = await mngr.getAllConfigsByType(connectionType);

    const items = existingConnections.map<QuickPickItem>((value) => {
      return { label: value.connectionId };
    });

    const createNewOptionString = `Create new ${connectionType} connection`;
    const newConnectionOption = {
      label: createNewOptionString,
    };

    const selectedServiceOption = await vscode.window.showQuickPick(
      items.concat(newConnectionOption),
      { title: "Pick the service connection for export", ignoreFocusOut: true }
    );

    if (!selectedServiceOption) {
      return;
    }

    if (selectedServiceOption.label === createNewOptionString) {
      await PodUIControls.createNewServiceConfig(connectionType);
      return;
    } else {
      const config = mngr.getConfigById<T>({ id: selectedServiceOption.label });

      if (!config) {
        vscode.window.showErrorMessage(
          `Couldn't find service config with ID ${selectedServiceOption.label}.`
        );
        return;
      }

      return config;
    }
  }

async showQuickPick<T extends QuickPickItem>(
    _: QuickPickParameters<T> & Required<ButtonOption>
  ): Promise<T | ButtonAction>;

async showQuickPick<T extends QuickPickItem>(
    _: QuickPickParameters<T> & Required<QuickPickOption>
  ): Promise<readonly T[] | ButtonAction>;