@singularsystems/neo-react 1.0.16 → 1.0.17

package/dist/ReactComponents/Grid/Grid.d.ts

@@ -58,7 +58,10 @@ export interface IGridProps<T> extends Omit<React.HTMLProps<HTMLTableElement>, "
      * This is the default unless overridden in Misc.Settings.grid
      */
     isBordered?: boolean;
-    /** When specified, every alternating row will receive a slightly darker background color. */
+    /**
+     * When specified, every alternating row will receive a slightly darker background color.
+     * Note, this will not work correctly if your grid has child rows. See the neo react demo pages for a solution.
+     */
     isStriped?: boolean;
     /** When specified, the table will have no cell borders, and the table will have no main border. */
     isBorderless?: boolean;
@@ -79,6 +82,11 @@ export interface IGridProps<T> extends Omit<React.HTMLProps<HTMLTableElement>, "
      * Note: if your app has a fixed header, you need to specify this in the global neo settings.
      */
     stickyHeader?: boolean;
+    /**
+     * When true, the index parameter passed to the render function will be set.
+     * This has performance implications, as each row needs to be re-rendered on sorting or insertion of items.
+     */
+    enableRowIndexes?: boolean;
 }
 export default class Grid<T> extends React.Component<IGridProps<T>> {
     static contextType: React.Context<import("../../React/DataView").DataViewContextParams<unknown>>;

package/dist/ReactComponents/Grid/Grid.js

@@ -45,7 +45,7 @@ var Grid = /** @class */ (function (_super) {
     };
     Grid.prototype.render = function () {
         var _this = this;
-        var _a = this.props, items = _a.items, showAddButton = _a.showAddButton, addButton = _a.addButton, filterPredicate = _a.filterPredicate, keyProperty = _a.keyProperty, allowSort = _a.allowSort, expandAll = _a.expandAll, collapseAll = _a.collapseAll, initialSort = _a.initialSort, initialSortAscending = _a.initialSortAscending, isBordered = _a.isBordered, isStriped = _a.isStriped, isBorderless = _a.isBorderless, showHover = _a.showHover, isSmallTable = _a.isSmallTable, footerContent = _a.footerContent, footerButtons = _a.footerButtons, stickyHeader = _a.stickyHeader, domProps = __rest(_a, ["items", "showAddButton", "addButton", "filterPredicate", "keyProperty", "allowSort", "expandAll", "collapseAll", "initialSort", "initialSortAscending", "isBordered", "isStriped", "isBorderless", "showHover", "isSmallTable", "footerContent", "footerButtons", "stickyHeader"]);
+        var _a = this.props, items = _a.items, showAddButton = _a.showAddButton, addButton = _a.addButton, filterPredicate = _a.filterPredicate, keyProperty = _a.keyProperty, allowSort = _a.allowSort, expandAll = _a.expandAll, collapseAll = _a.collapseAll, initialSort = _a.initialSort, initialSortAscending = _a.initialSortAscending, isBordered = _a.isBordered, isStriped = _a.isStriped, isBorderless = _a.isBorderless, showHover = _a.showHover, isSmallTable = _a.isSmallTable, footerContent = _a.footerContent, footerButtons = _a.footerButtons, stickyHeader = _a.stickyHeader, enableRowIndexes = _a.enableRowIndexes, domProps = __rest(_a, ["items", "showAddButton", "addButton", "filterPredicate", "keyProperty", "allowSort", "expandAll", "collapseAll", "initialSort", "initialSortAscending", "isBordered", "isStriped", "isBorderless", "showHover", "isSmallTable", "footerContent", "footerButtons", "stickyHeader", "enableRowIndexes"]);
         if (expandAll === true) {
             this.gridContext.expandAll = true;
         }
@@ -101,12 +101,12 @@ var Grid = /** @class */ (function (_super) {
         }
         return (React.createElement("table", __assign({}, domProps, { className: className, ref: this.domRef }),
             React.createElement(GridContext.Provider, { value: this.gridContext },
-                React.createElement(TableSection, { type: "header" }, this.headerItem && this.props.children(this.headerItem, this.headerItem.meta, true)),
-                React.createElement(TableSection, { type: "body" }, this.gridContext.dataView.getItems().map(function (item) { return (React.createElement(ItemGroup, { item: item, key: keyProperty ? item[keyProperty] : item.entityIdentifier, template: _this.props.children })); })),
+                React.createElement(TableSection, { type: "header" }, this.headerItem && this.props.children(this.headerItem, this.headerItem.meta, true, -1)),
+                React.createElement(TableSection, { type: "body" }, this.gridContext.dataView.getItems().map(function (item, index) { return (React.createElement(ItemGroup, { index: enableRowIndexes ? index : 0, item: item, key: keyProperty ? item[keyProperty] : item.entityIdentifier, template: _this.props.children })); })),
                 React.createElement(Observer, null, function () {
                     return React.createElement(React.Fragment, null, (showAddButton || addButton || footerButtons || _this.gridContext.hasSummaries || footerContent !== undefined) &&
                         React.createElement(TableSection, { type: "footer" },
-                            _this.gridContext.hasSummaries && _this.headerItem && _this.props.children(_this.headerItem, _this.headerItem.meta, true),
+                            _this.gridContext.hasSummaries && _this.headerItem && _this.props.children(_this.headerItem, _this.headerItem.meta, true, -1),
                             footerContent !== undefined && footerContent(_this.gridContext.dataView.getItems()),
                             (showAddButton || addButton || footerButtons) &&
                                 React.createElement(AddButtonRow, { addButton: addButton, showAddButton: showAddButton, additionalContent: footerButtons })));
@@ -207,8 +207,7 @@ var ItemGroup = /** @class */ (function (_super) {
     }
     ItemGroup.prototype.render = function () {
         this.context.currentItem = this.props.item;
-        //this.context.inFirstRowInGroup = true;
-        return (this.props.template(this.props.item, this.props.item.meta, false));
+        return this.props.template(this.props.item, this.props.item.meta, false, this.props.index);
     };
     ItemGroup.contextType = GridContext;
     ItemGroup = __decorate([

package/dist/ReactComponents/Grid/Row.d.ts

@@ -13,6 +13,8 @@ interface IRowProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLTab
      * Handler for click events on header or footer rows. The section is passed as the first argument.
      */
     onHeaderClick?: (section: GridSection, e: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => void;
+    /** Class name that will not be applied to headers. */
+    bodyClassName?: string;
 }
 interface IState {
     isExpanded: boolean;

package/dist/ReactComponents/Grid/Row.js

@@ -53,7 +53,7 @@ var Row = /** @class */ (function (_super) {
     Row.prototype.render = function () {
         var _this = this;
         _super.prototype.onRender.call(this);
-        var _a = this.props, showInHeader = _a.showInHeader, onHeaderClick = _a.onHeaderClick, domProps = __rest(_a, ["showInHeader", "onHeaderClick"]);
+        var _a = this.props, showInHeader = _a.showInHeader, onHeaderClick = _a.onHeaderClick, bodyClassName = _a.bodyClassName, domProps = __rest(_a, ["showInHeader", "onHeaderClick", "bodyClassName"]);
         var inBody = this.section === "body";
         if (this.stateObserver)
             this.stateObserver.observe();
@@ -61,11 +61,16 @@ var Row = /** @class */ (function (_super) {
             throw "NeoGrid.Row cannot be used outside of a NeoGrid.";
         }
         var expandButtonOptions = __assign({}, Misc.Settings.grid.expandButton);
-        if (inBody && this.expandProperty) {
-            expandButtonOptions.onClick = this.onExpandClick;
-            expandButtonOptions.icon = this.expandProperty.value ? Misc.Settings.icons.expanded : Misc.Settings.icons.collapsed;
+        if (inBody) {
+            if (this.expandProperty) {
+                expandButtonOptions.onClick = this.onExpandClick;
+                expandButtonOptions.icon = this.expandProperty.value ? Misc.Settings.icons.expanded : Misc.Settings.icons.collapsed;
+            }
+            if (bodyClassName) {
+                domProps.className = Utils.joinWithSpaces(domProps.className, bodyClassName);
+            }
         }
-        if (!inBody) {
+        else {
             if (onHeaderClick) {
                 domProps.onClick = function (e) { return onHeaderClick(_this.section, e); };
             }

package/dist/ReactComponents/Grid/StickyTableHeader.d.ts

@@ -11,6 +11,8 @@ export declare class StickyTableHeader {
      * @param fixedElement A fixed element at the top of the screen to use as an anchor, rather than the top of the screen itself.
      */
     constructor(table: HTMLTableElement, fixedElement?: HTMLElement | undefined);
+    private domObserver;
+    private originalWidths;
     /** Parent element that may scroll, requiring a position update. */
     private scrollElement?;
     /** Fixed height parent element that the grid scrolls within. */
@@ -21,7 +23,9 @@ export declare class StickyTableHeader {
     private handleScroll;
     private removeCopy;
     private onPossibleContentChange;
-    private setColumnWidths;
+    private syncColumnWidths;
+    private storeColumnWidths;
+    private restoreColumnWidths;
     dispose(): void;
     /**
      * Returns the first parent element that has a scrollbar.

package/dist/ReactComponents/Grid/StickyTableHeader.js

@@ -9,8 +9,13 @@ var StickyTableHeader = /** @class */ (function () {
      * @param fixedElement A fixed element at the top of the screen to use as an anchor, rather than the top of the screen itself.
      */
     function StickyTableHeader(table, fixedElement) {
+        var _this = this;
         this.table = table;
         this.fixedElement = fixedElement;
+        this.domObserver = new MutationObserver(function (mutations) {
+            _this.syncColumnWidths();
+        });
+        this.originalWidths = [];
         this.headerHeight = 0;
         if (!table.tHead) {
             throw Error("Table must have a header section.");
@@ -46,28 +51,32 @@ var StickyTableHeader = /** @class */ (function () {
             if (!this.headerCopy) {
                 // Clone the header, and re-insert it into the table. The table will then have 2 headers.
                 // The original headers position is set to "fixed" which makes it float.
-                // The column widths of the floating header then need to be synchronised with the header that is still inside the table layout.
+                // The original header is floated instead of the clone because the react events are attached to these cells, and they are the cells that are visible. Without this, sorting wouldn't work.
+                // The column widths of the floating header then need to be synchronized with the header that is still inside the table layout.
                 this.headerHeight = this.header.getBoundingClientRect().height;
                 this.headerCopy = this.header.cloneNode(true);
                 this.table.insertBefore(this.headerCopy, this.header);
                 this.header.classList.add("neo-grid-fixed-header");
-                this.setColumnWidths();
+                this.storeColumnWidths();
+                this.syncColumnWidths();
+                this.domObserver.observe(this.header, { childList: true, subtree: true, attributes: false });
             }
             this.header.style.left = tableBounds.left + "px";
             this.header.style.top = topBoundary + "px";
             if (this.scrollElement) {
                 var left = this.scrollElement.scrollLeft;
-                var width = this.scrollElement.clientWidth + left;
+                var width = this.scrollElement.clientWidth + left - 1;
                 this.header.style.clipPath = "rect(0px ".concat(width, "px 100% ").concat(left, "px)");
             }
         }
         else {
-            this.setColumnWidths(true);
             this.removeCopy();
         }
     };
     StickyTableHeader.prototype.removeCopy = function () {
         if (this.headerCopy) {
+            this.domObserver.disconnect();
+            this.restoreColumnWidths();
             this.header.classList.remove("neo-grid-fixed-header");
             this.header.style.clipPath = "";
             this.table.removeChild(this.headerCopy);
@@ -76,20 +85,40 @@ var StickyTableHeader = /** @class */ (function () {
     };
     StickyTableHeader.prototype.onPossibleContentChange = function () {
         var _this = this;
-        setTimeout(function () { return _this.setColumnWidths(); }, 0);
+        setTimeout(function () { return _this.syncColumnWidths(); }, 0);
     };
-    StickyTableHeader.prototype.setColumnWidths = function (isRemoving) {
-        if (isRemoving === void 0) { isRemoving = false; }
+    StickyTableHeader.prototype.syncColumnWidths = function () {
         if (this.headerCopy) {
             for (var i = 0; i < this.header.rows.length; i++) {
                 var originalRow = this.header.rows[i], copyRow = this.headerCopy.rows[i];
+                if (originalRow.cells.length !== copyRow.cells.length) {
+                    this.removeCopy();
+                    this.handleScroll();
+                    return;
+                }
                 for (var j = 0; j < originalRow.cells.length; j++) {
                     var originalCell = originalRow.cells[j], copyCell = copyRow.cells[j];
-                    originalCell.style.width = isRemoving ? copyCell.style.width : window.getComputedStyle(copyCell).width;
+                    originalCell.style.width = window.getComputedStyle(copyCell).width;
                 }
             }
         }
     };
+    StickyTableHeader.prototype.storeColumnWidths = function () {
+        this.originalWidths = [];
+        for (var i = 0; i < this.header.rows.length; i++) {
+            var row = this.header.rows[i];
+            for (var j = 0; j < row.cells.length; j++) {
+                var cell = row.cells[j];
+                this.originalWidths.push({ cell: cell, width: cell.style.width });
+            }
+        }
+    };
+    StickyTableHeader.prototype.restoreColumnWidths = function () {
+        for (var _i = 0, _a = this.originalWidths; _i < _a.length; _i++) {
+            var cellRef = _a[_i];
+            cellRef.cell.style.width = cellRef.width;
+        }
+    };
     StickyTableHeader.prototype.dispose = function () {
         document.removeEventListener("scroll", this.handleScroll);
         if (this.scrollElement) {

package/dist/ReactComponents/PropTypes.d.ts

@@ -11,7 +11,7 @@ import PropertyInfo from '@singularsystems/neo-core/dist/Model/PropertyInfo';
 import { IComponentBase } from './ComponentBase';
 import FileInput, { IFileEditorProps } from './FileManager/FileInput';
 import { FormContextParams } from './FormContext';
-export type ItemCallback<T> = (item: T, meta: TransformMetaType<T>, isHeader: boolean) => React.ReactNode;
+export type ItemCallback<T> = (item: T, meta: TransformMetaType<T>, isHeader: boolean, index: number) => React.ReactNode;
 export declare enum ControlType {
     Date = 0,
     Number = 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",