UNPKG

devextreme

Version:

HTML5 JavaScript Component Suite for Responsive Web Development

176 lines (175 loc) 6.2 kB
/** * 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;