feat(prompt): progress indicator for filter and validate with optiona… (

#1002)

Co-authored-by: Kim Brandwijk <kim.brandwijk@gmail.com>
Co-authored-by: Simon Boudrias <admin@simonboudrias.com>

packages/inquirer/examples/filter-validate-progress.js

@@ -0,0 +1,43 @@
+/**
+ * Filter and validate progress example
+ */
+
+'use strict';
+const inquirer = require('..');
+
+/* eslint-disable no-promise-executor-return */
+
+const questions = [
+  {
+    type: 'input',
+    name: 'first_question',
+    message: 'Question with filtering and validating text',
+    validate: async () => {
+      await new Promise((r) => setTimeout(r, 3000));
+      return true;
+    },
+    filter: async (answer) => {
+      await new Promise((r) => setTimeout(r, 3000));
+      return `filtered${answer}`;
+    },
+    filteringText: 'Filtering your answer...',
+    validatingText: 'Validating what you wrote...',
+  },
+  {
+    type: 'input',
+    name: 'second_question',
+    message: 'Question without filtering and validating text',
+    validate: async () => {
+      await new Promise((r) => setTimeout(r, 3000));
+      return true;
+    },
+    filter: async (answer) => {
+      await new Promise((r) => setTimeout(r, 3000));
+      return `filtered${answer}`;
+    },
+  },
+];
+
+inquirer.prompt(questions).then((answers) => {
+  console.log(JSON.stringify(answers, null, '  '));
+});

packages/inquirer/lib/prompts/base.js

@@ -25,7 +25,9 @@ class Prompt {
     // Set defaults prompt options
     this.opt = _.defaults(_.clone(question), {
       validate: () => true,
+      validatingText: '',
       filter: (val) => val,
+      filteringText: '',
       when: () => true,
       suffix: '',
       prefix: chalk.green('?'),
@@ -96,16 +98,19 @@ class Prompt {
     const validate = runAsync(this.opt.validate);
     const asyncFilter = runAsync(this.opt.filter);
     const validation = submit.pipe(
-      flatMap((value) =>
-        asyncFilter(value, self.answers).then(
-          (filteredValue) =>
-            validate(filteredValue, self.answers).then(
+      flatMap((value) => {
+        this.startSpinner(value, this.opt.filteringText);
+        return asyncFilter(value, self.answers).then(
+          (filteredValue) => {
+            this.startSpinner(filteredValue, this.opt.validatingText);
+            return validate(filteredValue, self.answers).then(
               (isValid) => ({ isValid, value: filteredValue }),
               (err) => ({ isValid: err, value: filteredValue })
-            ),
+            );
+          },
           (err) => ({ isValid: err })
-        )
-      ),
+        );
+      }),
       share()
     );
 
@@ -124,11 +129,19 @@ class Prompt {
     };
   }
 
+  startSpinner(value, bottomContent) {
+    // If the question will spin, cut off the prefix (for layout purposes)
+    const content = bottomContent
+      ? this.getQuestion() + value
+      : this.getQuestion().slice(this.opt.prefix.length + 1) + value;
+
+    this.screen.renderWithSpinner(content, bottomContent);
+  }
+
   /**
    * Generate the prompt question string
    * @return {String} prompt question string
    */
-
   getQuestion() {
     let message =
       this.opt.prefix +

packages/inquirer/lib/utils/screen-manager.js

@@ -7,6 +7,7 @@ const util = require('./readline');
 const cliWidth = require('cli-width');
 const stripAnsi = require('strip-ansi');
 const stringWidth = require('string-width');
+const ora = require('ora');
 
 function height(content) {
   return content.split('\n').length;
@@ -25,7 +26,36 @@ class ScreenManager {
     this.rl = rl;
   }
 
-  render(content, bottomContent) {
+  renderWithSpinner(content, bottomContent) {
+    if (this.spinnerId) {
+      clearInterval(this.spinnerId);
+    }
+
+    let spinner;
+    let contentFunc;
+    let bottomContentFunc;
+
+    if (bottomContent) {
+      spinner = ora(bottomContent);
+      contentFunc = () => content;
+      bottomContentFunc = () => spinner.frame();
+    } else {
+      spinner = ora(content);
+      contentFunc = () => spinner.frame();
+      bottomContentFunc = () => '';
+    }
+
+    this.spinnerId = setInterval(
+      () => this.render(contentFunc(), bottomContentFunc(), true),
+      spinner.interval
+    );
+  }
+
+  render(content, bottomContent, spinning = false) {
+    if (this.spinnerId && !spinning) {
+      clearInterval(this.spinnerId);
+    }
+
     this.rl.output.unmute();
     this.clean(this.extraLinesUnderPrompt);