[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(@clack/prompts): add maxItems option to select prompt (#136)
authored by
Christian Preston
and committed by
GitHub
(Aug 9, 2023, 9:29 AM EDT)
956825c1
593f93d0
+38
-1
+5
.changeset/eight-bikes-repair.md
+5
.changeset/eight-bikes-repair.md
+33
-1
packages/prompts/src/index.ts
+33
-1
packages/prompts/src/index.ts
···
178
178
message: string;
179
179
options: Options;
180
180
initialValue?: Value;
181
+
maxItems?: number;
181
182
}
182
183
183
184
export const select = <Options extends Option<Value>[], Value>(
···
196
197
}
197
198
return `${color.dim(S_RADIO_INACTIVE)} ${color.dim(label)}`;
198
199
};
200
+
201
+
let slidingWindowLocation = 0;
199
202
200
203
return new SelectPrompt({
201
204
options: opts.options,
···
212
215
'cancelled'
213
216
)}\n${color.gray(S_BAR)}`;
214
217
default: {
218
+
// We clamp to minimum 5 because anything less doesn't make sense UX wise
219
+
const maxItems = opts.maxItems === undefined ? Infinity : Math.max(opts.maxItems, 5);
220
+
if (this.cursor >= slidingWindowLocation + maxItems - 3) {
221
+
slidingWindowLocation = Math.max(
222
+
Math.min(this.cursor - maxItems + 3, this.options.length - maxItems),
223
+
0
224
+
);
225
+
} else if (this.cursor < slidingWindowLocation + 2) {
226
+
slidingWindowLocation = Math.max(this.cursor - 2, 0);
227
+
}
228
+
229
+
const shouldRenderTopEllipsis =
230
+
maxItems < this.options.length && slidingWindowLocation > 0;
231
+
const shouldRenderBottomEllipsis =
232
+
maxItems < this.options.length &&
233
+
slidingWindowLocation + maxItems < this.options.length;
234
+
215
235
return `${title}${color.cyan(S_BAR)} ${this.options
216
-
.map((option, i) => opt(option, i === this.cursor ? 'active' : 'inactive'))
236
+
.slice(slidingWindowLocation, slidingWindowLocation + maxItems)
237
+
.map((option, i, arr) => {
238
+
if (i === 0 && shouldRenderTopEllipsis) {
239
+
return color.dim('...');
240
+
} else if (i === arr.length - 1 && shouldRenderBottomEllipsis) {
241
+
return color.dim('...');
242
+
} else {
243
+
return opt(
244
+
option,
245
+
i + slidingWindowLocation === this.cursor ? 'active' : 'inactive'
246
+
);
247
+
}
248
+
})
217
249
.join(`\n${color.cyan(S_BAR)} `)}\n${color.cyan(S_BAR_END)}\n`;
218
250
}
219
251
}