JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 145
  • Score
    100M100P100Q83687F
  • License MIT

inquirer prompt for reactive choices on list

Package Exports

  • inquirer-reactive-list-prompt

Readme

inquirer-reactive-list-prompt

This is an ongoing project currently in preparation for release.

Status

🚧 Work in Progress 🚧

The project is actively being developed, and I'm in the process of preparing it for npm release.

Overview

Inquirer prompt for reactive choices on list

How to Use

import inquirer from 'inquirer';
import ReactiveListPrompt, { ChoiceItem, ReactiveListLoader } from 'inquirer-reactive-list-prompt';
import { BehaviorSubject } from 'rxjs';

const choices$: BehaviorSubject<ChoiceItem[]> = new BehaviorSubject<ChoiceItem[]>([]);
const loader$: BehaviorSubject<ReactiveListLoader> = new BehaviorSubject<ReactiveListLoader>({
    isLoading: false,
    message: 'Fetch some items',
    startOption: {
        color: 'red',
        spinner: 'triangle',
        text: 'Loading...',
    },
});

inquirer.registerPrompt('reactiveListPrompt', ReactiveListPrompt);
const reactiveList = inquirer.prompt({
    type: 'reactiveListPrompt',
    name: 'ReactiveListPrompt Example',
    message: 'Select response',
    emptyMessage: '⚠ Nothing to show',
    choices$,
    loader$,
});

const asyncItems: any[] = [];

const first = setTimeout(() => {
    choices$.next([
        { name: 'test1', value: 'test1' },
        { name: 'fetching...', value: 'test2', disabled: true },
        new inquirer.Separator(),
        { name: 'fetching...', value: 'test3' },
    ]);
    loader$.next({ isLoading: true });
}, 1000);

const second = setTimeout(() => {
    choices$.next([
        { name: 'test1', value: 'test1', disabled: 'asdasdas' },
        { name: 'fetching...', value: 'test2' },
        { name: 'get error', value: 'error', disabled: true, isError: true },
        new inquirer.Separator(),
        { name: 'example', value: 'test3', disabled: true },
    ]);
}, 2000);

const third = setTimeout(() => {
    choices$.next([
        { name: 'test1', value: 'test1', disabled: true, isError: true },
        { name: 'test2', value: 'test2', disabled: true, isError: true },
        { name: 'get error', value: 'error', disabled: true, isError: true },
        new inquirer.Separator(),
        { name: 'test3', value: 'test3', disabled: true, isError: true },
    ]);
}, 3000);

const fourth = setTimeout(() => {
    choices$.next([
        { name: 'test1', value: 'test1' },
        { name: 'test2', value: 'test2' },
        { name: 'get error', value: 'error', disabled: true, isError: true },
        new inquirer.Separator(),
        { name: 'test3', value: 'test3' },
    ]);

    loader$.next({
        isLoading: false,
        message: 'get all responses',
        // stopOption: {
        //     doneFrame: '⚠', // '✖'
        //     color: 'yellow', // 'red'
        // },
    });
}, 5000);

asyncItems.push(first);
asyncItems.push(second);
asyncItems.push(third);
asyncItems.push(fourth);

reactiveList.then(value => {
    choices$.complete();
    loader$.complete();
    asyncItems.map(item => clearTimeout(item));
    console.log('answer: ', value);
});

Stay in touch