autocompleteMultiselect.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. 'use strict';
  2. const color = require('kleur');
  3. const { cursor } = require('sisteransi');
  4. const MultiselectPrompt = require('./multiselect');
  5. const { clear, style, figures } = require('../util');
  6. /**
  7. * MultiselectPrompt Base Element
  8. * @param {Object} opts Options
  9. * @param {String} opts.message Message
  10. * @param {Array} opts.choices Array of choice objects
  11. * @param {String} [opts.hint] Hint to display
  12. * @param {String} [opts.warn] Hint shown for disabled choices
  13. * @param {Number} [opts.max] Max choices
  14. * @param {Number} [opts.cursor=0] Cursor start position
  15. * @param {Stream} [opts.stdin] The Readable stream to listen to
  16. * @param {Stream} [opts.stdout] The Writable stream to write readline data to
  17. */
  18. class AutocompleteMultiselectPrompt extends MultiselectPrompt {
  19. constructor(opts={}) {
  20. opts.overrideRender = true;
  21. super(opts);
  22. this.inputValue = '';
  23. this.clear = clear('', this.out.columns);
  24. this.filteredOptions = this.value;
  25. this.render();
  26. }
  27. last() {
  28. this.cursor = this.filteredOptions.length - 1;
  29. this.render();
  30. }
  31. next() {
  32. this.cursor = (this.cursor + 1) % this.filteredOptions.length;
  33. this.render();
  34. }
  35. up() {
  36. if (this.cursor === 0) {
  37. this.cursor = this.filteredOptions.length - 1;
  38. } else {
  39. this.cursor--;
  40. }
  41. this.render();
  42. }
  43. down() {
  44. if (this.cursor === this.filteredOptions.length - 1) {
  45. this.cursor = 0;
  46. } else {
  47. this.cursor++;
  48. }
  49. this.render();
  50. }
  51. left() {
  52. this.filteredOptions[this.cursor].selected = false;
  53. this.render();
  54. }
  55. right() {
  56. if (this.value.filter(e => e.selected).length >= this.maxChoices) return this.bell();
  57. this.filteredOptions[this.cursor].selected = true;
  58. this.render();
  59. }
  60. delete() {
  61. if (this.inputValue.length) {
  62. this.inputValue = this.inputValue.substr(0, this.inputValue.length - 1);
  63. this.updateFilteredOptions();
  64. }
  65. }
  66. updateFilteredOptions() {
  67. const currentHighlight = this.filteredOptions[this.cursor];
  68. this.filteredOptions = this.value
  69. .filter(v => {
  70. if (this.inputValue) {
  71. if (typeof v.title === 'string') {
  72. if (v.title.toLowerCase().includes(this.inputValue.toLowerCase())) {
  73. return true;
  74. }
  75. }
  76. if (typeof v.value === 'string') {
  77. if (v.value.toLowerCase().includes(this.inputValue.toLowerCase())) {
  78. return true;
  79. }
  80. }
  81. return false;
  82. }
  83. return true;
  84. });
  85. const newHighlightIndex = this.filteredOptions.findIndex(v => v === currentHighlight)
  86. this.cursor = newHighlightIndex < 0 ? 0 : newHighlightIndex;
  87. this.render();
  88. }
  89. handleSpaceToggle() {
  90. const v = this.filteredOptions[this.cursor];
  91. if (v.selected) {
  92. v.selected = false;
  93. this.render();
  94. } else if (v.disabled || this.value.filter(e => e.selected).length >= this.maxChoices) {
  95. return this.bell();
  96. } else {
  97. v.selected = true;
  98. this.render();
  99. }
  100. }
  101. handleInputChange(c) {
  102. this.inputValue = this.inputValue + c;
  103. this.updateFilteredOptions();
  104. }
  105. _(c, key) {
  106. if (c === ' ') {
  107. this.handleSpaceToggle();
  108. } else {
  109. this.handleInputChange(c);
  110. }
  111. }
  112. renderInstructions() {
  113. if (this.instructions === undefined || this.instructions) {
  114. if (typeof this.instructions === 'string') {
  115. return this.instructions;
  116. }
  117. return `
  118. Instructions:
  119. ${figures.arrowUp}/${figures.arrowDown}: Highlight option
  120. ${figures.arrowLeft}/${figures.arrowRight}/[space]: Toggle selection
  121. [a,b,c]/delete: Filter choices
  122. enter/return: Complete answer
  123. `;
  124. }
  125. return '';
  126. }
  127. renderCurrentInput() {
  128. return `
  129. Filtered results for: ${this.inputValue ? this.inputValue : color.gray('Enter something to filter')}\n`;
  130. }
  131. renderOption(cursor, v, i) {
  132. let title;
  133. if (v.disabled) title = cursor === i ? color.gray().underline(v.title) : color.strikethrough().gray(v.title);
  134. else title = cursor === i ? color.cyan().underline(v.title) : v.title;
  135. return (v.selected ? color.green(figures.radioOn) : figures.radioOff) + ' ' + title
  136. }
  137. renderDoneOrInstructions() {
  138. if (this.done) {
  139. return this.value
  140. .filter(e => e.selected)
  141. .map(v => v.title)
  142. .join(', ');
  143. }
  144. const output = [color.gray(this.hint), this.renderInstructions(), this.renderCurrentInput()];
  145. if (this.filteredOptions.length && this.filteredOptions[this.cursor].disabled) {
  146. output.push(color.yellow(this.warn));
  147. }
  148. return output.join(' ');
  149. }
  150. render() {
  151. if (this.closed) return;
  152. if (this.firstRender) this.out.write(cursor.hide);
  153. super.render();
  154. // print prompt
  155. let prompt = [
  156. style.symbol(this.done, this.aborted),
  157. color.bold(this.msg),
  158. style.delimiter(false),
  159. this.renderDoneOrInstructions()
  160. ].join(' ');
  161. if (this.showMinError) {
  162. prompt += color.red(`You must select a minimum of ${this.minSelected} choices.`);
  163. this.showMinError = false;
  164. }
  165. prompt += this.renderOptions(this.filteredOptions);
  166. this.out.write(this.clear + prompt);
  167. this.clear = clear(prompt, this.out.columns);
  168. }
  169. }
  170. module.exports = AutocompleteMultiselectPrompt;