@linzjs/step-ag-grid 2.1.3 → 2.2.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -91,9 +91,10 @@
     "@storybook/react": "6.5.13",
     "@storybook/test-runner": "^0.9.0",
     "@storybook/testing-library": "^0.0.13",
+    "@testing-library/dom": "^8.19.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^13.5.0",
     "@types/debounce-promise": "^3.1.5",
     "@types/jest": "^29.2.2",
     "@types/lodash-es": "^4.17.6",

package/src/index.ts

@@ -34,5 +34,7 @@ export { TextAreaInput } from "./lui/TextAreaInput";
 export { TextInputFormatted } from "./lui/TextInputFormatted";
 export { GridSubComponentTextArea } from "./components/GridSubComponentTextArea";
 
+export * from "./lui/ActionButton";
+
 export * from "./utils/bearing";
 export * from "./utils/util";

package/src/lui/ActionButton.scss

@@ -0,0 +1,32 @@
+@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
+
+.ActionButton {
+  display: flex;
+  align-items: center;
+}
+
+.ActionButton .LuiIcon {
+  margin: 0 4px !important;
+}
+
+.ActionButton-minimalArea {
+  position: relative;
+}
+
+.ActionButton-minimalAreaDisplay {
+  position: absolute;
+}
+
+.ActionButton-minimalAreaExpand {
+  visibility: hidden;
+}
+
+.ActionButton-inProgress {
+  cursor: progress;
+  color: #007198 !important;
+  background-color: colors.$polar !important;
+
+  svg * {
+    fill: transparent !important;
+  }
+}

package/src/lui/ActionButton.tsx

@@ -0,0 +1,76 @@
+import "./ActionButton.scss";
+
+import clsx from "clsx";
+import { useEffect } from "react";
+import { LuiButton, LuiIcon, LuiMiniSpinner } from "@linzjs/lui";
+import { IconName } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
+import { usePrevious } from "./reactUtils";
+import { useStateDeferred } from "./stateDeferredHook";
+
+export interface ActionButtonProps {
+  icon: IconName;
+  name: string;
+  inProgressName?: string;
+  title?: string;
+  dataTestId?: string;
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "ns";
+  className?: string;
+  onClick?: () => void;
+  inProgress?: boolean;
+}
+
+// Kept this less than one second, so I don't have issues with waitFor as it defaults to 1s
+const minimumInProgressTimeMs = 950;
+
+export const ActionButton = ({
+  icon,
+  name,
+  inProgressName,
+  dataTestId,
+  inProgress,
+  className,
+  title,
+  onClick,
+  size = "sm",
+}: ActionButtonProps): JSX.Element => {
+  const lastInProgress = usePrevious(inProgress ?? false);
+  const [localInProgress, setLocalInProgress, setLocalInProgressDeferred] = useStateDeferred<boolean>(!!inProgress);
+
+  useEffect(() => {
+    if (inProgress == lastInProgress) return;
+    inProgress ? setLocalInProgress(true) : setLocalInProgressDeferred(false, minimumInProgressTimeMs);
+  }, [inProgress, lastInProgress, setLocalInProgress, setLocalInProgressDeferred]);
+
+  return (
+    <LuiButton
+      data-testid={dataTestId}
+      type={"button"}
+      level={"tertiary"}
+      title={title ?? name}
+      aria-label={name}
+      className={clsx("lui-button-icon", "ActionButton", className, localInProgress && "ActionButton-inProgress")}
+      size={"lg"}
+      onClick={onClick}
+      disabled={localInProgress}
+    >
+      {localInProgress ? (
+        <LuiMiniSpinner
+          size={16}
+          divProps={{
+            "data-testid": "loading-spinner",
+            style: { padding: 0, margin: 0, paddingRight: 8 },
+            role: "status",
+            ["aria-label"]: "Loading",
+          }}
+        />
+      ) : (
+        <LuiIcon name={icon} alt={name} size={size} />
+      )}
+      <span className={"ActionButton-minimalArea"}>
+        <span className={"ActionButton-minimalAreaDisplay"}>{(localInProgress ? inProgressName : name) ?? name}</span>
+        {/* This makes sure the button expands to fill maximum length text at all times */}
+        <span className={"ActionButton-minimalAreaExpand"}>{name}</span>
+      </span>
+    </LuiButton>
+  );
+};

