@linzjs/step-ag-grid 29.16.0 → 29.19.0

package/src/stories/grid/GridInlineText.stories.tsx

@@ -0,0 +1,185 @@
+import '../../styles/GridTheme.scss';
+import '../../styles/index.scss';
+import '@linzjs/lui/dist/scss/base.scss';
+import '@linzjs/lui/dist/fonts';
+
+import { Meta, StoryFn } from '@storybook/react-vite';
+import { useCallback, useContext, useMemo, useState } from 'react';
+
+import {
+  ActionButton,
+  ColDefT,
+  Grid,
+  GridCell,
+  GridContext,
+  GridContextProvider,
+  GridInlineTextInput,
+  GridPopoverMenu,
+  GridProps,
+  GridUpdatingContextProvider,
+  wait,
+} from '../..';
+import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
+
+interface IFormTestRow {
+  id: number;
+  text1: string | null;
+  text2: string | null;
+}
+
+export default {
+  title: 'Components / Grids',
+  component: Grid,
+  args: {
+    quickFilterValue: '',
+    selectable: true,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 1024, height: 400 }}>
+        <GridUpdatingContextProvider>
+          <GridContextProvider>
+            <Story />
+          </GridContextProvider>
+        </GridUpdatingContextProvider>
+        <GridUpdatingContextProvider>
+          <GridContextProvider>
+            <Story />
+          </GridContextProvider>
+        </GridUpdatingContextProvider>
+      </div>
+    ),
+  ],
+} as Meta<typeof Grid>;
+
+const GridInlineTextTemplate: StoryFn<typeof Grid<IFormTestRow>> = (props: GridProps<IFormTestRow>) => {
+  const { selectRowsWithFlashDiff } = useContext(GridContext);
+  const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
+  const [rowData, setRowData] = useState([
+    {
+      id: 1000,
+      text1: 'a text1',
+      text2: 'a text2',
+    },
+    {
+      id: 1001,
+      text1: 'b text1',
+      text2: 'b text2',
+    },
+  ] as IFormTestRow[]);
+
+  const columnDefs: ColDefT<IFormTestRow>[] = useMemo(
+    () => [
+      GridCell({
+        field: 'id',
+        headerName: 'Id',
+      }),
+      GridInlineTextInput(
+        {
+          field: 'text1',
+          headerName: 'Text input 1',
+        },
+        {
+          editorParams: {
+            placeholder: 'Enter some text...',
+            onSave: ({ selectedRowIds, value }) => {
+              setRowData(rowData.map((data) => (selectedRowIds.includes(data.id) ? { ...data, text1: value } : data)));
+              return true;
+            },
+          },
+        },
+      ),
+      GridInlineTextInput(
+        {
+          field: 'text2',
+          headerName: 'Text input 2',
+        },
+        {
+          editorParams: {
+            required: true,
+            maxLength: 12,
+            placeholder: 'Enter some text...',
+            invalid: (value: string) => {
+              if (value === 'never') return "The value 'never' is not allowed";
+              return null;
+            },
+            onSave: ({ selectedRowIds, value }) => {
+              setRowData(rowData.map((data) => (selectedRowIds.includes(data.id) ? { ...data, text2: value } : data)));
+              return true;
+            },
+          },
+        },
+      ),
+      GridPopoverMenu(
+        {},
+        {
+          multiEdit: true,
+          editorParams: {
+            defaultAction: ({ menuOption }) => {
+              // eslint-disable-next-line no-console
+              console.log('clicked', { menuOption });
+            },
+            options: async (selectedItems) => {
+              // Just doing a timeout here to demonstrate deferred loading
+              await wait(500);
+              return [
+                {
+                  label: 'Test',
+                  action: () => {
+                    // empty
+                  },
+                  disabled: selectedItems.length > 1,
+                },
+              ];
+            },
+          },
+        },
+      ),
+    ],
+    [rowData],
+  );
+
+  const addRowAction = useCallback(async () => {
+    await wait(1000);
+
+    const lastRow = rowData[rowData.length - 1];
+    // eslint-disable-next-line @typescript-eslint/require-await
+    await selectRowsWithFlashDiff(async () => {
+      setRowData([
+        ...rowData,
+        {
+          id: (lastRow?.id ?? 0) + 1,
+          text1: '?',
+          text2: '?',
+        },
+      ]);
+    });
+  }, [rowData, selectRowsWithFlashDiff]);
+
+  return (
+    <>
+      <Grid
+        {...props}
+        enableRangeSelection={true}
+        enableMultilineBulkEdit={true}
+        hideSelectedRow={true}
+        externalSelectedItems={externalSelectedItems}
+        setExternalSelectedItems={setExternalSelectedItems}
+        columnDefs={columnDefs}
+        rowData={rowData}
+        domLayout={'autoHeight'}
+        defaultColDef={{ minWidth: 70 }}
+        sizeColumns={'auto'}
+        singleClickEdit={true}
+        onBulkEditingComplete={() => {
+          /* eslint-disable-next-line no-console */
+          console.log('onBulkEditingComplete()');
+        }}
+      />
+      <ActionButton icon={'ic_add'} name={'Add new row'} inProgressName={'Adding...'} onClick={addRowAction} />
+    </>
+  );
+};
+
+export const _EditInlineText = GridInlineTextTemplate.bind({});
+_EditInlineText.play = waitForGridReady;

