terrier-engine 4.4.28 → 4.4.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/terrier/parts/panel-part.ts +49 -4
package/package.json
CHANGED
|
@@ -1,11 +1,27 @@
|
|
|
1
1
|
import ContentPart from "./content-part"
|
|
2
2
|
import {PartTag} from "tuff-core/parts"
|
|
3
3
|
import Fragments from "../fragments"
|
|
4
|
+
import {untypedKey} from "tuff-core/messages";
|
|
4
5
|
|
|
6
|
+
export type CollapsibleConfig = {
|
|
7
|
+
collapsed?: Boolean
|
|
8
|
+
chevronSide: string
|
|
9
|
+
}
|
|
5
10
|
/**
|
|
6
11
|
* A part that renders content inside a panel.
|
|
7
12
|
*/
|
|
8
|
-
export default abstract class PanelPart<TState> extends ContentPart<TState> {
|
|
13
|
+
export default abstract class PanelPart<TState> extends ContentPart<TState & { collapsible?: CollapsibleConfig}> {
|
|
14
|
+
|
|
15
|
+
toggleCollapseKey = untypedKey()
|
|
16
|
+
|
|
17
|
+
async init() {
|
|
18
|
+
if (this.state.collapsible && !this.state.collapsible.chevronSide) {
|
|
19
|
+
this.state.collapsible.chevronSide = 'left'
|
|
20
|
+
this.onClick(this.toggleCollapseKey, _ => {
|
|
21
|
+
this.toggleCollapse()
|
|
22
|
+
})
|
|
23
|
+
}
|
|
24
|
+
}
|
|
9
25
|
|
|
10
26
|
getLoadingContainer() {
|
|
11
27
|
return this.element?.getElementsByClassName('tt-panel')[0]
|
|
@@ -24,6 +40,9 @@ export default abstract class PanelPart<TState> extends ContentPart<TState> {
|
|
|
24
40
|
panel.class(...this.panelClasses)
|
|
25
41
|
if (this._title?.length || this.hasActions('tertiary')) {
|
|
26
42
|
panel.div('.panel-header', header => {
|
|
43
|
+
if (this.state.collapsible?.chevronSide == 'left') {
|
|
44
|
+
this.renderChevron(header)
|
|
45
|
+
}
|
|
27
46
|
header.h2(h2 => {
|
|
28
47
|
if (this._icon) {
|
|
29
48
|
this.app.theme.renderIcon(h2, this._icon, 'link')
|
|
@@ -33,12 +52,38 @@ export default abstract class PanelPart<TState> extends ContentPart<TState> {
|
|
|
33
52
|
header.div('.tertiary-actions', actions => {
|
|
34
53
|
this.theme.renderActions(actions, this.getActions('tertiary'))
|
|
35
54
|
})
|
|
55
|
+
if (this.state.collapsible?.chevronSide == 'right') {
|
|
56
|
+
this.renderChevron(header)
|
|
57
|
+
}
|
|
36
58
|
})
|
|
37
59
|
}
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
60
|
+
if (!this.state.collapsible?.collapsed) {
|
|
61
|
+
panel.div('.panel-content', ...this.contentClasses, content => {
|
|
62
|
+
this.renderContent(content)
|
|
63
|
+
})
|
|
64
|
+
}
|
|
65
|
+
|
|
41
66
|
Fragments.panelActions(panel, this.getAllActions(), this.theme)
|
|
42
67
|
})
|
|
43
68
|
}
|
|
69
|
+
|
|
70
|
+
toggleCollapse() {
|
|
71
|
+
if (this.state.collapsible) {
|
|
72
|
+
this.state.collapsible.collapsed = !this.state.collapsible?.collapsed
|
|
73
|
+
this.dirty()
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
renderChevron(parent: PartTag) {
|
|
78
|
+
if (this.state.collapsible) {
|
|
79
|
+
parent.div('.collapsible-chevron', chev => {
|
|
80
|
+
this.renderChevronIcon(chev, this.state.collapsible?.collapsed!)
|
|
81
|
+
parent.emitClick(this.toggleCollapseKey)
|
|
82
|
+
})
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
renderChevronIcon(parent: PartTag, isCollapsed: Boolean) {
|
|
87
|
+
this.app.theme.renderIcon(parent, isCollapsed ? 'glyp-chevron_right' : 'glyp-chevron_down', 'white')
|
|
88
|
+
}
|
|
44
89
|
}
|