devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
279 lines (277 loc) • 9.96 kB
JavaScript
/**
* DevExtreme (cjs/__internal/ui/radio_group/radio_group.js)
* Version: 26.1.3
* Build date: Wed Jun 10 2026
*
* Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _component_registrator = _interopRequireDefault(require("../../../core/component_registrator"));
var _devices = _interopRequireDefault(require("../../../core/devices"));
var _renderer = _interopRequireDefault(require("../../../core/renderer"));
var _deferred = require("../../../core/utils/deferred");
var _type = require("../../../core/utils/type");
var _ui = _interopRequireDefault(require("../../../ui/editor/ui.data_expression"));
var _editor = _interopRequireDefault(require("../../ui/editor/editor"));
var _radio_collection = _interopRequireDefault(require("./radio_collection"));
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
default: e
}
}
const RADIO_BUTTON_CLASS = "dx-radiobutton";
const RADIO_GROUP_HORIZONTAL_CLASS = "dx-radiogroup-horizontal";
const RADIO_GROUP_VERTICAL_CLASS = "dx-radiogroup-vertical";
const RADIO_GROUP_CLASS = "dx-radiogroup";
const RADIO_FEEDBACK_HIDE_TIMEOUT = 100;
class RadioGroup extends _editor.default {
_dataSourceOptions() {
return {
paginate: false
}
}
_activeStateUnit() {
return ".dx-radiobutton"
}
_feedbackHideTimeout() {
return 100
}
_defaultOptionsRules() {
const defaultOptionsRules = super._defaultOptionsRules();
return defaultOptionsRules.concat([{
device: {
tablet: true
},
options: {
layout: "horizontal"
}
}, {
device: () => "desktop" === _devices.default.real().deviceType && !_devices.default.isSimulator(),
options: {
focusStateEnabled: true
}
}])
}
_fireContentReadyAction(force) {
if (!force) {
return
}
super._fireContentReadyAction()
}
_focusTarget() {
return this.$element()
}
_getAriaTarget() {
return this.$element()
}
_getDefaultOptions() {
return Object.assign({}, super._getDefaultOptions(), _ui.default._dataExpressionDefaultOptions(), {
hoverStateEnabled: true,
activeStateEnabled: true,
layout: "vertical"
})
}
_getItemValue(item) {
return this._valueGetter ? this._valueGetter(item) : item.text
}
_getSubmitElement() {
return this._$submitElement
}
_init() {
super._init();
this._initDataExpressions()
}
_initMarkup() {
(0, _renderer.default)(this.element()).addClass("dx-radiogroup");
this._renderSubmitElement();
this.setAria("role", "radiogroup");
this._renderRadios();
this._renderLayout();
super._initMarkup()
}
_itemClickHandler(_ref) {
var _this$itemElements;
let {
itemElement: itemElement,
event: event,
itemData: itemData
} = _ref;
if (null !== (_this$itemElements = this.itemElements()) && void 0 !== _this$itemElements && _this$itemElements.is((0, _renderer.default)(itemElement))) {
const {
value: value
} = this.option();
const newValue = this._getItemValue(itemData);
if (newValue !== value) {
this._saveValueChangeEvent(event);
this.option("value", newValue)
}
}
}
_getSelectedItemKeys(value) {
const {
valueExpr: valueExpr
} = this.option();
const isNullSelectable = "this" !== valueExpr;
const shouldSelectValue = isNullSelectable && null === value || (0, _type.isDefined)(value);
return shouldSelectValue ? [value] : []
}
_setSelection(currentValue) {
const value = this._unwrappedValue(currentValue);
this._setCollectionWidgetOption("selectedItemKeys", this._getSelectedItemKeys(value))
}
_toggleAriaDescribedBy(value) {
var _this$itemElements2;
const targets = null === (_this$itemElements2 = this.itemElements()) || void 0 === _this$itemElements2 ? void 0 : _this$itemElements2.toArray();
if (!(null !== targets && void 0 !== targets && targets.length)) {
return
}
targets.forEach(element => {
this.setAria("describedby", value, (0, _renderer.default)(element))
})
}
_optionChanged(args) {
const {
name: name,
value: value
} = args;
this._dataExpressionOptionChanged(args);
switch (name) {
case "dataSource":
this._invalidate();
break;
case "focusStateEnabled":
case "accessKey":
case "tabIndex":
this._setCollectionWidgetOption(name, value);
break;
case "disabled":
super._optionChanged(args);
this._setCollectionWidgetOption(name, value);
break;
case "valueExpr":
this._setCollectionWidgetOption("keyExpr", this._getCollectionKeyExpr());
break;
case "value":
this._setSelection(value);
this._setSubmitValue(value);
super._optionChanged(args);
break;
case "items":
this._setSelection(this.option().value);
break;
case "itemTemplate":
case "displayExpr":
break;
case "layout":
this._renderLayout();
this._updateItemsSize();
break;
default:
super._optionChanged(args)
}
}
_render() {
super._render();
this._updateItemsSize()
}
_renderLayout() {
const {
layout: layout
} = this.option();
const $element = (0, _renderer.default)(this.element());
$element.toggleClass("dx-radiogroup-vertical", "vertical" === layout);
$element.toggleClass("dx-radiogroup-horizontal", "horizontal" === layout)
}
_renderRadios() {
this._areRadiosCreated = (0, _deferred.Deferred)();
const $radios = (0, _renderer.default)("<div>").appendTo(this.$element());
const {
displayExpr: displayExpr,
accessKey: accessKey,
focusStateEnabled: focusStateEnabled,
itemTemplate: itemTemplate,
tabIndex: tabIndex,
value: value
} = this.option();
this._createComponent($radios, _radio_collection.default, {
onInitialized: _ref2 => {
let {
component: component
} = _ref2;
this._radios = component
},
onContentReady: () => {
this._fireContentReadyAction(true)
},
onItemClick: this._itemClickHandler.bind(this),
displayExpr: displayExpr,
accessKey: accessKey,
dataSource: this._dataSource,
focusStateEnabled: focusStateEnabled,
itemTemplate: itemTemplate,
keyExpr: this._getCollectionKeyExpr(),
noDataText: "",
scrollingEnabled: false,
selectByClick: false,
selectionMode: "single",
selectedItemKeys: this._getSelectedItemKeys(value),
tabIndex: tabIndex
});
this._areRadiosCreated.resolve()
}
_renderSubmitElement() {
this._$submitElement = (0, _renderer.default)("<input>").attr("type", "hidden").appendTo(this.$element());
this._setSubmitValue()
}
_setOptionsByReference() {
super._setOptionsByReference();
this._optionsByReference = Object.assign({}, this._optionsByReference, {
value: true
})
}
_setSubmitValue(value) {
const {
valueExpr: valueExpr,
value: optionValue
} = this.option();
const resolvedValue = value ?? optionValue;
const submitValue = "this" === valueExpr ? this._displayGetter(resolvedValue) : resolvedValue;
this._$submitElement.val(submitValue)
}
_setCollectionWidgetOption() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key]
}
this._areRadiosCreated.done(this._setWidgetOption.bind(this, "_radios", args))
}
_updateItemsSize() {
const {
layout: layout,
items: items
} = this.option();
if ("horizontal" === layout) {
var _this$itemElements3;
null === (_this$itemElements3 = this.itemElements()) || void 0 === _this$itemElements3 || _this$itemElements3.css("height", "auto")
} else {
var _this$itemElements4;
const itemsCount = (items ?? []).length;
null === (_this$itemElements4 = this.itemElements()) || void 0 === _this$itemElements4 || _this$itemElements4.css("height", 100 / itemsCount + "%")
}
}
focus() {
var _this$_radios;
null === (_this$_radios = this._radios) || void 0 === _this$_radios || _this$_radios.focus()
}
itemElements() {
var _this$_radios2;
return null === (_this$_radios2 = this._radios) || void 0 === _this$_radios2 ? void 0 : _this$_radios2._itemElements()
}
}
RadioGroup.include(_ui.default);
(0, _component_registrator.default)("dxRadioGroup", RadioGroup);
var _default = exports.default = RadioGroup;