UNPKG

devextreme

Version:

HTML5 JavaScript Component Suite for Responsive Web Development

1,126 lines • 63.9 kB
/** * DevExtreme (esm/__internal/grids/grid_core/validating/m_validating.js) * Version: 23.2.6 * Build date: Wed May 01 2024 * * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/ */ import $ from "../../../../core/renderer"; import browser from "../../../../core/utils/browser"; import { deferUpdate, equalByValue, getKeyHash } from "../../../../core/utils/common"; import { Deferred, fromPromise, when } from "../../../../core/utils/deferred"; import { extend } from "../../../../core/utils/extend"; import { each } from "../../../../core/utils/iterator"; import { getOuterHeight, getOuterWidth, getWidth, setHeight } from "../../../../core/utils/size"; import { encodeHtml } from "../../../../core/utils/string"; import { isDefined, isEmptyObject, isObject } from "../../../../core/utils/type"; import { createObjectWithChanges } from "../../../../data/array_utils"; import eventsEngine from "../../../../events/core/events_engine"; import pointerEvents from "../../../../events/pointer"; import messageLocalization from "../../../../localization/message"; import Button from "../../../../ui/button"; import LoadIndicator from "../../../../ui/load_indicator"; import Overlay from "../../../../ui/overlay/ui.overlay"; import { current, isFluent } from "../../../../ui/themes"; import ValidationEngine from "../../../../ui/validation_engine"; import Validator from "../../../../ui/validator"; import { focused } from "../../../../ui/widget/selectors"; import errors from "../../../../ui/widget/ui.errors"; import { EDITORS_INPUT_SELECTOR } from "../editing/const"; import modules from "../m_modules"; import gridCoreUtils from "../m_utils"; var INVALIDATE_CLASS = "invalid"; var REVERT_TOOLTIP_CLASS = "revert-tooltip"; var INVALID_MESSAGE_CLASS = "dx-invalid-message"; var INVALID_MESSAGE_ID = "dxInvalidMessage"; var WIDGET_INVALID_MESSAGE_CLASS = "invalid-message"; var INVALID_MESSAGE_ALWAYS_CLASS = "dx-invalid-message-always"; var REVERT_BUTTON_CLASS = "dx-revert-button"; var REVERT_BUTTON_ID = "dxRevertButton"; var VALIDATOR_CLASS = "validator"; var PENDING_INDICATOR_CLASS = "dx-pending-indicator"; var VALIDATION_PENDING_CLASS = "dx-validation-pending"; var CONTENT_CLASS = "content"; var INSERT_INDEX = "__DX_INSERT_INDEX__"; var PADDING_BETWEEN_TOOLTIPS = 2; var EDIT_MODE_ROW = "row"; var EDIT_MODE_FORM = "form"; var EDIT_MODE_BATCH = "batch"; var EDIT_MODE_CELL = "cell"; var EDIT_MODE_POPUP = "popup"; var GROUP_CELL_CLASS = "dx-group-cell"; var FORM_BASED_MODES = [EDIT_MODE_POPUP, EDIT_MODE_FORM]; var COMMAND_TRANSPARENT = "transparent"; var VALIDATION_STATUS = { valid: "valid", invalid: "invalid", pending: "pending" }; var EDIT_DATA_INSERT_TYPE = "insert"; var EDIT_DATA_REMOVE_TYPE = "remove"; var VALIDATION_CANCELLED = "cancel"; var validationResultIsValid = function(result) { return isDefined(result) && result !== VALIDATION_CANCELLED }; var cellValueShouldBeValidated = function(value, rowOptions) { return void 0 !== value || void 0 === value && rowOptions && !rowOptions.isNewRow }; export class ValidatingController extends modules.Controller { constructor() { super(...arguments); this._isValidationInProgress = false; this._disableApplyValidationResults = false } init() { this._editingController = this.getController("editing"); this._editorFactoryController = this.getController("editorFactory"); this._columnsController = this.getController("columns"); this.createAction("onRowValidating"); if (!this._validationState) { this.initValidationState() } } initValidationState() { this._validationState = []; this._validationStateCache = {} } _rowIsValidated(change) { var validationData = this._getValidationData(null === change || void 0 === change ? void 0 : change.key); return !!validationData && !!validationData.validated } _getValidationData(key, create) { var keyHash = getKeyHash(key); var isObjectKeyHash = isObject(keyHash); var validationData; if (isObjectKeyHash) { validationData = this._validationState.filter(data => equalByValue(data.key, key))[0] } else { validationData = this._validationStateCache[keyHash] } if (!validationData && create) { validationData = { key: key, isValid: true }; this._validationState.push(validationData); if (!isObjectKeyHash) { this._validationStateCache[keyHash] = validationData } } return validationData } _getBrokenRules(validationData, validationResults) { var brokenRules; if (validationResults) { brokenRules = validationResults.brokenRules || validationResults.brokenRule && [validationResults.brokenRule] } else { brokenRules = validationData.brokenRules || [] } return brokenRules } _rowValidating(validationData, validationResults) { var deferred = new Deferred; var change = this._editingController.getChangeByKey(null === validationData || void 0 === validationData ? void 0 : validationData.key); var brokenRules = this._getBrokenRules(validationData, validationResults); var isValid = validationResults ? validationResults.isValid : validationData.isValid; var parameters = { brokenRules: brokenRules, isValid: isValid, key: change.key, newData: change.data, oldData: this._editingController._getOldData(change.key), promise: null, errorText: this.getHiddenValidatorsErrorText(brokenRules) }; this.executeAction("onRowValidating", parameters); when(fromPromise(parameters.promise)).always(() => { validationData.isValid = parameters.isValid; validationData.errorText = parameters.errorText; deferred.resolve(parameters) }); return deferred.promise() } getHiddenValidatorsErrorText(brokenRules) { var brokenRulesMessages = []; each(brokenRules, (_, brokenRule) => { var { column: column } = brokenRule; var isGroupExpandColumn = column && void 0 !== column.groupIndex && !column.showWhenGrouped; var isVisibleColumn = column && column.visible; if (!brokenRule.validator.$element().parent().length && (!isVisibleColumn || isGroupExpandColumn)) { brokenRulesMessages.push(brokenRule.message) } }); return brokenRulesMessages.join(", ") } validate(isFull) { var isValid = true; var editingController = this._editingController; var deferred = new Deferred; var completeList = []; var editMode = editingController.getEditMode(); isFull = isFull || editMode === EDIT_MODE_ROW; if (this._isValidationInProgress) { return deferred.resolve(false).promise() } this._isValidationInProgress = true; if (isFull) { editingController.addDeferred(deferred); var changes = editingController.getChanges(); each(changes, (index, _ref) => { var { type: type, key: key } = _ref; if ("remove" !== type) { var validationData = this._getValidationData(key, true); var validationResult = this.validateGroup(validationData); completeList.push(validationResult); validationResult.done(validationResult => { validationData.validated = true; isValid = isValid && validationResult.isValid }) } }) } else if (this._currentCellValidator) { var validationResult = this.validateGroup(this._currentCellValidator._findGroup()); completeList.push(validationResult); validationResult.done(validationResult => { isValid = validationResult.isValid }) } when(...completeList).done(() => { this._isValidationInProgress = false; deferred.resolve(isValid) }); return deferred.promise() } validateGroup(validationData) { var result = new Deferred; var validateGroup = validationData && ValidationEngine.getGroupConfig(validationData); var validationResult; if (null === validateGroup || void 0 === validateGroup ? void 0 : validateGroup.validators.length) { this.resetRowValidationResults(validationData); validationResult = ValidationEngine.validateGroup(validationData) } when((null === validationResult || void 0 === validationResult ? void 0 : validationResult.complete) || validationResult).done(validationResult => { when(this._rowValidating(validationData, validationResult)).done(result.resolve) }); return result.promise() } isRowDataModified(change) { return !isEmptyObject(change.data) } updateValidationState(change) { var editMode = this._editingController.getEditMode(); var { key: key } = change; var validationData = this._getValidationData(key, true); if (!FORM_BASED_MODES.includes(editMode)) { if (change.type === EDIT_DATA_INSERT_TYPE && !this.isRowDataModified(change)) { validationData.isValid = true; return } this.setDisableApplyValidationResults(true); var groupConfig = ValidationEngine.getGroupConfig(validationData); if (groupConfig) { var validationResult = ValidationEngine.validateGroup(validationData); when(validationResult.complete || validationResult).done(validationResult => { validationData.isValid = validationResult.isValid; validationData.brokenRules = validationResult.brokenRules }) } else if (!validationData.brokenRules || !validationData.brokenRules.length) { validationData.isValid = true } this.setDisableApplyValidationResults(false) } else { validationData.isValid = true } } setValidator(validator) { this._currentCellValidator = validator } renderCellPendingIndicator($container) { var $indicator = $container.find(".".concat(PENDING_INDICATOR_CLASS)); if (!$indicator.length) { var $indicatorContainer = $container; $indicator = $("<div>").appendTo($indicatorContainer).addClass(PENDING_INDICATOR_CLASS); this._createComponent($indicator, LoadIndicator); $container.addClass(VALIDATION_PENDING_CLASS) } } disposeCellPendingIndicator($container) { var $indicator = $container.find(".".concat(PENDING_INDICATOR_CLASS)); if ($indicator.length) { var indicator = LoadIndicator.getInstance($indicator); if (indicator) { indicator.dispose(); indicator.$element().remove() } $container.removeClass(VALIDATION_PENDING_CLASS) } } validationStatusChanged(result) { var { validator: validator } = result; var validationGroup = validator.option("validationGroup"); var { column: column } = validator.option("dataGetter")(); this.updateCellValidationResult({ rowKey: validationGroup.key, columnIndex: column.index, validationResult: result }) } validatorInitialized(arg) { arg.component.on("validating", this.validationStatusChanged.bind(this)); arg.component.on("validated", this.validationStatusChanged.bind(this)) } validatorDisposing(arg) { var validator = arg.component; var validationGroup = validator.option("validationGroup"); var { column: column } = validator.option("dataGetter")(); var result = this.getCellValidationResult({ rowKey: null === validationGroup || void 0 === validationGroup ? void 0 : validationGroup.key, columnIndex: column.index }); if (validationResultIsValid(result) && result.status === VALIDATION_STATUS.pending) { this.cancelCellValidationResult({ change: validationGroup, columnIndex: column.index }) } } applyValidationResult($container, result) { var { validator: validator } = result; var validationGroup = validator.option("validationGroup"); var { column: column } = validator.option("dataGetter")(); result.brokenRules && result.brokenRules.forEach(rule => { rule.columnIndex = column.index; rule.column = column }); if ($container) { var validationResult = this.getCellValidationResult({ rowKey: validationGroup.key, columnIndex: column.index }); var requestIsDisabled = validationResultIsValid(validationResult) && validationResult.disabledPendingId === result.id; if (this._disableApplyValidationResults || requestIsDisabled) { return } if (result.status === VALIDATION_STATUS.invalid) { var $focus = $container.find(":focus"); if (!focused($focus)) { eventsEngine.trigger($focus, "focus"); eventsEngine.trigger($focus, pointerEvents.down) } } var editor = !column.editCellTemplate && this._editorFactoryController.getEditorInstance($container); if (result.status === VALIDATION_STATUS.pending) { if (editor) { editor.option("validationStatus", VALIDATION_STATUS.pending) } else { this.renderCellPendingIndicator($container) } } else if (editor) { editor.option("validationStatus", VALIDATION_STATUS.valid) } else { this.disposeCellPendingIndicator($container) } $container.toggleClass(this.addWidgetPrefix(INVALIDATE_CLASS), result.status === VALIDATION_STATUS.invalid) } } _syncInternalEditingData(parameters) { var _a; var editingController = this._editingController; var change = editingController.getChangeByKey(parameters.key); var oldDataFromState = editingController._getOldData(parameters.key); var oldData = null === (_a = parameters.row) || void 0 === _a ? void 0 : _a.oldData; if (change && oldData && !oldDataFromState) { editingController._addInternalData({ key: parameters.key, oldData: oldData }) } } createValidator(parameters, $container) { var _a, _b, _c; var editingController = this._editingController; var { column: column } = parameters; var { showEditorAlways: showEditorAlways } = column; if (isDefined(column.command) || !column.validationRules || !Array.isArray(column.validationRules) || !column.validationRules.length) { return } var editIndex = editingController.getIndexByKey(parameters.key, editingController.getChanges()); var needCreateValidator = editIndex > -1; if (!needCreateValidator) { if (!showEditorAlways) { var visibleColumns = (null === (_a = this._columnsController) || void 0 === _a ? void 0 : _a.getVisibleColumns()) || []; showEditorAlways = visibleColumns.some(column => column.showEditorAlways) } var isEditRow = equalByValue(this.option("editing.editRowKey"), parameters.key); var isCellOrBatchEditingAllowed = editingController.isCellOrBatchEditMode() && editingController.allowUpdating({ row: parameters.row }); needCreateValidator = isEditRow || isCellOrBatchEditingAllowed && showEditorAlways; if (isCellOrBatchEditingAllowed && showEditorAlways) { editingController._addInternalData({ key: parameters.key, oldData: null !== (_c = null === (_b = parameters.row) || void 0 === _b ? void 0 : _b.oldData) && void 0 !== _c ? _c : parameters.data }) } } if (needCreateValidator) { if ($container && !$container.length) { errors.log("E1050"); return } this._syncInternalEditingData(parameters); var validationData = this._getValidationData(parameters.key, true); var getValue = () => { var change = editingController.getChangeByKey(null === validationData || void 0 === validationData ? void 0 : validationData.key); var value = column.calculateCellValue((null === change || void 0 === change ? void 0 : change.data) || {}); return void 0 !== value ? value : parameters.value }; var useDefaultValidator = $container && $container.hasClass("dx-widget"); $container && $container.addClass(this.addWidgetPrefix(VALIDATOR_CLASS)); var validator = new Validator($container || $("<div>"), { name: column.caption, validationRules: extend(true, [], column.validationRules), validationGroup: validationData, adapter: useDefaultValidator ? null : { getValue: getValue, applyValidationResults: result => { this.applyValidationResult($container, result) } }, dataGetter() { var key = null === validationData || void 0 === validationData ? void 0 : validationData.key; var change = editingController.getChangeByKey(key); var oldData = editingController._getOldData(key); return { data: createObjectWithChanges(oldData, null === change || void 0 === change ? void 0 : change.data), column: column } }, onInitialized: this.validatorInitialized.bind(this), onDisposing: this.validatorDisposing.bind(this) }); if (useDefaultValidator) { var adapter = validator.option("adapter"); if (adapter) { var originBypass = adapter.bypass; var defaultAdapterBypass = () => parameters.row.isNewRow && !this._isValidationInProgress && !editingController.isCellModified(parameters); adapter.getValue = getValue; adapter.validationRequestsCallbacks = []; adapter.bypass = () => originBypass.call(adapter) || defaultAdapterBypass() } } return validator } return } setDisableApplyValidationResults(flag) { this._disableApplyValidationResults = flag } getDisableApplyValidationResults() { return this._disableApplyValidationResults } isCurrentValidatorProcessing(_ref2) { var { rowKey: rowKey, columnIndex: columnIndex } = _ref2; return this._currentCellValidator && equalByValue(this._currentCellValidator.option("validationGroup").key, rowKey) && this._currentCellValidator.option("dataGetter")().column.index === columnIndex } validateCell(validator) { var cellParams = { rowKey: validator.option("validationGroup").key, columnIndex: validator.option("dataGetter")().column.index, validationResult: null }; var validationResult = this.getCellValidationResult(cellParams); var stateRestored = validationResultIsValid(validationResult); var adapter = validator.option("adapter"); if (!stateRestored) { validationResult = validator.validate() } else { var currentCellValue = adapter.getValue(); if (!equalByValue(currentCellValue, validationResult.value)) { validationResult = validator.validate() } } var deferred = new Deferred; if (stateRestored && validationResult.status === VALIDATION_STATUS.pending) { this.updateCellValidationResult(cellParams); adapter.applyValidationResults(validationResult) } when(validationResult.complete || validationResult).done(validationResult => { stateRestored && adapter.applyValidationResults(validationResult); deferred.resolve(validationResult) }); return deferred.promise() } updateCellValidationResult(_ref3) { var { rowKey: rowKey, columnIndex: columnIndex, validationResult: validationResult } = _ref3; var validationData = this._getValidationData(rowKey); if (!validationData) { return } if (!validationData.validationResults) { validationData.validationResults = {} } var result; if (validationResult) { result = extend({}, validationResult); validationData.validationResults[columnIndex] = result; if (validationResult.status === VALIDATION_STATUS.pending) { if (this._editingController.getEditMode() === EDIT_MODE_CELL) { result.deferred = new Deferred; result.complete.always(() => { result.deferred.resolve() }); this._editingController.addDeferred(result.deferred) } if (this._disableApplyValidationResults) { result.disabledPendingId = validationResult.id; return } } } else { result = validationData.validationResults[columnIndex] } if (result && result.disabledPendingId) { delete result.disabledPendingId } } getCellValidationResult(_ref4) { var { rowKey: rowKey, columnIndex: columnIndex } = _ref4; var _a; var validationData = this._getValidationData(rowKey, true); return null === (_a = null === validationData || void 0 === validationData ? void 0 : validationData.validationResults) || void 0 === _a ? void 0 : _a[columnIndex] } removeCellValidationResult(_ref5) { var { change: change, columnIndex: columnIndex } = _ref5; var validationData = this._getValidationData(null === change || void 0 === change ? void 0 : change.key); if (validationData && validationData.validationResults) { this.cancelCellValidationResult({ change: change, columnIndex: columnIndex }); delete validationData.validationResults[columnIndex] } } cancelCellValidationResult(_ref6) { var { change: change, columnIndex: columnIndex } = _ref6; var validationData = this._getValidationData(change.key); if (change && validationData.validationResults) { var result = validationData.validationResults[columnIndex]; if (result) { result.deferred && result.deferred.reject(VALIDATION_CANCELLED); validationData.validationResults[columnIndex] = VALIDATION_CANCELLED } } } resetRowValidationResults(validationData) { if (validationData) { validationData.validationResults && delete validationData.validationResults; delete validationData.validated } } isInvalidCell(_ref7) { var { rowKey: rowKey, columnIndex: columnIndex } = _ref7; var result = this.getCellValidationResult({ rowKey: rowKey, columnIndex: columnIndex }); return validationResultIsValid(result) && result.status === VALIDATION_STATUS.invalid } getCellValidator(_ref8) { var { rowKey: rowKey, columnIndex: columnIndex } = _ref8; var validationData = this._getValidationData(rowKey); var groupConfig = validationData && ValidationEngine.getGroupConfig(validationData); var validators = groupConfig && groupConfig.validators; return validators && validators.filter(v => { var { column: column } = v.option("dataGetter")(); return column ? column.index === columnIndex : false })[0] } setCellValidationStatus(cellOptions) { var validationResult = this.getCellValidationResult({ rowKey: cellOptions.key, columnIndex: cellOptions.column.index }); if (isDefined(validationResult)) { cellOptions.validationStatus = validationResult !== VALIDATION_CANCELLED ? validationResult.status : VALIDATION_CANCELLED } else { delete cellOptions.validationStatus } } } export var validatingEditingExtender = Base => class extends Base { processDataItemTreeListHack(item) { super.processDataItem.apply(this, arguments) } processItemsTreeListHack(items, e) { return super.processItems.apply(this, arguments) } _addChange(changeParams) { var change = super._addChange.apply(this, arguments); if (change && changeParams.type !== EDIT_DATA_REMOVE_TYPE) { this._validatingController.updateValidationState(change) } return change } _handleChangesChange(args) { super._handleChangesChange.apply(this, arguments); args.value.forEach(change => { if (void 0 === this._validatingController._getValidationData(change.key)) { this._validatingController.updateValidationState(change) } }) } _updateRowAndPageIndices() { var that = this; var startInsertIndex = that.getView("rowsView").getTopVisibleItemIndex(); var rowIndex = startInsertIndex; each(that.getChanges(), (_, _ref9) => { var { key: key, type: type } = _ref9; var validationData = this._validatingController._getValidationData(key); if (validationData && !validationData.isValid && validationData.pageIndex !== that._pageIndex) { validationData.pageIndex = that._pageIndex; if (type === EDIT_DATA_INSERT_TYPE) { validationData.rowIndex = startInsertIndex } else { validationData.rowIndex = rowIndex } rowIndex++ } }) } _getValidationGroupsInForm(detailOptions) { var validationData = this._validatingController._getValidationData(detailOptions.key, true); return { validationGroup: validationData } } _validateEditFormAfterUpdate(row, isCustomSetCellValue) { if (isCustomSetCellValue && this._editForm) { this._editForm.validate() } super._validateEditFormAfterUpdate.apply(this, arguments) } _prepareEditCell(params) { var isNotCanceled = super._prepareEditCell.apply(this, arguments); if (isNotCanceled && params.column.showEditorAlways) { this._validatingController.updateValidationState({ key: params.key }) } return isNotCanceled } processItems(items, changeType) { var changes = this.getChanges(); var getIndexByChange = (change, items) => { var index = -1; var isInsert = change.type === EDIT_DATA_INSERT_TYPE; var { key: key } = change; each(items, (i, item) => { if (equalByValue(key, isInsert ? item.key : this._dataController.keyOf(item))) { index = i; return false } return }); return index }; items = super.processItems(items, changeType); var itemsCount = items.length; if (this.getEditMode() === EDIT_MODE_BATCH && "prepend" !== changeType && "append" !== changeType) { changes.forEach(change => { var { key: key } = change; var validationData = this._validatingController._getValidationData(key); if (validationData && change.type && validationData.pageIndex === this._pageIndex && (null === change || void 0 === change ? void 0 : change.pageIndex) !== this._pageIndex) { ! function(change, validationData) { var data = { key: change.key }; var index = getIndexByChange(change, items); if (index >= 0) { return } validationData.rowIndex = validationData.rowIndex > itemsCount ? validationData.rowIndex % itemsCount : validationData.rowIndex; var { rowIndex: rowIndex } = validationData; data[INSERT_INDEX] = 1; items.splice(rowIndex, 0, data) }(change, validationData) } }) } return items } processDataItem(item) { var isInserted = item.data[INSERT_INDEX]; var key = isInserted ? item.data.key : item.key; var editMode = this.getEditMode(); if (editMode === EDIT_MODE_BATCH && isInserted && key) { var changes = this.getChanges(); var editIndex = gridCoreUtils.getIndexByKey(key, changes); if (editIndex >= 0) { var change = changes[editIndex]; if (change.type !== EDIT_DATA_INSERT_TYPE) { var oldData = this._getOldData(change.key); item.data = extend(true, {}, oldData, change.data); item.key = key } } } super.processDataItem.apply(this, arguments) } _createInvisibleColumnValidators(changes) { var that = this; var columns = this._columnsController.getColumns(); var invisibleColumns = this._columnsController.getInvisibleColumns().filter(column => !column.isBand); var groupColumns = this._columnsController.getGroupColumns().filter(column => !column.showWhenGrouped && -1 === invisibleColumns.indexOf(column)); var invisibleColumnValidators = []; var isCellVisible = (column, rowKey) => this._dataController.getRowIndexByKey(rowKey) >= 0 && invisibleColumns.indexOf(column) < 0; invisibleColumns.push(...groupColumns); if (!FORM_BASED_MODES.includes(this.getEditMode())) { each(columns, (_, column) => { changes.forEach(change => { var data; if (isCellVisible(column, change.key)) { return } if (change.type === EDIT_DATA_INSERT_TYPE) { data = change.data } else if ("update" === change.type) { var oldData = that._getOldData(change.key); if (!isDefined(oldData)) { return } data = createObjectWithChanges(oldData, change.data) } if (data) { var validator = this._validatingController.createValidator({ column: column, key: change.key, value: column.calculateCellValue(data) }); if (validator) { invisibleColumnValidators.push(validator) } } }) }) } return function() { invisibleColumnValidators.forEach(validator => { validator.dispose() }) } } _beforeSaveEditData(change, editIndex) { var result = super._beforeSaveEditData.apply(this, arguments); var validationData = this._validatingController._getValidationData(null === change || void 0 === change ? void 0 : change.key); if (change) { var isValid = "remove" === change.type || validationData.isValid; result = result || !isValid } else { var disposeValidators = this._createInvisibleColumnValidators(this.getChanges()); result = new Deferred; this.executeOperation(result, () => { this._validatingController.validate(true).done(isFullValid => { disposeValidators(); this._updateRowAndPageIndices(); switch (this.getEditMode()) { case EDIT_MODE_CELL: if (!isFullValid) { this._focusEditingCell() } break; case EDIT_MODE_BATCH: if (!isFullValid) { this._resetEditRowKey(); this._resetEditColumnName(); this._dataController.updateItems() } } result.resolve(!isFullValid) }) }) } return result.promise ? result.promise() : result } _beforeEditCell(rowIndex, columnIndex, item) { var result = super._beforeEditCell(rowIndex, columnIndex, item); if (this.getEditMode() === EDIT_MODE_CELL) { var $cell = this._rowsView._getCellElement(rowIndex, columnIndex); var validator = $cell && $cell.data("dxValidator"); var rowOptions = $cell && $cell.closest(".dx-row").data("options"); var value = validator && validator.option("adapter").getValue(); if (validator && cellValueShouldBeValidated(value, rowOptions)) { var deferred = new Deferred; when(this._validatingController.validateCell(validator), result).done((validationResult, result) => { deferred.resolve(validationResult.status === VALIDATION_STATUS.valid && result) }); return deferred.promise() } if (!validator) { return result } } return false } _afterSaveEditData(cancel) { var $firstErrorRow; var isCellEditMode = this.getEditMode() === EDIT_MODE_CELL; each(this.getChanges(), (_, change) => { var $errorRow = this._showErrorRow(change); $firstErrorRow = $firstErrorRow || $errorRow }); if ($firstErrorRow) { var scrollable = this._rowsView.getScrollable(); if (scrollable) { scrollable.update(); scrollable.scrollToElement($firstErrorRow) } } if (cancel && isCellEditMode && this._needUpdateRow()) { var editRowIndex = this.getEditRowIndex(); this._dataController.updateItems({ changeType: "update", rowIndices: [editRowIndex] }); this._focusEditingCell() } else if (!cancel) { var shouldResetValidationState = true; if (isCellEditMode) { var columns = this._columnsController.getColumns(); var columnsWithValidatingEditors = columns.filter(col => { var _a; return col.showEditorAlways && (null === (_a = col.validationRules) || void 0 === _a ? void 0 : _a.length) > 0 }).length > 0; shouldResetValidationState = !columnsWithValidatingEditors } if (shouldResetValidationState) { this._validatingController.initValidationState() } } } _handleDataChanged(args) { var validationState = this._validatingController._validationState; if ("standard" === this.option("scrolling.mode")) { this.resetRowAndPageIndices() } if ("prepend" === args.changeType) { each(validationState, (_, validationData) => { validationData.rowIndex += args.items.length }) } super._handleDataChanged(args) } resetRowAndPageIndices() { var validationState = this._validatingController._validationState; each(validationState, (_, validationData) => { if (validationData.pageIndex !== this._pageIndex) { delete validationData.pageIndex; delete validationData.rowIndex } }) } _beforeCancelEditData() { this._validatingController.initValidationState(); super._beforeCancelEditData() } _showErrorRow(change) { var $popupContent; var items = this._dataController.items(); var rowIndex = this.getIndexByKey(change.key, items); var validationData = this._validatingController._getValidationData(change.key); if (!(null === validationData || void 0 === validationData ? void 0 : validationData.isValid) && (null === validationData || void 0 === validationData ? void 0 : validationData.errorText) && rowIndex >= 0) { $popupContent = this.getPopupContent(); return this._errorHandlingController && this._errorHandlingController.renderErrorRow(null === validationData || void 0 === validationData ? void 0 : validationData.errorText, rowIndex, $popupContent) } } updateFieldValue(e) { var deferred = new Deferred; this._validatingController.removeCellValidationResult({ change: this.getChangeByKey(e.key), columnIndex: e.column.index }); super.updateFieldValue.apply(this, arguments).done(() => { var currentValidator = this._validatingController.getCellValidator({ rowKey: e.key, columnIndex: e.column.index }); when(currentValidator && this._validatingController.validateCell(currentValidator)).done(validationResult => { this._editorFactoryController.refocus(); deferred.resolve(validationResult) }) }); return deferred.promise() } highlightDataCell($cell, parameters) { super.highlightDataCell.apply(this, arguments); this._validatingController.setCellValidationStatus(parameters); var isEditableCell = !!parameters.setValue; var cellModified = this.isCellModified(parameters); var isValidated = isDefined(parameters.validationStatus); var needValidation = cellModified && parameters.column.setCellValue || isEditableCell && !cellModified && !(parameters.row.isNewRow || !isValidated); if (needValidation) { var validator = $cell.data("dxValidator"); if (validator) { when(this._validatingController.validateCell(validator)).done(() => { this._validatingController.setCellValidationStatus(parameters) }) } } } getChangeByKey(key) { var changes = this.getChanges(); return changes[gridCoreUtils.getIndexByKey(key, changes)] } isCellModified(parameters) { var cellModified = super.isCellModified(parameters); var change = this.getChangeByKey(parameters.key); var isCellInvalid = !!parameters.row && this._validatingController.isInvalidCell({ rowKey: parameters.key, columnIndex: parameters.column.index }); return cellModified || this._validatingController._rowIsValidated(change) && isCellInvalid } }; var getWidthOfVisibleCells = function(that, element) { var rowIndex = $(element).closest("tr").index(); var $cellElements = $(that._rowsView.getRowElement(rowIndex)).first().children().filter(":not(.dx-hidden-cell)"); return that._rowsView._getWidths($cellElements).reduce((w1, w2) => w1 + w2, 0) }; var getBoundaryNonFixedColumnsInfo = function(fixedColumns) { var firstNonFixedColumnIndex; var lastNonFixedColumnIndex; fixedColumns.some((column, index) => { if (column.command === COMMAND_TRANSPARENT) { firstNonFixedColumnIndex = 0 === index ? -1 : index; lastNonFixedColumnIndex = index === fixedColumns.length - 1 ? -1 : index + column.colspan - 1; return true } return }); return { startColumnIndex: firstNonFixedColumnIndex, endColumnIndex: lastNonFixedColumnIndex } }; export var validatingEditorFactoryExtender = Base => class extends Base { _showRevertButton($container) { var _a; var $tooltipElement = null === (_a = this._revertTooltip) || void 0 === _a ? void 0 : _a.$element(); if (!$container || !$container.length) { null === $tooltipElement || void 0 === $tooltipElement ? void 0 : $tooltipElement.remove(); this._revertTooltip = void 0; return } if ($container.find($tooltipElement).length) { return } var $overlayContainer = $container.closest(".".concat(this.addWidgetPrefix(CONTENT_CLASS))).parent(); var revertTooltipClass = this.addWidgetPrefix(REVERT_TOOLTIP_CLASS); null === $tooltipElement || void 0 === $tooltipElement ? void 0 : $tooltipElement.remove(); $tooltipElement = $("<div>").addClass(revertTooltipClass).appendTo($container); var tooltipOptions = { animation: null, visible: true, width: "auto", height: "auto", shading: false, container: $overlayContainer, propagateOutsideClick: true, hideOnOutsideClick: false, wrapperAttr: { class: revertTooltipClass }, contentTemplate: () => { var $buttonElement = $("<div>").addClass(REVERT_BUTTON_CLASS); var buttonOptions = { icon: "revert", hint: this.option("editing.texts.validationCancelChanges"), elementAttr: { id: REVERT_BUTTON_ID, "aria-label": messageLocalization.format("dxDataGrid-ariaRevertButton") }, onClick: () => { this._editingController.cancelEditData() } }; return new Button($buttonElement, buttonOptions).$element() }, position: { my: "left top", at: "right top", offset: "1 0", collision: "flip", boundaryOffset: "0 0", boundary: this._rowsView.element(), of: $container }, onPositioned: this._positionedHandler.bind(this) }; this._revertTooltip = new Overlay($tooltipElement, tooltipOptions) } _hideFixedGroupCell($cell, overlayOptions) { var $nextFixedRowElement; var $groupCellElement; var isFixedColumns = this._rowsView.isFixedColumns(); var isFormOrPopupEditMode = this._editingController.isFormOrPopupEditMode(); if (isFixedColumns && !isFormOrPopupEditMode) { var nextRowOptions = $cell.closest(".dx-row").next().data("options"); if (nextRowOptions && "group" === nextRowOptions.rowType) { $nextFixedRowElement = $(this._rowsView.getRowElement(nextRowOptions.rowIndex)).last(); $groupCellElement = $nextFixedRowElement.find(".".concat(GROUP_CELL_CLASS)); if ($groupCellElement.length && "hidden" !== $groupCellElement.get(0).style.visibility) { $groupCellElement.css("visibility", "hidden"); overlayOptions.onDisposing = function() { $groupCellElement.css("visibility", "") } } } } } _positionedHandler(e, isOverlayVisible) { if (!e.component.__skipPositionProcessing) { var isRevertButton = $(e.element).hasClass(this.addWidgetPrefix(REVERT_TOOLTIP_CLASS)); var needRepaint = !isRevertButton && this._rowsView.updateFreeSpaceRowHeight(); var normalizedPosition = this._normalizeValidationMessagePositionAndMaxWidth(e, isRevertButton, isOverlayVisible); e.component.__skipPositionProcessing = !!(needRepaint || normalizedPosition); if (normalizedPosition) { e.component.option(normalizedPosition) } else if (needRepaint) { e.component.repaint() } } } _showValidationMessage($cell, messages, alignment) { var _a; var editorPopup = $cell.find(".dx-dropdowneditor-overlay").data("dxPopup"); var isOverlayVisible = editorPopup && editorPopup.option("visible"); var myPosition = isOverlayVisible ? "top right" : "top ".concat(alignment); var atPosition = isOverlayVisible ? "top left" : "bottom ".concat(alignment); var hasFixedColumns = (null === (_a = this._columnsController.getFixedColumns()) || void 0 === _a ? void 0 : _a.length) > 0; var $overlayContainer = hasFixedColumns ? this.getView("rowsView").element() : $cell.closest(".".concat(this.addWidgetPrefix(CONTENT_CLASS))); var errorMessageText = ""; messages && messages.forEach(message => { errorMessageText += (errorMessageText.length ? "<br/>" : "") + encodeHtml(message) }); var invalidMessageClass = this.addWidgetPrefix(WIDGET_INVALID_MESSAGE_CLASS); this._rowsView.element().find(".".concat(invalidMessageClass)).remove(); var $overlayElement = $("<div>").addClass(INVALID_MESSAGE_CLASS).addClass(INVALID_MESSAGE_ALWAYS_CLASS).addClass(invalidMessageClass).html(errorMessageText).appendTo($cell); var overlayOptions = { container: $overlayContainer, shading: false, width: "auto", height: "auto", visible: true, animation: false, propagateOutsideClick: true, hideOnOutsideClick: false, wrapperAttr: { id: INVALID_MESSAGE_ID, class: "".concat(INVALID_MESSAGE_CLASS, " ").concat(INVALID_MESSAGE_ALWAYS_CLASS, " ").concat(invalidMessageClass) }, position: { collision: "flip", boundary: this._rowsView.element(), boundaryOffset: "0 0", offset: { x: 0, y: !isOverlayVisible && browser.mozilla ? -1 : 0 }, my: myPosition, at: atPosition, of: $cell }, onPositioned: e => { this._positionedHandler(e, isOverlayVisible); this._shiftValidationMessageIfNeed(e.component.$content(), $cell) } }; this._hideFixedGroupCell($cell, overlayOptions); new Overlay($overlayElement, overlayOption