react-schema-based-json-editor
Version:
A reactjs component of schema based json editor.
148 lines (147 loc) • 8.46 kB
JavaScript
import { __extends } from "tslib";
import * as React from 'react';
import * as common from 'schema-based-json-editor';
import { Editor } from './editor';
import { Icon } from './icon';
import { Optional } from './optional';
import { Description } from './description';
var ObjectEditor = /** @class */ (function (_super) {
__extends(ObjectEditor, _super);
function ObjectEditor(props) {
var _this = _super.call(this, props) || this;
_this.collapsed = _this.props.schema.collapsed;
_this.invalidProperties = [];
_this.properties = [];
_this.filter = '';
_this.collapseOrExpand = function () {
_this.collapsed = !_this.collapsed;
_this.setState({ collapsed: _this.collapsed });
};
_this.toggleOptional = function () {
_this.value = common.toggleOptional(_this.value, _this.props.schema, _this.props.initialValue);
_this.validate();
_this.setState({ value: _this.value });
_this.props.updateValue(_this.value, _this.invalidProperties.length === 0);
};
_this.onFilterChange = function (e) {
_this.filter = e.currentTarget.value;
_this.setState({ filter: _this.filter });
};
_this.onChange = function (property, value, isValid) {
_this.value[property] = value;
for (var p in _this.props.schema.properties) {
if (_this.isRequired(p) === false) {
_this.value[p] = undefined;
}
}
_this.validate();
_this.setState({ value: _this.value });
common.recordInvalidPropertiesOfObject(_this.invalidProperties, isValid, property);
_this.props.updateValue(_this.value, !_this.errorMessage && _this.invalidProperties.length === 0);
};
_this.value = common.getDefaultValue(_this.props.required, _this.props.schema, _this.props.initialValue);
_this.validate();
if (_this.value !== undefined) {
var _loop_1 = function (property) {
if (this_1.props.schema.properties.hasOwnProperty(property)) {
var schema = this_1.props.schema.properties[property];
var propertyName = schema.propertyName || property;
if (this_1.isRequired(property) !== false) {
var required = this_1.props.schema.required && this_1.props.schema.required.some(function (r) { return r === property; });
this_1.value[propertyName] = common.getDefaultValue(required, schema, this_1.value[propertyName]);
}
this_1.properties.push({
property: property,
propertyName: propertyName,
schema: schema
});
}
};
var this_1 = this;
for (var property in _this.props.schema.properties) {
_loop_1(property);
}
_this.properties = _this.properties.sort(common.compare);
}
return _this;
}
ObjectEditor.prototype.componentDidMount = function () {
this.props.updateValue(this.value, this.invalidProperties.length === 0);
};
ObjectEditor.prototype.render = function () {
var _this = this;
var childrenElement = (!this.collapsed && this.value !== undefined)
? this.properties.filter(function (p) { return common.filterObject(p, _this.filter) && _this.isRequired(p.property) !== false; })
.map(function (_a) {
var property = _a.property, propertyName = _a.propertyName, schema = _a.schema;
return React.createElement(Editor, { key: property + _this.isRequired(property), schema: schema, getReference: _this.props.getReference, title: schema.title || propertyName, initialValue: _this.value[propertyName], updateValue: function (value, isValid) { return _this.onChange(propertyName, value, isValid); }, theme: _this.props.theme, icon: _this.props.icon, locale: _this.props.locale, required: _this.isRequired(property), readonly: _this.isReadOnly, dragula: _this.props.dragula, md: _this.props.md, hljs: _this.props.hljs, forceHttps: _this.props.forceHttps, disableCollapse: _this.props.disableCollapse, minItemCountIfNeedFilter: _this.props.minItemCountIfNeedFilter, noSelect2: _this.props.noSelect2, monacoEditor: _this.props.monacoEditor });
})
: [];
var filterElement = (!this.collapsed && this.value !== undefined && this.showFilter)
? React.createElement("div", { className: this.props.theme.row },
React.createElement("input", { className: this.props.theme.input, onChange: this.onFilterChange, placeholder: this.props.locale.info.search, defaultValue: this.filter }))
: null;
return (React.createElement("div", { className: this.className },
React.createElement("h3", null,
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.props.disableCollapse, onClick: this.collapseOrExpand, text: this.collapsed ? this.props.icon.expand : this.props.icon.collapse, theme: this.props.theme, icon: this.props.icon }),
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(Description, { theme: this.props.theme, message: this.props.schema.description }),
React.createElement("div", { className: this.props.theme.card },
filterElement,
childrenElement),
React.createElement(Description, { theme: this.props.theme, message: this.errorMessage })));
};
ObjectEditor.prototype.isRequired = function (property) {
return common.isRequired(this.props.schema.required, this.value, this.props.schema, property);
};
ObjectEditor.prototype.validate = function () {
this.errorMessage = common.getErrorMessageOfObject(this.value, this.props.schema, this.props.locale);
};
Object.defineProperty(ObjectEditor.prototype, "isReadOnly", {
get: function () {
return this.props.readonly || this.props.schema.readonly;
},
enumerable: false,
configurable: true
});
Object.defineProperty(ObjectEditor.prototype, "hasDeleteButtonFunction", {
get: function () {
return this.props.onDelete && !this.isReadOnly;
},
enumerable: false,
configurable: true
});
Object.defineProperty(ObjectEditor.prototype, "titleToShow", {
get: function () {
if (this.props.onDelete) {
return common.getTitle(common.findTitle(this.value, this.properties), this.props.title, this.props.schema.title);
}
return common.getTitle(this.props.title, this.props.schema.title);
},
enumerable: false,
configurable: true
});
Object.defineProperty(ObjectEditor.prototype, "showFilter", {
get: function () {
var _this = this;
var propertyCount = this.properties.filter(function (p) { return _this.isRequired(p.property) !== false; }).length;
var minItemCountIfNeedFilter = typeof this.props.minItemCountIfNeedFilter === 'number' ? this.props.minItemCountIfNeedFilter : common.minItemCountIfNeedFilter;
return propertyCount >= minItemCountIfNeedFilter;
},
enumerable: false,
configurable: true
});
Object.defineProperty(ObjectEditor.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
});
return ObjectEditor;
}(React.Component));
export { ObjectEditor };