react-schema-based-json-editor
Version:
A reactjs component of schema based json editor.
125 lines (124 loc) • 6.19 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 BooleanEditor = /** @class */ (function (_super) {
__extends(BooleanEditor, _super);
function BooleanEditor(props) {
var _this = _super.call(this, props) || this;
_this.willRender = false;
_this.onChange = function () {
_this.value = !_this.value;
_this.setState({ value: _this.value });
_this.props.updateValue(_this.value, true);
};
_this.toggleOptional = function () {
_this.value = common.toggleOptional(_this.value, _this.props.schema, _this.props.initialValue);
_this.willRender = true;
_this.setState({ value: _this.value });
_this.props.updateValue(_this.value, true);
};
_this.value = common.getDefaultValue(_this.props.required, _this.props.schema, _this.props.initialValue);
return _this;
}
BooleanEditor.prototype.componentDidMount = function () {
this.props.updateValue(this.value, true);
};
BooleanEditor.prototype.shouldComponentUpdate = function (nextProps, nextState) {
if (this.willRender) {
this.willRender = false;
return true;
}
return this.props.initialValue !== nextProps.initialValue;
};
BooleanEditor.prototype.render = function () {
var _this = this;
var control = null;
if (this.value !== undefined) {
if (this.props.schema.format === 'checkbox') {
control = (React.createElement("div", null,
React.createElement("span", { className: this.props.theme.checkbox },
React.createElement("label", null,
React.createElement("input", { type: 'checkbox', onChange: this.onChange, checked: this.value, disabled: this.isReadOnly }),
this.props.locale.info.true))));
}
else if (this.props.schema.format === 'select') {
control = (React.createElement("select", { value: String(this.value), className: this.props.theme.select, disabled: this.isReadOnly, onChange: function (e) { return _this.onChange(); } },
React.createElement("option", { value: 'true' }, this.props.locale.info.true),
React.createElement("option", { value: 'false' }, this.props.locale.info.false)));
}
else if (this.props.schema.format === 'select2') {
control = (React.createElement(Select2, { data: this.booleanOptions, value: this.value, disabled: this.isReadOnly, update: function (e) { return _this.onChange(); } }));
}
else {
control = (React.createElement("div", null,
React.createElement("span", { className: this.props.theme.radiobox },
React.createElement("label", null,
React.createElement("input", { type: 'radio', onChange: this.onChange, checked: this.value, disabled: this.isReadOnly }),
this.props.locale.info.true)),
React.createElement("span", { className: this.props.theme.radiobox },
React.createElement("label", null,
React.createElement("input", { type: 'radio', onChange: this.onChange, checked: !this.value, disabled: this.isReadOnly }),
this.props.locale.info.false))));
}
}
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 }))),
control,
React.createElement(Description, { theme: this.props.theme, message: this.props.schema.description })));
};
Object.defineProperty(BooleanEditor.prototype, "isReadOnly", {
get: function () {
return this.props.readonly || this.props.schema.readonly;
},
enumerable: false,
configurable: true
});
Object.defineProperty(BooleanEditor.prototype, "hasDeleteButtonFunction", {
get: function () {
return this.props.onDelete && !this.isReadOnly;
},
enumerable: false,
configurable: true
});
Object.defineProperty(BooleanEditor.prototype, "titleToShow", {
get: function () {
return common.getTitle(this.props.title, this.props.schema.title);
},
enumerable: false,
configurable: true
});
Object.defineProperty(BooleanEditor.prototype, "booleanOptions", {
get: function () {
return [
{
value: true,
label: this.props.locale.info.true
},
{
value: false,
label: this.props.locale.info.false
}
];
},
enumerable: false,
configurable: true
});
Object.defineProperty(BooleanEditor.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
});
return BooleanEditor;
}(React.Component));
export { BooleanEditor };