@linzjs/step-ag-grid 1.2.0 → 1.4.0

package/src/components/gridPopoverEdit/GridPopoverTextArea.ts

@@ -0,0 +1,20 @@
+import { GridCell } from "../GridCell";
+import { GridBaseRow } from "../Grid";
+import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
+import { GridFormTextArea, GridFormTextAreaProps } from "../gridForm/GridFormTextArea";
+
+export const GridPopoverTextArea = <RowType extends GridBaseRow>(
+  colDef: GenericCellColDef<RowType, GridFormTextAreaProps<RowType>>,
+) => {
+  return GridCell<RowType, GridFormTextAreaProps<RowType>>({
+    maxWidth: 260,
+    ...colDef,
+    ...(colDef?.cellEditorParams && {
+      cellEditorParams: {
+        width: 260,
+        ...colDef.cellEditorParams,
+        form: GridFormTextArea,
+      },
+    }),
+  });
+};

package/src/components/gridPopoverEdit/GridPopoverTextInput.ts

@@ -0,0 +1,20 @@
+import { GridCell } from "../GridCell";
+import { GridBaseRow } from "../Grid";
+import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
+import { GridFormTextInput, GridFormTextInputProps } from "../gridForm/GridFormTextInput";
+
+export const GridPopoverTextInput = <RowType extends GridBaseRow>(
+  colDef: GenericCellColDef<RowType, GridFormTextInputProps<RowType>>,
+) => {
+  return GridCell<RowType, GridFormTextInputProps<RowType>>({
+    maxWidth: 140,
+    ...colDef,
+    ...(colDef?.cellEditorParams && {
+      cellEditorParams: {
+        width: 240,
+        ...colDef.cellEditorParams,
+        form: GridFormTextInput,
+      },
+    }),
+  });
+};

package/src/contexts/GridContext.tsx

@@ -1,6 +1,6 @@
 import { createContext } from "react";
 import { GridApi } from "ag-grid-community";
