devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
109 lines (108 loc) • 4.17 kB
JavaScript
/**
* DevExtreme (esm/__internal/ui/radio_group/radio_collection.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/
*/
import Guid from "../../../core/guid";
import $ from "../../../core/renderer";
import {
deferRender
} from "../../../core/utils/common";
import DataExpressionMixin from "../../../ui/editor/ui.data_expression";
import CollectionWidget from "../../ui/collection/collection_widget.edit";
const RADIO_BUTTON_CHECKED_CLASS = "dx-radiobutton-checked";
const RADIO_BUTTON_ICON_CHECKED_CLASS = "dx-radiobutton-icon-checked";
const RADIO_BUTTON_ICON_CLASS = "dx-radiobutton-icon";
const RADIO_BUTTON_ICON_DOT_CLASS = "dx-radiobutton-icon-dot";
const RADIO_VALUE_CONTAINER_CLASS = "dx-radio-value-container";
const RADIO_BUTTON_CLASS = "dx-radiobutton";
const ITEM_CONTENT_CLASS = "dx-item-content";
class RadioCollection extends CollectionWidget {
_focusTarget() {
return $(this.element()).parent()
}
_nullValueSelectionSupported() {
return true
}
_getDefaultOptions() {
return Object.assign({}, super._getDefaultOptions(), DataExpressionMixin._dataExpressionDefaultOptions())
}
_initMarkup() {
super._initMarkup();
deferRender(() => {
this._itemElements().addClass("dx-radiobutton")
})
}
_keyboardEventBindingTarget() {
return this._focusTarget()
}
_getItemIdTarget($target) {
const $radioContainer = $target.find(".dx-radio-value-container");
if ($radioContainer.length) {
return $radioContainer
}
return $target
}
_postprocessRenderItem(args) {
const {
itemData: itemData,
itemElement: itemElement
} = args;
const {
html: html
} = itemData;
const $itemElement = $(itemElement);
if (!html) {
const $radio = $("<div>").addClass("dx-radiobutton-icon");
$("<div>").addClass("dx-radiobutton-icon-dot").appendTo($radio);
const $radioContainer = $("<div>").append($radio).addClass("dx-radio-value-container");
$itemElement.prepend($radioContainer)
}
super._postprocessRenderItem(args);
const aria = {
role: "radio"
};
if (!html) {
const $itemContent = $itemElement.find(".dx-item-content");
const contentId = $itemContent.attr("id") || `dx-${new Guid}`;
$itemContent.attr("id", contentId);
aria.labelledby = contentId
}
const $ariaTarget = this._getItemIdTarget($itemElement);
this.setAria(aria, $ariaTarget)
}
_processSelectableItem($itemElement, isSelected) {
super._processSelectableItem($itemElement, isSelected);
$itemElement.toggleClass("dx-radiobutton-checked", isSelected).find(".dx-radiobutton-icon").first().toggleClass("dx-radiobutton-icon-checked", isSelected);
const $radioContainer = $itemElement.find(".dx-radio-value-container");
const $ariaCheckedTarget = $radioContainer.length ? $radioContainer : $itemElement;
this.setAria("checked", isSelected, $ariaCheckedTarget)
}
_refreshContent() {
this._prepareContent();
this._renderContent()
}
_supportedKeys() {
const parent = super._supportedKeys();
return Object.assign({}, parent, {
enter(e) {
var _parent$enter;
e.preventDefault();
null === (_parent$enter = parent.enter) || void 0 === _parent$enter || _parent$enter.apply(this, [e])
},
space(e) {
var _parent$space;
e.preventDefault();
null === (_parent$space = parent.space) || void 0 === _parent$space || _parent$space.apply(this, [e])
}
})
}
_itemElements() {
return this._itemContainer().children(this._itemSelector())
}
_setAriaSelectionAttribute() {}
}
export default RadioCollection;