@linzjs/step-ag-grid 7.0.3 → 7.0.4

package/package.json

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

package/src/components/GridCell.tsx

@@ -78,7 +78,7 @@ export const GridCell = <RowType extends GridBaseRow, Props extends CellEditorCo
     }),
     // Default value formatter, otherwise react freaks out on objects
     valueFormatter: (params: ValueFormatterParams) => {
-      if (params.value == null) return "-";
+      if (params.value == null) return "–";
       const types = ["number", "boolean", "string"];
       if (types.includes(typeof params.value)) return `${params.value}`;
       else return JSON.stringify(params.value);

package/src/components/gridForm/GridFormEditBearing.tsx

@@ -3,7 +3,7 @@ import "../../styles/GridFormEditBearing.scss";
 import { useCallback, useMemo, useState } from "react";
 import { GridBaseRow } from "../Grid";
 import { TextInputFormatted } from "../../lui/TextInputFormatted";
-import { bearingNumberParser, bearingStringValidator, convertDDToDMS } from "../../utils/bearing";
+import { bearingNumberParser, bearingStringValidator } from "../../utils/bearing";
 import { useGridPopoverHook } from "../GridPopoverHook";
 import { CellEditorCommon } from "../GridCell";
 import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
@@ -15,7 +15,7 @@ export interface GridFormEditBearingProps<RowType extends GridBaseRow> extends C
 }
 
 export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridFormEditBearingProps<RowType>) => {
-  const { field, value: initialValue } = useGridPopoverContext<RowType>();
+  const { field, value: initialValue, formatValue } = useGridPopoverContext<RowType>();
 
   // This clears out any scientific precision
   const defaultValue = useMemo(
@@ -65,7 +65,7 @@ export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridForm
         }}
         autoFocus={true}
         placeholder={props.placeHolder}
-        formatted={bearingStringValidator(value, props.range) ? "?" : convertDDToDMS(bearingNumberParser(value))}
+        formatted={bearingStringValidator(value, props.range) ? "?" : formatValue(bearingNumberParser(value))}
         error={bearingStringValidator(value, props.range)}
         helpText={"Press enter or tab to save"}
       />

package/src/components/gridPopoverEdit/GridPopoverEditBearing.ts

