devextreme/esm/renovation/component_wrapper/button.js

HTML5 JavaScript Component Suite for Responsive Web Development

/**
 * DevExtreme (esm/renovation/component_wrapper/button.js)
 * Version: 21.2.3
 * Build date: Thu Oct 28 2021
 *
 * Copyright (c) 2012 - 2021 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 ValidationEngine from "../../ui/validation_engine";
import Component from "./common/component";
export default class ButtonWrapper extends Component {
    get _validationGroupConfig() {
        return ValidationEngine.getGroupConfig(this._findGroup())
    }
    getDefaultTemplateNames() {
        return ["content"]
    }
    getSupportedKeyNames() {
        return ["space", "enter"]
    }
    getProps() {
        var props = super.getProps();
        props.validationGroup = this._validationGroupConfig;
        return props
    }
    get _templatesInfo() {
        return {
            template: "content"
        }
    }
    _toggleActiveState(_, value) {
        var button = this.viewRef;
        value ? button.activate() : button.deactivate()
    }
    _getSubmitAction() {
        var needValidate = true;
        var validationStatus = "valid";
        return this._createAction(_ref => {
            var {
                event: event,
                submitInput: submitInput
            } = _ref;
            if (needValidate) {
                var validationGroup = this._validationGroupConfig;
                if (void 0 !== validationGroup && "" !== validationGroup) {
                    var {
                        complete: complete,
                        status: status
                    } = validationGroup.validate();
                    validationStatus = status;
                    if ("pending" === status) {
                        needValidate = false;
                        this.option("disabled", true);
                        complete.then(() => {
                            needValidate = true;
                            this.option("disabled", false);
                            validationStatus = status;
                            "valid" === validationStatus && submitInput.click()
                        })
                    }
                }
            }
            "valid" !== validationStatus && event.preventDefault();
            event.stopPropagation()
        })
    }
    _init() {
        super._init();
        this._addAction("onSubmit", this._getSubmitAction())
    }
    _initMarkup() {
        super._initMarkup();
        var $content = this.$element().find(".dx-button-content");
        var $template = $content.children().filter(".dx-template-wrapper");
        if ($template.length) {
            $template.addClass("dx-button-content");
            $content.replaceWith($template)
        }
    }
    _patchOptionValues(options) {
        return super._patchOptionValues(_extends({}, options, {
            templateData: options._templateData
        }))
    }
    _findGroup() {
        var $element = this.$element();
        var validationGroup = this.option("validationGroup");
        return void 0 !== validationGroup && "" !== validationGroup ? validationGroup : ValidationEngine.findGroup($element, this._modelByElement($element))
    }
}