forked from jupyterlab/jupyterlab
-
Notifications
You must be signed in to change notification settings - Fork 0
/
collapser.tsx
150 lines (132 loc) · 3.32 KB
/
collapser.tsx
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/
import { ReactWidget } from '@jupyterlab/apputils';
import * as React from 'react';
import { Cell, CodeCell } from './widget';
/**
* The CSS class added to all collapsers.
*/
const COLLAPSER_CLASS = 'jp-Collapser';
/**
* The CSS class added to the collapser child.
*/
const COLLAPSER_CHILD_CLASS = 'jp-Collapser-child';
/**
* The CSS class added to input collapsers.
*/
const INPUT_COLLAPSER = 'jp-InputCollapser';
/**
* The CSS class added to output collapsers.
*/
const OUTPUT_COLLAPSER = 'jp-OutputCollapser';
/**
* The CSS class added the collapser child when collapsed.
*/
const MOD_COLLAPSED_CLASS = 'jp-mod-collapsed';
/**
* Abstract collapser base class.
*
* ### Notes
* A collapser is a visible div to the left of a cell's
* input/output that a user can click on to collapse the
* input/output.
*/
export abstract class Collapser extends ReactWidget {
/**
* Construct a new collapser.
*/
constructor() {
super();
this.addClass(COLLAPSER_CLASS);
}
/**
* Is the input/output of the parent collapsed.
*/
get collapsed(): boolean {
return false;
}
/**
* Render the collapser with the virtual DOM.
*/
protected render(): React.ReactElement<any> {
let childClass = COLLAPSER_CHILD_CLASS;
if (this.collapsed) {
childClass += ` ${MOD_COLLAPSED_CLASS}`;
}
return <div className={childClass} onClick={e => this.handleClick(e)} />;
}
/**
* Handle the click event.
*/
protected abstract handleClick(e: React.MouseEvent<HTMLDivElement>): void;
}
/**
* A collapser subclass to collapse a cell's input area.
*/
export class InputCollapser extends Collapser {
/**
* Construct a new input collapser.
*/
constructor() {
super();
this.addClass(INPUT_COLLAPSER);
}
/**
* Is the cell's input collapsed?
*/
get collapsed(): boolean {
let cell = this.parent.parent as Cell;
if (cell) {
return cell.inputHidden;
} else {
return false;
}
}
/**
* Handle a click event for the user to collapse the cell's input.
*/
protected handleClick(e: React.MouseEvent<HTMLDivElement>): void {
let cell = this.parent.parent as Cell;
if (cell) {
cell.inputHidden = !cell.inputHidden;
}
/* We need this until we watch the cell state */
this.update();
}
}
/**
* A collapser subclass to collapse a cell's output area.
*/
export class OutputCollapser extends Collapser {
/**
* Construct a new output collapser.
*/
constructor() {
super();
this.addClass(OUTPUT_COLLAPSER);
}
/**
* Is the cell's output collapsed?
*/
get collapsed(): boolean {
let cell = this.parent.parent as CodeCell;
if (cell) {
return cell.outputHidden;
} else {
return false;
}
}
/**
* Handle a click event for the user to collapse the cell's output.
*/
protected handleClick(e: React.MouseEvent<HTMLDivElement>): void {
let cell = this.parent.parent as CodeCell;
if (cell) {
cell.outputHidden = !cell.outputHidden;
}
/* We need this until we watch the cell state */
this.update();
}
}