@linzjs/step-ag-grid 17.2.0 → 17.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -2
- package/dist/GridTheme.scss +12 -2
- package/dist/index.css +16 -0
- package/dist/src/components/Grid.d.ts +2 -1
- package/dist/step-ag-grid.cjs.js +18 -5
- package/dist/step-ag-grid.cjs.js.map +1 -1
- package/dist/step-ag-grid.esm.js +18 -5
- package/dist/step-ag-grid.esm.js.map +1 -1
- package/package.json +3 -3
- package/src/components/Grid.tsx +30 -6
- package/src/stories/grid/GridDragRow.stories.tsx +121 -0
- package/src/styles/Grid.scss +19 -0
- package/src/styles/GridTheme.scss +12 -2
package/dist/step-ag-grid.esm.js
CHANGED
|
@@ -2506,20 +2506,24 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
|
|
|
2506
2506
|
},
|
|
2507
2507
|
};
|
|
2508
2508
|
});
|
|
2509
|
-
return params.selectable
|
|
2509
|
+
return params.selectable || params.onRowDragEnd
|
|
2510
2510
|
? [
|
|
2511
2511
|
{
|
|
2512
2512
|
colId: "selection",
|
|
2513
2513
|
editable: false,
|
|
2514
|
-
|
|
2515
|
-
|
|
2514
|
+
rowDrag: !!params.onRowDragEnd,
|
|
2515
|
+
minWidth: params.selectable && params.onRowDragEnd ? 76 : 48,
|
|
2516
|
+
maxWidth: params.selectable && params.onRowDragEnd ? 76 : 48,
|
|
2516
2517
|
pinned: selectColumnPinned,
|
|
2517
2518
|
headerComponentParams: {
|
|
2518
2519
|
exportable: false,
|
|
2519
2520
|
},
|
|
2520
|
-
checkboxSelection:
|
|
2521
|
+
checkboxSelection: params.selectable,
|
|
2521
2522
|
headerComponent: rowSelection === "multiple" ? GridHeaderSelect : null,
|
|
2523
|
+
//headerCheckboxSelection:true,
|
|
2522
2524
|
suppressHeaderKeyboardEvent: (e) => {
|
|
2525
|
+
if (!params.selectable)
|
|
2526
|
+
return false;
|
|
2523
2527
|
if ((e.event.key === "Enter" || e.event.key === " ") && !e.event.repeat) {
|
|
2524
2528
|
if (isEmpty(e.api.getSelectedRows())) {
|
|
2525
2529
|
e.api.selectAllFiltered();
|
|
@@ -2539,6 +2543,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
|
|
|
2539
2543
|
}, [
|
|
2540
2544
|
params.columnDefs,
|
|
2541
2545
|
params.selectable,
|
|
2546
|
+
params.onRowDragEnd,
|
|
2542
2547
|
params.readOnly,
|
|
2543
2548
|
params.defaultColDef?.editable,
|
|
2544
2549
|
selectColumnPinned,
|
|
@@ -2731,6 +2736,14 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
|
|
|
2731
2736
|
}
|
|
2732
2737
|
}, []);
|
|
2733
2738
|
const gridContextMenu = useGridContextMenu({ contextMenu: params.contextMenu, contextMenuSelectRow });
|
|
2739
|
+
const onRowDragEnd = useCallback((event) => {
|
|
2740
|
+
const moved = event.node.data;
|
|
2741
|
+
const target = event.overNode?.data;
|
|
2742
|
+
moved.id != target.id &&
|
|
2743
|
+
event.node.rowIndex != null &&
|
|
2744
|
+
params.onRowDragEnd &&
|
|
2745
|
+
params.onRowDragEnd(moved, target, event.node.rowIndex);
|
|
2746
|
+
}, [params]);
|
|
2734
2747
|
// This is setting a ref in the GridContext so won't be triggering an update loop
|
|
2735
2748
|
setOnCellEditingComplete(params.onCellEditingComplete);
|
|
2736
2749
|
return (jsxs("div", { "data-testid": dataTestId, className: clsx("Grid-container", theme, staleGrid && "Grid-sortIsStale", gridReady && params.rowData && autoSized && "Grid-ready"), children: [gridContextMenu.component, jsx("div", { style: { flex: 1 }, ref: gridDivRef, children: jsx(AgGridReact, { rowHeight: rowHeight, animateRows: params.animateRows, rowClassRules: params.rowClassRules, getRowId: (params) => `${params.data.id}`, suppressRowClickSelection: true, rowSelection: rowSelection, suppressBrowserResizeObserver: true, onGridSizeChanged: onGridSizeChanged, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: () => {
|
|
@@ -2739,7 +2752,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
|
|
|
2739
2752
|
let rowCount = 0;
|
|
2740
2753
|
event.api.forEachNode(() => rowCount++);
|
|
2741
2754
|
return (jsx(GridNoRowsOverlay, { rowCount: rowCount, filteredRowCount: event.api.getDisplayedRowCount(), noRowsOverlayText: params.noRowsOverlayText }));
|
|
2742
|
-
}, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: params.
|
|
2755
|
+
}, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: params.onRowDragEnd ? undefined : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, isExternalFilterPresent: isExternalFilterPresent, doesExternalFilterPass: doesExternalFilterPass, maintainColumnOrder: true, preventDefaultOnContextMenu: true, onCellContextMenu: gridContextMenu.cellContextMenu, rowDragText: params.rowDragText, rowDragManaged: !!params.onRowDragEnd, suppressMoveWhenRowDragging: true, onRowDragEnd: onRowDragEnd }) })] }));
|
|
2743
2756
|
};
|
|
2744
2757
|
|
|
2745
2758
|
const GridPopoverContext = createContext({
|