react-schema-based-json-editor
Version:
A reactjs component of schema based json editor.
154 lines (153 loc) • 7.71 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 { Select2 } from 'select2-react-component';
var NumberEditor = /** @class */ (function (_super) {
__extends(NumberEditor, _super);
function NumberEditor(props) {
var _this = _super.call(this, props) || this;
_this.willRender = false;
_this.onChange = function (e) {
_this.value = _this.props.schema.type === 'integer' ? common.toInteger(e.currentTarget.value) : common.toNumber(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.value = common.getDefaultValue(_this.props.required, _this.props.schema, _this.props.initialValue);
_this.validate();
return _this;
}
NumberEditor.prototype.componentDidMount = function () {
this.props.updateValue(this.value, !this.errorMessage);
};
NumberEditor.prototype.shouldComponentUpdate = function (nextProps, nextState) {
if (this.willRender) {
this.willRender = false;
return true;
}
return this.props.initialValue !== nextProps.initialValue;
};
NumberEditor.prototype.render = function () {
var _this = this;
var input = this.useInput ? (React.createElement("input", { className: this.errorMessage ? this.props.theme.errorInput : this.props.theme.input, type: 'number', onChange: this.onChange, defaultValue: String(this.value), readOnly: this.isReadOnly, step: common.getNumberStep(this.props.schema), 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);
}
}
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 }))),
input,
select,
React.createElement(Description, { theme: this.props.theme, message: this.props.schema.description }),
React.createElement(Description, { theme: this.props.theme, message: this.errorMessage })));
};
NumberEditor.prototype.validate = function () {
this.errorMessage = common.getErrorMessageOfNumber(this.value, this.props.schema, this.props.locale);
};
Object.defineProperty(NumberEditor.prototype, "useInput", {
get: function () {
return this.value !== undefined && (this.props.schema.enum === undefined || this.isReadOnly);
},
enumerable: false,
configurable: true
});
Object.defineProperty(NumberEditor.prototype, "useSelect", {
get: function () {
return this.value !== undefined && (this.props.schema.enum !== undefined && !this.isReadOnly);
},
enumerable: false,
configurable: true
});
Object.defineProperty(NumberEditor.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(NumberEditor.prototype, "useSelectComponent", {
get: function () {
return this.useSelect && (this.props.schema.format === 'select' || this.props.noSelect2);
},
enumerable: false,
configurable: true
});
Object.defineProperty(NumberEditor.prototype, "useRadioBoxComponent", {
get: function () {
return this.useSelect && this.props.schema.format === 'radiobox';
},
enumerable: false,
configurable: true
});
Object.defineProperty(NumberEditor.prototype, "isReadOnly", {
get: function () {
return this.props.readonly || this.props.schema.readonly;
},
enumerable: false,
configurable: true
});
Object.defineProperty(NumberEditor.prototype, "hasDeleteButtonFunction", {
get: function () {
return this.props.onDelete && !this.isReadOnly;
},
enumerable: false,
configurable: true
});
Object.defineProperty(NumberEditor.prototype, "titleToShow", {
get: function () {
return common.getTitle(this.props.title, this.props.schema.title);
},
enumerable: false,
configurable: true
});
Object.defineProperty(NumberEditor.prototype, "options", {
get: function () {
return common.getOptions(this.props.schema);
},
enumerable: false,
configurable: true
});
Object.defineProperty(NumberEditor.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
});
NumberEditor.prototype.updateSelection = function (value) {
this.value = +value;
this.validate();
this.setState({ value: this.value });
this.props.updateValue(this.value, !this.errorMessage);
};
return NumberEditor;
}(React.Component));
export { NumberEditor };