@linzjs/step-ag-grid 1.1.1

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

@@ -0,0 +1,111 @@
+import "@linzjs/lui/dist/scss/base.scss";
+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 { MenuSeparator } from "../../components/gridForm/GridFormDropDown";
+import { UpdatingContextProvider } from "../../contexts/UpdatingContextProvider";
+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";
+
+export default {
+  title: "Components / Grids",
+  component: Grid,
+  args: {
+    externalSelectedItems: [],
+    setExternalSelectedItems: () => {},
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 1200, height: 400, display: "flex" }}>
+        <UpdatingContextProvider>
+          <GridContextProvider>
+            <Story />
+          </GridContextProvider>
+        </UpdatingContextProvider>
+      </div>
+    ),
+  ],
+} as ComponentMeta<typeof Grid>;
+
+interface ITestRow {
+  id: number;
+  position: string | null;
+  position2: string | null;
+  position3: string | null;
+}
+
+const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
+  const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
+
+  const columnDefs = useMemo(
+    () =>
+      [
+        GridCell({
+          field: "id",
+          headerName: "Id",
+          initialWidth: 65,
+          maxWidth: 85,
+        }),
+        GridPopoutEditMultiSelect<ITestRow, ITestRow["position"]>({
+          field: "position",
+          initialWidth: 65,
+          maxWidth: 150,
+          headerName: "Position",
+          cellEditorParams: {
+            multiEdit: false,
+            filtered: true,
+            filterPlaceholder: "Filter position",
+            options: [
+              { value: "a", label: "Architect" },
+              { value: "b", label: "Developer" },
+              { value: "c", label: "Product Owner" },
+              { value: "d", label: "Scrum Master" },
+              { value: "e", label: "Tester" },
+              MenuSeparator,
+              {
+                value: "f",
+                label: "Other",
+                subComponent: (props) => <GridSubComponentTextArea {...props} />,
+              },
+            ],
+            onSave: async (result: MultiSelectResult<ITestRow>) => {
+              // eslint-disable-next-line no-console
+              console.log(result);
+              await wait(1000);
+              return true;
+            },
+          },
+        }),
+      ] as ColDef[],
+    [],
+  );
+
+  const rowData = useMemo(
+    () =>
+      [
+        { id: 1000, position: "Tester", position2: "1", position3: "Tester" },
+        { id: 1001, position: "Developer", position2: "2", position3: "Developer" },
+      ] as ITestRow[],
+    [],
+  );
+
+  return (
+    <Grid
+      {...props}
+      externalSelectedItems={externalSelectedItems}
+      setExternalSelectedItems={setExternalSelectedItems}
+      columnDefs={columnDefs}
+      rowData={rowData}
+    />
+  );
+};
+
+export const EditMultiSelect = GridEditMultiSelectTemplate.bind({});

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

@@ -0,0 +1,151 @@
+import "@linzjs/lui/dist/scss/base.scss";
+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 { 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";
+
+export default {
+  title: "Components / Grids",
+  component: Grid,
+  args: {
+    externalSelectedItems: [],
+    setExternalSelectedItems: () => {},
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 1200, height: 400, display: "flex" }}>
+        <UpdatingContextProvider>
+          <GridContextProvider>
+            <Story />
+          </GridContextProvider>
+        </UpdatingContextProvider>
+      </div>
+    ),
+  ],
+} as ComponentMeta<typeof Grid>;
+
+interface ITestRow {
+  id: number;
+  position: string;
+  age: number;
+  desc: string;
+  dd: string;
+}
+
+const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
+  const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
+  const columnDefs = useMemo(
+    () => [
+      GridCell({
+        field: "id",
+        headerName: "Id",
+        initialWidth: 65,
+        maxWidth: 85,
+      }),
+      GridCell({
+        field: "position",
+        headerName: "Position",
+        initialWidth: 65,
+        maxWidth: 150,
+        cellRendererParams: {
+          warning: (props: ICellRendererParams) => props.value === "Tester" && "Testers are testing",
+          info: (props: ICellRendererParams) => props.value === "Developer" && "Developers are awesome",
+        },
+      }),
+      GridCell({
+        field: "age",
+        headerName: "Age",
+        initialWidth: 65,
+        maxWidth: 85,
+      }),
+      GridCell({
+        field: "desc",
+        headerName: "Description",
+        initialWidth: 150,
+        maxWidth: 200,
+      }),
+      GridPopoverMessage<ITestRow>({
+        headerName: "Popout message",
+        cellRenderer: () => <>Click me!</>,
+        cellEditorParams: {
+          message: async (selectedRows: ITestRow[]) => {
+            await wait(1000);
+            return `There are ${selectedRows.length} row(s) selected`;
+          },
+          multiEdit: true,
+        },
+      }),
+      GridPopoutMenu<ITestRow>({
+        headerName: "Menu",
+        cellEditorParams: {
+          options: async () => {
+            // Just doing a timeout here to demonstrate deferred loading
+            await wait(500);
+            return [
+              {
+                label: "Single edit only",
+                action: async (selectedRows) => {
+                  alert(`Single-edit: ${selectedRows.length} rows`);
+                  await wait(1500);
+                  return true;
+                },
+                multiEdit: false,
+              },
+              {
+                label: "Multi-edit",
+                action: async (selectedRows) => {
+                  alert(`Multi-edit: ${selectedRows.length} rows`);
+                  await wait(1500);
+                  return true;
+                },
+                multiEdit: true,
+              },
+            ];
+          },
+        },
+      }),
+      GridPopoutMenu<ITestRow>({
+        headerName: "Menu disabled",
+        editable: false,
+        cellEditorParams: {
+          options: async () => {
+            return [];
+          },
+        },
+      }),
+    ],
+    [],
+  );
+
+  const rowData = useMemo(
+    () =>
+      [
+        { id: 1000, position: "Tester", age: 30, desc: "Tests application", dd: "1" },
+        { id: 1001, position: "Developer", age: 12, desc: "Develops application", dd: "2" },
+      ] as ITestRow[],
+    [],
+  );
+
+  return (
+    <Grid
+      {...props}
+      externalSelectedItems={externalSelectedItems}
+      setExternalSelectedItems={setExternalSelectedItems}
+      columnDefs={columnDefs}
+      rowData={rowData}
+      quickFilter={true}
+      quickFilterPlaceholder={"Quick filter..."}
+    />
+  );
+};
+
+export const ReadOnly = GridReadOnlyTemplate.bind({});

