cx 22.1.1 → 22.1.2

package/dist/widgets.js

@@ -20116,16 +20116,33 @@ var GridComponent = /*#__PURE__*/ (function(_VDOM$Component) {
 					}
 				}
 
-				if (futureState.cellEdit && !wasCellEditing)
-					_this11.cellEditUndoData = _this11.getRecordAt(futureState.cursor).data;
+				if (futureState.cellEdit && !wasCellEditing) {
+					var _record = _this11.getRecordAt(futureState.cursor);
+
+					var cellEditUndoData = _record.data;
+					if (
+						widget.onBeforeCellEdit &&
+						_this11.props.instance.invoke(
+							"onBeforeCellEdit",
+							{
+								column: visibleColumns[futureState.cursorCellIndex],
+								data: cellEditUndoData,
+								field: visibleColumns[futureState.cursorCellIndex].field
+							},
+							_record
+						) === false
+					)
+						return;
+					_this11.cellEditUndoData = cellEditUndoData;
+				}
 
 				_this11.setState(newState, function() {
 					if (_this11.state.focused && !_this11.state.cellEdit && wasCellEditing) FocusManager.focus(_this11.dom.el);
 
 					if (scrollIntoView) {
-						var _record = _this11.getRecordAt(index);
+						var _record2 = _this11.getRecordAt(index);
 
-						var item = _record && _this11.dom.table.querySelector('tbody[data-record-key="' + _record.key + '"]');
+						var item = _record2 && _this11.dom.table.querySelector('tbody[data-record-key="' + _record2.key + '"]');
 
 						var hscroll = false;
 
@@ -20136,7 +20153,7 @@ var GridComponent = /*#__PURE__*/ (function(_VDOM$Component) {
 									item =
 										item.firstChild.children[_this11.state.cursorCellIndex - _this11.props.instance.fixedColumnCount];
 								} else {
-									var fixedItem = _this11.dom.fixedTable.querySelector('tbody[data-record-key="' + _record.key + '"]');
+									var fixedItem = _this11.dom.fixedTable.querySelector('tbody[data-record-key="' + _record2.key + '"]');
 
 									var cell = fixedItem && fixedItem.firstChild.children[_this11.state.cursorCellIndex];
 									if (cell) scrollElementIntoView(cell, false, true, 10);
@@ -20347,10 +20364,10 @@ var GridComponent = /*#__PURE__*/ (function(_VDOM$Component) {
 
 			case KeyCode.down:
 				for (var _cursor = this.state.cursor + 1; ; _cursor++) {
-					var _record2 = this.getRecordAt(_cursor);
+					var _record3 = this.getRecordAt(_cursor);
 
-					if (!_record2) break;
-					if (_record2.type != "data") continue;
+					if (!_record3) break;
+					if (_record3.type != "data") continue;
 					this.moveCursor(_cursor, {
 						focused: true,
 						scrollIntoView: true,
@@ -20366,10 +20383,10 @@ var GridComponent = /*#__PURE__*/ (function(_VDOM$Component) {
 
 			case KeyCode.up:
 				for (var _cursor2 = this.state.cursor - 1; _cursor2 >= 0; _cursor2--) {
-					var _record3 = this.getRecordAt(_cursor2);
+					var _record4 = this.getRecordAt(_cursor2);
 
-					if (!_record3) break;
-					if (_record3.type != "data") continue;
+					if (!_record4) break;
+					if (_record4.type != "data") continue;
 					this.moveCursor(_cursor2, {
 						focused: true,
 						scrollIntoView: true,

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "22.1.1",
+   "version": "22.1.2",
    "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
    "main": "index.js",
    "jsnext:main": "src/index.js",

package/src/ui/FocusManager.d.ts

@@ -1,27 +1,29 @@
-import * as Cx from '../core';
+import * as Cx from "../core";
 
 declare type FocusOutCallback = (Element) => void;
 
 export class FocusManager {
-    static subscribe(callback: FocusOutCallback): void;
+   static subscribe(callback: FocusOutCallback): void;
 
-    static onFocusOut(el : Element, callback: FocusOutCallback): () => void;
+   static onFocusOut(el: Element, callback: FocusOutCallback): () => void;
 
-    static oneFocusOut(el: Element, callback: FocusOutCallback): () => void;
+   static oneFocusOut(el: Element, callback: FocusOutCallback): () => void;
 
-    static nudge(): () => void;
+   static nudge(): () => void;
 
-    static focus(el: Element): () => void;
+   static focus(el: Element): () => void;
 
-    static focusFirst(el: Element): () => void;
+   static focusFirst(el: Element): () => void;
 
-    static setInterval(interval: number) : void;
+   static setInterval(interval: number): void;
 }
 
 export function oneFocusOut(component: any, el: Element, callback: FocusOutCallback);
 
-export function offFocusOut(component: any) : void;
+export function offFocusOut(component: any): void;
 
-export function preventFocus(e: Event) : void;
+export function preventFocus(e: Event): void;
 
 export function preventFocusOnTouch(e: Event, force?: boolean): void;
+
+export function unfocusElement(target?: Element, forceBlur?: boolean): void;

package/src/widgets/grid/Grid.d.ts

@@ -305,6 +305,9 @@ interface GridProps extends Cx.StyledContainerProps {
    /** Set to true to enable cell editing. Please note that all editable columns should specify the editor field. */
    cellEditable?: boolean;
 
+   /** A callback function which is executed before a cell editor is initalized. Return false from the callback to prevent the cell from going into the edit mode. */
+   onBeforeCellEdit?: (change, record) => any;
+
    /** A callback function which is executed after a cell has been successfully edited. */
    onCellEdited?: (change, record) => void;
 

package/src/widgets/grid/Grid.js

@@ -162,16 +162,16 @@ export class Grid extends Widget {
                   value: isDefined(c.aggregateValue)
                      ? c.aggregateValue
                      : isDefined(c.value)
-                        ? c.value
-                        : c.aggregateField
-                           ? { bind: this.recordName + "." + c.aggregateField }
-                           : null,
+                     ? c.value
+                     : c.aggregateField
+                     ? { bind: this.recordName + "." + c.aggregateField }
+                     : null,
                   weight:
                      c.weight != null
                         ? c.weight
                         : c.weightField && {
-                           bind: this.recordName + "." + c.weightField,
-                        },
+                             bind: this.recordName + "." + c.weightField,
+                          },
                   type: c.aggregate,
                };
             }
@@ -594,8 +594,9 @@ export class Grid extends Widget {
                               let initialPosition = getCursorPos(e);
                               resizeOverlayEl.className = CSS.element(baseClass, "resize-overlay");
                               resizeOverlayEl.style.width = `${initialWidth}px`;
-                              resizeOverlayEl.style.left = `${headerCell.getBoundingClientRect().left - gridEl.getBoundingClientRect().left
-                                 }px`;
+                              resizeOverlayEl.style.left = `${
+                                 headerCell.getBoundingClientRect().left - gridEl.getBoundingClientRect().left
+                              }px`;
                               gridEl.appendChild(resizeOverlayEl);
                               captureMouse2(e, {
                                  onMouseMove: (e) => {
@@ -743,7 +744,7 @@ export class Grid extends Widget {
                   widget: () => <div className={CSS.element(baseClass, "col-header-drag-clone")}>{data.text}</div>,
                },
             },
-            () => { }
+            () => {}
          );
       }
    }
@@ -769,14 +770,14 @@ export class Grid extends Widget {
 
          let sorters = direction
             ? [
-               {
-                  field,
-                  direction,
-                  value,
-                  comparer,
-                  sortOptions,
-               },
-            ]
+                 {
+                    field,
+                    direction,
+                    value,
+                    comparer,
+                    sortOptions,
+                 },
+              ]
             : null;
 
          instance.set("sorters", sorters);
@@ -1018,7 +1019,6 @@ export class Grid extends Widget {
                   )
                );
 
-
             if (g.showHeader) {
                record.vdom.push(this.renderHeader(context, instance, record.key + "-header", false, false));
                if (hasFixedColumns)
@@ -1076,7 +1076,7 @@ export class Grid extends Widget {
          instance,
          record.grouping,
          record.level,
-         record.group || { "$key": "fixed-footer" },
+         record.group || { $key: "fixed-footer" },
          record.key + "-footer",
          record.store,
          true,
@@ -1089,7 +1089,7 @@ export class Grid extends Widget {
             instance,
             record.grouping,
             record.level,
-            record.group || { "$key": "fixed-footer" },
+            record.group || { $key: "fixed-footer" },
             record.key + "-footer",
             record.store,
             true,
@@ -1215,8 +1215,8 @@ class GridComponent extends VDOM.Component {
                   style={
                      this.rowHeight > 0
                         ? {
-                           height: this.rowHeight + 1,
-                        }
+                             height: this.rowHeight + 1,
+                          }
                         : null
                   }
                >
@@ -1484,8 +1484,6 @@ class GridComponent extends VDOM.Component {
                               true
                            )
                         );
-
-
                   }
                }
             }
@@ -1915,8 +1913,7 @@ class GridComponent extends VDOM.Component {
             };
             instance.invoke("onColumnDrop", e, instance);
          }
-      }
-      catch (err) {
+      } catch (err) {
          console.error("Grid drop operation failed. Please fix this error:", err);
       }
 
@@ -2483,8 +2480,26 @@ class GridComponent extends VDOM.Component {
                }
             }
 
-            if (futureState.cellEdit && !wasCellEditing)
-               this.cellEditUndoData = this.getRecordAt(futureState.cursor).data;
+            if (futureState.cellEdit && !wasCellEditing) {
+               let record = this.getRecordAt(futureState.cursor);
+               let cellEditUndoData = record.data;
+
+               if (
+                  widget.onBeforeCellEdit &&
+                  this.props.instance.invoke(
+                     "onBeforeCellEdit",
+                     {
+                        column: visibleColumns[futureState.cursorCellIndex],
+                        data: cellEditUndoData,
+                        field: visibleColumns[futureState.cursorCellIndex].field,
+                     },
+                     record
+                  ) === false
+               )
+                  return;
+
+               this.cellEditUndoData = cellEditUndoData;
+            }
 
             this.setState(newState, () => {
                if (this.state.focused && !this.state.cellEdit && wasCellEditing) FocusManager.focus(this.dom.el);
@@ -2501,7 +2516,7 @@ class GridComponent extends VDOM.Component {
                            hscroll = true;
                            item =
                               item.firstChild.children[
-                              this.state.cursorCellIndex - this.props.instance.fixedColumnCount
+                                 this.state.cursorCellIndex - this.props.instance.fixedColumnCount
                               ];
                         } else {
                            let fixedItem = this.dom.fixedTable.querySelector(`tbody[data-record-key="${record.key}"]`);
@@ -3155,7 +3170,6 @@ class AvgHeight {
    }
 }
 
-
 function getDragDropEvent(ev) {
    return {
       event: ev,
@@ -3164,7 +3178,7 @@ function getDragDropEvent(ev) {
       source: {
          width: 32,
          height: 32,
-         margin: []
-      }
+         margin: [],
+      },
    };
-}
+}