@linzjs/windows 1.0.0 → 1.1.0

package/src/stories/panel/ShowPanelResizingAgGrid/ShowPanelResizingStepAgGrid.tsx

@@ -0,0 +1,164 @@
+import "@linzjs/lui/dist/scss/base.scss";
+import "@linzjs/step-ag-grid/dist/GridTheme.scss";
+import "@linzjs/step-ag-grid/dist/index.css";
+
+import { OpenPanelButton } from "../../../panel/OpenPanelButton";
+import { Panel, PanelContent, PanelHeader } from "../../../panel/Panel";
+import { PanelContext } from "../../../panel/PanelContext";
+import { PanelsContextProvider } from "../../../panel/PanelsContextProvider";
+import { useContext, useMemo, useState } from "react";
+
+import {
+  ColDefT,
+  Grid,
+  GridCell,
+  GridContextProvider,
+  GridIcon,
+  GridPopoverMenu,
+  GridPopoverMessage,
+  GridUpdatingContextProvider,
+  GridWrapper,
+} from "@linzjs/step-ag-grid";
+
+// #Example: Panel Context Provider
+// Don't forget to add a PanelContextProvider at the root of your project
+export const App = () => (
+  <PanelsContextProvider baseZIndex={500}>
+    <div>...the rest of your app...</div>
+  </PanelsContextProvider>
+);
+
+// #Example: Panel Component
+export interface TestPanelProps {
+  data: number;
+}
+
+export const TestPanelResizing = ({ data }: TestPanelProps) => {
+  return (
+    <Panel title={`Panel resizing demo ${data}`} size={{ width: 320, height: 400 }}>
+      <PanelHeader />
+      <PanelContent>
+        <PanelContentsWithResize />
+      </PanelContent>
+    </Panel>
+  );
+};
+
+// #Example: Panel Invocation
+export const TestShowPanelResizingAgGrid = () => (
+  <>
+    <OpenPanelButton buttonText={"TestPanel resizing 1"} component={() => <TestPanelResizing data={1} />} />{" "}
+    <OpenPanelButton buttonText={"TestPanel resizing 2"} component={() => <TestPanelResizing data={2} />} />
+  </>
+);
+
+/* exclude */
+interface ITestRow {
+  id: number;
+  position: string;
+  age: number;
+  desc: string;
+  dd: string;
+}
+
+/* exclude */
+
+// #Example: Resizing panel to content after load
+// Note: Resize can only be used from within the panel content.
+export const PanelContentsWithResize = () => {
+  // This is the first important bit
+  const { resizePanel } = useContext(PanelContext);
+
+  const columnDefs: ColDefT<ITestRow>[] = useMemo(
+    () => [
+      /* Your grid ColDefs */
+      /* exclude */
+      GridCell({
+        field: "id",
+        headerName: "Id",
+        lockVisible: true,
+      }),
+      GridCell({
+        field: "position",
+        headerName: "Position",
+        cellRendererParams: {
+          warning: (props) => props.value === "Tester" && "Testers are testing",
+          info: (props) => props.value === "Developer" && "Developers are awesome",
+        },
+      }),
+      GridCell({
+        field: "age",
+        headerName: "Age",
+      }),
+      GridCell({
+        field: "desc",
+        headerName: "Description",
+        flex: 1,
+      }),
+      GridPopoverMessage(
+        {
+          headerName: "Popout message",
+          cellRenderer: () => <>Single Click me!</>,
+          exportable: false,
+        },
+        {
+          multiEdit: true,
+          editorParams: {
+            message: async (selectedRows): Promise<string> => {
+              return `There are ${selectedRows.length} row(s) selected`;
+            },
+          },
+        },
+      ),
+      GridCell({
+        headerName: "Custom edit",
+        editable: true,
+        valueFormatter: () => "Press E",
+        cellRendererParams: {
+          rightHoverElement: (
+            <GridIcon icon={"ic_launch_modal"} title={"Title text"} className={"GridCell-editableIcon"} />
+          ),
+          editAction: (selectedRows) => {
+            alert(`Custom edit ${selectedRows.map((r) => r.id)} rowId(s) selected`);
+          },
+          shortcutKeys: {
+            e: () => {
+              alert("Hi");
+            },
+          },
+        },
+      }),
+      GridPopoverMenu(
+        {},
+        {
+          multiEdit: true,
+          editorParams: {
+            options: async () => [],
+          },
+        },
+      ),
+      /* exclude */
+    ],
+    [],
+  );
+
+  const [rowData] = useState([
+    /* Your grid row data */
+    /* exclude */
+    { id: 1000, position: "Tester", age: 30, desc: "Tests application", dd: "1" },
+    { id: 1001, position: "Developer", age: 12, desc: "Develops application", dd: "2" },
+    { id: 1002, position: "Manager", age: 65, desc: "Manages", dd: "3" },
+    /* exclude */
+  ]);
+
+  return (
+    <GridUpdatingContextProvider>
+      <GridContextProvider>
+        <GridWrapper>
+          {/* onContentSize={resizePanel} does the resize on a callback */}
+          <Grid columnDefs={columnDefs} rowData={rowData} onContentSize={resizePanel} />
+        </GridWrapper>
+      </GridContextProvider>
+    </GridUpdatingContextProvider>
+  );
+};

package/src/stories/support.js

@@ -0,0 +1,16 @@
+export const getBlocks = (obj) => obj.toString().split("// #").splice(1);
+
+export const blockToString = (block) => {
+  const result = block.split("\n").splice(1);
+  let inComment = false;
+  return result
+    .map((line) => {
+      if (line.includes("// exclude") || line.includes("/* exclude */") || line.includes("/*exclude*/")) {
+        inComment = !inComment;
+        return undefined;
+      }
+      return inComment ? undefined : line;
+    })
+    .filter((l) => l)
+    .join("\n");
+};

package/src/util/useInterval.ts

@@ -2,25 +2,17 @@ import { useEffect, useRef } from "react";
 
 type Callback = () => void | Promise<void>;
 
-export const useInterval = (callback: Callback, delay: number | null) => {
-  const savedCallback = useRef(callback);
-  const callbackInProgress = useRef(false);
-  savedCallback.current = callback;
+export const useInterval = (callback: Callback, timeoutMs: number | null) => {
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
 
   useEffect(() => {
-    if (delay == null) return;
-
-    const id = setInterval(async () => {
-      // Since this is an interval, then next tick could occur before the previous has finished
-      if (!callbackInProgress.current && savedCallback.current) {
-        callbackInProgress.current = true;
-        try {
-          await savedCallback.current();
-        } finally {
-          callbackInProgress.current = false;
-        }
-      }
-    }, delay);
-    return () => clearInterval(id);
-  }, [delay]);
+    if (!timeoutMs) return;
+    const interval = setInterval(() => {
+      callbackRef.current && callbackRef.current();
+    }, timeoutMs);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [timeoutMs]);
 };