package/src/stories/grid/interactions/GridKeyboardInteractions.stories.tsx

@@ -256,7 +256,7 @@ KeyboardInteractions.play = async ({ canvasElement }) => {
   await userEvent.keyboard('{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}');
 
   // Test enter post focus
-  const test = async (fn: () => any, colId: string, rowId: string) => {
+  const test = async (fn: () => any, coldIndex: string, rowIndex: string) => {
     await userEvent.keyboard('{Enter}');
     await wait(1000);
     await userEvent.keyboard('{arrowdown}{arrowdown}');
@@ -265,8 +265,8 @@ KeyboardInteractions.play = async ({ canvasElement }) => {
     await waitFor(() => {
       const activeCell = canvasElement.ownerDocument.activeElement;
       expect(activeCell).toHaveClass('ag-cell-focus');
-      expect(activeCell).toHaveAttribute('aria-colindex', colId);
-      expect(activeCell?.parentElement).toHaveAttribute('row-index', rowId);
+      expect(activeCell).toHaveAttribute('aria-colindex', coldIndex);
+      expect(activeCell?.parentElement).toHaveAttribute('row-index', rowIndex);
     });
     await wait(200);
   };

package/src/styles/Grid.scss

@@ -27,6 +27,11 @@
   flex-direction: column;
 }
 
+.Grid-hideSelectedRow div.ag-row::before {
+  content: "";
+  background-color: white !important;
+}
+
 .Grid-wrapper {
   display: flex;
   flex-direction: column;

package/src/styles/GridFormInlineTextInput.scss

@@ -0,0 +1,23 @@
+@use "../../node_modules/@linzjs/lui/dist/scss/Core" as lui;
+
+.GridFormInlineTextInput {
+  height: 100%;
+}
+
+.GridFormInlineTextInput-error > input {
+  border: 2px solid red !important;
+}
+
+.GridFormInlineTextInput > input {
+  display: block;
+  left:0;
+  top:0;
+  right:0;
+  bottom:0;
+  position: absolute;
+  padding-left: 9px;
+  padding-right: 9px;
+  outline: 0;
+  border: 0;
+  font-family: "Open Sans", system-ui, sans-serif;
+}

package/src/styles/index.scss

@@ -13,4 +13,4 @@
 @use "./GridPopoverMenu";
 @use "./GridFilterColumnsToggle";
 @use "./GridFilterHeaderIconButton";
-
+@use "./GridFormInlineTextInput";

package/src/utils/__tests__/storybookTestUtil.ts

@@ -1,7 +1,7 @@
 import { sortBy } from 'lodash-es';
 import { expect, userEvent, waitFor } from 'storybook/test';
 
-import { findQuick, getAllQuick } from './testQuick';
+import { findQuick, getAllQuick, queryAllQuick } from './testQuick';
 
 export const waitForGridReady = ({ canvasElement }: { canvasElement: HTMLElement }) =>
   waitFor(() => expect(canvasElement.querySelector('.Grid-ready')).toBeInTheDocument(), { timeout: 5000 });
@@ -22,6 +22,10 @@ export const clickColumnHeaderToSort = async (colId: string, within: HTMLElement
   await user.keyboard('{Enter}');
 };
 
+export const getNumberOfGridRows = (props?: { grid?: HTMLElement }): number => {
+  return queryAllQuick({ classes: '.ag-row' }, props?.grid).length;
+};
+
 export const gridColumnValues = (colId: string, within: HTMLElement): string[] => {
   return sortBy(
     getAllQuick({ tagName: `[col-id="${colId}"]`, classes: `.ag-cell` }, within),