react-grid-layout 1.2.0 → 1.2.4

package/lib/ResponsiveReactGridLayout.jsx

@@ -8,13 +8,15 @@ import {
   synchronizeLayoutWithChildren,
   validateLayout,
   noop,
-  type Layout
+  type Layout,
+  type Pick
 } from "./utils";
 import {
   getBreakpointFromWidth,
   getColsFromBreakpoint,
   findOrGenerateResponsiveLayout,
   type ResponsiveLayout,
+  type OnLayoutChangeCallback,
   type Breakpoints
 } from "./responsiveUtils";
 import ReactGridLayout from "./ReactGridLayout";
@@ -28,13 +30,13 @@ const type = obj => Object.prototype.toString.call(obj);
  * @param  {String} breakpoint   Breakpoint: lg, md, sm, xs and etc.
  * @return {Array}
  */
-
 function getIndentationValue<T: ?[number, number]>(
   param: { [key: string]: T } | T,
   breakpoint: string
 ): T {
-  // $FlowIssue doesn't seem to understand this
+  // $FlowIgnore TODO fix this typedef
   if (param == null) return null;
+  // $FlowIgnore TODO fix this typedef
   return Array.isArray(param) ? param : param[breakpoint];
 }
 
@@ -42,7 +44,7 @@ type State = {
   layout: Layout,
   breakpoint: string,
   cols: number,
-  layouts?: { [key: string]: Layout }
+  layouts?: ResponsiveLayout<string>
 };
 
 type Props<Breakpoint: string = string> = {|
@@ -60,7 +62,7 @@ type Props<Breakpoint: string = string> = {|
 
   // Callbacks
   onBreakpointChange: (Breakpoint, cols: number) => void,
-  onLayoutChange: (Layout, { [key: Breakpoint]: Layout }) => void,
+  onLayoutChange: OnLayoutChangeCallback,
   onWidthChange: (
     containerWidth: number,
     margin: [number, number],
@@ -69,6 +71,20 @@ type Props<Breakpoint: string = string> = {|
   ) => void
 |};
 
+type DefaultProps = Pick<
+  Props<>,
+  {|
+    breakpoints: 0,
+    cols: 0,
+    containerPadding: 0,
+    layouts: 0,
+    margin: 0,
+    onBreakpointChange: 0,
+    onLayoutChange: 0,
+    onWidthChange: 0
+  |}
+>;
+
 export default class ResponsiveReactGridLayout extends React.Component<
   Props<>,
   State
@@ -140,18 +156,18 @@ export default class ResponsiveReactGridLayout extends React.Component<
     onWidthChange: PropTypes.func
   };
 
-  static defaultProps = {
+  static defaultProps: DefaultProps = {
     breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 },
     cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
+    containerPadding: { lg: null, md: null, sm: null, xs: null, xxs: null },
     layouts: {},
     margin: [10, 10],
-    containerPadding: { lg: null, md: null, sm: null, xs: null, xxs: null },
     onBreakpointChange: noop,
     onLayoutChange: noop,
     onWidthChange: noop
   };
 
-  state = this.generateInitialState();
+  state: State = this.generateInitialState();
 
   generateInitialState(): State {
     const { width, breakpoints, layouts, cols } = this.props;
@@ -178,7 +194,10 @@ export default class ResponsiveReactGridLayout extends React.Component<
     };
   }
 
