1 |
|
2 |
|
3 |
|
4 |
|
5 | import * as React from 'react';
|
6 | import { ReactWidget } from '@jupyterlab/apputils';
|
7 | import { ellipsesIcon } from '@jupyterlab/ui-components';
|
8 |
|
9 |
|
10 |
|
11 | const PLACEHOLDER_CLASS = 'jp-Placeholder';
|
12 |
|
13 |
|
14 |
|
15 | const INPUT_PROMPT_CLASS = 'jp-Placeholder-prompt jp-InputPrompt';
|
16 |
|
17 |
|
18 |
|
19 | const OUTPUT_PROMPT_CLASS = 'jp-Placeholder-prompt jp-OutputPrompt';
|
20 |
|
21 |
|
22 |
|
23 | const CONTENT_CLASS = 'jp-Placeholder-content';
|
24 |
|
25 |
|
26 |
|
27 | const INPUT_PLACEHOLDER_CLASS = 'jp-InputPlaceholder';
|
28 |
|
29 |
|
30 |
|
31 | const OUTPUT_PLACEHOLDER_CLASS = 'jp-OutputPlaceholder';
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 | export class Placeholder extends ReactWidget {
|
40 | |
41 |
|
42 |
|
43 | constructor(callback) {
|
44 | super();
|
45 | this.addClass(PLACEHOLDER_CLASS);
|
46 | this._callback = callback;
|
47 | }
|
48 | |
49 |
|
50 |
|
51 | handleClick(e) {
|
52 | const callback = this._callback;
|
53 | callback(e);
|
54 | }
|
55 | }
|
56 |
|
57 |
|
58 |
|
59 | export class InputPlaceholder extends Placeholder {
|
60 | |
61 |
|
62 |
|
63 | constructor(callback) {
|
64 | super(callback);
|
65 | this.addClass(INPUT_PLACEHOLDER_CLASS);
|
66 | }
|
67 | |
68 |
|
69 |
|
70 | render() {
|
71 | return [
|
72 | React.createElement("div", { className: INPUT_PROMPT_CLASS, key: "input" }),
|
73 | React.createElement("div", { className: CONTENT_CLASS, onClick: e => this.handleClick(e), key: "content" },
|
74 | React.createElement(ellipsesIcon.react, { className: "jp-MoreHorizIcon", elementPosition: "center", height: "auto", width: "32px" }))
|
75 | ];
|
76 | }
|
77 | }
|
78 |
|
79 |
|
80 |
|
81 | export class OutputPlaceholder extends Placeholder {
|
82 | |
83 |
|
84 |
|
85 | constructor(callback) {
|
86 | super(callback);
|
87 | this.addClass(OUTPUT_PLACEHOLDER_CLASS);
|
88 | }
|
89 | |
90 |
|
91 |
|
92 | render() {
|
93 | return [
|
94 | React.createElement("div", { className: OUTPUT_PROMPT_CLASS, key: "output" }),
|
95 | React.createElement("div", { className: CONTENT_CLASS, onClick: e => this.handleClick(e), key: "content" },
|
96 | React.createElement(ellipsesIcon.react, { className: "jp-MoreHorizIcon", elementPosition: "center", height: "auto", width: "32px" }))
|
97 | ];
|
98 | }
|
99 | }
|
100 |
|
\ | No newline at end of file |