react-schema-based-json-editor
Version:
A reactjs component of schema based json editor.
211 lines (210 loc) • 11.2 kB
JavaScript
import { __extends } from "tslib";
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as common from 'schema-based-json-editor';
import { Select2 } from 'select2-react-component';
import { Editor } from './editor';
import { Icon } from './icon';
import { Optional } from './optional';
import { Description } from './description';
var ArrayEditor = /** @class */ (function (_super) {
__extends(ArrayEditor, _super);
function ArrayEditor(props) {
var _this = _super.call(this, props) || this;
_this.renderSwitch = 1;
_this.collapsed = _this.props.schema.collapsed;
_this.invalidIndexes = [];
_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.errorMessage && _this.invalidIndexes.length === 0);
};
_this.addItem = function () {
_this.value.push(common.getDefaultValue(true, _this.props.schema.items, undefined));
_this.setState({ value: _this.value });
_this.props.updateValue(_this.value, !_this.errorMessage && _this.invalidIndexes.length === 0);
};
_this.onChange = function (i, value, isValid) {
_this.value[i] = value;
_this.setState({ value: _this.value });
_this.validate();
common.recordInvalidIndexesOfArray(_this.invalidIndexes, isValid, i);
_this.props.updateValue(_this.value, !_this.errorMessage && _this.invalidIndexes.length === 0);
};
_this.onFilterChange = function (e) {
_this.filter = e.currentTarget.value;
_this.setState({ filter: _this.filter });
};
_this.onDeleteFunction = function (i) {
_this.value.splice(i, 1);
_this.renderSwitch = -_this.renderSwitch;
_this.setState({ value: _this.value, renderSwitch: _this.renderSwitch });
_this.validate();
_this.props.updateValue(_this.value, !_this.errorMessage && _this.invalidIndexes.length === 0);
};
_this.isChecked = function (value) {
return _this.value && _this.value.indexOf(value) !== -1;
};
_this.onChangeCheckbox = function (value) {
if (_this.value) {
var index = _this.value.indexOf(value);
if (index !== -1) {
_this.value.splice(index, 1);
}
else {
_this.value.push(value);
}
_this.validate();
_this.props.updateValue(_this.value, !_this.errorMessage && _this.invalidIndexes.length === 0);
}
};
_this.onChangeSelect2 = function (value) {
_this.value = value;
_this.validate();
_this.props.updateValue(_this.value, !_this.errorMessage && _this.invalidIndexes.length === 0);
};
_this.value = common.getDefaultValue(_this.props.required, _this.props.schema, _this.props.initialValue);
_this.validate();
return _this;
}
ArrayEditor.prototype.componentDidMount = function () {
var _this = this;
this.props.updateValue(this.value, !this.errorMessage && this.invalidIndexes.length === 0);
if (this.props.dragula) {
var container = common.findContainer(ReactDOM.findDOMNode(this).childNodes);
this.drak = this.props.dragula([container]);
this.drak.on('drop', function (el, target, source, sibling) {
if (_this.value) {
common.switchItem(_this.value, el, sibling);
_this.renderSwitch = -_this.renderSwitch;
_this.setState({ value: _this.value, renderSwitch: _this.renderSwitch });
_this.props.updateValue(_this.value, !_this.errorMessage && _this.invalidIndexes.length === 0);
}
});
}
};
ArrayEditor.prototype.componentWillUnmount = function () {
if (this.drak) {
this.drak.destroy();
}
};
ArrayEditor.prototype.render = function () {
var _this = this;
var childrenElement = this.getValue.map(function (p, i) { return ({ p: p, i: i }); })
.filter(function (_a) {
var p = _a.p, i = _a.i;
return common.filterArray(p, i, _this.props.schema.items, _this.filter);
})
.map(function (_a) {
var p = _a.p, i = _a.i;
return (React.createElement("div", { key: (1 + i) * _this.renderSwitch, "data-index": i, className: _this.props.theme.card },
React.createElement(Editor, { schema: _this.props.schema.items, title: String(i), getReference: _this.props.getReference, initialValue: _this.getValue[i], updateValue: function (value, isValid) { return _this.onChange(i, value, isValid); }, theme: _this.props.theme, icon: _this.props.icon, locale: _this.props.locale, required: true, readonly: _this.isReadOnly, onDelete: function () { return _this.onDeleteFunction(i); }, 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, defaultValue: this.filter }))
: null;
var element;
if (this.props.schema.enum) {
var format = void 0;
if (this.props.schema.format === 'select2' && !this.props.noSelect2) {
format = (React.createElement(Select2, { data: this.options, value: this.value, disabled: this.isReadOnly, multiple: true, update: function ($event) { return _this.onChangeSelect2($event); } }));
}
else {
format = this.options.map(function (option) { return (React.createElement("span", { key: option.value, className: _this.props.theme.checkbox },
React.createElement("label", null,
React.createElement("input", { type: 'checkbox', onChange: function () { return _this.onChangeCheckbox(option.value); }, checked: _this.isChecked(option.value), disabled: _this.isReadOnly }),
option.label))); });
}
element = (React.createElement("div", null, format));
}
else {
element = (React.createElement("div", { className: this.props.theme.card },
filterElement,
childrenElement));
}
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 && this.value && this.value.length > 0 && !this.props.schema.enum, 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.hasAddButton, onClick: this.addItem, text: this.props.icon.add, 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 }),
element,
React.createElement(Description, { theme: this.props.theme, message: this.errorMessage })));
};
ArrayEditor.prototype.validate = function () {
this.errorMessage = common.getErrorMessageOfArray(this.value, this.props.schema, this.props.locale);
};
Object.defineProperty(ArrayEditor.prototype, "isReadOnly", {
get: function () {
return this.props.readonly || this.props.schema.readonly;
},
enumerable: false,
configurable: true
});
Object.defineProperty(ArrayEditor.prototype, "hasDeleteButtonFunction", {
get: function () {
return this.props.onDelete && !this.isReadOnly;
},
enumerable: false,
configurable: true
});
Object.defineProperty(ArrayEditor.prototype, "hasAddButton", {
get: function () {
return !this.isReadOnly && this.value !== undefined && !this.props.schema.enum;
},
enumerable: false,
configurable: true
});
Object.defineProperty(ArrayEditor.prototype, "getValue", {
get: function () {
if (this.value !== undefined && !this.collapsed) {
return this.value;
}
return [];
},
enumerable: false,
configurable: true
});
Object.defineProperty(ArrayEditor.prototype, "titleToShow", {
get: function () {
return common.getTitle(this.props.title, this.props.schema.title);
},
enumerable: false,
configurable: true
});
Object.defineProperty(ArrayEditor.prototype, "showFilter", {
get: function () {
var minItemCountIfNeedFilter = typeof this.props.minItemCountIfNeedFilter === 'number' ? this.props.minItemCountIfNeedFilter : common.minItemCountIfNeedFilter;
return this.getValue.length >= minItemCountIfNeedFilter;
},
enumerable: false,
configurable: true
});
Object.defineProperty(ArrayEditor.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
});
Object.defineProperty(ArrayEditor.prototype, "options", {
get: function () {
return common.getOptions(this.props.schema);
},
enumerable: false,
configurable: true
});
return ArrayEditor;
}(React.Component));
export { ArrayEditor };