Cannot create custom prompt that extends MultiSelect

[eAlexandrohin]

Trying to make prompt template via custom prompt:

const { MultiSelect } = require(`enquirer`);

class Choose extends MultiSelect {
    constructor (options) {
        super({...options});
    };
    pointer = `>`;
    emptyError = `${c.bold.redBright(`none were selected.`)}`;
    footer = `\nUse ${c.bold.cyanBright(`↑/↓`)} keys with ${c.bold.cyanBright(`Space[ ⎵ ]`)} and ${c.bold.cyanBright(`Enter[ ↵ ]`)}.`;
    styles = {
        default: chalk.reset,
        strong: chalk.bold.cyanBright,
        primary: chalk.bold.greenBright,
        em: chalk.bold.greenBright,
        success: chalk.bold.greenBright,
    };
    indicator (state, choice) {
        return ` ${choice.enabled ? `●` : `○`}`;
    };
    result (result) {
        return Object.values(this.map(result));
    };
    format() {
        if (!this.state.submitted || this.state.cancelled) return ``;
        if (Array.isArray(this.selected) && this.selected.length > 0) {
            return `${c.bold.greenBright(`done!`)}`;
        }
        return;
    };
};

// later...

const chooseSomething = new Choose({
    name: `chosenSomething`,
    message: `Choose something:`,
    limit: yargs.amount,
    choices: choices,
});

chooseSomething.run().then(async (result) => {
 // ...
})
.catch(console.error);

And got this error:

C:\...\node_modules\enquirer\lib\prompt.js:264
      return style(element);
             ^

TypeError: style is not a function
    at Choose.prefix (C:\...\node_modules\enquirer\lib\prompt.js:264:14)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Choose.render (C:\...\node_modules\enquirer\lib\prompts\select.js:111:18)
    at async Choose.initialize (C:\...\node_modules\enquirer\lib\prompt.js:221:5)     
    at async Choose.initialize (C:\...\node_modules\enquirer\lib\types\array.js:26:5) 
    at async C:\...\node_modules\enquirer\lib\prompt.js:236:7

Node.js v20.0.0

[jonschlinkert]

Hi @eAlexandrohin, sorry for the late reply.

For now, you can do this instead:

const colors = require('ansi-colors');
const { MultiSelect } = require('enquirer');

class Choose extends MultiSelect {
  constructor(options) {
    super({ ...options });
  }
  indicator(state, choice) {
    return ` ${choice.enabled ? '●' : '○'}`;
  }
  result(result) {
    return Object.values(this.map(result));
  }
  format() {
    if (!this.state.submitted || this.state.cancelled) return '';
    if (Array.isArray(this.selected) && this.selected.length > 0) {
      return `${colors.bold.greenBright('done!')}`;
    }
    return;
  }
}

const chooseSomething = new Choose({
  name: 'chosenSomething',
  message: 'Choose something:',
  limit: 2,
  choices: ['foo', 'bar', 'baz'],
  pointer: '>',
  emptyError: `${colors.bold.redBright('none were selected.')}`,
  footer: `\nUse ${colors.bold.cyanBright('↑/↓')} keys with ${colors.bold.cyanBright(
    'Space[ ⎵ ]'
  )} and ${colors.bold.cyanBright('Enter[ ↵ ]')}.`,
  styles: {
    default: colors.reset,
    strong: colors.bold.cyanBright,
    primary: colors.bold.greenBright,
    em: colors.bold.greenBright,
    success: colors.bold.greenBright
  }
});

chooseSomething
  .run()
  .then(async(result) => {
    // ...
  })
  .catch(console.error);

I think that should work with chalk too, I already had ansi-colors installed so I just used that.

[eAlexandrohin]

Sorry for late reply too, @jonschlinkert :)

So, there is no way, for now, to define all needed properties in class to make usage simple and compact like in my example? Guess, it is pointless to do that this way then. I will just continue sticking with creating new MultiSelect each time.

Also, tried running your solution and the indicator doesnt work anymore. ¯\(ツ)/¯
How it supposed to work/when it doesnt:

Anyway, thank you for your time. <3