devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
103 lines (102 loc) • 3.69 kB
JavaScript
/**
* DevExtreme (esm/__internal/ui/radio_group/m_radio_button.js)
* Version: 24.2.6
* Build date: Mon Mar 17 2025
*
* Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import _extends from "@babel/runtime/helpers/esm/extends";
import {
name as clickEventName
} from "../../../common/core/events/click";
import eventsEngine from "../../../common/core/events/core/events_engine";
import {
addNamespace
} from "../../../common/core/events/utils/index";
import registerComponent from "../../../core/component_registrator";
import devices from "../../../core/devices";
import $ from "../../../core/renderer";
import Editor from "../../ui/editor/editor";
const RADIO_BUTTON_CLASS = "dx-radiobutton";
const RADIO_BUTTON_ICON_CLASS = "dx-radiobutton-icon";
const RADIO_BUTTON_ICON_DOT_CLASS = "dx-radiobutton-icon-dot";
const RADIO_BUTTON_CHECKED_CLASS = "dx-radiobutton-checked";
const RADIO_BUTTON_ICON_CHECKED_CLASS = "dx-radiobutton-icon-checked";
class RadioButton extends Editor {
_supportedKeys() {
return _extends({}, super._supportedKeys(), {
space: function(e) {
e.preventDefault();
this._clickAction({
event: e
})
}
})
}
_getDefaultOptions() {
return _extends({}, super._getDefaultOptions(), {
hoverStateEnabled: true,
activeStateEnabled: true,
value: false
})
}
_canValueBeChangedByClick() {
return true
}
_defaultOptionsRules() {
return super._defaultOptionsRules().concat([{
device: () => "desktop" === devices.real().deviceType && !devices.isSimulator(),
options: {
focusStateEnabled: true
}
}])
}
_init() {
super._init();
this.$element().addClass("dx-radiobutton")
}
_initMarkup() {
super._initMarkup();
this._renderIcon();
this._renderCheckedState(this.option("value"));
this._renderClick();
this.setAria("role", "radio")
}
_renderIcon() {
this._$icon = $("<div>").addClass("dx-radiobutton-icon");
$("<div>").addClass("dx-radiobutton-icon-dot").appendTo(this._$icon);
this.$element().append(this._$icon)
}
_renderCheckedState(checked) {
this.$element().toggleClass("dx-radiobutton-checked", checked).find(".dx-radiobutton-icon").toggleClass("dx-radiobutton-icon-checked", checked);
this.setAria("checked", checked)
}
_renderClick() {
const eventName = addNamespace(clickEventName, this.NAME);
this._clickAction = this._createAction((args => {
this._clickHandler(args.event)
}));
eventsEngine.off(this.$element(), eventName);
eventsEngine.on(this.$element(), eventName, (e => {
var _this$_clickAction;
null === (_this$_clickAction = this._clickAction) || void 0 === _this$_clickAction || _this$_clickAction.call(this, {
event: e
})
}))
}
_clickHandler(e) {
this._saveValueChangeEvent(e);
this.option("value", true)
}
_optionChanged(args) {
if ("value" === args.name) {
this._renderCheckedState(args.value);
super._optionChanged(args)
} else {
super._optionChanged(args)
}
}
}
registerComponent("dxRadioButton", RadioButton);
export default RadioButton;