-
-
Notifications
You must be signed in to change notification settings - Fork 3.3k
/
index.tsx
114 lines (96 loc) · 2.69 KB
/
index.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
// Copyright (c) Jupyter Development Team.
// Distributed under the terms of the Modified BSD License.
/**
* @packageDocumentation
* @module json-extension
*/
import { IRenderMime } from '@jupyterlab/rendermime-interfaces';
import { Printing } from '@jupyterlab/apputils';
import { nullTranslator, ITranslator } from '@jupyterlab/translation';
import { Message } from '@lumino/messaging';
import { Widget } from '@lumino/widgets';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Component } from './component';
import { JSONValue, JSONObject } from '@lumino/coreutils';
/**
* The CSS class to add to the JSON Widget.
*/
const CSS_CLASS = 'jp-RenderedJSON';
/**
* The MIME type for JSON.
*/
export const MIME_TYPE = 'application/json';
/**
* A renderer for JSON data.
*/
export class RenderedJSON
extends Widget
implements IRenderMime.IRenderer, Printing.IPrintable {
/**
* Create a new widget for rendering JSON.
*/
constructor(options: IRenderMime.IRendererOptions) {
super();
this.addClass(CSS_CLASS);
this.addClass('CodeMirror');
this.addClass('cm-s-jupyter');
this._mimeType = options.mimeType;
this.translator = options.translator || nullTranslator;
}
[Printing.symbol]() {
return () => Printing.printWidget(this);
}
/**
* Render JSON into this widget's node.
*/
renderModel(model: IRenderMime.IMimeModel): Promise<void> {
const data = (model.data[this._mimeType] || {}) as NonNullable<JSONValue>;
const metadata = (model.metadata[this._mimeType] || {}) as JSONObject;
return new Promise<void>((resolve, reject) => {
ReactDOM.render(
<Component
data={data}
metadata={metadata}
translator={this.translator}
/>,
this.node,
() => {
resolve();
}
);
});
}
/**
* Called before the widget is detached from the DOM.
*/
protected onBeforeDetach(msg: Message): void {
// Unmount the component so it can tear down.
ReactDOM.unmountComponentAtNode(this.node);
}
translator: ITranslator;
private _mimeType: string;
}
/**
* A mime renderer factory for JSON data.
*/
export const rendererFactory: IRenderMime.IRendererFactory = {
safe: true,
mimeTypes: [MIME_TYPE],
createRenderer: options => new RenderedJSON(options)
};
const extensions: IRenderMime.IExtension | IRenderMime.IExtension[] = [
{
id: '@jupyterlab/json-extension:factory',
rendererFactory,
rank: 0,
dataType: 'json',
documentWidgetFactoryOptions: {
name: 'JSON',
primaryFileType: 'json',
fileTypes: ['json', 'notebook', 'geojson'],
defaultFor: ['json']
}
}
];
export default extensions;