@linzjs/step-ag-grid 29.0.0 → 29.1.0

package/package.json

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

package/src/components/Grid.tsx

@@ -16,6 +16,8 @@ import {
   GridReadyEvent,
   ModelUpdatedEvent,
   ModuleRegistry,
+  RowClickedEvent,
+  RowDoubleClickedEvent,
   RowDragEndEvent,
   RowDragMoveEvent,
   SelectionChangedEvent,
@@ -120,6 +122,8 @@ export interface GridProps<TData extends GridBaseRow = GridBaseRow> {
   suppressCellFocus?: boolean;
   pinnedTopRowData?: GridOptions['pinnedTopRowData'];
   pinnedBottomRowData?: GridOptions['pinnedBottomRowData'];
+  onRowClicked?: (event: RowClickedEvent) => void;
+  onRowDoubleClicked?: (event: RowDoubleClickedEvent) => void;
 }
 
 /**
@@ -806,6 +810,8 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
           suppressCellFocus={params.suppressCellFocus}
           pinnedTopRowData={params.pinnedTopRowData}
           pinnedBottomRowData={params.pinnedBottomRowData}
+          onRowClicked={params.onRowClicked}
+          onRowDoubleClicked={params.onRowDoubleClicked}
         />
       </div>
     </div>

package/src/components/GridCell.tsx

@@ -120,6 +120,11 @@ export const defaultValueFormatter = ({ value }: ValueFormatterParams) => {
     : JSON.stringify(value);
 };
 
+// ag-grid doesn't understand the custom editor, when it stops editing it thinks
+// that _it_ was editing and overwrites the user updated data
+// _but_, it only does this if the initial value of the cell was null!?
+const blockValueSetter = () => true;
+
 /*
  * All cells should use this.
  */
@@ -132,12 +137,10 @@ export const GridCell = <TData extends GridBaseRow, TValue = any, Props extends
     editorParams?: Props;
   },
 ): ColDefT<TData, TValue> => {
-  // props.field = ;
   // Generate a default filter value getter which uses the formatted value plus
   // the editable value if it's a string and different from the formatted value.
   // This is so that e.g. bearings can be searched for by DMS or raw number.
   const valueFormatter = props.valueFormatter ?? defaultValueFormatter;
-  // FIXME
   const filterValueGetter = props.filterValueGetter ?? generateFilterGetter(valueFormatter as any);
   const exportable = props.exportable;
   // Can't leave this here ag-grid will complain
@@ -149,6 +152,7 @@ export const GridCell = <TData extends GridBaseRow, TValue = any, Props extends
     headerTooltip: props.headerName,
     sortable: true,
     resizable: true,
+    valueSetter: custom?.editor ? blockValueSetter : undefined,
     editable: props.editable ?? false,
     ...(custom?.editor && {
       cellClassRules: GridCellMultiSelectClassRules,

package/src/components/gridForm/GridFormTextInput.tsx

@@ -29,11 +29,15 @@ export const GridFormTextInput = <TData extends GridBaseRow>(props: GridFormText
 
   const save = useCallback(
     async (selectedRows: TData[]): Promise<boolean> => {
-      if (invalid()) return false;
+      if (invalid()) {
+        return false;
+      }
 
       const trimmedValue = value.trim();
       // No change, so don't save
-      if (initValue === trimmedValue) return true;
+      if (initValue === trimmedValue) {
+        return true;
+      }
 
       if (props.onSave) {
         return await props.onSave({ selectedRows, value: trimmedValue });

package/src/stories/grid/GridPopoutContextMenu.stories.tsx

@@ -127,7 +127,7 @@ const GridPopoutContextMenuTemplate: StoryFn<typeof Grid<IFormTestRow>> = (props
         sizeColumns={'auto'}
         onBulkEditingComplete={() => {
           /* eslint-disable-next-line no-console */
-          console.log('onBulkEditingComplete');
+          console.log('onBulkEditingComplete()');
         }}
         contextMenu={ContextMenu}
       />

package/src/stories/grid/GridPopoutEditGenericTextArea.stories.tsx

@@ -219,7 +219,7 @@ const GridPopoutEditGenericTemplate: StoryFn<typeof Grid<IFormTestRow>> = (props
         sizeColumns={'auto'}
         onBulkEditingComplete={() => {
           /* eslint-disable-next-line no-console */
-          console.log('Cell editing complete');
+          console.log('onBulkEditingComplete()');
         }}
       />
       <ActionButton icon={'ic_add'} name={'Add new row'} inProgressName={'Adding...'} onClick={addRowAction} />