-  static getDerivedStateFromProps(nextProps: Props<*>, prevState: State) {
+  static getDerivedStateFromProps(
+    nextProps: Props<*>,
+    prevState: State
+  ): ?$Shape<State> {
     if (!isEqual(nextProps.layouts, prevState.layouts)) {
       // Allow parent to set layouts directly.
       const { breakpoint, cols } = prevState;
@@ -212,7 +231,7 @@ export default class ResponsiveReactGridLayout extends React.Component<
   }
 
   // wrap layouts so we do not need to pass layouts to child
-  onLayoutChange = (layout: Layout) => {
+  onLayoutChange: Layout => void = (layout: Layout) => {
     this.props.onLayoutChange(layout, {
       ...this.props.layouts,
       [this.state.breakpoint]: layout
@@ -290,7 +309,7 @@ export default class ResponsiveReactGridLayout extends React.Component<
     );
   }
 
-  render() {
+  render(): React.Element<typeof ReactGridLayout> {
     /* eslint-disable no-unused-vars */
     const {
       breakpoint,
@@ -309,6 +328,7 @@ export default class ResponsiveReactGridLayout extends React.Component<
     return (
       <ReactGridLayout
         {...other}
+        // $FlowIgnore should allow nullable here due to DefaultProps
         margin={getIndentationValue(margin, this.state.breakpoint)}
         containerPadding={getIndentationValue(
           containerPadding,

package/lib/calculateUtils.js

@@ -26,7 +26,7 @@ export function calcGridItemWHPx(
   gridUnits: number,
   colOrRowSize: number,
   marginPx: number
-) {
+): number {
   // 0 * Infinity === NaN, which causes problems with resize contraints
   if (!Number.isFinite(gridUnits)) return gridUnits;
   return Math.round(
@@ -148,6 +148,10 @@ export function calcWH(
 }
 
 // Similar to _.clamp
-export function clamp(num: number, lowerBound: number, upperBound: number) {
+export function clamp(
+  num: number,
+  lowerBound: number,
+  upperBound: number
+): number {
   return Math.max(Math.min(num, upperBound), lowerBound);
 }

package/lib/components/WidthProvider.jsx

@@ -1,7 +1,8 @@
 // @flow
 import * as React from "react";
 import PropTypes from "prop-types";
-import ReactDOM from "react-dom";
+import classNames from "classnames";
+import type { ReactRef } from "../ReactGridLayoutPropTypes";
 
 type WPDefaultProps = {|
   measureBeforeMount: boolean
@@ -18,29 +19,27 @@ type WPState = {|
   width: number
 |};
 
+type ComposedProps<Config> = {|
+  ...Config,
+  measureBeforeMount?: boolean,
+  className?: string,
+  style?: Object,
+  width?: number
+|};
+
+const layoutClassName = "react-grid-layout";
+
 /*
  * A simple HOC that provides facility for listening to container resizes.
  *
  * The Flow type is pretty janky here. I can't just spread `WPProps` into this returned object - I wish I could - but it triggers
  * a flow bug of some sort that causes it to stop typechecking.
  */
-export default function WidthProvider<Config>(
+export default function WidthProvideRGL<Config>(
   ComposedComponent: React.AbstractComponent<Config>
-): React.AbstractComponent<{|
-  ...Config,
-  measureBeforeMount?: boolean,
-  className?: string,
-  style?: Object,
-  width?: number
-|}> {
+): React.AbstractComponent<ComposedProps<Config>> {
   return class WidthProvider extends React.Component<
-    {|
-      ...Config,
-      measureBeforeMount?: boolean,
-      className?: string,
-      style?: Object,
-      width?: number
-    |},
+    ComposedProps<Config>,
     WPState
   > {
     static defaultProps: WPDefaultProps = {
@@ -53,15 +52,15 @@ export default function WidthProvider<Config>(
       measureBeforeMount: PropTypes.bool
     };
 
-    state = {
+    state: WPState = {
       width: 1280
     };
 
+    elementRef: ReactRef<HTMLDivElement> = React.createRef();
     mounted: boolean = false;
 
     componentDidMount() {
       this.mounted = true;
-
       window.addEventListener("resize", this.onWindowResize);
       // Call to properly set the breakpoint and resize the elements.
       // Note that if you're doing a full-width element, this can get a little wonky if a scrollbar
@@ -76,21 +75,34 @@ export default function WidthProvider<Config>(
 
     onWindowResize = () => {
       if (!this.mounted) return;
-      // eslint-disable-next-line react/no-find-dom-node
-      const node = ReactDOM.findDOMNode(this); // Flow casts this to Text | Element
-      if (node instanceof HTMLElement)
+      const node = this.elementRef.current; // Flow casts this to Text | Element
+      // fix: grid position error when node or parentNode display is none by window resize
+      // #924 #1084
+      if (node instanceof HTMLElement && node.offsetWidth) {
         this.setState({ width: node.offsetWidth });
+      }
     };
 
     render() {
       const { measureBeforeMount, ...rest } = this.props;
       if (measureBeforeMount && !this.mounted) {
         return (
-          <div className={this.props.className} style={this.props.style} />
+          <div
+            className={classNames(this.props.className, layoutClassName)}
+            style={this.props.style}
+            // $FlowIgnore ref types
+            ref={this.elementRef}
+          />
         );
       }
 
-      return <ComposedComponent {...rest} {...this.state} />;
+      return (
+        <ComposedComponent
+          innerRef={this.elementRef}
+          {...rest}
+          {...this.state}
+        />
+      );
     }
   };
 }

package/lib/responsiveUtils.js

@@ -15,6 +15,11 @@ export type Breakpoints<T: Breakpoint> = {
   +[breakpoint: T]: number
 };
 
+export type OnLayoutChangeCallback = (
+  Layout,
+  { [key: Breakpoint]: Layout }
+) => void;
+
 /**
  * Given a width, find the highest breakpoint that matches is valid for it (width > breakpoint).
  *

package/lib/utils.js

@@ -19,7 +19,7 @@ export type LayoutItem = {
   static?: boolean,
   isDraggable?: ?boolean,
   isResizable?: ?boolean,
-  resizeHandles?: Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'>,
+  resizeHandles?: Array<"s" | "w" | "e" | "n" | "sw" | "nw" | "se" | "ne">,
   isBounded?: ?boolean
 };
 export type Layout = $ReadOnlyArray<LayoutItem>;
@@ -52,12 +52,15 @@ export type DragOverEvent = MouseEvent & {
   nativeEvent: {
     layerX: number,
     layerY: number,
-    target: {
-      className: String
-    }
+    ...Event
   }
 };
 
+// Helpful port from TS
+export type Pick<FromType, Properties: { [string]: 0 }> = $Exact<
+  $ObjMapi<Properties, <K, V>(k: K, v: V) => $ElementType<FromType, K>>
+>;
+
 type REl = ReactElement<any>;
 export type ReactChildren = ReactChildrenArray<REl>;
 
@@ -99,6 +102,35 @@ export function cloneLayout(layout: Layout): Layout {
   return newLayout;
 }
 
+// Modify a layoutItem inside a layout. Returns a new Layout,
+// does not mutate. Carries over all other LayoutItems unmodified.
+export function modifyLayout(layout: Layout, layoutItem: LayoutItem): Layout {
+  const newLayout = Array(layout.length);
+  for (let i = 0, len = layout.length; i < len; i++) {
+    if (layoutItem.i === layout[i].i) {
+      newLayout[i] = layoutItem;
+    } else {
+      newLayout[i] = layout[i];
+    }
+  }
+  return newLayout;
+}
+
+// Function to be called to modify a layout item.
+// Does defensive clones to ensure the layout is not modified.
+export function withLayoutItem(
+  layout: Layout,
+  itemKey: string,
+  cb: LayoutItem => LayoutItem
+): [Layout, ?LayoutItem] {
+  let item = getLayoutItem(layout, itemKey);
+  if (!item) return [layout, null];
+  item = cb(cloneLayoutItem(item)); // defensive clone then modify
+  // FIXME could do this faster if we already knew the index
+  layout = modifyLayout(layout, item);
+  return [layout, item];
+}
+
 // Fast path to cloning, since this is monomorphic
 export function cloneLayoutItem(layoutItem: LayoutItem): LayoutItem {
   return {
@@ -144,7 +176,7 @@ type FastRGLPropsEqual = (Object, Object, Function) => boolean;
 export const fastRGLPropsEqual: FastRGLPropsEqual = require("./fastRGLPropsEqual");
 
 // Like the above, but a lot simpler.
-export function fastPositionEqual(a: Position, b: Position) {
+export function fastPositionEqual(a: Position, b: Position): boolean {
   return (
     a.left === b.left &&
     a.top === b.top &&
@@ -276,7 +308,6 @@ export function compactItem(
       l.y--;
     }
   } else if (compactH) {
-    l.y = Math.min(bottom(compareWith), l.y);
     // Move the element left as far as it can go without colliding.
     while (l.x > 0 && !getFirstCollision(compareWith, l)) {
       l.x--;
@@ -665,9 +696,11 @@ export function synchronizeLayoutWithChildren(
         if (!isProduction) {
           validateLayout([g], "ReactGridLayout.children");
         }
+        // FIXME clone not really necessary here
         layout[i] = cloneLayoutItem({ ...g, i: child.key });
       } else {
         // Nothing provided: ensure this is added to the bottom
+        // FIXME clone not really necessary here
         layout[i] = cloneLayoutItem({
           w: 1,
           h: 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-grid-layout",
-  "version": "1.2.0",
+  "version": "1.2.4",
   "description": "A draggable and resizable grid layout with responsive breakpoints, for React.",
   "main": "index.js",
   "scripts": {
@@ -42,45 +42,49 @@
     "react-resizable": "^1.10.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.11.6",
-    "@babel/core": "^7.11.6",
-    "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/plugin-transform-flow-comments": "^7.10.4",
-    "@babel/preset-env": "^7.11.5",
-    "@babel/preset-flow": "^7.10.4",
-    "@babel/preset-react": "^7.10.4",
-    "@babel/register": "^7.11.5",
+    "@babel/cli": "^7.13.0",
+    "@babel/core": "^7.13.8",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-transform-flow-comments": "^7.12.13",
+    "@babel/preset-env": "^7.13.8",
+    "@babel/preset-flow": "^7.12.13",
+    "@babel/preset-react": "^7.12.13",
+    "@babel/register": "^7.13.8",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.3.0",
-    "babel-loader": "^8.1.0",
+    "babel-jest": "^26.6.3",
+    "babel-loader": "^8.2.2",
     "babel-plugin-preval": "^5.0.0",
-    "css-loader": "^4.2.2",
-    "ejs": "^3.1.5",
+    "css-loader": "^5.1.1",
+    "ejs": "^3.1.6",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.4",
-    "enzyme-to-json": "^3.5.0",
-    "eslint": "^7.8.1",
-    "eslint-plugin-flowtype": "^5.2.0",
+    "enzyme-adapter-react-16": "^1.15.6",
+    "enzyme-to-json": "^3.6.1",
+    "eslint": "^7.21.0",
+    "eslint-plugin-flowtype": "^5.3.1",
     "eslint-plugin-mocha": "^8.0.0",
-    "eslint-plugin-react": "^7.20.6",
-    "exports-loader": "^1.1.0",
-    "flow-bin": "^0.133.0",
-    "husky": "^4.2.5",
-    "imports-loader": "^1.1.0",
-    "jest": "^26.4.2",
-    "lint-staged": "^10.3.0",
-    "lodash": "^4.17.20",
+    "eslint-plugin-react": "^7.22.0",
+    "exports-loader": "^2.0.0",
+    "flow-bin": "^0.145.0",
+    "husky": "^5.1.2",
+    "imports-loader": "^2.0.0",
+    "jest": "^26.6.3",
+    "lint-staged": "^10.5.4",
+    "lodash": "^4.17.21",
     "opener": "^1.5.2",
-    "prettier": "^2.1.1",
+    "prettier": "^2.2.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-hot-loader": "^4.12.21",
+    "react-hot-loader": "^4.13.0",
     "react-transform-hmr": "^1.0.2",
-    "style-loader": "^1.2.1",
+    "style-loader": "^2.0.0",
     "timsort": "^0.3.0",
-    "webpack": "^4.44.1",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0"
+    "webpack": "^5.24.2",
+    "webpack-cli": "^4.5.0",
+    "webpack-dev-server": "^3.11.2"
+  },
+  "peerDependencies": {
+    "react": ">= 16.3.0",
+    "react-dom": ">= 16.3.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -99,13 +103,7 @@
   },
   "lint-staged": {
     "*.{js,jsx,css}": [
-      "prettier --write",
-      "git add"
+      "prettier --write"
     ]
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged && make lint && make test"
-    }
   }
 }