devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
207 lines (205 loc) • 8.07 kB
JavaScript
/**
* DevExtreme (cjs/__internal/ui/m_validation_summary.js)
* Version: 26.1.3
* Build date: Wed Jun 10 2026
*
* Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _events_engine = _interopRequireDefault(require("../../common/core/events/core/events_engine"));
var _component_registrator = _interopRequireDefault(require("../../core/component_registrator"));
var _renderer = _interopRequireDefault(require("../../core/renderer"));
var _common = require("../../core/utils/common");
var _extend = require("../../core/utils/extend");
var _iterator = require("../../core/utils/iterator");
var _collection_widget = _interopRequireDefault(require("../ui/collection/collection_widget.edit"));
var _m_validation_engine = _interopRequireDefault(require("./m_validation_engine"));
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
default: e
}
}
const VALIDATION_SUMMARY_CLASS = "dx-validationsummary";
const SCREEN_READER_ONLY_CLASS = "dx-screen-reader-only";
const ITEM_CLASS = "dx-validationsummary-item";
const ITEM_DATA_KEY = "dx-validationsummary-item-data";
class ValidationSummary extends _collection_widget.default {
_getDefaultOptions() {
return Object.assign({}, super._getDefaultOptions(), {
focusStateEnabled: false,
noDataText: null
})
}
_setOptionsByReference() {
super._setOptionsByReference();
(0, _extend.extend)(this._optionsByReference, {
validationGroup: true
})
}
_init() {
super._init();
this._initGroupRegistration()
}
_initGroupRegistration() {
const $element = this.$element();
const {
validationGroup: validationGroup
} = this.option();
const group = validationGroup || _m_validation_engine.default.findGroup($element, this._modelByElement($element));
const groupConfig = _m_validation_engine.default.addGroup(group, true);
this._unsubscribeGroup();
this._groupWasInit = true;
this._validationGroup = group;
this.groupSubscription = this._groupValidationHandler.bind(this);
groupConfig.on("validated", this.groupSubscription)
}
_unsubscribeGroup() {
const groupConfig = _m_validation_engine.default.getGroupConfig(this._validationGroup);
null === groupConfig || void 0 === groupConfig || groupConfig.off("validated", this.groupSubscription)
}
_getOrderedItems(validators, items) {
let orderedItems = [];
(0, _iterator.each)(validators, (_, validator) => {
const foundItems = (0, _common.grep)(items, item => {
if (item.validator === validator) {
return true
}
});
if (foundItems.length) {
orderedItems = orderedItems.concat(foundItems)
}
});
return orderedItems
}
_groupValidationHandler(params) {
const items = this._getOrderedItems(params.validators, (0, _iterator.map)(params.brokenRules, rule => ({
text: rule.message,
validator: rule.validator,
index: rule.index
})));
this.validators = params.validators;
(0, _iterator.each)(this.validators, (_, validator) => {
if (validator._validationSummary !== this) {
let handler = this._itemValidationHandler.bind(this);
const disposingHandler = function() {
validator.off("validated", handler);
validator._validationSummary = null;
handler = null
};
validator.on("validated", handler);
validator.on("disposing", disposingHandler);
validator._validationSummary = this
}
});
this.option("items", items);
this._announceOnGroupValidation()
}
_announceOnGroupValidation() {
const {
items: items
} = this.option();
if (!(null !== items && void 0 !== items && items.length)) {
this._lastAnnouncedText = "";
this._removeAnnounceContainer();
return
}
const text = items.map(item => item.text).join(". ");
if (text !== this._lastAnnouncedText) {
this._lastAnnouncedText = text;
this._announceText(text)
}
}
_removeAnnounceContainer() {
var _this$_$announceConta;
null === (_this$_$announceConta = this._$announceContainer) || void 0 === _this$_$announceConta || _this$_$announceConta.remove();
this._$announceContainer = void 0
}
_renderAnnounceContainer() {
this._removeAnnounceContainer();
this._$announceContainer = (0, _renderer.default)("<div>").addClass("dx-screen-reader-only").attr("role", "alert").appendTo(this.element())
}
_announceText(text) {
var _this$_$announceConta2;
this._renderAnnounceContainer();
null === (_this$_$announceConta2 = this._$announceContainer) || void 0 === _this$_$announceConta2 || _this$_$announceConta2.text(text)
}
_itemValidationHandler(_ref) {
let {
isValid: isValid,
validator: validator,
brokenRules: brokenRules
} = _ref;
let {
items: items
} = this.option();
let itemsChanged = false;
let itemIndex = 0;
while (itemIndex < items.length) {
const item = items[itemIndex];
if (item.validator === validator) {
const foundRule = (0, _common.grep)(brokenRules || [], rule => rule.index === item.index)[0];
if (isValid || !foundRule) {
items.splice(itemIndex, 1);
itemsChanged = true;
continue
}
if (foundRule.message !== item.text) {
item.text = foundRule.message;
itemsChanged = true
}
}
itemIndex++
}(0, _iterator.each)(brokenRules, (_, rule) => {
const foundItem = (0, _common.grep)(items, item => item.validator === validator && item.index === rule.index)[0];
if (!foundItem) {
items.push({
text: rule.message,
validator: validator,
index: rule.index
});
itemsChanged = true
}
});
if (itemsChanged) {
items = this._getOrderedItems(this.validators, items);
this.option("items", items)
}
}
_initMarkup() {
this.$element().addClass("dx-validationsummary");
super._initMarkup()
}
_optionChanged(args) {
if ("validationGroup" === args.name) {
this._initGroupRegistration()
} else {
super._optionChanged(args)
}
}
_itemClass() {
return ITEM_CLASS
}
_itemDataKey() {
return ITEM_DATA_KEY
}
_postprocessRenderItem(params) {
_events_engine.default.on(params.itemElement, "click", () => {
var _params$itemData$vali, _params$itemData$vali2;
null === (_params$itemData$vali = params.itemData.validator) || void 0 === _params$itemData$vali || null === (_params$itemData$vali2 = _params$itemData$vali.focus) || void 0 === _params$itemData$vali2 || _params$itemData$vali2.call(_params$itemData$vali)
})
}
_dispose() {
this._removeAnnounceContainer();
super._dispose();
this._unsubscribeGroup()
}
refreshValidationGroup() {
this._initGroupRegistration()
}
}(0, _component_registrator.default)("dxValidationSummary", ValidationSummary);
var _default = exports.default = ValidationSummary;