-
-
Notifications
You must be signed in to change notification settings - Fork 3.2k
/
commandpalettesvg.ts
92 lines (81 loc) · 2.62 KB
/
commandpalettesvg.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
// Copyright (c) Jupyter Development Team.
// Distributed under the terms of the Modified BSD License.
import { h, VirtualElement } from '@lumino/virtualdom';
import { CommandPalette } from '@lumino/widgets';
import { checkIcon, filterListIcon } from './iconimports';
import { iconStyle } from '../style';
import { classes } from '../utils';
const searchHeaderIcon = filterListIcon.bindprops({
justify: 'center',
kind: 'commandPaletteHeader'
});
export namespace CommandPaletteSvg {
/**
* a modified implementation of the CommandPalette Renderer
*/
export class Renderer extends CommandPalette.Renderer {
/**
* Render the virtual element for a command palette header.
*
* @param data - The data to use for rendering the header.
*
* @returns A virtual element representing the header.
*/
renderHeader(data: CommandPalette.IHeaderRenderData): VirtualElement {
const content = this.formatHeader(data);
return h.li(
{
className: classes(
'lm-CommandPalette-header',
'jp-icon-hoverShow',
/* <DEPRECATED> */
'p-CommandPalette-header'
/* </DEPRECATED> */
)
},
content,
h.span(searchHeaderIcon)
);
}
/**
* Render the icon for a command palette item.
*
* @param data - The data to use for rendering the icon.
*
* @returns A virtual element representing the icon.
*/
renderItemIcon(data: CommandPalette.IItemRenderData): VirtualElement {
const className = this.createIconClass(data);
if (data.item.isToggled) {
// check mark icon takes precedence
return h.div({ className }, checkIcon, data.item.iconLabel);
}
/* <DEPRECATED> */
if (typeof data.item.icon === 'string') {
return h.div({ className }, data.item.iconLabel);
}
/* </DEPRECATED> */
// if data.item.icon is undefined, it will be ignored
return h.div({ className }, data.item.icon!, data.item.iconLabel);
}
/**
* Create the class name for the command item icon.
*
* @param data - The data to use for the class name.
*
* @returns The full class name for the item icon.
*/
createIconClass(data: CommandPalette.IItemRenderData): string {
let name = 'lm-CommandPalette-itemIcon';
/* <DEPRECATED> */
name += ' p-CommandPalette-itemIcon';
/* </DEPRECATED> */
return classes(
iconStyle({ justify: 'center', kind: 'commandPaletteItem' }),
data.item.iconClass,
name
);
}
}
export const defaultRenderer = new Renderer();
}