1 |
|
2 |
|
3 |
|
4 |
|
5 | import { PanelLayout } from '@lumino/widgets';
|
6 | import { Widget } from '@lumino/widgets';
|
7 | import { CodeEditorWrapper } from '@jupyterlab/codeeditor';
|
8 | import { CodeMirrorEditorFactory } from '@jupyterlab/codemirror';
|
9 |
|
10 |
|
11 |
|
12 | const INPUT_AREA_CLASS = 'jp-InputArea';
|
13 |
|
14 |
|
15 |
|
16 | const INPUT_AREA_PROMPT_CLASS = 'jp-InputArea-prompt';
|
17 |
|
18 |
|
19 |
|
20 | const INPUT_PROMPT_CLASS = 'jp-InputPrompt';
|
21 |
|
22 |
|
23 |
|
24 | const INPUT_AREA_EDITOR_CLASS = 'jp-InputArea-editor';
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
|
30 |
|
31 | export class InputArea extends Widget {
|
32 | |
33 |
|
34 |
|
35 | constructor(options) {
|
36 | super();
|
37 | this.addClass(INPUT_AREA_CLASS);
|
38 | const model = (this.model = options.model);
|
39 | const contentFactory = (this.contentFactory =
|
40 | options.contentFactory || InputArea.defaultContentFactory);
|
41 |
|
42 | const prompt = (this._prompt = contentFactory.createInputPrompt());
|
43 | prompt.addClass(INPUT_AREA_PROMPT_CLASS);
|
44 |
|
45 | const editorOptions = {
|
46 | model,
|
47 | factory: contentFactory.editorFactory,
|
48 | updateOnShow: options.updateOnShow
|
49 | };
|
50 | const editor = (this._editor = new CodeEditorWrapper(editorOptions));
|
51 | editor.addClass(INPUT_AREA_EDITOR_CLASS);
|
52 | const layout = (this.layout = new PanelLayout());
|
53 | layout.addWidget(prompt);
|
54 | if (!options.placeholder) {
|
55 | layout.addWidget(editor);
|
56 | }
|
57 | }
|
58 | |
59 |
|
60 |
|
61 | get editorWidget() {
|
62 | return this._editor;
|
63 | }
|
64 | |
65 |
|
66 |
|
67 | get editor() {
|
68 | return this._editor.editor;
|
69 | }
|
70 | |
71 |
|
72 |
|
73 | get promptNode() {
|
74 | return this._prompt.node;
|
75 | }
|
76 | |
77 |
|
78 |
|
79 | get renderedInput() {
|
80 | return this._rendered;
|
81 | }
|
82 | |
83 |
|
84 |
|
85 | renderInput(widget) {
|
86 | const layout = this.layout;
|
87 | if (this._rendered) {
|
88 | this._rendered.parent = null;
|
89 | }
|
90 | this._editor.hide();
|
91 | this._rendered = widget;
|
92 | layout.addWidget(widget);
|
93 | }
|
94 | |
95 |
|
96 |
|
97 | showEditor() {
|
98 | if (this._rendered) {
|
99 | this._rendered.parent = null;
|
100 | }
|
101 | this._editor.show();
|
102 | }
|
103 | |
104 |
|
105 |
|
106 | setPrompt(value) {
|
107 | this._prompt.executionCount = value;
|
108 | }
|
109 | |
110 |
|
111 |
|
112 | dispose() {
|
113 |
|
114 | if (this.isDisposed) {
|
115 | return;
|
116 | }
|
117 | this._prompt = null;
|
118 | this._editor = null;
|
119 | this._rendered = null;
|
120 | super.dispose();
|
121 | }
|
122 | }
|
123 |
|
124 |
|
125 |
|
126 | (function (InputArea) {
|
127 | |
128 |
|
129 |
|
130 |
|
131 |
|
132 | class ContentFactory {
|
133 | |
134 |
|
135 |
|
136 | constructor(options = {}) {
|
137 | this._editor = options.editorFactory || InputArea.defaultEditorFactory;
|
138 | }
|
139 | |
140 |
|
141 |
|
142 | get editorFactory() {
|
143 | return this._editor;
|
144 | }
|
145 | |
146 |
|
147 |
|
148 | createInputPrompt() {
|
149 | return new InputPrompt();
|
150 | }
|
151 | }
|
152 | InputArea.ContentFactory = ContentFactory;
|
153 | |
154 |
|
155 |
|
156 | function _createDefaultEditorFactory() {
|
157 | const editorServices = new CodeMirrorEditorFactory();
|
158 | return editorServices.newInlineEditor;
|
159 | }
|
160 | |
161 |
|
162 |
|
163 | InputArea.defaultEditorFactory = _createDefaultEditorFactory();
|
164 | |
165 |
|
166 |
|
167 | InputArea.defaultContentFactory = new ContentFactory({});
|
168 | })(InputArea || (InputArea = {}));
|
169 |
|
170 |
|
171 |
|
172 | export class InputPrompt extends Widget {
|
173 | |
174 |
|
175 |
|
176 | constructor() {
|
177 | super();
|
178 | this._executionCount = null;
|
179 | this.addClass(INPUT_PROMPT_CLASS);
|
180 | }
|
181 | |
182 |
|
183 |
|
184 | get executionCount() {
|
185 | return this._executionCount;
|
186 | }
|
187 | set executionCount(value) {
|
188 | this._executionCount = value;
|
189 | if (value === null) {
|
190 | this.node.textContent = ' ';
|
191 | }
|
192 | else {
|
193 | this.node.textContent = `[${value || ' '}]:`;
|
194 | }
|
195 | }
|
196 | }
|
197 |
|
\ | No newline at end of file |