[READ-ONLY] Mirror of https://github.com/bombshell-dev/clack. Effortlessly build beautiful command-line apps
bomb.sh/docs/clack/basics/getting-started/
cli
command-line
command-line-app
node
prompt
prompts
feat: multiselect prompt multiline
Bruno Rocha
(Aug 12, 2023, 4:59 PM -0300)
a73d9ecb
ac5b839b
+56
-44
+56
-44
packages/prompts/src/index.ts
+56
-44
packages/prompts/src/index.ts
···
473
473
)}`;
474
474
},
475
475
render() {
476
-
let title = `${color.gray(S_BAR)}\n${symbol(this.state)} ${opts.message}\n`;
476
+
let title = [
477
+
color.gray(S_BAR),
478
+
formatTextWithMaxWidth(opts.message, { initialSymbol: symbol(this.state) }),
479
+
].join('\n');
477
480
478
481
switch (this.state) {
479
482
case 'submit': {
480
-
return `${title}${color.gray(S_BAR)} ${
481
-
this.options
482
-
.filter(({ value }) => this.value.includes(value))
483
-
.map((option) => opt(option, 'submitted'))
484
-
.join(color.dim(', ')) || color.dim('none')
485
-
}`;
483
+
return [
484
+
title,
485
+
formatTextWithMaxWidth(
486
+
this.options
487
+
.filter(({ value }) => this.value.includes(value))
488
+
.map((option) => opt(option, 'submitted'))
489
+
.join(color.dim(', ')),
490
+
),
491
+
].join('\n');
486
492
}
487
493
case 'cancel': {
488
494
const label = this.options
489
495
.filter(({ value }) => this.value.includes(value))
490
-
.map((option) => opt(option, 'cancelled'))
491
496
.join(color.dim(', '));
492
-
return `${title}${color.gray(S_BAR)} ${
493
-
label.trim() ? `${label}\n${color.gray(S_BAR)}` : ''
494
-
}`;
497
+
return [
498
+
title,
499
+
formatTextWithMaxWidth(label ?? '', {
500
+
defaultSymbol: color.gray(S_BAR),
501
+
endSymbol: color.gray(S_BAR_END),
502
+
lineWrapper: (line) => color.strikethrough(color.dim(line)),
503
+
}),
504
+
].join('\n');
495
505
}
496
506
case 'error': {
497
-
const footer = this.error
498
-
.split('\n')
499
-
.map((ln, i) =>
500
-
i === 0 ? `${color.yellow(S_BAR_END)} ${color.yellow(ln)}` : ` ${ln}`
501
-
)
502
-
.join('\n');
503
-
return (
504
-
title +
505
-
color.yellow(S_BAR) +
506
-
' ' +
507
+
return [
508
+
title,
507
509
this.options
508
510
.map((option, i) => {
509
511
const selected = this.value.includes(option.value);
510
512
const active = i === this.cursor;
513
+
let line = '';
511
514
if (active && selected) {
512
-
return opt(option, 'active-selected');
513
-
}
514
-
if (selected) {
515
-
return opt(option, 'selected');
515
+
line = opt(option, 'active-selected');
516
+
} else if (selected) {
517
+
line = opt(option, 'selected');
518
+
} else {
519
+
line = opt(option, active ? 'active' : 'inactive');
516
520
}
517
-
return opt(option, active ? 'active' : 'inactive');
521
+
return formatTextWithMaxWidth(line);
518
522
})
519
-
.join(`\n${color.yellow(S_BAR)} `) +
520
-
'\n' +
521
-
footer +
522
-
'\n'
523
-
);
523
+
.join('\n'),
524
+
formatTextWithMaxWidth(this.error, {
525
+
defaultSymbol: color.yellow(S_BAR),
526
+
lineWrapper: color.yellow,
527
+
endSymbol: color.yellow(S_BAR_END),
528
+
}),
529
+
].join('\n');
524
530
}
525
531
default: {
526
-
return `${title}${color.cyan(S_BAR)} ${this.options
527
-
.map((option, i) => {
528
-
const selected = this.value.includes(option.value);
529
-
const active = i === this.cursor;
530
-
if (active && selected) {
531
-
return opt(option, 'active-selected');
532
-
}
533
-
if (selected) {
534
-
return opt(option, 'selected');
535
-
}
536
-
return opt(option, active ? 'active' : 'inactive');
537
-
})
538
-
.join(`\n${color.cyan(S_BAR)} `)}\n${color.cyan(S_BAR_END)}\n`;
532
+
return [
533
+
title,
534
+
this.options
535
+
.map((option, i) => {
536
+
const selected = this.value.includes(option.value);
537
+
const active = i === this.cursor;
538
+
let line = '';
539
+
if (active && selected) {
540
+
line = opt(option, 'active-selected');
541
+
} else if (selected) {
542
+
line = opt(option, 'selected');
543
+
} else {
544
+
line = opt(option, active ? 'active' : 'inactive');
545
+
}
546
+
return formatTextWithMaxWidth(line);
547
+
})
548
+
.join('\n'),
549
+
color.cyan(S_BAR_END),
550
+
].join('\n');
539
551
}
540
552
}
541
553
},