-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.tsx
109 lines (93 loc) · 2.77 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
import * as React from 'react';
import ObjectField from '@rjsf/core/lib/components/fields/ObjectField';
import { utils as rjsfUtils } from '@rjsf/core';
import { UnControlled } from 'react-codemirror2';
import * as CodeMirror from 'codemirror';
import { JSONExt } from '@lumino/coreutils';
export class JSONObjectField extends ObjectField {
protected _editor: CodeMirror.Editor;
render() {
const {
uiSchema,
formData,
idSchema,
name,
registry = rjsfUtils.getDefaultRegistry()
} = this.props;
const { definitions } = registry;
const schema = (rjsfUtils as any).retrieveSchema(
this.props.schema,
definitions,
formData
);
let title;
if (this.state.wasPropertyKeyModified) {
title = name;
} else {
title = schema.title === undefined ? name : schema.title;
}
const isLight = !!document.querySelector(
'body[data-jp-theme-light="true"]'
);
const description = uiSchema['ui:description'] || schema.description;
const { canSave } = this;
const options = {
mode: 'application/json',
theme: isLight ? 'default' : 'zenburn',
matchBrackets: true,
autoCloseBrackets: true
};
return (
<>
<legend>{title}</legend>
<p className="field-description">{description}</p>
<div className="jp-SchemaForm-JSONObject-buttons">
<button
id={`${idSchema.$id}_revert`}
className="jp-JSONEditor-revertButton"
title="Revert to Previous Notebook Metadata"
onClick={this.onReset}
></button>
<button
id={`${idSchema.$id}_commit`}
disabled={!canSave}
className="jp-JSONEditor-commitButton"
title="Commit to Notebook Metadata"
onClick={this.onSave}
></button>
</div>
<div id={idSchema.$id}>
<UnControlled
editorDidMount={editor => (this._editor = editor)}
value={JSON.stringify(formData, null, 2)}
options={options}
onChange={this.onChange}
/>
</div>
</>
);
}
get canSave() {
return (
!this.state.editorError &&
this.state.editorValue &&
!JSONExt.deepEqual(this.state.editorValue, this.props.formData)
);
}
onReset = () => {
this._editor
.getDoc()
.setValue(JSON.stringify(this.props.formData, null, 2));
};
onSave = () => {
this.props.onChange(this.state.editorValue);
};
onChange = (editor: CodeMirror.Editor, data: any, value: string) => {
try {
const jsonValue = JSON.parse(value);
this.setState({ editorValue: jsonValue, editorError: false });
} catch (err) {
this.setState({ editorValue: null, editorError: true });
}
};
}