[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: select prompt multiline
Bruno Rocha
(Aug 12, 2023, 4:26 PM -0300)
ac5b839b
0612e379
+42
-22
+42
-22
packages/prompts/src/index.ts
+42
-22
packages/prompts/src/index.ts
···
287
287
export const select = <Options extends Option<Value>[], Value>(
288
288
opts: SelectOptions<Options, Value>
289
289
) => {
290
-
const opt = (option: Option<Value>, state: 'inactive' | 'active' | 'selected' | 'cancelled') => {
290
+
const opt = (
291
+
option: Option<Value>,
292
+
state: 'inactive' | 'active' | 'selected' | 'cancelled'
293
+
): string => {
291
294
const label = option.label ?? String(option.value);
292
295
if (state === 'active') {
293
296
return `${color.green(S_RADIO_ACTIVE)} ${label} ${
···
307
310
options: opts.options,
308
311
initialValue: opts.initialValue,
309
312
render() {
310
-
const title = `${color.gray(S_BAR)}\n${symbol(this.state)} ${opts.message}\n`;
313
+
const title = [
314
+
color.gray(S_BAR),
315
+
formatTextWithMaxWidth(opts.message, {
316
+
initialSymbol: symbol(this.state),
317
+
}),
318
+
].join('\n');
311
319
312
320
switch (this.state) {
313
321
case 'submit':
314
-
return `${title}${color.gray(S_BAR)} ${opt(this.options[this.cursor], 'selected')}`;
322
+
return [
323
+
title,
324
+
formatTextWithMaxWidth(opt(this.options[this.cursor], 'selected'), {
325
+
lineWrapper: color.dim,
326
+
}),
327
+
].join('\n');
315
328
case 'cancel':
316
-
return `${title}${color.gray(S_BAR)} ${opt(
317
-
this.options[this.cursor],
318
-
'cancelled'
319
-
)}\n${color.gray(S_BAR)}`;
329
+
return [
330
+
title,
331
+
formatTextWithMaxWidth(opt(this.options[this.cursor], 'cancelled'), {
332
+
defaultSymbol: color.gray(S_BAR),
333
+
endSymbol: color.gray(S_BAR_END),
334
+
lineWrapper: (line) => color.strikethrough(color.dim(line)),
335
+
}),
336
+
].join('\n');
320
337
default: {
321
338
// We clamp to minimum 5 because anything less doesn't make sense UX wise
322
339
const maxItems = opts.maxItems === undefined ? Infinity : Math.max(opts.maxItems, 5);
···
335
352
maxItems < this.options.length &&
336
353
slidingWindowLocation + maxItems < this.options.length;
337
354
338
-
return `${title}${color.cyan(S_BAR)} ${this.options
339
-
.slice(slidingWindowLocation, slidingWindowLocation + maxItems)
340
-
.map((option, i, arr) => {
341
-
if (i === 0 && shouldRenderTopEllipsis) {
342
-
return color.dim('...');
343
-
} else if (i === arr.length - 1 && shouldRenderBottomEllipsis) {
344
-
return color.dim('...');
345
-
} else {
346
-
return opt(
347
-
option,
348
-
i + slidingWindowLocation === this.cursor ? 'active' : 'inactive'
349
-
);
350
-
}
351
-
})
352
-
.join(`\n${color.cyan(S_BAR)} `)}\n${color.cyan(S_BAR_END)}\n`;
355
+
return [
356
+
title,
357
+
this.options
358
+
.slice(slidingWindowLocation, slidingWindowLocation + maxItems)
359
+
.map((option, i, arr) => {
360
+
if (i === 0 && shouldRenderTopEllipsis) {
361
+
return color.dim('...');
362
+
} else if (i === arr.length - 1 && shouldRenderBottomEllipsis) {
363
+
return color.dim('...');
364
+
} else {
365
+
return formatTextWithMaxWidth(
366
+
opt(option, i + slidingWindowLocation === this.cursor ? 'active' : 'inactive')
367
+
);
368
+
}
369
+
})
370
+
.join('\n'),
371
+
color.cyan(S_BAR_END),
372
+
].join('\n');
353
373
}
354
374
}
355
375
},