@linzjs/step-ag-grid 30.3.0 → 30.4.0

package/package.json

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

package/src/components/gridForm/GridFormInlineTextInput.tsx

@@ -16,6 +16,7 @@ export interface GridFormInlineTextInput<TData extends GridBaseRow>
   placeholder?: string;
   units?: string;
   onSave?: (props: { selectedRows: TData[]; selectedRowIds: TData['id'][]; value: string }) => MaybePromise<boolean>;
+  onChange?: (props: { selectedRows: TData[]; selectedRowIds: TData['id'][]; value: string }) => void;
   helpText?: string;
 }
 
@@ -103,7 +104,14 @@ export const GridFormInlineTextInput = <TData extends GridBaseRow>(props: GridFo
         ref={inputRef}
         type={'text'}
         value={value}
-        onChange={(e) => setValue(e.target.value)}
+        onChange={(e) => {
+          setValue(e.target.value);
+          if (props.onChange) {
+            const selectedRows = getSelectedRows<TData>();
+            const selectedRowIds = selectedRows.map((data) => data.id);
+            props.onChange({ selectedRows, selectedRowIds, value: e.target.value });
+          }
+        }}
         placeholder={props.placeholder ?? 'Type here'}
         onBlur={() => {
           void triggerSave(CloseReason.BLUR);

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

@@ -3,8 +3,9 @@ import '../../styles/index.scss';
 import '@linzjs/lui/dist/scss/base.scss';
 import '@linzjs/lui/dist/fonts';
 
-import { Meta, StoryFn } from '@storybook/react-vite';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 import { useCallback, useContext, useMemo, useState } from 'react';
+import { expect, screen, userEvent, within } from 'storybook/test';
 
 import {
   ActionButton,
@@ -27,6 +28,11 @@ interface IFormTestRow {
   text2: string | null;
 }
 
+const initialRows: IFormTestRow[] = [
+  { id: 1000, text1: 'a text1', text2: 'a text2' },
+  { id: 1001, text1: 'b text1', text2: 'b text2' },
+];
+
 export default {
   title: 'Components / Grids',
   component: Grid,
@@ -42,11 +48,6 @@ export default {
             <Story />
           </GridContextProvider>
         </GridUpdatingContextProvider>
-        <GridUpdatingContextProvider>
-          <GridContextProvider>
-            <Story />
-          </GridContextProvider>
-        </GridUpdatingContextProvider>
       </div>
     ),
   ],
@@ -55,18 +56,7 @@ export default {
 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 [rowData, setRowData] = useState<IFormTestRow[]>(initialRows);
 
   const columnDefs: ColDefT<IFormTestRow>[] = useMemo(
     () => [
@@ -183,3 +173,94 @@ const GridInlineTextTemplate: StoryFn<typeof Grid<IFormTestRow>> = (props: GridP
 
 export const _EditInlineText = GridInlineTextTemplate.bind({});
 _EditInlineText.play = waitForGridReady;
+
+const _InlineText_ChangeEventsTemplate: StoryFn<typeof Grid<IFormTestRow>> = (props: GridProps<IFormTestRow>) => {
+  const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
+  const [isDirty, setIsDirty] = useState(false);
+  const [rowData, setRowData] = useState<IFormTestRow[]>(initialRows);
+
+  // Use a named handler for onChange
+  const handleInlineEditChange = () => {
+    setIsDirty(true);
+  };
+
+  const columnDefs: ColDefT<IFormTestRow>[] = useMemo(
+    () => [
+      GridCell({
+        field: 'id',
+        headerName: 'Id',
+      }),
+      GridInlineTextInput(
+        {
+          field: 'text1',
+          headerName: 'Text input 1',
+        },
+        {
+          editorParams: {
+            placeholder: 'Enter some text...',
+            onChange: handleInlineEditChange,
+            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: {
+            placeholder: 'Enter some text...',
+            onChange: handleInlineEditChange,
+            onSave: ({ selectedRowIds, value }) => {
+              setRowData(rowData.map((data) => (selectedRowIds.includes(data.id) ? { ...data, text2: value } : data)));
+              return true;
+            },
+          },
+        },
+      ),
+    ],
+    [rowData],
+  );
+
+  return (
+    <>
+      <Grid
+        {...props}
+        selectable={true}
+        hideSelectColumn={true}
+        externalSelectedItems={externalSelectedItems}
+        setExternalSelectedItems={setExternalSelectedItems}
+        columnDefs={columnDefs}
+        rowData={rowData}
+        domLayout={'autoHeight'}
+        defaultColDef={{ minWidth: 70 }}
+        sizeColumns={'auto'}
+        singleClickEdit={true}
+        enableMultilineBulkEdit={true}
+      />
+      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 8 }}>
+        <button type="button" data-testid="inline-edit-save" disabled={!isDirty} onClick={() => setIsDirty(false)}>
+          Save
+        </button>
+      </div>
+    </>
+  );
+};
+
+export const _InlineText_ChangeEvents = _InlineText_ChangeEventsTemplate.bind({});
+_InlineText_ChangeEvents.play = async (context) => {
+  await waitForGridReady(context);
+  const canvas = within(context.canvasElement);
+  const saveButtons = canvas.getAllByTestId('inline-edit-save');
+  const saveButton = saveButtons[0];
+  await expect(saveButton).toBeDisabled();
+  const textCells = canvas.getAllByText('a text1');
+  await userEvent.click(textCells[0]);
+  const input = await screen.findByPlaceholderText('Enter some text...');
+  await userEvent.type(input, 'X');
+  await expect(saveButton).toBeEnabled();
+};