cx 22.1.1 → 22.1.4

package/src/ui/app/History.d.ts

@@ -1,4 +1,4 @@
-import { View } from './../../data/View';
+import { View } from "./../../data/View";
 
 export class History {
    static connect(store: View, urlBinding: string, hashBinding?: string);
@@ -11,5 +11,7 @@ export class History {
 
    static reloadOnNextChange();
 
-   static addNavigateConfirmation(callback: ((url?: string) => boolean | Promise<boolean>), executeOnlyOnce?: boolean);
+   static addNavigateConfirmation(callback: (url?: string) => boolean | Promise<boolean>, executeOnlyOnce?: boolean);
+
+   static confirm(continueCallback: () => void, state: any);
 }

package/src/ui/app/History.js

@@ -1,6 +1,6 @@
-import {Url} from './Url';
-import {batchUpdatesAndNotify} from '../batchUpdates';
-import {SubscriberList} from '../../util/SubscriberList';
+import { Url } from "./Url";
+import { batchUpdatesAndNotify } from "../batchUpdates";
+import { SubscriberList } from "../../util/SubscriberList";
 
 let last = 0,
    next = 1,
@@ -10,16 +10,14 @@ let last = 0,
    navigateConfirmationCallback = null,
    permanentNavigateConfirmation = false;
 
-
 export class History {
-
    static connect(store, urlBinding, hashBinding) {
       this.store = store;
       this.urlBinding = urlBinding;
       this.hashBinding = hashBinding;
       this.updateStore();
       window.onpopstate = () => {
-         this.updateStore()
+         this.updateStore();
       };
    }
 
@@ -40,24 +38,24 @@ export class History {
       permanentNavigateConfirmation = permanent;
    }
 
-   static confirmAndNavigate(state, title, url, replace) {
-      if (!navigateConfirmationCallback)
-         return this.navigate(state, title, url, replace);
-
-      let result = navigateConfirmationCallback(url);
-
-      Promise
-         .resolve(result)
-         .then(value => {
-            if (value) {
-               if (!permanentNavigateConfirmation)
-                  navigateConfirmationCallback = null;
-               this.navigate(state, title, url, replace);
-            }
-         });
+   static confirm(continueCallback, state) {
+      if (!navigateConfirmationCallback) return continueCallback();
+
+      let result = navigateConfirmationCallback(state);
+      Promise.resolve(result).then((value) => {
+         if (value) {
+            if (!permanentNavigateConfirmation) navigateConfirmationCallback = null;
+            continueCallback();
+         }
+      });
+
       return false;
    }
 
+   static confirmAndNavigate(state, title, url, replace) {
+      return this.confirm(() => this.navigate(state, title, url, replace), url);
+   }
+
    static navigate(state, title, url, replace = false) {
       url = Url.resolve(url);
 
@@ -66,50 +64,51 @@ export class History {
          return true;
       }
 
-      let transition, changed = false;
-      batchUpdatesAndNotify(() => {
-         changed = this.updateStore(url);
-         if (changed)
-            transitions[++last] = transition = {
-               url,
-               state,
-               title,
-               replace
+      let transition,
+         changed = false;
+      batchUpdatesAndNotify(
+         () => {
+            changed = this.updateStore(url);
+            if (changed)
+               transitions[++last] = transition = {
+                  url,
+                  state,
+                  title,
+                  replace,
+               };
+         },
+         () => {
+            if (transition) transition.completed = true;
+
+            //update history once the page is rendered and the title is set
+            while (transitions[next] && transitions[next].completed) {
+               let tr = transitions[next];
+               delete transitions[next];
+               next++;
+               let op = tr.replace ? "replaceState" : "pushState";
+               window.history[op](tr.state, tr.title, tr.url);
+               if (subscribers) subscribers.notify(tr.url, op);
             }
-      }, () => {
-         if (transition)
-            transition.completed = true;
-
-         //update history once the page is rendered and the title is set
-         while (transitions[next] && transitions[next].completed) {
-            let tr = transitions[next];
-            delete transitions[next];
-            next++;
-            let op = tr.replace ? "replaceState" : "pushState";
-            window.history[op](tr.state, tr.title, tr.url);
-            if (subscribers)
-               subscribers.notify(tr.url, op);
          }
-      });
+      );
 
       return changed;
    }
 
    static updateStore(href) {
-      let url = Url.unresolve(href || document.location.href), hash = null;
-      let hashIndex = url.indexOf('#');
+      let url = Url.unresolve(href || document.location.href),
+         hash = null;
+      let hashIndex = url.indexOf("#");
       if (hashIndex !== -1) {
          hash = url.substring(hashIndex);
          url = url.substring(0, hashIndex);
       }
-      if (this.hashBinding)
-         this.store.set(this.hashBinding, hash);
+      if (this.hashBinding) this.store.set(this.hashBinding, hash);
       return this.store.set(this.urlBinding, url);
    }
 
    static subscribe(callback) {
-      if (!subscribers)
-         subscribers = new SubscriberList();
-      return subscribers.subscribe(callback)
+      if (!subscribers) subscribers = new SubscriberList();
+      return subscribers.subscribe(callback);
    }
 }

package/src/widgets/form/LookupField.d.ts

@@ -152,9 +152,6 @@ interface LookupFieldProps extends FieldProps {
    /** Number of additional items to be loaded in `infinite` mode. Default is 100. */
    pageSize?: number;
 
-   /** The dropdown will be automatically closed if the page is scrolled a certain distance.  */
-   closeDropdownOnScrollDistance?: number;
-
    /** Set to `true` to allow quick selection of all displayed lookup items on `ctrl + a` keys combination.  */
    quickSelectAll?: boolean;
 }

package/src/widgets/form/LookupField.js

@@ -236,7 +236,6 @@ LookupField.prototype.submitOnEnterKey = false;
 LookupField.prototype.submitOnDropdownEnterKey = false;
 LookupField.prototype.pageSize = 100;
 LookupField.prototype.infinite = false;
-LookupField.prototype.closeDropdownOnScrollDistance = 100;
 LookupField.prototype.quickSelectAll = false;
 
 Localization.registerPrototype("cx/widgets/LookupField", LookupField);
@@ -371,16 +370,9 @@ class LookupComponent extends VDOM.Component {
                };
             }
          },
-         onDropdownPositionDidUpdate: (params) => {
-            let { parentBounds } = params;
-            let { initialScreenPosition } = this;
-            if (!initialScreenPosition) initialScreenPosition = this.initialScreenPosition = params.parentBounds;
-
-            if (
-               Math.abs(parentBounds.top - initialScreenPosition.top) > widget.closeDropdownOnScrollDistance ||
-               Math.abs(parentBounds.left - initialScreenPosition.left) > widget.closeDropdownOnScrollDistance
-            )
-               this.closeDropdown(null, true);
+         onDismissAfterScroll: () => {
+            this.closeDropdown(null, true);
+            return false;
          },
       };
 
@@ -543,7 +535,6 @@ class LookupComponent extends VDOM.Component {
             !data.disabled &&
             !data.empty &&
             (widget.alwaysShowClear || (!data.required && !this.props.multiple) || multipleEntries)
-
          ) {
             insideButton = (
                <div
@@ -720,15 +711,13 @@ class LookupComponent extends VDOM.Component {
          let newRecords = reset ? [] : [...(records || [])];
          let singleSelect = itemsData.length == 1;
          let optionKey = null;
-         if (singleSelect)
-            optionKey = this.getOptionKey(itemsData[0]);
+         if (singleSelect) optionKey = this.getOptionKey(itemsData[0]);
 
          // deselect
          if (singleSelect && selectedKeys.find((k) => areKeysEqual(optionKey, k))) {
             newRecords = records.filter((v) => !areKeysEqual(optionKey, this.getLocalKey({ $value: v })));
-         }
-         else {
-            itemsData.forEach(itemData => {
+         } else {
+            itemsData.forEach((itemData) => {
                let valueData = {
                   $value: {},
                };
@@ -787,8 +776,8 @@ class LookupComponent extends VDOM.Component {
             let { quickSelectAll, multiple } = this.props.instance.widget;
             if (!quickSelectAll || !multiple) return;
 
-            let optionsToSelect = this.state.options.map(o => ({
-               $option: o
+            let optionsToSelect = this.state.options.map((o) => ({
+               $option: o,
             }));
             this.select(e, optionsToSelect, true);
             e.stopPropagation();
@@ -798,7 +787,6 @@ class LookupComponent extends VDOM.Component {
          default:
             if (this.listKeyDown) this.listKeyDown(e);
             break;
-
       }
    }
 
@@ -896,7 +884,6 @@ class LookupComponent extends VDOM.Component {
 
       //delete results valid only while the dropdown is open
       delete this.tmpCachedResult;
-      delete this.initialScreenPosition;
    }
 
    openDropdown(e) {
@@ -968,10 +955,10 @@ class LookupComponent extends VDOM.Component {
             let params = !widget.infinite
                ? query
                : {
-                  query,
-                  page: 1,
-                  pageSize,
-               };
+                    query,
+                    page: 1,
+                    pageSize,
+                 };
 
             if (!result) result = instance.invoke("onQuery", params, instance);
 

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,
                };
             }
@@ -486,6 +486,100 @@ export class Grid extends Widget {
       );
    }
 
+   renderResizer(instance, hdinst, header, colIndex, forPreviousColumn) {
+      let { widget } = instance;
+
+      let { CSS, baseClass } = widget;
+
+      let hdwidget = hdinst.widget;
+
+      let resizerClassName = "col-resizer";
+      if (forPreviousColumn) resizerClassName += "-prev-col";
+
+      return (
+         <div
+            className={CSS.element(baseClass, resizerClassName)}
+            onClick={(e) => {
+               e.stopPropagation();
+            }}
+            onMouseDown={(e) => {
+               if (e.buttons != 1) return;
+               let resizeOverlayEl = document.createElement("div");
+               let headerCell = e.target.parentElement;
+               if (forPreviousColumn) headerCell = headerCell.previousSibling;
+
+               let scrollAreaEl = headerCell.parentElement.parentElement.parentElement.parentElement;
+               let gridEl = scrollAreaEl.parentElement;
+               let initialWidth = headerCell.offsetWidth;
+               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`;
+               gridEl.appendChild(resizeOverlayEl);
+               captureMouse2(e, {
+                  onMouseMove: (e) => {
+                     let cursor = getCursorPos(e);
+                     let width = Math.max(30, Math.round(initialWidth + cursor.clientX - initialPosition.clientX));
+                     resizeOverlayEl.style.width = `${width}px`;
+                  },
+                  onMouseUp: (e) => {
+                     if (!resizeOverlayEl) return; //dblclick
+                     let width = resizeOverlayEl.offsetWidth;
+                     hdinst.assignedWidth = width;
+                     gridEl.removeChild(resizeOverlayEl);
+                     resizeOverlayEl = null;
+                     if (widget.onColumnResize) instance.invoke("onColumnResize", { width, column: hdwidget }, hdinst);
+                     header.set("width", width);
+                     instance.setState({
+                        dimensionsVersion: instance.state.dimensionsVersion + 1,
+                        colWidth: {
+                           ...instance.state.colWidth,
+                           [hdwidget.uniqueColumnId]: width,
+                        },
+                     });
+                  },
+                  onDblClick: () => {
+                     let table = gridEl.querySelector("table");
+                     let parentEl = table.parentElement;
+                     let tableClone = table.cloneNode(true);
+                     tableClone.childNodes.forEach((tbody) => {
+                        tbody.childNodes.forEach((tr) => {
+                           tr.childNodes.forEach((td, index) => {
+                              if (index == colIndex) {
+                                 td.style.maxWidth = null;
+                                 td.style.minWidth = null;
+                                 td.style.width = "auto";
+                              } else {
+                                 td.style.display = "none";
+                              }
+                           });
+                        });
+                     });
+                     tableClone.style.position = "absolute";
+                     tableClone.style.visibility = "hidden";
+                     tableClone.style.top = 0;
+                     tableClone.style.left = 0;
+                     tableClone.style.width = "auto";
+                     parentEl.appendChild(tableClone);
+                     let width = tableClone.offsetWidth;
+                     parentEl.removeChild(tableClone);
+                     header.set("width", width);
+                     instance.setState({
+                        dimensionsVersion: instance.state.dimensionsVersion + 1,
+                        colWidth: {
+                           ...instance.state.colWidth,
+                           [hdwidget.uniqueColumnId]: width,
+                        },
+                     });
+                  },
+               });
+            }}
+         />
+      );
+   }
+
    renderHeader(context, instance, key, fixed, fixedColumns) {
       let { data, widget, header } = instance;
 
@@ -520,7 +614,8 @@ export class Grid extends Widget {
                   sortIcon,
                   tool;
 
-               let resizer = null;
+               let resizer = null,
+                  prevColumnResizer = null;
 
                if (header) {
                   empty[l] = false;
@@ -578,89 +673,12 @@ export class Grid extends Widget {
                   }
 
                   if ((hdwidget.resizable || header.data.resizable) && header.data.colSpan < 2) {
-                     resizer = (
-                        <div
-                           className={CSS.element(baseClass, "col-resizer")}
-                           onClick={(e) => {
-                              e.stopPropagation();
-                           }}
-                           onMouseDown={(e) => {
-                              if (e.buttons != 1) return;
-                              let resizeOverlayEl = document.createElement("div");
-                              let headerCell = e.target.parentElement;
-                              let scrollAreaEl = headerCell.parentElement.parentElement.parentElement.parentElement;
-                              let gridEl = scrollAreaEl.parentElement;
-                              let initialWidth = headerCell.offsetWidth;
-                              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`;
-                              gridEl.appendChild(resizeOverlayEl);
-                              captureMouse2(e, {
-                                 onMouseMove: (e) => {
-                                    let cursor = getCursorPos(e);
-                                    let width = Math.max(
-                                       30,
-                                       Math.round(initialWidth + cursor.clientX - initialPosition.clientX)
-                                    );
-                                    resizeOverlayEl.style.width = `${width}px`;
-                                 },
-                                 onMouseUp: (e) => {
-                                    if (!resizeOverlayEl) return; //dblclick
-                                    let width = resizeOverlayEl.offsetWidth;
-                                    hdinst.assignedWidth = width;
-                                    gridEl.removeChild(resizeOverlayEl);
-                                    resizeOverlayEl = null;
-                                    if (widget.onColumnResize)
-                                       instance.invoke("onColumnResize", { width, column: hdwidget }, hdinst);
-                                    header.set("width", width);
-                                    instance.setState({
-                                       dimensionsVersion: instance.state.dimensionsVersion + 1,
-                                       colWidth: {
-                                          ...instance.state.colWidth,
-                                          [hdwidget.uniqueColumnId]: width,
-                                       },
-                                    });
-                                 },
-                                 onDblClick: () => {
-                                    let table = gridEl.querySelector("table");
-                                    let parentEl = table.parentElement;
-                                    let tableClone = table.cloneNode(true);
-                                    tableClone.childNodes.forEach((tbody) => {
-                                       tbody.childNodes.forEach((tr) => {
-                                          tr.childNodes.forEach((td, index) => {
-                                             if (index == colIndex) {
-                                                td.style.maxWidth = null;
-                                                td.style.minWidth = null;
-                                                td.style.width = "auto";
-                                             } else {
-                                                td.style.display = "none";
-                                             }
-                                          });
-                                       });
-                                    });
-                                    tableClone.style.position = "absolute";
-                                    tableClone.style.visibility = "hidden";
-                                    tableClone.style.top = 0;
-                                    tableClone.style.left = 0;
-                                    tableClone.style.width = "auto";
-                                    parentEl.appendChild(tableClone);
-                                    let width = tableClone.offsetWidth;
-                                    parentEl.removeChild(tableClone);
-                                    header.set("width", width);
-                                    instance.setState({
-                                       dimensionsVersion: instance.state.dimensionsVersion + 1,
-                                       colWidth: {
-                                          ...instance.state.colWidth,
-                                          [hdwidget.uniqueColumnId]: width,
-                                       },
-                                    });
-                                 },
-                              });
-                           }}
-                        />
-                     );
+                     resizer = this.renderResizer(instance, hdinst, header, colIndex);
+                     if (colIndex > 0) {
+                        let hdinstPrev = line.children[colIndex - 1];
+                        let headerPrev = hdinstPrev.components[`header${l + 1}`];
+                        prevColumnResizer = this.renderResizer(instance, hdinstPrev, headerPrev, colIndex, true);
+                     }
                   }
                }
 
@@ -686,6 +704,7 @@ export class Grid extends Widget {
                      {getContent(content)}
                      {sortIcon}
                      {tool}
+                     {prevColumnResizer}
                      {resizer}
                   </th>
                );
@@ -743,7 +762,7 @@ export class Grid extends Widget {
                   widget: () => <div className={CSS.element(baseClass, "col-header-drag-clone")}>{data.text}</div>,
                },
             },
-            () => { }
+            () => {}
          );
       }
    }
@@ -769,14 +788,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 +1037,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 +1094,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 +1107,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 +1233,8 @@ class GridComponent extends VDOM.Component {
                   style={
                      this.rowHeight > 0
                         ? {
-                           height: this.rowHeight + 1,
-                        }
+                             height: this.rowHeight + 1,
+                          }
                         : null
                   }
                >
@@ -1484,8 +1502,6 @@ class GridComponent extends VDOM.Component {
                               true
                            )
                         );
-
-
                   }
                }
             }
@@ -1915,8 +1931,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 +2498,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 +2534,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 +3188,6 @@ class AvgHeight {
    }
 }
 
-
 function getDragDropEvent(ev) {
    return {
       event: ev,
@@ -3164,7 +3196,7 @@ function getDragDropEvent(ev) {
       source: {
          width: 32,
          height: 32,
-         margin: []
-      }
+         margin: [],
+      },
    };
-}
+}

package/src/widgets/grid/Grid.scss

@@ -613,6 +613,15 @@
       cursor: col-resize;
    }
 
+   .#{$element}#{$name}-col-resizer-prev-col {
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 5px;
+      cursor: col-resize;
+   }
+
    .#{$element}#{$name}-resize-overlay {
       position: absolute;
       display: block;