@linzjs/step-ag-grid 17.3.0 → 17.4.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "17.3.0",
+  "version": "17.4.1",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/Grid.tsx

@@ -6,6 +6,7 @@ import {
   CellEvent,
   CellKeyDownEvent,
   GridReadyEvent,
+  RowDragEndEvent,
   SelectionChangedEvent,
 } from "ag-grid-community/dist/lib/events";
 import { AgGridReact } from "ag-grid-react";
@@ -42,13 +43,14 @@ export interface GridProps {
    */
   selectColumnPinned?: ColDef["pinned"];
   noRowsOverlayText?: string;
-  postSortRows?: GridOptions["postSortRows"];
   animateRows?: boolean;
   rowHeight?: number;
   rowClassRules?: GridOptions["rowClassRules"];
   rowSelection?: "single" | "multiple";
   autoSelectFirstRow?: boolean;
   onColumnMoved?: GridOptions["onColumnMoved"];
+  rowDragText?: GridOptions["rowDragText"];
+  onRowDragEnd?: (movedRow: any, targetRow: any, targetIndex: number) => void;
   alwaysShowVerticalScroll?: boolean;
   suppressColumnVirtualization?: GridOptions["suppressColumnVirtualisation"];
   /**
@@ -322,20 +324,24 @@ export const Grid = ({
         },
       };
     });
-    return params.selectable
+
+    return params.selectable || params.onRowDragEnd
       ? [
           {
             colId: "selection",
             editable: false,
-            minWidth: 48,
-            maxWidth: 48,
+            rowDrag: !!params.onRowDragEnd,
+            minWidth: params.selectable && params.onRowDragEnd ? 76 : 48,
+            maxWidth: params.selectable && params.onRowDragEnd ? 76 : 48,
             pinned: selectColumnPinned,
             headerComponentParams: {
               exportable: false,
             },
-            checkboxSelection: true,
+            checkboxSelection: params.selectable,
             headerComponent: rowSelection === "multiple" ? GridHeaderSelect : null,
+            //headerCheckboxSelection:true,
             suppressHeaderKeyboardEvent: (e) => {
+              if (!params.selectable) return false;
               if ((e.event.key === "Enter" || e.event.key === " ") && !e.event.repeat) {
                 if (isEmpty(e.api.getSelectedRows())) {
                   e.api.selectAllFiltered();
@@ -354,6 +360,7 @@ export const Grid = ({
   }, [
     params.columnDefs,
     params.selectable,
+    params.onRowDragEnd,
     params.readOnly,
     params.defaultColDef?.editable,
     selectColumnPinned,
@@ -583,6 +590,19 @@ export const Grid = ({
 
   const gridContextMenu = useGridContextMenu({ contextMenu: params.contextMenu, contextMenuSelectRow });
 
+  const onRowDragEnd = useCallback(
+    (event: RowDragEndEvent) => {
+      const moved = event.node.data;
+      const target = event.overNode?.data;
+
+      moved.id != target.id &&
+        event.node.rowIndex != null &&
+        params.onRowDragEnd &&
+        params.onRowDragEnd(moved, target, event.node.rowIndex);
+    },
+    [params],
+  );
+
   // This is setting a ref in the GridContext so won't be triggering an update loop
   setOnCellEditingComplete(params.onCellEditingComplete);
 
@@ -636,7 +656,7 @@ export const Grid = ({
           onModelUpdated={onModelUpdated}
           onGridReady={onGridReady}
           onSortChanged={ensureSelectedRowIsVisible}
-          postSortRows={params.postSortRows ?? postSortRows}
+          postSortRows={params.onRowDragEnd ? undefined : postSortRows}
           onSelectionChanged={synchroniseExternalStateToGridSelection}
           onColumnMoved={params.onColumnMoved}
           alwaysShowVerticalScroll={params.alwaysShowVerticalScroll}
@@ -645,6 +665,10 @@ export const Grid = ({
           maintainColumnOrder={true}
           preventDefaultOnContextMenu={true}
           onCellContextMenu={gridContextMenu.cellContextMenu}
+          rowDragText={params.rowDragText}
+          rowDragManaged={!!params.onRowDragEnd}
+          suppressMoveWhenRowDragging={true}
+          onRowDragEnd={onRowDragEnd}
         />
       </div>
     </div>

package/src/react-menu3/components/ControlledMenu.tsx

@@ -67,7 +67,11 @@ export const ControlledMenuFr = (
   );
 
   const isWithinMenu = useCallback(
-    (target: EventTarget | null) => hasParentClass("szh-menu--state-open", target as Node),
+    (target: EventTarget | null) =>
+      hasParentClass("szh-menu--state-open", target as Node) ||
+      // This is temporary, it will be removed when the overlay click is fixed
+      hasParentClass("LuiModalPrefab", target as Node) ||
+      hasParentClass("prefab-modal", target as Node),
     [],
   );
 

package/src/stories/grid/GridDragRow.stories.tsx

@@ -0,0 +1,121 @@
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
+import "@linzjs/lui/dist/scss/base.scss";
+
+import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { useMemo, useState } from "react";
+
+import "@linzjs/lui/dist/fonts";
+
+import {
+  ColDefT,
+  Grid,
+  GridCell,
+  GridContextProvider,
+  GridProps,
+  GridUpdatingContextProvider,
+  GridWrapper,
+} from "../..";
+import { waitForGridReady } from "../../utils/storybookTestUtil";
+
+export default {
+  title: "Components / Grids",
+  component: Grid,
+  args: {
+    quickFilter: true,
+    quickFilterValue: "",
+    quickFilterPlaceholder: "Quick filter...",
+    selectable: false,
+    rowSelection: "single",
+  },
+  // Storybook hangs otherwise
+  parameters: {
+    docs: {
+      source: {
+        type: "code",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: 1024, height: 400, display: "flex", flexDirection: "column" }}>
+        <GridUpdatingContextProvider>
+          <GridContextProvider>
+            <Story />
+          </GridContextProvider>
+        </GridUpdatingContextProvider>
+      </div>
+    ),
+  ],
+} as ComponentMeta<typeof Grid>;
+
+interface ITestRow {
+  id: number;
+  position: string;
+  age: number;
+  height: number;
+  desc: string;
+  dd: string;
+}
+
+const GridDragRowTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
+  const columnDefs: ColDefT<ITestRow>[] = useMemo(
+    () => [
+      GridCell({
+        field: "id",
+        headerName: "Id",
+        lockVisible: true,
+      }),
+      GridCell({
+        field: "position",
+        headerName: "Position",
+        cellRendererParams: {
+          warning: (props) => props.value === "Tester" && "Testers are testing",
+          info: (props) => props.value === "Developer" && "Developers are awesome",
+        },
+      }),
+      GridCell({
+        field: "age",
+        headerName: "Age",
+      }),
+      GridCell({
+        field: "height",
+        headerName: "Height",
+      }),
+      GridCell({
+        field: "desc",
+        headerName: "Description",
+        flex: 1,
+      }),
+    ],
+    [],
+  );
+
+  const [rowData] = useState([
+    { id: 1000, position: "Tester", age: 30, height: `6'4"`, desc: "Tests application", dd: "1" },
+    { id: 1001, position: "Developer", age: 12, height: `5'3"`, desc: "Develops application", dd: "2" },
+    { id: 1002, position: "Manager", age: 65, height: `5'9"`, desc: "Manages", dd: "3" },
+  ]);
+
+  return (
+    <GridWrapper maxHeight={300}>
+      <Grid
+        data-testid={"readonly"}
+        {...props}
+        selectable={true}
+        rowSelection="multiple"
+        animateRows={true}
+        columnDefs={columnDefs}
+        defaultColDef={{ sortable: false }}
+        rowData={rowData}
+        onRowDragEnd={(row, _, targetIndex) => {
+          alert(`Row ${row.id} has been moved to index ${targetIndex}.`);
+        }}
+        rowDragText={(params) => `${params.rowNode?.data.id} - ${params.rowNode?.data.position}`}
+      />
+    </GridWrapper>
+  );
+};
+
+export const DragRowSingleSelection = GridDragRowTemplate.bind({});
+DragRowSingleSelection.play = waitForGridReady;

package/src/styles/Grid.scss

@@ -85,6 +85,25 @@
   visibility: visible;
 }
 
+.ag-drag-handle.ag-row-drag{
+  opacity: 0;
+
+  .ag-icon-grip{
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%239999B3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2Zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2Zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Z' /%3E%3C/svg%3E");
+    background-repeat: no-repeat no-repeat;
+    background-position: center center;
+    background-size: cover;
+    color:transparent;
+  }
+}
+
+.ag-row:hover{
+  .ag-drag-handle.ag-row-drag{
+    opacity: 1;
+    transition: opacity 0.2s ease-in-out;
+  }
+}
+
 .GridFormMessage-container {
   padding: 4px 8px;
   max-width: 400px;

package/src/styles/GridTheme.scss

@@ -47,9 +47,19 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
   )
 );
 
-// Fix that when you click below checkbox it doesn't process a click
+
 .ag-cell[col-id="selection"] {
-  display: flex;
+  display: flex;// Fix that when you click below checkbox it doesn't process a click
+  justify-content: end; // fix alignment of cell content when grabber is present
+
+  .ag-selection-checkbox {
+    margin-right:0;
+  }
+}
+
+// fix alignment of cell content when grabber is present
+.ag-header-cell-comp-wrapper {
+  justify-content: end;
 }
 
 // Fix that when you click below checkbox it doesn't process a click