@m4l/components 0.1.76 → 0.1.78

package/components/GridLayout/WidthProvider/index.9a26dfe4.js

@@ -0,0 +1,65 @@
+import { useRef, useState, useMemo, useCallback, useEffect } from "react";
+import clsx from "clsx";
+import { throttle } from "lodash";
+import { useResizeObserver } from "@m4l/graphics";
+import { jsx } from "react/jsx-runtime";
+const THROTTLE_RESIZE_TIME = 200;
+const layoutClassName = "M4LGridLayout";
+function WidthProvider(ComposedComponent) {
+  return (props) => {
+    const {
+      measureBeforeMount = true,
+      ...rest
+    } = props;
+    const refMounted = useRef(false);
+    const [currentState, setCurrentState] = useState({
+      mounted: false,
+      width: 1280,
+      height: 100
+    });
+    const onWindowResizeMemo = useMemo(() => () => {
+      const node = elementRef.current;
+      if (node instanceof HTMLElement && node.offsetWidth) {
+        setCurrentState((prev) => ({
+          ...prev,
+          width: node.offsetWidth,
+          height: node.offsetHeight
+        }));
+      }
+    }, []);
+    const throttleResize = throttle(onWindowResizeMemo, THROTTLE_RESIZE_TIME, {
+      leading: false,
+      trailing: true
+    });
+    const onResize = useCallback((_target) => {
+      throttleResize();
+    }, []);
+    const elementRef = useResizeObserver(onResize);
+    useEffect(() => {
+      setCurrentState((prev) => ({
+        ...prev,
+        mounted: true
+      }));
+      refMounted.current = true;
+      onWindowResizeMemo();
+      return () => {
+      };
+    }, []);
+    if (measureBeforeMount && !currentState.mounted) {
+      return /* @__PURE__ */ jsx("div", {
+        className: clsx(props.className, layoutClassName),
+        style: props.style,
+        ref: elementRef
+      });
+    }
+    return /* @__PURE__ */ jsx(ComposedComponent, {
+      innerRef: elementRef,
+      width: currentState.width,
+      height: currentState.height,
+      ...rest
+    });
+  };
+}
+export {
+  WidthProvider as W
+};

package/components/GridLayout/calculateUtils.d.ts

@@ -0,0 +1,42 @@
+import { GridItemState, Maximize } from './subcomponents/GridItem/types';
+import { Position, PositionParams } from './types';
+export declare function calcGridColWidth(positionParams: PositionParams): number;
+export declare function calcGridItemWHPx(gridUnits: number, colOrRowSize: number, marginPx: number): number;
+/**
+ * Return position on the page given an x, y, w, h.
+ * left, top, width, height are all in pixels.
+ * @param  {PositionParams} positionParams  Parameters of grid needed for coordinates calculations.
+ * @param  {Number}  x                      X coordinate in grid units.
+ * @param  {Number}  y                      Y coordinate in grid units.
+ * @param  {Number}  w                      W coordinate in grid units.
+ * @param  {Number}  h                      H coordinate in grid units.
+ * @return {Position}                       Object containing coords.
+ */
+export declare function calcGridItemPosition(positionParams: PositionParams, x: number, y: number, w: number, h: number, maximize: Maximize, state?: GridItemState): Position;
+/**
+ * Translate x and y coordinates from pixels to grid units.
+ * @param  {PositionParams} positionParams  Parameters of grid needed for coordinates calculations.
+ * @param  {Number} top                     Top position (relative to parent) in pixels.
+ * @param  {Number} left                    Left position (relative to parent) in pixels.
+ * @param  {Number} w                       W coordinate in grid units.
+ * @param  {Number} h                       H coordinate in grid units.
+ * @return {Object}                         x and y in grid units.
+ */
+export declare function calcXY(positionParams: PositionParams, top: number, left: number, w: number, h: number): {
+    x: number;
+    y: number;
+};
+/**
+ * Given a height and width in pixel values, calculate grid units.
+ * @param  {PositionParams} positionParams  Parameters of grid needed for coordinates calcluations.
+ * @param  {Number} height                  Height in pixels.
+ * @param  {Number} width                   Width in pixels.
+ * @param  {Number} x                       X coordinate in grid units.
+ * @param  {Number} y                       Y coordinate in grid units.
+ * @return {Object}                         w, h as grid units.
+ */
+export declare function calcWH(positionParams: PositionParams, width: number, height: number, x: number, y: number): {
+    w: number;
+    h: number;
+};
+export declare function clamp(num: number, lowerBound: number, upperBound: number): number;

package/components/GridLayout/index.d.ts

@@ -0,0 +1,6 @@
+export { GridLayout } from './GridLayout';
+export { Responsive } from './subcomponents/Responsive';
+export { addLayoutItemToBreakPoints, addLayoutItemToBreakPointIfNoExists, cloneLayouts, isEqualLayouts, isEqualLayout, } from './subcomponents/Responsive/responsiveUtils';
+export type { GridLayoutProps, LayoutItemRenderProps, Layout, LayoutItem, BaseLayoutItem, } from './types';
+export type { Layouts, ContainerChangeEvent } from './subcomponents/Responsive/types';
+export { WidthProvider } from './subcomponents/WidthProvider';