Inquirer-reactive-list-prompt NPM

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);
});