@up-group-ui/react-controls
Version:
Up shared react controls
76 lines • 4.24 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.UpCheckbox = void 0;
var tslib_1 = require("tslib");
var react_1 = require("react");
var jsx_runtime_1 = require("react/jsx-runtime");
var react_2 = (0, tslib_1.__importDefault)(require("react"));
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var Styled_1 = require("../_Common/Styled");
var typestyle_1 = require("typestyle");
var withTheme_1 = (0, tslib_1.__importDefault)(require("../../../Common/theming/withTheme"));
var theming_1 = (0, tslib_1.__importDefault)(require("../../../Common/theming"));
var BaseCheckBox = function (props) {
var checked = props.checked, disabled = props.disabled, className = props.className, text = props.text, name = props.name, value = props.value, onChange = props.onChange, tabIndex = props.tabIndex, readonly = props.readonly;
return ((0, jsx_runtime_1.jsxs)("label", (0, tslib_1.__assign)({ className: (0, classnames_1.default)('up-control', 'up-checkbox', (0, typestyle_1.style)((0, Styled_1.getCheckableStyles)(props)), className) }, { children: [(0, jsx_runtime_1.jsx)("input", { onClick: function (e) {
e.stopPropagation();
e.persist();
!readonly && onChange(e, { name: name, checked: !checked });
}, onChange: function (e) { }, checked: checked, disabled: disabled, name: name, type: "checkbox", value: value }, void 0), (0, jsx_runtime_1.jsx)("span", { className: "up-control-indicator" }, void 0), (0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({ className: "up-control-label" }, { children: text }), void 0)] }), void 0));
};
var UpCheckbox = (function (_super) {
(0, tslib_1.__extends)(UpCheckbox, _super);
function UpCheckbox(props) {
var _this = _super.call(this, props) || this;
_this.stopPropagation = function (event) {
event.stopPropagation();
};
_this.handleChangeEvent = function (event, optionChange) {
var options = (0, tslib_1.__spreadArray)([], _this.currentOptions, true);
for (var propKey in options) {
var option = options[propKey];
if (option.name == optionChange.name && option.onOptionChange != undefined) {
option.onOptionChange(event, optionChange.checked);
if (!_this.isControlled) {
option.checked = optionChange.checked;
}
}
}
if (!_this.isControlled) {
_this.setState({ options: options });
}
};
_this.state = {
options: props.options,
};
return _this;
}
Object.defineProperty(UpCheckbox.prototype, "isControlled", {
get: function () {
return this.props.options !== undefined;
},
enumerable: false,
configurable: true
});
Object.defineProperty(UpCheckbox.prototype, "currentOptions", {
get: function () {
return this.isControlled ? this.props.options : this.state.options;
},
enumerable: false,
configurable: true
});
UpCheckbox.prototype.render = function () {
var _this = this;
var options = this.currentOptions;
return ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: "up-checkbox", onClick: this.stopPropagation, style: this.props.styles }, { children: [(0, jsx_runtime_1.jsx)("label", (0, tslib_1.__assign)({ style: { display: 'none' } }, { children: (0, jsx_runtime_1.jsx)("input", { type: "checkbox" }, void 0) }), void 0), options.map(function (option) {
return ((0, react_1.createElement)(BaseCheckBox, (0, tslib_1.__assign)({}, option, { onChange: _this.handleChangeEvent, key: "Key_" + option.name + "_" + option.value, theme: _this.props.theme, tabIndex: _this.props.tabIndex })));
})] }), void 0));
};
UpCheckbox.defaultProps = {
theme: theming_1.default,
};
return UpCheckbox;
}(react_2.default.Component));
exports.UpCheckbox = UpCheckbox;
exports.default = (0, withTheme_1.default)(UpCheckbox);
//# sourceMappingURL=UpCheckBox.js.map