@@ -12,7 +12,6 @@ export const GridPopoverEditBearingLike = <RowType extends GridBaseRow>(
     {
       initialWidth: 65,
       maxWidth: 150,
-      valueFormatter: bearingValueFormatter,
       ...colDef,
     },
     {

package/src/components/gridRender/GridRenderGenericCell.tsx

@@ -5,7 +5,6 @@ import { GridUpdatingContext } from "../../contexts/GridUpdatingContext";
 import { GridLoadableCell } from "../GridLoadableCell";
 import { GridIcon } from "../GridIcon";
 import { ColDef, ICellRendererParams } from "ag-grid-community";
-import { ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
 import { GridBaseRow } from "../Grid";
 import { ColDefT } from "../GridCell";
 
@@ -33,13 +32,9 @@ export const GridRendererGenericCell = <RowType extends GridBaseRow>(props: ICel
   const infoFn = cellRendererParams?.info;
   const infoText = infoFn ? infoFn(props) : undefined;
 
-  const defaultFormatter = (props: ValueFormatterParams): string => props.value;
-  const formatter = colDef.valueFormatter ?? defaultFormatter;
-  if (typeof formatter === "string") {
-    console.error("valueFormatter must be a function");
-    return <span>valueFormatter must be a function</span>;
-  }
-  const formatted = formatter(props as ValueFormatterParams);
+  const defaultFormatter = (value: any): string => value;
+  const formatter = props.formatValue ?? defaultFormatter;
+  const formatted = formatter(props.value);
 
   return (
     <GridLoadableCell isLoading={checkUpdating(colDef.field ?? colDef.colId ?? "", props.data.id)}>

package/src/contexts/GridPopoverContext.tsx

@@ -1,14 +1,6 @@
 import { createContext, RefObject, useContext } from "react";
 import { GridBaseRow } from "../components/Grid";
 
-export interface PropsType {
-  value: any;
-  data: any;
-  field: string;
-  selectedRows: any[];
-  updateValue: (saveFn: (selectedRows: any[]) => Promise<boolean>) => Promise<boolean>;
-}
-
 export interface GridPopoverContextType<RowType extends GridBaseRow> {
   anchorRef: RefObject<Element>;
   saving: boolean;
@@ -18,6 +10,7 @@ export interface GridPopoverContextType<RowType extends GridBaseRow> {
   data: RowType;
   selectedRows: RowType[];
   updateValue: (saveFn: (selectedRows: any[]) => Promise<boolean>, tabDirection: 1 | 0 | -1) => Promise<boolean>;
+  formatValue: (value: any) => any;
 }
 
 export const GridPopoverContext = createContext<GridPopoverContextType<any>>({
@@ -29,6 +22,7 @@ export const GridPopoverContext = createContext<GridPopoverContextType<any>>({
   data: {} as GridBaseRow,
   selectedRows: [],
   updateValue: async () => false,
+  formatValue: () => "! No gridPopoverContextProvider !",
 });
 
 export const useGridPopoverContext = <RowType extends GridBaseRow>() =>

package/src/contexts/GridPopoverContextProvider.tsx

@@ -49,6 +49,7 @@ export const GridPopoverContextProvider = ({ props, children }: GridPopoverConte
         data: props.data,
         value: props.value,
         updateValue,
+        formatValue: props.formatValue,
       }}
     >
       {children}

package/src/stories/grid/GridPopoutBearing.stories.tsx

@@ -37,8 +37,8 @@ export default {
 
 interface ITestRow {
   id: number;
-  bearing1: string | number | null;
   bearingCorrection: number | null;
+  bearing: string | number | null;
 }
 
 const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
@@ -51,29 +51,29 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
         initialWidth: 65,
         maxWidth: 85,
       }),
-      GridPopoverEditBearing(
+      GridPopoverEditBearingCorrection(
         {
-          field: "bearing1",
-          headerName: "Bearing GCE",
+          field: "bearingCorrection",
+          headerName: "Bearing correction",
           cellRendererParams: {
-            warning: (props: any) => props.data.id == 1002 && "Testers are testing",
-            info: (props: any) => props.data.id == 1001 && "Developers are developing",
+            warning: (props) => props.data.id == 1002 && "Testers are testing",
+            info: (props) => props.data.id == 1001 && "Developers are developing",
           },
         },
         {
           multiEdit: false,
         },
       ),
-      GridPopoverEditBearingCorrection(
+      GridPopoverEditBearing(
         {
-          field: "bearingCorrection",
-          headerName: "Bearing Correction",
+          field: "bearing",
+          headerName: "Bearing",
         },
         {
           editorParams: {
-            onSave: async (selectedRows, value: ITestRow["bearingCorrection"]) => {
+            onSave: async (selectedRows, value: ITestRow["bearing"]) => {
               await wait(1000);
-              selectedRows.forEach((row) => (row["bearingCorrection"] = value));
+              selectedRows.forEach((row) => (row["bearing"] = value));
               return true;
             },
           },
@@ -84,10 +84,10 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
   );
 
   const [rowData] = useState([
-    { id: 1000, bearing1: 1.234, bearingCorrection: 90 },
-    { id: 1001, bearing1: "0E-12", bearingCorrection: 240 },
-    { id: 1002, bearing1: null, bearingCorrection: 355.1 },
-    { id: 1003, bearing1: null, bearingCorrection: 0 },
+    { id: 1000, bearing: 1.234, bearingCorrection: null },
+    { id: 1001, bearing: "0E-12", bearingCorrection: 240 },
+    { id: 1002, bearing: null, bearingCorrection: 355.1 },
+    { id: 1003, bearing: null, bearingCorrection: 0 },
   ] as ITestRow[]);
 
   return (

package/src/utils/bearing.ts

@@ -3,7 +3,7 @@ import { ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef
 export const bearingValueFormatter = (params: ValueFormatterParams): string => {
   const value = typeof params.value == "string" ? parseFloat(params.value) : params.value;
   if (value == null) {
-    return "-";
+    return "–";
   }
   return convertDDToDMS(value, false, false);
 };
@@ -11,7 +11,7 @@ export const bearingValueFormatter = (params: ValueFormatterParams): string => {
 export const bearingCorrectionValueFormatter = (params: ValueFormatterParams): string => {
   const value = params.value;
   if (value == null) {
-    return "-";
+    return "–";
   }
   if (typeof value === "string") {
     return convertDDToDMS(bearingNumberParser(value), true, true);