@up-group-ui/react-controls
Version:
Up shared react controls
89 lines • 6.46 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.UpRadio = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var BaseControl_1 = require("../_Common/BaseControl/BaseControl");
var styles_1 = require("./styles");
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 SvgIcon_1 = (0, tslib_1.__importDefault)(require("../../Display/SvgIcon"));
var RadioGroup = function (props) {
var children = props.children, className = props.className;
return ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ onClick: function (e) {
e.stopPropagation();
}, className: (0, classnames_1.default)(className, (0, typestyle_1.style)((0, styles_1.RadioGroupStyles)(props))) }, { children: children }), void 0));
};
var BaseRadioButton = function (props) {
var checked = props.checked, iconName = props.iconName, className = props.className, name = props.name, text = props.text, value = props.value, onChange = props.onChange, intent = props.intent, field = props.toggledElement, tabIndex = props.tabIndex, readonly = props.readonly, additionalData = props.additionalData;
var isTextArray = Array.isArray(text);
var radioContent = Array.isArray(text) ? (text.map(function (currentElement, index) { return ((0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsxs)("b", { children: [currentElement.title, " : "] }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("span", { children: currentElement.value }, void 0), index === 0 && additionalData && ((0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({ style: {
color: additionalData.color,
marginLeft: '10px',
} }, { children: (0, jsx_runtime_1.jsx)("b", { children: additionalData.value }, void 0) }), void 0))] }, index)); })) : ((0, jsx_runtime_1.jsx)("span", { children: text }, void 0));
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("label", (0, tslib_1.__assign)({ className: (0, classnames_1.default)('up-control', 'up-radio', (0, styles_1.getStyles)(props), intent ? "up-intent-" + intent : null, className) }, { children: [(0, jsx_runtime_1.jsx)("input", { checked: checked, onChange: function (e) {
e.persist();
!readonly && onChange(e);
}, name: name, type: "radio", value: value, tabIndex: tabIndex }, void 0), (0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({ className: "up-control-wrapper " + (isTextArray ? 'up-control-wrapper--adaptive-height' : 'up-control-wrapper--fixed-height') }, { children: (0, jsx_runtime_1.jsx)("span", { className: "up-control-indicator" }, void 0) }), void 0), (0, jsx_runtime_1.jsxs)("span", (0, tslib_1.__assign)({ className: "up-control-text " + (isTextArray ? 'up-control-text--adaptive-height' : 'up-control-text--fixed-height') }, { children: [iconName && (0, jsx_runtime_1.jsx)(SvgIcon_1.default, { iconName: iconName }, void 0), radioContent] }), void 0)] }), void 0), checked && field] }, void 0));
};
var UpRadio = (function (_super) {
(0, tslib_1.__extends)(UpRadio, _super);
function UpRadio(props) {
var _this = _super.call(this, props) || this;
_this.dispatchOnChange = function (data, event, error) {
if (_this.props.onChange !== undefined) {
_this.props.onChange(event, data, error);
}
};
return _this;
}
UpRadio.prototype.getValue = function (data) {
return data == null ? null : data.target != null ? data.target.value : data;
};
Object.defineProperty(UpRadio.prototype, "isControlled", {
get: function () {
return this.props.value !== undefined;
},
enumerable: false,
configurable: true
});
Object.defineProperty(UpRadio.prototype, "currentValue", {
get: function () {
return this.isControlled ? this.props.value : this.state.value;
},
enumerable: false,
configurable: true
});
UpRadio.prototype.showError = function () {
return this.props.showError !== undefined
? typeof this.props.showError === 'function'
? this.props.showError(this.state)
: this.props.showError === true
: this.hasError;
};
UpRadio.prototype.showSuccess = function () {
return this.props.showSuccess;
};
UpRadio.prototype.renderControl = function () {
var _this = this;
var options = this.props.options;
var radioGroupClass = "upContainer__groupradio upContainer__groupradio-" + this.props.displayMode + " upContainer__groupradio-" + this.props.alignMode;
return ((0, jsx_runtime_1.jsxs)(RadioGroup, (0, tslib_1.__assign)({ readonly: this.props.readonly, className: radioGroupClass, gutter: this.props.gutter, flexWrap: this.props.flexWrap, nbItemsPerRow: this.props.nbItemsPerRow, theme: this.props.theme }, { children: [(0, jsx_runtime_1.jsx)("label", (0, tslib_1.__assign)({ style: { display: 'none' } }, { children: (0, jsx_runtime_1.jsx)("input", { type: "radio" }, void 0) }), void 0), options.map(function (option) {
return ((0, jsx_runtime_1.jsx)(BaseRadioButton, { intent: option.intent, onChange: _this.handleChangeEvent, name: _this.props.name, checked: _this.currentValue != null && _this.currentValue === option.value, text: option.text, additionalData: option.additionalData, readonly: _this.props.readonly, iconName: option.iconName, theme: _this.props.theme, value: option.value, toggledElement: option.toggledElement, tabIndex: _this.props.tabIndex }, "Key_" + _this.props.name + "_" + option.value));
})] }), void 0));
};
UpRadio.defaultProps = {
alignMode: 'horizontal',
displayMode: 'normal',
options: [],
name: 'option',
showError: true,
theme: theming_1.default,
};
return UpRadio;
}(BaseControl_1.BaseControlComponent));
exports.UpRadio = UpRadio;
exports.default = (0, withTheme_1.default)(UpRadio);
//# sourceMappingURL=UpRadio.js.map