[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
add active style for default selected
Oskar Löfgren
(Feb 21, 2023, 11:59 PM +0100)
1239d154
fbccaba8
+9
-4
+3
-2
packages/core/src/prompts/select-key.ts
+3
-2
packages/core/src/prompts/select-key.ts
···
11
11
super(opts, false);
12
12
13
13
this.options = opts.options;
14
-
const keys = opts.options.map(v => v.value[0]);
14
+
const keys = opts.options.map(({ value: [initial] }) => initial);
15
+
this.cursor = Math.max(keys.indexOf(opts.initialValue), 0);
15
16
16
17
this.on('key', (key) => {
17
18
if (!keys.includes(key)) return;
18
-
const value = opts.options.find(v => v.value[0] === key);
19
+
const value = opts.options.find(({ value: [initial] }) => initial === key);
19
20
if (value) {
20
21
this.value = value.value;
21
22
this.state = 'submit';
+6
-2
packages/prompts/src/index.ts
+6
-2
packages/prompts/src/index.ts
···
222
222
) => {
223
223
const opt = (
224
224
option: Options[number],
225
-
state: 'inactive' | 'selected' | 'cancelled' = 'inactive'
225
+
state: 'inactive' | 'active' | 'selected' | 'cancelled' = 'inactive'
226
226
) => {
227
227
const label = option.label ?? String(option.value);
228
228
if (state === 'selected') {
229
229
return `${color.dim(label)}`;
230
230
} else if (state === 'cancelled') {
231
231
return `${color.strikethrough(color.dim(label))}`;
232
+
} else if (state === 'active') {
233
+
return `${color.bgCyan(color.gray(` ${option.value} `))} ${label} ${
234
+
option.hint ? color.dim(`(${option.hint})`) : ''
235
+
}`;
232
236
}
233
237
return `${color.gray(color.bgWhite(color.inverse(` ${option.value} `)))} ${label} ${
234
238
option.hint ? color.dim(`(${option.hint})`) : ''
···
253
257
)}`;
254
258
default: {
255
259
return `${title}${color.cyan(S_BAR)} ${this.options
256
-
.map((option, i) => opt(option))
260
+
.map((option, i) => opt(option, i === this.cursor ? 'active' : 'inactive'))
257
261
.join(`\n${color.cyan(S_BAR)} `)}\n${color.cyan(S_BAR_END)}\n`;
258
262
}
259
263
}