devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
191 lines (188 loc) • 6.79 kB
JavaScript
/**
* DevExtreme (cjs/__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/
*/
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _component_registrator = _interopRequireDefault(require("../../../core/component_registrator"));
var _icon = require("../../../core/utils/icon");
var _validation_engine = _interopRequireDefault(require("../../../ui/validation_engine"));
var _component_wrapper = require("../../core/r1/component_wrapper");
var _button = require("./button");
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
default: e
}
}
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function(n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) {
({}).hasOwnProperty.call(t, r) && (n[r] = t[r])
}
}
return n
}, _extends.apply(null, arguments)
}
class Button extends _component_wrapper.ComponentWrapper {
get _validationGroupConfig() {
return _validation_engine.default.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 = (0, _icon.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 : _validation_engine.default.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: _button.buttonComponentProps
}
}
get _viewComponent() {
return _button.Button
}
}
exports.default = Button;
(0, _component_registrator.default)("dxButton", Button);
Button.defaultOptions = _button.defaultOptions;