package/src/lui/reactUtils.test.tsx

@@ -0,0 +1,47 @@
+import { usePrevious } from "./reactUtils";
+import { useEffect, useState } from "react";
+import { act, render } from "@testing-library/react";
+import { screen } from "@testing-library/dom";
+
+interface WrapperProps {
+  value: boolean;
+}
+
+let extPrevious: boolean | undefined = undefined;
+
+const UsePreviousWrapper = ({ value }: WrapperProps): JSX.Element => {
+  const previous = usePrevious<boolean>(value);
+  useEffect(() => {
+    extPrevious = previous;
+  }, [previous]);
+
+  return <div />;
+};
+
+const TestComponent = (): JSX.Element => {
+  const [value, setValue] = useState(false);
+
+  const toggleValue = () => setValue((value) => !value);
+
+  return (
+    <>
+      <button onClick={toggleValue}>Change value</button>
+      <UsePreviousWrapper value={value} />
+    </>
+  );
+};
+
+describe("usePrevious", () => {
+  test("usePrevious", async () => {
+    render(<TestComponent />);
+    const button = await screen.findByText("Change value");
+
+    expect(extPrevious).toBeUndefined();
+
+    act(() => button.click());
+    expect(extPrevious).toBe(false);
+
+    act(() => button.click());
+    expect(extPrevious).toBe(true);
+  });
+});

package/src/lui/reactUtils.tsx

@@ -0,0 +1,14 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * Track previous values of states.
+ *
+ * @param value Value to track.
+ */
+export const usePrevious = <T extends unknown>(value: T): T | undefined => {
+  const ref = useRef<T>();
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+};

package/src/lui/stateDeferredHook.tsx

@@ -0,0 +1,29 @@
+import { useCallback, useRef, useState } from "react";
+import { useTimeoutHook } from "./timeoutHook";
+
+/**
+ * Defers state change up to a minimum time since last state change.
+ */
+export const useStateDeferred = <T extends unknown>(
+  initialValue: T,
+): [T, (v: T) => void, (v: T, w: number) => void] => {
+  const startTime = useRef<number>(0);
+  const timeoutHook = useTimeoutHook();
+
+  const [value, _setValue] = useState(initialValue);
+
+  const setValue = useCallback((newValue: T) => {
+    startTime.current = Date.now();
+    _setValue(newValue);
+  }, []);
+
+  const setValueDeferred = useCallback(
+    (newValue: T, minimumWaitTimeMs: number) => {
+      const waitTimeMs = Math.max(minimumWaitTimeMs - (Date.now() - startTime.current), 0);
+      timeoutHook(() => _setValue(newValue), waitTimeMs);
+    },
+    [timeoutHook],
+  );
+
+  return [value, setValue, setValueDeferred];
+};

package/src/lui/timeoutHook.test.tsx

