react-schema-based-json-editor
Version:
A reactjs component of schema based json editor.
316 lines (315 loc) • 14.9 kB
JavaScript
import { __extends } from "tslib";
import * as React from 'react';
import * as common from 'schema-based-json-editor';
import { Icon } from './icon';
import { Optional } from './optional';
import { Description } from './description';
import { MarkdownTip } from 'markdown-tip-react';
import { Select2 } from 'select2-react-component';
import { FileUploader } from 'file-uploader-react-component';
var StringEditor = /** @class */ (function (_super) {
__extends(StringEditor, _super);
function StringEditor(props) {
var _this = _super.call(this, props) || this;
_this.collapsed = false;
_this.willRender = false;
_this.onChange = function (e) {
_this.value = e.currentTarget.value;
_this.validate();
_this.setState({ value: _this.value });
_this.props.updateValue(_this.value, !_this.errorMessage);
};
_this.toggleOptional = function () {
_this.value = common.toggleOptional(_this.value, _this.props.schema, _this.props.initialValue);
_this.validate();
_this.willRender = true;
_this.setState({ value: _this.value });
_this.props.updateValue(_this.value, !_this.errorMessage);
};
_this.collapseOrExpand = function () {
_this.willRender = true;
_this.collapsed = !_this.collapsed;
_this.setState({ collapsed: _this.collapsed });
};
_this.value = common.getDefaultValue(_this.props.required, _this.props.schema, _this.props.initialValue);
_this.validate();
_this.monacoEditorRef = React.createRef();
return _this;
}
StringEditor.prototype.componentDidMount = function () {
var _this = this;
this.props.updateValue(this.value, !this.errorMessage);
if (this.props.monacoEditor && this.monacoEditorRef.current) {
this.monacoCodeEditor = this.props.monacoEditor.create(this.monacoEditorRef.current, {
value: this.value,
language: 'json',
minimap: { enabled: false },
lineNumbers: 'off'
});
var timer_1;
this.monacoCodeEditor.onDidChangeModelContent(function (e) {
clearTimeout(timer_1);
timer_1 = setTimeout(function () {
_this.value = _this.monacoCodeEditor.getValue();
_this.validate();
_this.setState({ value: _this.value });
_this.props.updateValue(_this.value, !_this.errorMessage);
}, 500);
});
}
};
StringEditor.prototype.shouldComponentUpdate = function (nextProps, nextState) {
if (this.willRender) {
this.willRender = false;
return true;
}
return this.props.initialValue !== nextProps.initialValue;
};
StringEditor.prototype.componentWillUnmount = function () {
if (this.monacoCodeEditor) {
this.monacoCodeEditor.dispose();
}
};
StringEditor.prototype.render = function () {
var _this = this;
var fileUploader = this.canUpload ? (React.createElement(FileUploader, { locale: this.props.locale.fileUploaderLocale, fileGot: function (e) { return _this.fileGot(e); } })) : null;
var textarea = null;
if (this.useTextArea) {
if (this.props.monacoEditor && this.props.schema.format === 'json') {
textarea = (React.createElement("div", { ref: this.monacoEditorRef, style: {
height: '400px',
width: '90%',
display: this.collapsed ? 'none' : undefined
} }));
}
else {
textarea = (React.createElement("textarea", { className: this.errorMessage ? this.props.theme.errorTextarea : this.props.theme.textarea, onChange: this.onChange, defaultValue: this.value, rows: 10, readOnly: this.isReadOnly, disabled: this.isReadOnly }));
}
}
var input = this.useInput ? (React.createElement("input", { className: this.errorMessage ? this.props.theme.errorInput : this.props.theme.input, type: this.props.schema.format, step: this.props.schema.step || 1, onChange: this.onChange, defaultValue: this.value, readOnly: this.isReadOnly, disabled: this.isReadOnly })) : null;
var select = null;
if (this.useSelect) {
if (this.useSelectComponent) {
var options = this.options.map(function (op) { return React.createElement("option", { key: op.value, value: op.value }, op.label); });
select = React.createElement("select", { value: this.value, className: this.props.theme.select, disabled: this.isReadOnly, onChange: function (e) { return _this.updateSelection(e.target.value); } }, options);
}
else if (this.useSelect2Component) {
select = React.createElement(Select2, { data: this.options, value: this.value, disabled: this.isReadOnly, update: function (e) { return _this.updateSelection(e); } });
}
else if (this.useRadioBoxComponent) {
var options = this.options.map(function (option) { return React.createElement("span", { key: option.value, className: _this.props.theme.radiobox },
React.createElement("label", null,
React.createElement("input", { type: 'radio', onChange: function () { return _this.updateSelection(option.value); }, checked: _this.value === option.value, disabled: _this.isReadOnly }),
option.label)); });
select = React.createElement("div", null, options);
}
}
var imagePreview = this.willPreviewImage ? React.createElement("img", { style: common.imagePreviewStyle, src: this.getImageUrl }) : null;
var markdownTip = this.useTextArea && !this.collapsed && this.willPreviewMarkdown ? React.createElement(MarkdownTip, { locale: this.props.locale.markdownTipLocale }) : null;
var markdownPreview = this.willPreviewMarkdown ? React.createElement("div", { dangerouslySetInnerHTML: { __html: this.getMarkdown } }) : null;
var codePreview = this.willPreviewCode ? React.createElement("pre", null,
React.createElement("code", { dangerouslySetInnerHTML: { __html: this.getCode } })) : null;
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(Icon, { valid: this.canPreview, onClick: this.collapseOrExpand, text: this.collapsed ? this.props.icon.expand : this.props.icon.collapse, theme: this.props.theme, icon: this.props.icon }))),
fileUploader,
textarea,
input,
select,
imagePreview,
markdownTip,
markdownPreview,
codePreview,
React.createElement(Description, { theme: this.props.theme, message: this.props.schema.description }),
React.createElement(Description, { theme: this.props.theme, message: this.errorMessage })));
};
Object.defineProperty(StringEditor.prototype, "isReadOnly", {
get: function () {
return this.props.readonly || this.props.schema.readonly;
},
enumerable: false,
configurable: true
});
Object.defineProperty(StringEditor.prototype, "hasDeleteButtonFunction", {
get: function () {
return this.props.onDelete && !this.isReadOnly;
},
enumerable: false,
configurable: true
});
Object.defineProperty(StringEditor.prototype, "useTextArea", {
get: function () {
return this.value !== undefined
&& (this.props.schema.enum === undefined || this.isReadOnly)
&& (this.props.schema.format === 'textarea' || this.props.schema.format === 'code' || this.props.schema.format === 'json' || this.props.schema.format === 'markdown');
},
enumerable: false,
configurable: true
});
Object.defineProperty(StringEditor.prototype, "useInput", {
get: function () {
return this.value !== undefined
&& !this.collapsed
&& (this.props.schema.enum === undefined || this.isReadOnly)
&& (this.props.schema.format !== 'textarea' && this.props.schema.format !== 'code' && this.props.schema.format !== 'json' && this.props.schema.format !== 'markdown');
},
enumerable: false,
configurable: true
});
Object.defineProperty(StringEditor.prototype, "useSelect", {
get: function () {
return this.value !== undefined && this.props.schema.enum !== undefined && !this.isReadOnly;
},
enumerable: false,
configurable: true
});
Object.defineProperty(StringEditor.prototype, "useSelect2Component", {
get: function () {
return this.useSelect && !this.props.noSelect2 && this.props.schema.format !== 'select' && this.props.schema.format !== 'radiobox';
},
enumerable: false,
configurable: true
});
Object.defineProperty(StringEditor.prototype, "useSelectComponent", {
get: function () {
return this.useSelect && (this.props.schema.format === 'select' || this.props.noSelect2);
},
enumerable: false,
configurable: true
});
Object.defineProperty(StringEditor.prototype, "useRadioBoxComponent", {
get: function () {
return this.useSelect && this.props.schema.format === 'radiobox';
},
enumerable: false,
configurable: true
});
Object.defineProperty(StringEditor.prototype, "canPreviewImage", {
get: function () {
return common.isImageUrl(this.value) || common.isBase64Image(this.value);
},
enumerable: false,
configurable: true
});
Object.defineProperty(StringEditor.prototype, "canPreviewMarkdown", {
get: function () {
return this.props.md && this.props.schema.format === 'markdown';
},
enumerable: false,
configurable: true
});
Object.defineProperty(StringEditor.prototype, "canPreviewCode", {
get: function () {
return this.props.hljs && this.props.schema.format === 'code';
},
enumerable: false,
configurable: true
});
Object.defineProperty(StringEditor.prototype, "canPreview", {
get: function () {
return (!!this.value) && (this.canPreviewImage || this.canPreviewMarkdown || this.canPreviewCode);
},
enumerable: false,
configurable: true
});
Object.defineProperty(StringEditor.prototype, "getImageUrl", {
get: function () {
return this.props.forceHttps ? common.replaceProtocal(this.value) : this.value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(StringEditor.prototype, "getMarkdown", {
get: function () {
return this.props.md.render(this.value);
},
enumerable: false,
configurable: true
});
Object.defineProperty(StringEditor.prototype, "getCode", {
get: function () {
return this.props.hljs.highlightAuto(this.value).value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(StringEditor.prototype, "willPreviewImage", {
get: function () {
return this.value && !this.collapsed && this.canPreviewImage;
},
enumerable: false,
configurable: true
});
Object.defineProperty(StringEditor.prototype, "willPreviewMarkdown", {
get: function () {
return this.value && !this.collapsed && this.canPreviewMarkdown;
},
enumerable: false,
configurable: true
});
Object.defineProperty(StringEditor.prototype, "willPreviewCode", {
get: function () {
return this.value && !this.collapsed && this.canPreviewCode;
},
enumerable: false,
configurable: true
});
Object.defineProperty(StringEditor.prototype, "titleToShow", {
get: function () {
return common.getTitle(this.props.title, this.props.schema.title);
},
enumerable: false,
configurable: true
});
Object.defineProperty(StringEditor.prototype, "options", {
get: function () {
return common.getOptions(this.props.schema);
},
enumerable: false,
configurable: true
});
Object.defineProperty(StringEditor.prototype, "canUpload", {
get: function () {
return this.props.schema.format === 'base64';
},
enumerable: false,
configurable: true
});
Object.defineProperty(StringEditor.prototype, "className", {
get: function () {
var rowClass = this.errorMessage ? this.props.theme.errorRow : this.props.theme.row;
return this.props.schema.className ? rowClass + ' ' + this.props.schema.className : rowClass;
},
enumerable: false,
configurable: true
});
StringEditor.prototype.updateSelection = function (value) {
this.value = value.toString();
this.validate();
this.setState({ value: this.value });
this.props.updateValue(this.value, !this.errorMessage);
};
StringEditor.prototype.fileGot = function (file) {
var _this = this;
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
_this.value = reader.result;
_this.validate();
_this.setState({ value: _this.value });
_this.props.updateValue(_this.value, !_this.errorMessage);
};
reader.onerror = function (error) {
console.log(error);
};
};
StringEditor.prototype.validate = function () {
this.errorMessage = common.getErrorMessageOfString(this.value, this.props.schema, this.props.locale);
};
return StringEditor;
}(React.Component));
export { StringEditor };