package/src/utils/bearing.ts

@@ -0,0 +1,72 @@
+import { ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
+
+export const bearingValueFormatter = (params: ValueFormatterParams): string => {
+  const value = params.value;
+  if (value == null) {
+    return "-";
+  }
+  return convertDDToDMS(value);
+};
+
+export const bearingNumberParser = (value: string): number | null => {
+  if (value === "") return null;
+  return parseFloat(value);
+};
+
+const validMaskForDmsBearing = /^(\d+)?(\.([0-5](\d([0-5](\d(\d+)?)?)?)?)?)?$/;
+export const bearingStringValidator = (value: string): 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];
+  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;
+};
+
+// 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;
+
+  // toFixed rounds parts up greater than 60, which has to be corrected below
+  const [bearingWholeString, beringDecimalString] = dd.toFixed(5).split(".");
+
+  let bearingWhole = Math.abs(parseInt(bearingWholeString));
+  let minNumeric = parseInt(beringDecimalString?.substring(0, 2));
+  let secNumeric = parseInt(beringDecimalString?.substring(2, 4));
+
+  // If the toFixed caused rounding beyond 60 minutes/seconds then apply the carry
+  if (secNumeric >= 60) {
+    minNumeric++;
+    secNumeric -= 60;
+  }
+  if (minNumeric >= 60) {
+    bearingWhole++;
+    minNumeric -= 60;
+  }
+  if (bearingWhole >= 360) {
+    bearingWhole -= 360;
+  }
+
+  const minString = minNumeric.toString().padStart(2, "0");
+  const secString = secNumeric.toString().padStart(2, "0");
+  const deciSecString = beringDecimalString?.substring(4, 5);
+
+  let dmsString = `${showPositiveSymbol && dd > 0 ? "+" : ""}${dd < 0 ? "-" : ""}${bearingWhole}°`;
+  if (addTrailingZeros || deciSecString != "0") {
+    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) {
+    dmsString += `\xa0${minString}'`;
+  }
+
+  return dmsString;
+};

package/src/utils/util.ts

@@ -0,0 +1,26 @@
+import { isEmpty as _isEmpty } from "lodash-es";
+
+// Typed version of lodash !isEmpty
+export const isNotEmpty = (obj: Set<any> | Map<any, any> | Record<any, any> | any[] | undefined): boolean =>
+  !_isEmpty(obj);
+
+export const wait = (timeoutMs: number) =>
+  new Promise<(string | null)[]>((resolve) => {
+    setTimeout(resolve, timeoutMs);
+  });
+
+export const isFloat = (value: string) => {
+  const regexp = /^-?\d+(\.\d+)?$/;
+  return regexp.test(value);
+};
+
+export const hasParentClass = function (className: string, child: Node) {
+  let node: Node | null = child;
+  while (node) {
+    if (node instanceof Node && node instanceof HTMLElement && node.classList.contains(className)) {
+      return true;
+    }
+    node = node.parentNode;
+  }
+  return false;
+};