@@ -0,0 +1,38 @@
+import { useTimeoutHook } from "./timeoutHook";
+import { render } from "@testing-library/react";
+
+describe("useTimeoutHook", () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  const TestComponent = (props: { callback: () => void; repeat?: number }) => {
+    const timeoutHook = useTimeoutHook();
+    for (let i = 0; i < (props.repeat ?? 1); i++) {
+      timeoutHook(() => props.callback(), 1000);
+    }
+    return <div />;
+  };
+
+  test("invokes on timeout", async () => {
+    const callback = jest.fn();
+
+    render(<TestComponent callback={callback} />);
+    expect(callback).toHaveBeenCalledTimes(0);
+    jest.runAllTimers();
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  test("invokes once on double invocation", async () => {
+    const callback = jest.fn();
+
+    render(<TestComponent callback={callback} repeat={2} />);
+    expect(callback).toHaveBeenCalledTimes(0);
+    jest.runAllTimers();
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+});

package/src/lui/timeoutHook.tsx

@@ -0,0 +1,40 @@
+import { useCallback, useEffect, useRef } from "react";
+
+/**
+ * Cancels timeouts on scope being destroyed.
+ *
+ * This could almost be a debounce, but debounce tracks by function reference, this tracks by hook reference.
+ * This could have been implemented using debounce if the callers function was wrapped in useCallback,
+ * but there's no way to enforce that, so  it would lead to bugs.
+ */
+export const useTimeoutHook = () => {
+  const timeout = useRef<ReturnType<typeof setTimeout>>();
+
+  /**
+   * Clear any pending timeouts.
+   */
+  const clearTimeouts = () => {
+    if (timeout.current) {
+      const tc = timeout.current;
+      timeout.current = undefined;
+      clearTimeout(tc);
+    }
+  };
+
+  /**
+   * Call this when your action has completed.
+   */
+  const invoke = useCallback((fn: () => void, waitTimeMs: number) => {
+    clearTimeouts();
+    timeout.current = setTimeout(fn, waitTimeMs);
+  }, []);
+
+  /**
+   * Clear timeout on loss of scope.
+   */
+  useEffect(() => {
+    return () => clearTimeouts();
+  }, []);
+
+  return invoke;
+};

package/src/stories/components/ActionButton.stories.tsx

@@ -0,0 +1,33 @@
+import "@linzjs/lui/dist/scss/base.scss";
+import "@linzjs/lui/dist/fonts";
+
+import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { ActionButton } from "../../lui/ActionButton";
+import { useCallback, useState } from "react";
+import { wait } from "../../utils/util";
+
+export default {
+  title: "Components / ButtonTextWithIcon",
+  component: ActionButton,
+  args: {},
+} as ComponentMeta<typeof ActionButton>;
+
+const ActionButtonTemplate: ComponentStory<typeof ActionButton> = () => {
+  const [inProgress, setInProgress] = useState(false);
+  const performAction = useCallback(async () => {
+    setInProgress(true);
+    await wait(1000);
+    setInProgress(false);
+  }, []);
+  return (
+    <ActionButton
+      icon={"ic_add"}
+      name={"Add new row"}
+      inProgressName={"Adding..."}
+      inProgress={inProgress}
+      onClick={performAction}
+    />
+  );
+};
+
+export const ActionButtonSimple = ActionButtonTemplate.bind({});

package/src/stories/{components → grid}/GridPopoutBearing.stories.tsx

@@ -24,7 +24,7 @@ export default {
   },
   decorators: [
     (Story) => (
-      <div style={{ width: 1200, height: 400, display: "flex" }}>
+      <div style={{ width: 1024, height: 400 }}>
         <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />
@@ -83,15 +83,11 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
     [],
   );
 
-  const rowData = useMemo(
-    () =>
-      [
-        { id: 1000, bearing1: 1.234, bearingCorrection: 90 },
-        { id: 1001, bearing1: 1.565, bearingCorrection: 240 },
-        { id: 1002, bearing1: null, bearingCorrection: 355.1 },
-      ] as ITestRow[],
-    [],
-  );
+  const [rowData, setRowData] = useState([
+    { id: 1000, bearing1: 1.234, bearingCorrection: 90 },
+    { id: 1001, bearing1: 1.565, bearingCorrection: 240 },
+    { id: 1002, bearing1: null, bearingCorrection: 355.1 },
+  ] as ITestRow[]);
 
   return (
     <Grid
@@ -100,6 +96,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
       setExternalSelectedItems={setExternalSelectedItems}
       columnDefs={columnDefs}
       rowData={rowData}
+      domLayout={"autoHeight"}
     />
   );
 };

package/src/stories/{components → grid}/GridPopoutEditDropDown.stories.tsx

@@ -22,7 +22,7 @@ export default {
   },
   decorators: [
     (Story) => (
-      <div style={{ width: 1200, height: 400, display: "flex" }}>
+      <div style={{ width: 1024, height: 400 }}>
         <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />
@@ -245,28 +245,24 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
     [optionsFn, optionsObjects],
   );
 
-  const rowData = useMemo(
-    () =>
-      [
-        {
-          id: 1000,
-          position: "Tester",
-          position2: "1",
-          position3: "Tester",
-          position4: { code: "O1", desc: "Object One" },
-          code: "O1",
-        },
-        {
-          id: 1001,
-          position: "Developer",
-          position2: "2",
-          position3: "Developer",
-          position4: { code: "O2", desc: "Object Two" },
-          code: "O2",
-        },
-      ] as ITestRow[],
-    [],
-  );
+  const [rowData, setRowData] = useState([
+    {
+      id: 1000,
+      position: "Tester",
+      position2: "1",
+      position3: "Tester",
+      position4: { code: "O1", desc: "Object One" },
+      code: "O1",
+    },
+    {
+      id: 1001,
+      position: "Developer",
+      position2: "2",
+      position3: "Developer",
+      position4: { code: "O2", desc: "Object Two" },
+      code: "O2",
+    },
+  ] as ITestRow[]);
 
   return (
     <Grid
@@ -275,6 +271,7 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
       setExternalSelectedItems={setExternalSelectedItems}
       columnDefs={columnDefs}
       rowData={rowData}
+      domLayout={"autoHeight"}
     />
   );
 };

package/src/stories/{components → grid}/GridPopoutEditGeneric.stories.tsx

@@ -20,7 +20,7 @@ export default {
   },
   decorators: [
     (Story) => (
-      <div style={{ width: 1200, height: 400, display: "flex" }}>
+      <div style={{ width: 1024, height: 400 }}>
         <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />
@@ -57,14 +57,10 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
     [],
   );
 
-  const rowData = useMemo(
-    () =>
-      [
-        { id: 1000, name: "IS IS DP12345", nameType: "IS", numba: "IX", plan: "DP 12345" },
-        { id: 1001, name: "PEG V SD523", nameType: "PEG", numba: "V", plan: "SD 523" },
-      ] as IFormTestRow[],
-    [],
-  );
+  const [rowData, setRowData] = useState([
+    { id: 1000, name: "IS IS DP12345", nameType: "IS", numba: "IX", plan: "DP 12345" },
+    { id: 1001, name: "PEG V SD523", nameType: "PEG", numba: "V", plan: "SD 523" },
+  ] as IFormTestRow[]);
 
   return (
     <Grid
@@ -73,6 +69,7 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
       setExternalSelectedItems={setExternalSelectedItems}
       columnDefs={columnDefs}
       rowData={rowData}
+      domLayout={"autoHeight"}
     />
   );
 };

package/src/stories/{components → grid}/GridPopoutEditGenericTextArea.stories.tsx

@@ -7,12 +7,14 @@ import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/clien
 import { GridUpdatingContextProvider } from "../../contexts/GridUpdatingContextProvider";
 import { GridContextProvider } from "../../contexts/GridContextProvider";
 import { Grid, GridProps } from "../../components/Grid";
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { ColDefT, GridCell } from "../../components/GridCell";
 import { IFormTestRow } from "./FormTest";
 import { isFloat, wait } from "../../utils/util";
 import { GridPopoverTextArea } from "../../components/gridPopoverEdit/GridPopoverTextArea";
 import { GridPopoverTextInput } from "../../components/gridPopoverEdit/GridPopoverTextInput";
+import { ActionButton } from "../../lui/ActionButton";
+import { GridPopoverMenu } from "../../components/gridPopoverEdit/GridPopoverMenu";
 
 export default {
   title: "Components / Grids",
@@ -23,7 +25,7 @@ export default {
   },
   decorators: [
     (Story) => (
-      <div style={{ width: 1200, height: 400, display: "flex" }}>
+      <div style={{ width: 1024, height: 400 }}>
         <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />
@@ -36,6 +38,11 @@ export default {
 
 const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
+  const [rowData, setRowData] = useState([
+    { id: 1000, name: "IS IS DP12345", nameType: "IS", numba: "IX", plan: "DP 12345", distance: 10 },
+    { id: 1001, name: "PEG V SD523", nameType: "PEG", numba: "V", plan: "SD 523", distance: null },
+  ] as IFormTestRow[]);
+
   const columnDefs: ColDefT<IFormTestRow>[] = useMemo(
     () => [
       GridCell({
@@ -123,27 +130,59 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
           },
         },
       ),
+      GridPopoverMenu(
+        {
+          headerName: "Delete menu",
+        },
+        {
+          multiEdit: true,
+          editorParams: {
+            options: async (_) => [
+              {
+                label: "Delete",
+                action: async (selectedRows) => {
+                  await wait(1500);
+                  setRowData(rowData.filter((data) => !selectedRows.some((row) => row.id == data.id)));
+                  return true;
+                },
+                supportsMultiEdit: true,
+              },
+            ],
+          },
+        },
+      ),
     ],
-    [],
+    [rowData],
   );
 
-  const rowData = useMemo(
-    () =>
-      [
-        { id: 1000, name: "IS IS DP12345", nameType: "IS", numba: "IX", plan: "DP 12345", distance: 10 },
-        { id: 1001, name: "PEG V SD523", nameType: "PEG", numba: "V", plan: "SD 523", distance: null },
-      ] as IFormTestRow[],
-    [],
-  );
+  const [inProgress, setInProgress] = useState(false);
+
+  const addRowAction = useCallback(async () => {
+    setInProgress(true);
+    await wait(1000);
+    const lastRow = rowData[rowData.length - 1];
+    setRowData([...rowData, { id: lastRow.id + 1, name: "?", nameType: "?", numba: "?", plan: "", distance: null }]);
+    setInProgress(false);
+  }, [rowData]);
 
   return (
-    <Grid
-      {...props}
-      externalSelectedItems={externalSelectedItems}
-      setExternalSelectedItems={setExternalSelectedItems}
-      columnDefs={columnDefs}
-      rowData={rowData}
-    />
+    <>
+      <Grid
+        {...props}
+        externalSelectedItems={externalSelectedItems}
+        setExternalSelectedItems={setExternalSelectedItems}
+        columnDefs={columnDefs}
+        rowData={rowData}
+        domLayout={"autoHeight"}
+      />
+      <ActionButton
+        icon={"ic_add"}
+        name={"Add new row"}
+        inProgressName={"Adding..."}
+        inProgress={inProgress}
+        onClick={addRowAction}
+      />
+    </>
   );
 };
 

package/src/stories/{components → grid}/GridPopoutEditMultiSelect.stories.tsx

@@ -24,7 +24,7 @@ export default {
   },
   decorators: [
     (Story) => (
-      <div style={{ width: 1200, height: 400, display: "flex" }}>
+      <div style={{ width: 1024, height: 400 }}>
         <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />
@@ -119,14 +119,10 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
     ];
   }, []);
 
-  const rowData = useMemo(
-    () =>
-      [
-        { id: 1000, position: "Tester", position2: "1", position3: "Tester" },
-        { id: 1001, position: "Developer", position2: "2", position3: "Developer" },
-      ] as ITestRow[],
-    [],
-  );
+  const [rowData, setRowData] = useState([
+    { id: 1000, position: "Tester", position2: "1", position3: "Tester" },
+    { id: 1001, position: "Developer", position2: "2", position3: "Developer" },
+  ] as ITestRow[]);
 
   return (
     <Grid
@@ -135,6 +131,7 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
       setExternalSelectedItems={setExternalSelectedItems}
       columnDefs={columnDefs}
       rowData={rowData}
+      domLayout={"autoHeight"}
     />
   );
 };

package/src/stories/{components → grid}/GridReadOnly.stories.tsx

@@ -24,7 +24,7 @@ export default {
   },
   decorators: [
     (Story) => (
-      <div style={{ width: 1200, height: 400, display: "flex" }}>
+      <div style={{ width: 1024, height: 400 }}>
         <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />
@@ -151,13 +151,10 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
     [],
   );
 
-  const rowData: ITestRow[] = useMemo(
-    () => [
-      { id: 1000, position: "Tester", age: 30, desc: "Tests application", dd: "1" },
-      { id: 1001, position: "Developer", age: 12, desc: "Develops application", dd: "2" },
-    ],
-    [],
-  );
+  const [rowData, setRowData] = useState([
+    { id: 1000, position: "Tester", age: 30, desc: "Tests application", dd: "1" },
+    { id: 1001, position: "Developer", age: 12, desc: "Develops application", dd: "2" },
+  ]);
 
   return (
     <Grid
@@ -166,6 +163,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
       setExternalSelectedItems={setExternalSelectedItems}
       columnDefs={columnDefs}
       rowData={rowData}
+      domLayout={"autoHeight"}
     />
   );
 };