devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
176 lines (175 loc) • 6.2 kB
JavaScript
/**
* DevExtreme (esm/__internal/ui/button/wrapper.js)
* Version: 25.1.3
* Build date: Wed Jun 25 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 registerComponent from "../../../core/component_registrator";
import {
getImageSourceType
} from "../../../core/utils/icon";
import ValidationEngine from "../../../ui/validation_engine";
import {
ComponentWrapper
} from "../../core/r1/component_wrapper";
import {
Button as ButtonComponent,
buttonComponentProps,
defaultOptions
} from "./button";
export default class Button extends ComponentWrapper {
get _validationGroupConfig() {
return ValidationEngine.getGroupConfig(this._findGroup())
}
getDefaultTemplateNames() {
return ["content"]
}
getSupportedKeyNames() {
return ["space", "enter"]
}
getProps() {
const props = super.getProps();
props.onClick = _ref => {
let {
event: event
} = _ref;
this._clickAction({
event: event,
validationGroup: this._validationGroupConfig
})
};
props.onKeyDown = this._wrapKeyDownHandler(props.onKeyDown);
const iconType = getImageSourceType(props.icon);
if ("svg" === iconType) {
props.iconTemplate = this._createTemplateComponent((() => props.icon))
}
return props
}
get viewRef() {
return super.viewRef
}
get _templatesInfo() {
return {
template: "content"
}
}
_toggleActiveState(_, value) {
if (value) {
var _this$viewRef;
null === (_this$viewRef = this.viewRef) || void 0 === _this$viewRef || _this$viewRef.activate()
} else {
var _this$viewRef2;
null === (_this$viewRef2 = this.viewRef) || void 0 === _this$viewRef2 || _this$viewRef2.deactivate()
}
}
_getSubmitAction() {
let needValidate = true;
let validationStatus = "valid";
return this._createAction((_ref2 => {
let {
event: event,
submitInput: submitInput
} = _ref2;
if (needValidate) {
const validationGroup = this._validationGroupConfig;
if (void 0 !== validationGroup && "" !== validationGroup) {
const validationResult = validationGroup.validate();
validationStatus = validationResult.status;
if ("pending" === validationResult.status) {
needValidate = false;
this.option("disabled", true);
validationResult.complete.then((_ref3 => {
let {
status: status
} = _ref3;
this.option("disabled", false);
validationStatus = status;
if ("valid" === validationStatus) {
submitInput.click()
}
needValidate = true
}))
}
}
}
if ("valid" !== validationStatus) {
event.preventDefault()
}
event.stopPropagation()
}))
}
_initializeComponent() {
super._initializeComponent();
this._addAction("onSubmit", this._getSubmitAction());
this._clickAction = this._createClickAction()
}
_initMarkup() {
super._initMarkup();
const $content = this.$element().find(".dx-button-content").first();
const $template = $content.children().filter(".dx-template-wrapper");
const $input = $content.children().filter(".dx-button-submit-input");
if ($template.length) {
$template.addClass("dx-button-content");
$template.append($input);
$content.replaceWith($template)
}
}
_patchOptionValues(options) {
return super._patchOptionValues(_extends({}, options, {
templateData: options._templateData
}))
}
_findGroup() {
const $element = this.$element();
const validationGroup = this.option("validationGroup");
return void 0 !== validationGroup && "" !== validationGroup ? validationGroup : ValidationEngine.findGroup($element, this._modelByElement($element))
}
_createClickAction() {
return this._createActionByOption("onClick", {
excludeValidators: ["readOnly"]
})
}
_optionChanged(option) {
if ("onClick" === option.name) {
this._clickAction = this._createClickAction()
}
super._optionChanged(option)
}
focus() {
var _this$viewRef3;
null === (_this$viewRef3 = this.viewRef) || void 0 === _this$viewRef3 || _this$viewRef3.focus()
}
activate() {
var _this$viewRef4;
null === (_this$viewRef4 = this.viewRef) || void 0 === _this$viewRef4 || _this$viewRef4.activate()
}
deactivate() {
var _this$viewRef5;
null === (_this$viewRef5 = this.viewRef) || void 0 === _this$viewRef5 || _this$viewRef5.deactivate()
}
_getActionConfigs() {
return {
onClick: {
excludeValidators: ["readOnly"]
},
onSubmit: {}
}
}
get _propsInfo() {
return {
twoWay: [],
allowNull: [],
elements: ["onSubmit"],
templates: ["template", "iconTemplate"],
props: buttonComponentProps
}
}
get _viewComponent() {
return ButtonComponent
}
}
registerComponent("dxButton", Button);
Button.defaultOptions = defaultOptions;