-import { GridBaseRow } from "../components/Grid";
+import { GridBaseRow } from "@components/Grid";
 
 export interface GridContextType {
   gridReady: () => boolean;

package/src/contexts/GridContextProvider.tsx

@@ -2,9 +2,9 @@ import { ReactElement, ReactNode, useContext, useRef } from "react";
 import { GridApi, RowNode } from "ag-grid-community";
 import { GridContext } from "./GridContext";
 import { delay, difference, isEmpty, last, sortBy } from "lodash-es";
-import { isNotEmpty } from "../utils/util";
+import { isNotEmpty } from "@utils/util";
 import { UpdatingContext } from "./UpdatingContext";
-import { GridBaseRow } from "../components/Grid";
+import { GridBaseRow } from "@components/Grid";
 
 interface GridContextProps {
   children: ReactNode;

package/src/lui/TextInputFormatted.scss

@@ -1,5 +1,5 @@
 .LuiTextInput {
-  margin-bottom: 0px;
+  margin-bottom: 0;
 }
 
 .LuiTextInput-formatted {

package/src/stories/components/FormTest.tsx

@@ -2,10 +2,10 @@ import "./FormTest.scss";
 
 import { useCallback, useState } from "react";
 import { LuiTextInput } from "@linzjs/lui";
-import { wait } from "../../utils/util";
-import { GridFormProps } from "../../components/GridCell";
-import { useGridPopoutHook } from "../../components/GridPopoutHook";
-import { GridBaseRow } from "../../components/Grid";
+import { wait } from "@utils/util";
+import { GridFormProps } from "@components/GridCell";
+import { useGridPopoverHook } from "@components/GridPopoverHook";
+import { GridBaseRow } from "@components/Grid";
 
 export interface IFormTestRow {
   id: number;
@@ -33,9 +33,9 @@ export const FormTest = <RowType extends GridBaseRow>(props: GridFormProps<RowTy
     // Close form
     return true;
   }, [nameType, numba, plan, props.selectedRows]);
-  const { popoutWrapper } = useGridPopoutHook(props, save);
+  const { popoverWrapper } = useGridPopoverHook(props, save);
 
-  return popoutWrapper(
+  return popoverWrapper(
     <div style={{ display: "flex", flexDirection: "row" }} className={"FormTest Grid-popoverContainer"}>
       <div className={"FormTest-textInput"}>
         <LuiTextInput label={"Name type"} value={nameType} onChange={(e) => setNameType(e.target.value)} />

package/src/stories/components/GridPopoutBearing.stories.tsx

@@ -3,13 +3,16 @@ import "@linzjs/lui/dist/fonts";
 import "../../lui-overrides.scss";
 
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { GridContextProvider } from "../../contexts/GridContextProvider";
-import { Grid, GridProps } from "../../components/Grid";
 import { useMemo, useState } from "react";
-import { UpdatingContextProvider } from "../../contexts/UpdatingContextProvider";
-import { GridPopoverEditBearing } from "../../components/gridPopoverEdit/GridPopoverEditBearing";
-import { wait } from "../../utils/util";
-import { GridCell } from "../../components/GridCell";
+import { UpdatingContextProvider } from "@contexts/UpdatingContextProvider";
+import { GridContextProvider } from "@contexts/GridContextProvider";
+import { Grid, GridProps } from "@components/Grid";
+import { GridCell } from "@components/GridCell";
+import {
+  GridPopoverEditBearing,
+  GridPopoverEditBearingCorrection,
+} from "@components/gridPopoverEdit/GridPopoverEditBearing";
+import { wait } from "@utils/util";
 
 export default {
   title: "Components / Grids",
@@ -34,7 +37,7 @@ export default {
 interface ITestRow {
   id: number;
   bearing1: number | null;
-  bearing2: number | null;
+  bearingCorrection: number | null;
 }
 
 const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
@@ -59,15 +62,15 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
           placeHolder: "Enter Bearing",
         },
       }),
-      GridPopoverEditBearing<ITestRow>({
-        field: "bearing2",
-        headerName: "Bearing onSave",
+      GridPopoverEditBearingCorrection<ITestRow>({
+        field: "bearingCorrection",
+        headerName: "Bearing Correction",
         cellEditorParams: {
           multiEdit: true,
           placeHolder: "Enter Bearing",
-          onSave: async (selectedRows: ITestRow[], value: ITestRow["bearing2"]) => {
+          onSave: async (selectedRows: ITestRow[], value: ITestRow["bearingCorrection"]) => {
             await wait(1000);
-            selectedRows.forEach((row) => (row["bearing2"] = value));
+            selectedRows.forEach((row) => (row["bearingCorrection"] = value));
             return true;
           },
         },
@@ -79,9 +82,9 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
   const rowData = useMemo(
     () =>
       [
-        { id: 1000, bearing1: 1.234, bearing2: 90 },
-        { id: 1001, bearing1: 1.565, bearing2: 240 },
-        { id: 1002, bearing1: null, bearing2: 355.1 },
+        { id: 1000, bearing1: 1.234, bearingCorrection: 90 },
+        { id: 1001, bearing1: 1.565, bearingCorrection: 240 },
+        { id: 1002, bearing1: null, bearingCorrection: 355.1 },
       ] as ITestRow[],
     [],
   );

package/src/stories/components/GridPopoutEditDropDown.stories.tsx

@@ -3,20 +3,20 @@ import "@linzjs/lui/dist/fonts";
 import "../../lui-overrides.scss";
 
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { GridContextProvider } from "../../contexts/GridContextProvider";
-import { Grid, GridProps } from "../../components/Grid";
+import { UpdatingContextProvider } from "@contexts/UpdatingContextProvider";
+import { GridContextProvider } from "@contexts/GridContextProvider";
+import { Grid, GridProps } from "@components/Grid";
 import { useCallback, useMemo, useState } from "react";
 import {
   GridFormDropDown,
   GridFormPopoutDropDownProps,
   MenuSeparator,
   MenuSeparatorString,
-} from "../../components/gridForm/GridFormDropDown";
-import { UpdatingContextProvider } from "../../contexts/UpdatingContextProvider";
+} from "@components/gridForm/GridFormDropDown";
 import { ColDef } from "ag-grid-community";
-import { wait } from "../../utils/util";
-import { GridCell } from "../../components/GridCell";
-import { GridPopoverEditDropDown } from "../../components/gridPopoverEdit/GridPopoverEditDropDown";
+import { wait } from "@utils/util";
+import { GridCell } from "@components/GridCell";
+import { GridPopoverEditDropDown } from "@components/gridPopoverEdit/GridPopoverEditDropDown";
 
 export default {
   title: "Components / Grids",
@@ -94,11 +94,12 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
             options: [
               {
                 value: "1",
-                label: <span style={{ border: "2px dashed blue" }}>One</span>,
+                label: "One",
+                disabled: "Disabled for test",
               },
-              { value: "2", label: <span style={{ border: "2px dashed red" }}>Two</span> },
+              { value: "2", label: "Two" },
               MenuSeparator,
-              { value: "3", label: <span style={{ border: "2px dashed green" }}>Three</span> },
+              { value: "3", label: "Three" },
             ],
           },
         }),

package/src/stories/components/GridPopoutEditGeneric.stories.tsx

@@ -3,11 +3,11 @@ import "@linzjs/lui/dist/fonts";
 import "../../lui-overrides.scss";
 
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { GridContextProvider } from "../../contexts/GridContextProvider";
-import { Grid, GridProps } from "../../components/Grid";
+import { UpdatingContextProvider } from "@contexts/UpdatingContextProvider";
+import { GridContextProvider } from "@contexts/GridContextProvider";
+import { Grid, GridProps } from "@components/Grid";
 import { useMemo, useState } from "react";
-import { UpdatingContextProvider } from "../../contexts/UpdatingContextProvider";
-import { GridCell } from "../../components/GridCell";
+import { GridCell } from "@components/GridCell";
 import { FormTest, IFormTestRow } from "./FormTest";
 
 export default {

package/src/stories/components/GridPopoutEditGenericTextArea.stories.tsx

@@ -3,15 +3,15 @@ import "@linzjs/lui/dist/fonts";
 import "../../lui-overrides.scss";
 
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { GridContextProvider } from "../../contexts/GridContextProvider";
-import { Grid, GridProps } from "../../components/Grid";
+import { UpdatingContextProvider } from "@contexts/UpdatingContextProvider";
+import { GridContextProvider } from "@contexts/GridContextProvider";
+import { Grid, GridProps } from "@components/Grid";
 import { useMemo, useState } from "react";
-import { UpdatingContextProvider } from "../../contexts/UpdatingContextProvider";
-import { GridCell } from "../../components/GridCell";
+import { GridCell } from "@components/GridCell";
 import { IFormTestRow } from "./FormTest";
-import { GridFormTextArea, GridFormTextAreaProps } from "../../components/gridForm/GridFormTextArea";
-import { GridFormTextInput, GridFormTextInputProps } from "../../components/gridForm/GridFormTextInput";
-import { wait } from "../../utils/util";
+import { wait } from "@utils/util";
+import { GridPopoverTextArea } from "@components/gridPopoverEdit/GridPopoverTextArea";
+import { GridPopoverTextInput } from "@components/gridPopoverEdit/GridPopoverTextInput";
 
 export default {
   title: "Components / Grids",
@@ -43,16 +43,18 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
         initialWidth: 65,
         maxWidth: 85,
       }),
-      GridCell<IFormTestRow, GridFormTextInputProps<IFormTestRow>>({
+      GridPopoverTextInput<IFormTestRow>({
         field: "name",
         headerName: "Text input",
         maxWidth: 140,
         cellEditorParams: {
-          form: GridFormTextInput,
           required: true,
           maxlength: 12,
           placeholder: "Enter some text...",
-          width: 240,
+          validate: (value: string) => {
+            if (value === "never") return "The value 'never' is not allowed";
+            return null;
+          },
           multiEdit: false,
           onSave: async (selectedRows, value) => {
             await wait(1000);
@@ -61,17 +63,19 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
           },
         },
       }),
-      GridCell<IFormTestRow, GridFormTextAreaProps<IFormTestRow>>({
+      GridPopoverTextArea<IFormTestRow>({
         field: "plan",
         headerName: "Text area",
         maxWidth: 140,
         cellEditorParams: {
-          form: GridFormTextArea,
           required: true,
           maxlength: 32,
           placeholder: "Enter some text...",
-          width: 260,
           multiEdit: true,
+          validate: (value: string) => {
+            if (value === "never") return "The value 'never' is not allowed";
+            return null;
+          },
           onSave: async (selectedRows, value) => {
             await wait(1000);
             selectedRows.forEach((selectedRow) => (selectedRow["plan"] = value));

package/src/stories/components/GridPopoutEditMultiSelect.stories.tsx

@@ -3,17 +3,17 @@ import "@linzjs/lui/dist/fonts";
 import "../../lui-overrides.scss";
 
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { GridContextProvider } from "../../contexts/GridContextProvider";
-import { Grid, GridProps } from "../../components/Grid";
+import { UpdatingContextProvider } from "@contexts/UpdatingContextProvider";
+import { GridContextProvider } from "@contexts/GridContextProvider";
+import { Grid, GridProps } from "@components/Grid";
 import { useMemo, useState } from "react";
-import { MenuSeparator } from "../../components/gridForm/GridFormDropDown";
-import { UpdatingContextProvider } from "../../contexts/UpdatingContextProvider";
+import { MenuSeparator } from "@components/gridForm/GridFormDropDown";
 import { ColDef } from "ag-grid-community";
-import { wait } from "../../utils/util";
-import { MultiSelectResult } from "../../components/gridForm/GridFormMultiSelect";
-import { GridSubComponentTextArea } from "../../components/GridSubComponentTextArea";
-import { GridCell } from "../../components/GridCell";
-import { GridPopoutEditMultiSelect } from "../../components/gridPopoverEdit/GridPopoutEditMultiSelect";
+import { wait } from "@utils/util";
+import { MultiSelectResult } from "@components/gridForm/GridFormMultiSelect";
+import { GridSubComponentTextArea } from "@components/GridSubComponentTextArea";
+import { GridCell } from "@components/GridCell";
+import { GridPopoutEditMultiSelect } from "@components/gridPopoverEdit/GridPopoutEditMultiSelect";
 
 export default {
   title: "Components / Grids",

package/src/stories/components/GridReadOnly.stories.tsx

@@ -3,15 +3,15 @@ import "@linzjs/lui/dist/fonts";
 import "../../lui-overrides.scss";
 
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { GridContextProvider } from "../../contexts/GridContextProvider";
-import { Grid, GridProps } from "../../components/Grid";
+import { UpdatingContextProvider } from "@contexts/UpdatingContextProvider";
+import { GridContextProvider } from "@contexts/GridContextProvider";
+import { Grid, GridProps } from "@components/Grid";
 import { useMemo, useState } from "react";
-import { UpdatingContextProvider } from "../../contexts/UpdatingContextProvider";
-import { wait } from "../../utils/util";
+import { wait } from "@utils/util";
 import { ICellRendererParams } from "ag-grid-community";
-import { GridPopoutMenu } from "../../components/gridPopoverEdit/GridPopoutMenu";
-import { GridPopoverMessage } from "../../components/gridPopoverEdit/GridPopoverMessage";
-import { GridCell } from "../../components/GridCell";
+import { GridPopoverMenu } from "@components/gridPopoverEdit/GridPopoverMenu";
+import { GridPopoverMessage } from "@components/gridPopoverEdit/GridPopoverMessage";
+import { GridCell } from "@components/GridCell";
 
 export default {
   title: "Components / Grids",
@@ -84,7 +84,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
           multiEdit: true,
         },
       }),
-      GridPopoutMenu<ITestRow>({
+      GridPopoverMenu<ITestRow>({
         headerName: "Menu",
         cellEditorParams: {
           options: async () => {
@@ -109,11 +109,16 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
                 },
                 multiEdit: true,
               },
+              {
+                label: "Disabled item",
+                disabled: "Disabled for test",
+                multiEdit: true,
+              },
             ];
           },
         },
       }),
-      GridPopoutMenu<ITestRow>({
+      GridPopoverMenu<ITestRow>({
         headerName: "Menu disabled",
         editable: false,
         cellEditorParams: {
@@ -138,7 +143,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
   return (
     <Grid
       {...props}
-      selectable={false}
+      selectable={true}
       externalSelectedItems={externalSelectedItems}
       setExternalSelectedItems={setExternalSelectedItems}
       columnDefs={columnDefs}

package/src/utils/bearing.test.ts

@@ -0,0 +1,30 @@
+import { convertDDToDMS } from "./bearing";
+
+describe("convertDDToDMS", () => {
+  test("converts decimal-ish degrees to DMS", () => {
+    expect(convertDDToDMS(-0.001, false, false)).toBe("-0° 00' 10\"");
+    expect(convertDDToDMS(-10.001, false, false)).toBe("-10° 00' 10\"");
+    expect(convertDDToDMS(-370.001, false, false)).toBe("-10° 00' 10\"");
+    expect(convertDDToDMS(359.595999, false, false)).toBe("0° 00'");
+    expect(convertDDToDMS(369.696999, false, false)).toBe("10° 10' 10\"");
+    expect(convertDDToDMS(221.555999, false, false)).toBe("221° 56'");
+    expect(convertDDToDMS(221.555999, false, true)).toBe("221° 56' 00.0\"");
+    expect(convertDDToDMS(5)).toBe("+5° 00' 00.0\"");
+    expect(convertDDToDMS(5.0)).toBe("+5° 00' 00.0\"");
+    expect(convertDDToDMS(5.00001)).toBe("+5° 00' 00.1\"");
+    expect(convertDDToDMS(5.1)).toBe("+5° 10' 00.0\"");
+    expect(convertDDToDMS(5.12345)).toBe("+5° 12' 34.5\"");
+    expect(convertDDToDMS(5.12345, false)).toBe("5° 12' 34.5\"");
+
+    expect(convertDDToDMS(300)).toBe("+300° 00' 00.0\"");
+    expect(convertDDToDMS(300.0)).toBe("+300° 00' 00.0\"");
+    expect(convertDDToDMS(300.00001)).toBe("+300° 00' 00.1\"");
+    expect(convertDDToDMS(300.1)).toBe("+300° 10' 00.0\"");
+    expect(convertDDToDMS(300.12345)).toBe("+300° 12' 34.5\"");
+    expect(convertDDToDMS(300.12345, false)).toBe("300° 12' 34.5\"");
+
+    expect(convertDDToDMS(300, false, false)).toBe("300° 00'");
+    expect(convertDDToDMS(300.1, false, false)).toBe("300° 10'");
+    expect(convertDDToDMS(0, false)).toBe("0° 00'");
+  });
+});

package/src/utils/bearing.ts

@@ -5,7 +5,15 @@ export const bearingValueFormatter = (params: ValueFormatterParams): string => {
   if (value == null) {
     return "-";
   }
-  return convertDDToDMS(value);
+  return convertDDToDMS(value, false, false);
+};
+
+export const bearingCorrectionValueFormatter = (params: ValueFormatterParams): string => {
+  const value = params.value;
+  if (value == null) {
+    return "-";
+  }
+  return convertDDToDMS(value, true, true);
 };
 
 export const bearingNumberParser = (value: string): number | null => {
@@ -13,27 +21,30 @@ export const bearingNumberParser = (value: string): number | null => {
   return parseFloat(value);
 };
 
-const validMaskForDmsBearing = /^(\d+)?(\.([0-5](\d([0-5](\d(\d+)?)?)?)?)?)?$/;
-export const bearingStringValidator = (value: string): string | null => {
+const validMaskForDmsBearing = /^((-)?\d+)?(\.([0-5](\d([0-5](\d(\d+)?)?)?)?)?)?$/;
+export const bearingStringValidator = (
+  value: string,
+  customValidate?: (value: number | null) => string | null,
+): string | null => {
   value = value.trim();
   if (value === "") return null;
   const match = value.match(validMaskForDmsBearing);
   if (!match) return "Bearing must be a positive number in D.MMSSS format";
-  const decimalPart = match[3];
+  const decimalPart = match[4];
   if (decimalPart != null && decimalPart.length > 5) {
     return "Bearing has a maximum of 5 decimal places";
   }
 
   const bearing = parseFloat(value);
-  if (bearing >= 360) return "Bearing must be between 0 and 360 inclusive";
-  return null;
+
+  return customValidate ? customValidate(bearing) : null;
 };
 
 // Decimal-ish degrees to Degrees Minutes Seconds converter
 export const convertDDToDMS = (dd: number | null, showPositiveSymbol = true, addTrailingZeros = true): string => {
   if (dd == null) return "–";
 
-  if (dd === 0) addTrailingZeros = true;
+  if (dd === 0) addTrailingZeros = false;
 
   // toFixed rounds parts up greater than 60, which has to be corrected below
   const [bearingWholeString, beringDecimalString] = dd.toFixed(5).split(".");
@@ -64,7 +75,7 @@ export const convertDDToDMS = (dd: number | null, showPositiveSymbol = true, add
     dmsString += `\xa0${minString}'\xa0${secString}.${deciSecString}"`; // "\xa0" is here for non-breaking space
   } else if (secNumeric != 0) {
     dmsString += `\xa0${minString}'\xa0${secString}"`;
-  } else if (minNumeric != 0) {
+  } else {
     dmsString += `\xa0${minString}'`;
   }
 

package/dist/src/components/GridPopoutHook.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { GridFormProps } from "./GridCell";
-import { GridBaseRow } from "./Grid";
-export declare const useGridPopoutHook: <RowType extends GridBaseRow>(props: GridFormProps<RowType>, save?: ((selectedRows: any[]) => Promise<boolean>) | undefined) => {
-    popoutWrapper: (children: JSX.Element) => JSX.Element;
-    triggerSave: (reason?: string) => Promise<void>;
-};