Skip to content

Commit 2d1c5ef

Browse files
orochaaorochaa
committed
refactor: prompts with default theme
1 parent 3d692c7 commit 2d1c5ef

File tree

1 file changed

+27
-21
lines changed

1 file changed

+27
-21
lines changed

‎packages/prompts/src/index.ts‎

Lines changed: 27 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
TextPrompt,
1313
strLength,
1414
} from '@clack/core';
15+
import { defaultTheme, S } from '@clack/core/themes';
1516
import isUnicodeSupported from 'is-unicode-supported';
1617
import color from 'picocolors';
1718
import { cursor, erase } from 'sisteransi';
@@ -225,7 +226,7 @@ export interface PasswordOptions {
225226
export const password = (opts: PasswordOptions) => {
226227
return new PasswordPrompt({
227228
validate: opts.validate,
228-
mask: opts.mask ?? S_PASSWORD_MASK,
229+
mask: opts.mask ?? S.PASSWORD_MASK,
229230
render() {
230231
return applyTheme({
231232
ctx: this,
@@ -362,10 +363,8 @@ export const selectKey = <Value extends string>(opts: SelectOptions<Value>) => {
362363

363364
switch (this.state) {
364365
case 'submit':
365-
return `${title}${color.gray(S_BAR)} ${opt(
366-
this.options.find((opt) => opt.value === this.value)!,
367-
'selected'
368-
)}`;
366+
value = opt(this.options.find((opt) => opt.value === this.value)!, 'selected');
367+
break;
369368
case 'cancel':
370369
return `${title}${color.gray(S_BAR)} ${opt(this.options[0], 'cancelled')}\n${color.gray(
371370
S_BAR
@@ -375,6 +374,13 @@ export const selectKey = <Value extends string>(opts: SelectOptions<Value>) => {
375374
.map((option, i) => opt(option, i === this.cursor ? 'active' : 'inactive'))
376375
.join(`\n${color.cyan(S_BAR)} `)}\n${color.cyan(S_BAR_END)}\n`;
377376
}
377+
378+
return defaultTheme({
379+
ctx: this,
380+
message: opts.message,
381+
value,
382+
valueWithCursor: undefined,
383+
});
378384
},
379385
}).prompt() as Promise<Value | symbol>;
380386
};
@@ -394,21 +400,21 @@ export const multiselect = <Value>(opts: MultiSelectOptions<Value>) => {
394400
) => {
395401
const label = option.label ?? String(option.value);
396402
if (state === 'active') {
397-
return `${color.cyan(S_CHECKBOX_ACTIVE)} ${label} ${
403+
return `${color.cyan(S.CHECKBOX_ACTIVE)} ${label} ${
398404
option.hint ? color.dim(`(${option.hint})`) : ''
399405
}`;
400406
} else if (state === 'selected') {
401-
return `${color.green(S_CHECKBOX_SELECTED)} ${color.dim(label)}`;
407+
return `${color.green(S.CHECKBOX_SELECTED)} ${color.dim(label)}`;
402408
} else if (state === 'cancelled') {
403409
return `${color.strikethrough(color.dim(label))}`;
404410
} else if (state === 'active-selected') {
405-
return `${color.green(S_CHECKBOX_SELECTED)} ${label} ${
411+
return `${color.green(S.CHECKBOX_SELECTED)} ${label} ${
406412
option.hint ? color.dim(`(${option.hint})`) : ''
407413
}`;
408414
} else if (state === 'submitted') {
409415
return `${color.dim(label)}`;
410416
}
411-
return `${color.dim(S_CHECKBOX_INACTIVE)} ${color.dim(label)}`;
417+
return `${color.dim(S.CHECKBOX_INACTIVE)} ${color.dim(label)}`;
412418
};
413419

414420
return new MultiSelectPrompt({
@@ -524,28 +530,28 @@ export const groupMultiselect = <Value>(opts: GroupMultiSelectOptions<Value>) =>
524530
const isItem = typeof (option as any).group === 'string';
525531
const next = isItem && (options[options.indexOf(option) + 1] ?? { group: true });
526532
const isLast = isItem && (next as any).group === true;
527-
const prefix = isItem ? `${isLast ? S_BAR_END : S_BAR} ` : '';
533+
const prefix = isItem ? `${isLast ? S.BAR_END : S.BAR} ` : '';
528534

529535
if (state === 'active') {
530-
return `${color.dim(prefix)}${color.cyan(S_CHECKBOX_ACTIVE)} ${label} ${
536+
return `${color.dim(prefix)}${color.cyan(S.CHECKBOX_ACTIVE)} ${label} ${
531537
option.hint ? color.dim(`(${option.hint})`) : ''
532538
}`;
533539
} else if (state === 'group-active') {
534-
return `${prefix}${color.cyan(S_CHECKBOX_ACTIVE)} ${color.dim(label)}`;
540+
return `${prefix}${color.cyan(S.CHECKBOX_ACTIVE)} ${color.dim(label)}`;
535541
} else if (state === 'group-active-selected') {
536-
return `${prefix}${color.green(S_CHECKBOX_SELECTED)} ${color.dim(label)}`;
542+
return `${prefix}${color.green(S.CHECKBOX_SELECTED)} ${color.dim(label)}`;
537543
} else if (state === 'selected') {
538-
return `${color.dim(prefix)}${color.green(S_CHECKBOX_SELECTED)} ${color.dim(label)}`;
544+
return `${color.dim(prefix)}${color.green(S.CHECKBOX_SELECTED)} ${color.dim(label)}`;
539545
} else if (state === 'cancelled') {
540546
return `${color.strikethrough(color.dim(label))}`;
541547
} else if (state === 'active-selected') {
542-
return `${color.dim(prefix)}${color.green(S_CHECKBOX_SELECTED)} ${label} ${
548+
return `${color.dim(prefix)}${color.green(S.CHECKBOX_SELECTED)} ${label} ${
543549
option.hint ? color.dim(`(${option.hint})`) : ''
544550
}`;
545551
} else if (state === 'submitted') {
546552
return `${color.dim(label)}`;
547553
}
548-
return `${color.dim(prefix)}${color.dim(S_CHECKBOX_INACTIVE)} ${color.dim(label)}`;
554+
return `${color.dim(prefix)}${color.dim(S.CHECKBOX_INACTIVE)} ${color.dim(label)}`;
549555
};
550556

551557
return new GroupMultiSelectPrompt({
@@ -600,7 +606,7 @@ export const groupMultiselect = <Value>(opts: GroupMultiSelectOptions<Value>) =>
600606
const footer = this.error
601607
.split('\n')
602608
.map((ln, i) =>
603-
i === 0 ? `${color.yellow(S_BAR_END)} ${color.yellow(ln)}` : ` ${ln}`
609+
i === 0 ? `${color.yellow(S.BAR_END)} ${color.yellow(ln)}` : ` ${ln}`
604610
)
605611
.join('\n');
606612
return `${title}\n${color.yellow(S_BAR)} ${this.options
@@ -624,7 +630,7 @@ export const groupMultiselect = <Value>(opts: GroupMultiSelectOptions<Value>) =>
624630
}
625631
return opt(option, active ? 'active' : 'inactive', options);
626632
})
627-
.join(`\n${color.yellow(S_BAR)} `)}\n${footer}\n`;
633+
.join(`\n${color.yellow(S.BAR)} `)}\n${footer}\n`;
628634
}
629635
default: {
630636
return `${title}\n${color.cyan(S_BAR)} ${this.options
@@ -648,7 +654,7 @@ export const groupMultiselect = <Value>(opts: GroupMultiSelectOptions<Value>) =>
648654
}
649655
return opt(option, active ? 'active' : 'inactive', options);
650656
})
651-
.join(`\n${color.cyan(S_BAR)} `)}\n${color.cyan(S_BAR_END)}\n`;
657+
.join(`\n${color.cyan(S.BAR)} `)}\n${color.cyan(S.BAR_END)}\n`;
652658
}
653659
}
654660
},
@@ -835,7 +841,7 @@ export const spinner = () => {
835841
isSpinnerActive = true;
836842
unblock = block();
837843
_message = msg.replace(/\.+$/, '');
838-
process.stdout.write(`${color.gray(S_BAR)}\n`);
844+
process.stdout.write(`${color.gray(S.BAR)}\n`);
839845
let frameIndex = 0;
840846
let dotsTimer = 0;
841847
registerHooks();
@@ -857,7 +863,7 @@ export const spinner = () => {
857863
clearPrevMessage();
858864
const step =
859865
code === 0
860-
? color.green(S_STEP_SUBMIT)
866+
? color.green(S.STEP_SUBMIT)
861867
: code === 1
862868
? color.red(S_STEP_CANCEL)
863869
: color.red(S_STEP_ERROR);

0 commit comments

Comments
 (0)