@linzjs/step-ag-grid 17.3.0 → 17.4.1
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/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 +22 -6
- package/dist/step-ag-grid.cjs.js.map +1 -1
- package/dist/step-ag-grid.esm.js +22 -6
- package/dist/step-ag-grid.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Grid.tsx +30 -6
- package/src/react-menu3/components/ControlledMenu.tsx +5 -1
- 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
|
@@ -1715,7 +1715,10 @@ const ControlledMenuFr = ({ "aria-label": ariaLabel, className, containerProps,
|
|
|
1715
1715
|
reposition,
|
|
1716
1716
|
viewScroll,
|
|
1717
1717
|
]);
|
|
1718
|
-
const isWithinMenu = useCallback((target) => hasParentClass("szh-menu--state-open", target)
|
|
1718
|
+
const isWithinMenu = useCallback((target) => hasParentClass("szh-menu--state-open", target) ||
|
|
1719
|
+
// This is temporary, it will be removed when the overlay click is fixed
|
|
1720
|
+
hasParentClass("LuiModalPrefab", target) ||
|
|
1721
|
+
hasParentClass("prefab-modal", target), []);
|
|
1719
1722
|
const handleScreenEventForSave = useCallback((ev) => {
|
|
1720
1723
|
if (!isWithinMenu(ev.target)) {
|
|
1721
1724
|
ev.preventDefault();
|
|
@@ -2506,20 +2509,24 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
|
|
|
2506
2509
|
},
|
|
2507
2510
|
};
|
|
2508
2511
|
});
|
|
2509
|
-
return params.selectable
|
|
2512
|
+
return params.selectable || params.onRowDragEnd
|
|
2510
2513
|
? [
|
|
2511
2514
|
{
|
|
2512
2515
|
colId: "selection",
|
|
2513
2516
|
editable: false,
|
|
2514
|
-
|
|
2515
|
-
|
|
2517
|
+
rowDrag: !!params.onRowDragEnd,
|
|
2518
|
+
minWidth: params.selectable && params.onRowDragEnd ? 76 : 48,
|
|
2519
|
+
maxWidth: params.selectable && params.onRowDragEnd ? 76 : 48,
|
|
2516
2520
|
pinned: selectColumnPinned,
|
|
2517
2521
|
headerComponentParams: {
|
|
2518
2522
|
exportable: false,
|
|
2519
2523
|
},
|
|
2520
|
-
checkboxSelection:
|
|
2524
|
+
checkboxSelection: params.selectable,
|
|
2521
2525
|
headerComponent: rowSelection === "multiple" ? GridHeaderSelect : null,
|
|
2526
|
+
//headerCheckboxSelection:true,
|
|
2522
2527
|
suppressHeaderKeyboardEvent: (e) => {
|
|
2528
|
+
if (!params.selectable)
|
|
2529
|
+
return false;
|
|
2523
2530
|
if ((e.event.key === "Enter" || e.event.key === " ") && !e.event.repeat) {
|
|
2524
2531
|
if (isEmpty(e.api.getSelectedRows())) {
|
|
2525
2532
|
e.api.selectAllFiltered();
|
|
@@ -2539,6 +2546,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
|
|
|
2539
2546
|
}, [
|
|
2540
2547
|
params.columnDefs,
|
|
2541
2548
|
params.selectable,
|
|
2549
|
+
params.onRowDragEnd,
|
|
2542
2550
|
params.readOnly,
|
|
2543
2551
|
params.defaultColDef?.editable,
|
|
2544
2552
|
selectColumnPinned,
|
|
@@ -2731,6 +2739,14 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
|
|
|
2731
2739
|
}
|
|
2732
2740
|
}, []);
|
|
2733
2741
|
const gridContextMenu = useGridContextMenu({ contextMenu: params.contextMenu, contextMenuSelectRow });
|
|
2742
|
+
const onRowDragEnd = useCallback((event) => {
|
|
2743
|
+
const moved = event.node.data;
|
|
2744
|
+
const target = event.overNode?.data;
|
|
2745
|
+
moved.id != target.id &&
|
|
2746
|
+
event.node.rowIndex != null &&
|
|
2747
|
+
params.onRowDragEnd &&
|
|
2748
|
+
params.onRowDragEnd(moved, target, event.node.rowIndex);
|
|
2749
|
+
}, [params]);
|
|
2734
2750
|
// This is setting a ref in the GridContext so won't be triggering an update loop
|
|
2735
2751
|
setOnCellEditingComplete(params.onCellEditingComplete);
|
|
2736
2752
|
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 +2755,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
|
|
|
2739
2755
|
let rowCount = 0;
|
|
2740
2756
|
event.api.forEachNode(() => rowCount++);
|
|
2741
2757
|
return (jsx(GridNoRowsOverlay, { rowCount: rowCount, filteredRowCount: event.api.getDisplayedRowCount(), noRowsOverlayText: params.noRowsOverlayText }));
|
|
2742
|
-
}, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: params.
|
|
2758
|
+
}, 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
2759
|
};
|
|
2744
2760
|
|
|
2745
2761
|
const GridPopoverContext = createContext({
|