UNPKG

15.7 kBTypeScriptView Raw
1import { ReadonlyJSONObject } from '@lumino/coreutils';
2import { CommandRegistry } from '@lumino/commands';
3import { Message } from '@lumino/messaging';
4import { ElementDataset, h, VirtualElement } from '@lumino/virtualdom';
5import { Widget } from './widget';
6/**
7 * A widget which displays command items as a searchable palette.
8 */
9export declare class CommandPalette extends Widget {
10 /**
11 * Construct a new command palette.
12 *
13 * @param options - The options for initializing the palette.
14 */
15 constructor(options: CommandPalette.IOptions);
16 /**
17 * Dispose of the resources held by the widget.
18 */
19 dispose(): void;
20 /**
21 * The command registry used by the command palette.
22 */
23 readonly commands: CommandRegistry;
24 /**
25 * The renderer used by the command palette.
26 */
27 readonly renderer: CommandPalette.IRenderer;
28 /**
29 * The command palette search node.
30 *
31 * #### Notes
32 * This is the node which contains the search-related elements.
33 */
34 get searchNode(): HTMLDivElement;
35 /**
36 * The command palette input node.
37 *
38 * #### Notes
39 * This is the actual input node for the search area.
40 */
41 get inputNode(): HTMLInputElement;
42 /**
43 * The command palette content node.
44 *
45 * #### Notes
46 * This is the node which holds the command item nodes.
47 *
48 * Modifying this node directly can lead to undefined behavior.
49 */
50 get contentNode(): HTMLUListElement;
51 /**
52 * A read-only array of the command items in the palette.
53 */
54 get items(): ReadonlyArray<CommandPalette.IItem>;
55 /**
56 * Add a command item to the command palette.
57 *
58 * @param options - The options for creating the command item.
59 *
60 * @returns The command item added to the palette.
61 */
62 addItem(options: CommandPalette.IItemOptions): CommandPalette.IItem;
63 /**
64 * Adds command items to the command palette.
65 *
66 * @param items - An array of options for creating each command item.
67 *
68 * @returns The command items added to the palette.
69 */
70 addItems(items: CommandPalette.IItemOptions[]): CommandPalette.IItem[];
71 /**
72 * Remove an item from the command palette.
73 *
74 * @param item - The item to remove from the palette.
75 *
76 * #### Notes
77 * This is a no-op if the item is not in the palette.
78 */
79 removeItem(item: CommandPalette.IItem): void;
80 /**
81 * Remove the item at a given index from the command palette.
82 *
83 * @param index - The index of the item to remove.
84 *
85 * #### Notes
86 * This is a no-op if the index is out of range.
87 */
88 removeItemAt(index: number): void;
89 /**
90 * Remove all items from the command palette.
91 */
92 clearItems(): void;
93 /**
94 * Clear the search results and schedule an update.
95 *
96 * #### Notes
97 * This should be called whenever the search results of the palette
98 * should be updated.
99 *
100 * This is typically called automatically by the palette as needed,
101 * but can be called manually if the input text is programatically
102 * changed.
103 *
104 * The rendered results are updated asynchronously.
105 */
106 refresh(): void;
107 /**
108 * Handle the DOM events for the command palette.
109 *
110 * @param event - The DOM event sent to the command palette.
111 *
112 * #### Notes
113 * This method implements the DOM `EventListener` interface and is
114 * called in response to events on the command palette's DOM node.
115 * It should not be called directly by user code.
116 */
117 handleEvent(event: Event): void;
118 /**
119 * A message handler invoked on a `'before-attach'` message.
120 */
121 protected onBeforeAttach(msg: Message): void;
122 /**
123 * A message handler invoked on an `'after-detach'` message.
124 */
125 protected onAfterDetach(msg: Message): void;
126 /**
127 * A message handler invoked on an `'after-show'` message.
128 */
129 protected onAfterShow(msg: Message): void;
130 /**
131 * A message handler invoked on an `'activate-request'` message.
132 */
133 protected onActivateRequest(msg: Message): void;
134 /**
135 * A message handler invoked on an `'update-request'` message.
136 */
137 protected onUpdateRequest(msg: Message): void;
138 /**
139 * Handle the `'click'` event for the command palette.
140 */
141 private _evtClick;
142 /**
143 * Handle the `'keydown'` event for the command palette.
144 */
145 private _evtKeyDown;
146 /**
147 * Activate the next enabled command item.
148 */
149 private _activateNextItem;
150 /**
151 * Activate the previous enabled command item.
152 */
153 private _activatePreviousItem;
154 /**
155 * Execute the command item at the given index, if possible.
156 */
157 private _execute;
158 /**
159 * Toggle the focused modifier based on the input node focus state.
160 */
161 private _toggleFocused;
162 /**
163 * A signal handler for generic command changes.
164 */
165 private _onGenericChange;
166 private _activeIndex;
167 private _items;
168 private _results;
169}
170/**
171 * The namespace for the `CommandPalette` class statics.
172 */
173export declare namespace CommandPalette {
174 /**
175 * An options object for creating a command palette.
176 */
177 interface IOptions {
178 /**
179 * The command registry for use with the command palette.
180 */
181 commands: CommandRegistry;
182 /**
183 * A custom renderer for use with the command palette.
184 *
185 * The default is a shared renderer instance.
186 */
187 renderer?: IRenderer;
188 }
189 /**
190 * An options object for creating a command item.
191 */
192 interface IItemOptions {
193 /**
194 * The category for the item.
195 */
196 category: string;
197 /**
198 * The command to execute when the item is triggered.
199 */
200 command: string;
201 /**
202 * The arguments for the command.
203 *
204 * The default value is an empty object.
205 */
206 args?: ReadonlyJSONObject;
207 /**
208 * The rank for the command item.
209 *
210 * The rank is used as a tie-breaker when ordering command items
211 * for display. Items are sorted in the following order:
212 * 1. Text match (lower is better)
213 * 2. Category (locale order)
214 * 3. Rank (lower is better)
215 * 4. Label (locale order)
216 *
217 * The default rank is `Infinity`.
218 */
219 rank?: number;
220 }
221 /**
222 * An object which represents an item in a command palette.
223 *
224 * #### Notes
225 * Item objects are created automatically by a command palette.
226 */
227 interface IItem {
228 /**
229 * The command to execute when the item is triggered.
230 */
231 readonly command: string;
232 /**
233 * The arguments for the command.
234 */
235 readonly args: ReadonlyJSONObject;
236 /**
237 * The category for the command item.
238 */
239 readonly category: string;
240 /**
241 * The rank for the command item.
242 */
243 readonly rank: number;
244 /**
245 * The display label for the command item.
246 */
247 readonly label: string;
248 /**
249 * The display caption for the command item.
250 */
251 readonly caption: string;
252 /**
253 * The icon renderer for the command item.
254 */
255 readonly icon: VirtualElement.IRenderer | undefined;
256 /**
257 * The icon class for the command item.
258 */
259 readonly iconClass: string;
260 /**
261 * The icon label for the command item.
262 */
263 readonly iconLabel: string;
264 /**
265 * The extra class name for the command item.
266 */
267 readonly className: string;
268 /**
269 * The dataset for the command item.
270 */
271 readonly dataset: CommandRegistry.Dataset;
272 /**
273 * Whether the command item is enabled.
274 */
275 readonly isEnabled: boolean;
276 /**
277 * Whether the command item is toggled.
278 */
279 readonly isToggled: boolean;
280 /**
281 * Whether the command item is toggleable.
282 */
283 readonly isToggleable: boolean;
284 /**
285 * Whether the command item is visible.
286 */
287 readonly isVisible: boolean;
288 /**
289 * The key binding for the command item.
290 */
291 readonly keyBinding: CommandRegistry.IKeyBinding | null;
292 }
293 /**
294 * The render data for a command palette header.
295 */
296 interface IHeaderRenderData {
297 /**
298 * The category of the header.
299 */
300 readonly category: string;
301 /**
302 * The indices of the matched characters in the category.
303 */
304 readonly indices: ReadonlyArray<number> | null;
305 }
306 /**
307 * The render data for a command palette item.
308 */
309 interface IItemRenderData {
310 /**
311 * The command palette item to render.
312 */
313 readonly item: IItem;
314 /**
315 * The indices of the matched characters in the label.
316 */
317 readonly indices: ReadonlyArray<number> | null;
318 /**
319 * Whether the item is the active item.
320 */
321 readonly active: boolean;
322 }
323 /**
324 * The render data for a command palette empty message.
325 */
326 interface IEmptyMessageRenderData {
327 /**
328 * The query which failed to match any commands.
329 */
330 query: string;
331 }
332 /**
333 * A renderer for use with a command palette.
334 */
335 interface IRenderer {
336 /**
337 * Render the virtual element for a command palette header.
338 *
339 * @param data - The data to use for rendering the header.
340 *
341 * @returns A virtual element representing the header.
342 */
343 renderHeader(data: IHeaderRenderData): VirtualElement;
344 /**
345 * Render the virtual element for a command palette item.
346 *
347 * @param data - The data to use for rendering the item.
348 *
349 * @returns A virtual element representing the item.
350 *
351 * #### Notes
352 * The command palette will not render invisible items.
353 */
354 renderItem(data: IItemRenderData): VirtualElement;
355 /**
356 * Render the empty results message for a command palette.
357 *
358 * @param data - The data to use for rendering the message.
359 *
360 * @returns A virtual element representing the message.
361 */
362 renderEmptyMessage(data: IEmptyMessageRenderData): VirtualElement;
363 }
364 /**
365 * The default implementation of `IRenderer`.
366 */
367 class Renderer implements IRenderer {
368 /**
369 * Render the virtual element for a command palette header.
370 *
371 * @param data - The data to use for rendering the header.
372 *
373 * @returns A virtual element representing the header.
374 */
375 renderHeader(data: IHeaderRenderData): VirtualElement;
376 /**
377 * Render the virtual element for a command palette item.
378 *
379 * @param data - The data to use for rendering the item.
380 *
381 * @returns A virtual element representing the item.
382 */
383 renderItem(data: IItemRenderData): VirtualElement;
384 /**
385 * Render the empty results message for a command palette.
386 *
387 * @param data - The data to use for rendering the message.
388 *
389 * @returns A virtual element representing the message.
390 */
391 renderEmptyMessage(data: IEmptyMessageRenderData): VirtualElement;
392 /**
393 * Render the icon for a command palette item.
394 *
395 * @param data - The data to use for rendering the icon.
396 *
397 * @returns A virtual element representing the icon.
398 */
399 renderItemIcon(data: IItemRenderData): VirtualElement;
400 /**
401 * Render the content for a command palette item.
402 *
403 * @param data - The data to use for rendering the content.
404 *
405 * @returns A virtual element representing the content.
406 */
407 renderItemContent(data: IItemRenderData): VirtualElement;
408 /**
409 * Render the label for a command palette item.
410 *
411 * @param data - The data to use for rendering the label.
412 *
413 * @returns A virtual element representing the label.
414 */
415 renderItemLabel(data: IItemRenderData): VirtualElement;
416 /**
417 * Render the caption for a command palette item.
418 *
419 * @param data - The data to use for rendering the caption.
420 *
421 * @returns A virtual element representing the caption.
422 */
423 renderItemCaption(data: IItemRenderData): VirtualElement;
424 /**
425 * Render the shortcut for a command palette item.
426 *
427 * @param data - The data to use for rendering the shortcut.
428 *
429 * @returns A virtual element representing the shortcut.
430 */
431 renderItemShortcut(data: IItemRenderData): VirtualElement;
432 /**
433 * Create the class name for the command palette item.
434 *
435 * @param data - The data to use for the class name.
436 *
437 * @returns The full class name for the command palette item.
438 */
439 createItemClass(data: IItemRenderData): string;
440 /**
441 * Create the dataset for the command palette item.
442 *
443 * @param data - The data to use for creating the dataset.
444 *
445 * @returns The dataset for the command palette item.
446 */
447 createItemDataset(data: IItemRenderData): ElementDataset;
448 /**
449 * Create the class name for the command item icon.
450 *
451 * @param data - The data to use for the class name.
452 *
453 * @returns The full class name for the item icon.
454 */
455 createIconClass(data: IItemRenderData): string;
456 /**
457 * Create the render content for the header node.
458 *
459 * @param data - The data to use for the header content.
460 *
461 * @returns The content to add to the header node.
462 */
463 formatHeader(data: IHeaderRenderData): h.Child;
464 /**
465 * Create the render content for the empty message node.
466 *
467 * @param data - The data to use for the empty message content.
468 *
469 * @returns The content to add to the empty message node.
470 */
471 formatEmptyMessage(data: IEmptyMessageRenderData): h.Child;
472 /**
473 * Create the render content for the item shortcut node.
474 *
475 * @param data - The data to use for the shortcut content.
476 *
477 * @returns The content to add to the shortcut node.
478 */
479 formatItemShortcut(data: IItemRenderData): h.Child;
480 /**
481 * Create the render content for the item label node.
482 *
483 * @param data - The data to use for the label content.
484 *
485 * @returns The content to add to the label node.
486 */
487 formatItemLabel(data: IItemRenderData): h.Child;
488 /**
489 * Create the render content for the item caption node.
490 *
491 * @param data - The data to use for the caption content.
492 *
493 * @returns The content to add to the caption node.
494 */
495 formatItemCaption(data: IItemRenderData): h.Child;
496 }
497 /**
498 * The default `Renderer` instance.
499 */
500 const defaultRenderer: Renderer;
501}