react-schema-based-json-editor
Version:
A reactjs component of schema based json editor.
95 lines (94 loc) • 4.35 kB
JavaScript
import { __extends } from "tslib";
import * as React from 'react';
import JSON5 from 'json5';
import * as common from 'schema-based-json-editor';
import { Icon } from './icon';
import { Optional } from './optional';
import { Description } from './description';
var AnyEditor = /** @class */ (function (_super) {
__extends(AnyEditor, _super);
function AnyEditor(props) {
var _this = _super.call(this, props) || this;
_this.toggleOptional = function () {
_this.value = common.toggleOptional(_this.value, _this.props.schema, _this.props.initialValue);
_this.setState({ value: _this.value });
_this.props.updateValue(_this.value, true);
};
_this.value = common.getDefaultValue(_this.props.required, _this.props.schema, _this.props.initialValue);
_this.monacoEditorRef = React.createRef();
return _this;
}
AnyEditor.prototype.componentDidMount = function () {
var _this = this;
if (this.props.monacoEditor && this.monacoEditorRef.current) {
this.monacoCodeEditor = this.props.monacoEditor.create(this.monacoEditorRef.current, {
value: 'export default ' + JSON5.stringify(this.value, null, 2),
language: 'javascript',
minimap: { enabled: false },
lineNumbers: 'off'
});
var timer_1;
this.monacoCodeEditor.onDidChangeModelContent(function (e) {
clearTimeout(timer_1);
timer_1 = setTimeout(function () {
try {
var value = _this.monacoCodeEditor.getValue();
if (value.indexOf('export default') === 0) {
value = value.substring('export default'.length);
}
_this.value = JSON5.parse(value);
_this.setState({ value: _this.value });
_this.props.updateValue(_this.value, true);
}
catch (_a) {
// do nothing
}
}, 500);
});
}
};
AnyEditor.prototype.render = function () {
return (React.createElement("div", { className: this.className },
React.createElement("label", { className: this.props.theme.title },
this.titleToShow,
React.createElement("div", { className: this.props.theme.buttonGroup, style: common.buttonGroupStyle },
React.createElement(Optional, { required: this.props.required, value: this.value, isReadOnly: this.isReadOnly, theme: this.props.theme, locale: this.props.locale, toggleOptional: this.toggleOptional }),
React.createElement(Icon, { valid: this.hasDeleteButtonFunction, onClick: this.props.onDelete, text: this.props.icon.delete, theme: this.props.theme, icon: this.props.icon }))),
React.createElement("div", { ref: this.monacoEditorRef, style: {
height: '400px',
width: '90%'
} }),
React.createElement(Description, { theme: this.props.theme, message: this.props.schema.description })));
};
Object.defineProperty(AnyEditor.prototype, "className", {
get: function () {
var rowClass = this.props.theme.row;
return this.props.schema.className ? rowClass + ' ' + this.props.schema.className : rowClass;
},
enumerable: false,
configurable: true
});
Object.defineProperty(AnyEditor.prototype, "titleToShow", {
get: function () {
return common.getTitle(this.props.title, this.props.schema.title);
},
enumerable: false,
configurable: true
});
Object.defineProperty(AnyEditor.prototype, "isReadOnly", {
get: function () {
return this.props.readonly || this.props.schema.readonly;
},
enumerable: false,
configurable: true
});
Object.defineProperty(AnyEditor.prototype, "hasDeleteButtonFunction", {
get: function () {
return this.props.onDelete && !this.isReadOnly;
},
enumerable: false,
configurable: true
});
return AnyEditor;
}(React.Component));
export { AnyEditor };