Add shouldComponentUpdate to major components. (react-grid-layout#1123)

* Fix freezing on drag ie11

react-grid-layout#760

1) Add shouldComponentUpdate for ReactGridLayout
2) Add shouldComponentUpdate for GridItem
3) Fix when items are dragging not from own position, but from zero top left

* feat(render): Add shouldComponentUpdate to ReactGridLayout & GridItem.

This improves performance quite a bit in most cases, is implemented safely
to avoid breakage on equal arrays and objects.

To do so, while avoiding the maintenance burden of keeping a keylist
in sync with propTypes, we read propTypes using babel-plugin-preval
then construct a function to do the fastest possible comparison.

This is *a lot* faster than isEqual while avoiding unnecessary
comparison of e.g. `children`.

* fix(test): complete refactor of calculateUtils

Co-authored-by: Alexander Zayka <[email protected]>

Author: STRML

.babelrc.js

@@ -13,6 +13,7 @@ module.exports = {
   ],
   plugins: [
     "@babel/plugin-transform-flow-comments",
-    "@babel/plugin-proposal-class-properties"
+    "@babel/plugin-proposal-class-properties",
+    "babel-plugin-preval"
   ]
 };

lib/GridItem.jsx

@@ -4,8 +4,8 @@ import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
 import { DraggableCore } from "react-draggable";
 import { Resizable } from "react-resizable";
-import { perc, setTopLeft, setTransform } from "./utils";
-import { calcPosition, calcXY, calcWH } from "./calculateUtils";
+import { fastPositionEqual, perc, setTopLeft, setTransform } from "./utils";
+import { calcGridItemPosition, calcXY, calcWH } from "./calculateUtils";
 import classNames from "classnames";
 import type { Element as ReactElement, Node as ReactNode } from "react";
 
@@ -178,6 +178,31 @@ export default class GridItem extends React.Component<Props, State> {
 
   currentNode: HTMLElement;
 
+  shouldComponentUpdate(nextProps: Props, nextState: State) {
+    let { x, y, w, h } = this.props;
+    const oldPosition = calcGridItemPosition(
+      this.getPositionParams(this.props),
+      x,
+      y,
+      w,
+      h,
+      this.state
+    );
+    ({ x, y, w, h } = nextProps);
+    const newPosition = calcGridItemPosition(
+      this.getPositionParams(nextProps),
+      x,
+      y,
+      w,
+      h,
+      nextState
+    );
+    return (
+      !fastPositionEqual(oldPosition, newPosition) ||
+      this.props.useCSSTransforms !== nextProps.useCSSTransforms
+    );
+  }
+
   componentDidUpdate(prevProps: Props) {
     this.moveDroppingItem(prevProps);
   }
@@ -220,14 +245,14 @@ export default class GridItem extends React.Component<Props, State> {
     }
   }
 
-  getPositionParams(): PositionParams {
+  getPositionParams(props: Props = this.props): PositionParams {
     return {
-      cols: this.props.cols,
-      containerPadding: this.props.containerPadding,
-      containerWidth: this.props.containerWidth,
-      margin: this.props.margin,
-      maxRows: this.props.maxRows,
-      rowHeight: this.props.rowHeight
+      cols: props.cols,
+      containerPadding: props.containerPadding,
+      containerWidth: props.containerWidth,
+      margin: props.margin,
+      maxRows: props.maxRows,
+      rowHeight: props.rowHeight
     };
   }
 
@@ -304,11 +329,12 @@ export default class GridItem extends React.Component<Props, State> {
     const positionParams = this.getPositionParams();
 
     // This is the max possible width - doesn't go to infinity because of the width of the window
-    const maxWidth = calcPosition(positionParams, 0, 0, cols - x, 0).width;
+    const maxWidth = calcGridItemPosition(positionParams, 0, 0, cols - x, 0)
+      .width;
 
     // Calculate min/max constraints using our min & maxes
-    const mins = calcPosition(positionParams, 0, 0, minW, minH);
-    const maxes = calcPosition(positionParams, 0, 0, maxW, maxH);
+    const mins = calcGridItemPosition(positionParams, 0, 0, minW, minH);
+    const maxes = calcGridItemPosition(positionParams, 0, 0, maxW, maxH);
     const minConstraints = [mins.width, mins.height];
     const maxConstraints = [
       Math.min(maxes.width, maxWidth),
@@ -534,7 +560,14 @@ export default class GridItem extends React.Component<Props, State> {
       useCSSTransforms
     } = this.props;
 
-    const pos = calcPosition(this.getPositionParams(), x, y, w, h, this.state);
+    const pos = calcGridItemPosition(
+      this.getPositionParams(),
+      x,
+      y,
+      w,
+      h,
+      this.state
+    );
     const child = React.Children.only(this.props.children);
 
     // Create the child element. We clone the existing element but modify its className and style.

lib/ReactGridLayout.jsx

@@ -1,6 +1,6 @@
 // @flow
 import React from "react";
-import PropTypes from "prop-types";
+
 import isEqual from "lodash.isequal";
 import classNames from "classnames";
 import {
@@ -12,22 +12,23 @@ import {
   getLayoutItem,
   moveElement,
   synchronizeLayoutWithChildren,
-  validateLayout,
   getAllCollisions,
-  noop
+  compactType,
+  noop,
+  fastRGLPropsEqual
 } from "./utils";
 
 import { calcXY } from "./calculateUtils";
 
 import GridItem from "./GridItem";
+import ReactGridLayoutPropTypes from "./ReactGridLayoutPropTypes";
 import type {
   ChildrenArray as ReactChildrenArray,
   Element as ReactElement
 } from "react";
 
 // Types
 import type {
-  EventCallback,
   CompactType,
   GridResizeEvent,
   GridDragEvent,
@@ -54,53 +55,9 @@ type State = {
   propsLayout?: Layout
 };
 
-export type Props = {
-  className: string,
-  style: Object,
-  width: number,
-  autoSize: boolean,
-  cols: number,
-  draggableCancel: string,
-  draggableHandle: string,
-  verticalCompact: boolean,
-  compactType: CompactType,
-  layout: Layout,
-  margin: [number, number],
-  containerPadding: [number, number] | null,
-  rowHeight: number,
-  maxRows: number,
-  isDraggable: boolean,
-  isResizable: boolean,
-  isDroppable: boolean,
-  preventCollision: boolean,
-  useCSSTransforms: boolean,
-  transformScale: number,
-  droppingItem: $Shape<LayoutItem>,
-
-  // Callbacks
-  onLayoutChange: Layout => void,
-  onDrag: EventCallback,
-  onDragStart: EventCallback,
-  onDragStop: EventCallback,
-  onResize: EventCallback,
-  onResizeStart: EventCallback,
-  onResizeStop: EventCallback,
-  onDrop: (itemPosition: {
-    x: number,
-    y: number,
-    w: number,
-    h: number,
-    e: Event
-  }) => void,
-  children: ReactChildrenArray<ReactElement<any>>
-};
-// End Types
-
-const compactType = (props: Props): CompactType => {
-  const { verticalCompact, compactType } = props || {};
+import type { Props } from "./ReactGridLayoutPropTypes";
 
-  return verticalCompact === false ? null : compactType;
-};
+// End Types
 
 const layoutClassName = "react-grid-layout";
 let isFirefox = false;
@@ -119,135 +76,8 @@ export default class ReactGridLayout extends React.Component<Props, State> {
   // TODO publish internal ReactClass displayName transform
   static displayName = "ReactGridLayout";
 
-  static propTypes = {
-    //
-    // Basic props
-    //
-    className: PropTypes.string,
-    style: PropTypes.object,
-
-    // This can be set explicitly. If it is not set, it will automatically
-    // be set to the container width. Note that resizes will *not* cause this to adjust.
-    // If you need that behavior, use WidthProvider.
-    width: PropTypes.number,
-
-    // If true, the container height swells and contracts to fit contents
-    autoSize: PropTypes.bool,
-    // # of cols.
-    cols: PropTypes.number,
-
-    // A selector that will not be draggable.
-    draggableCancel: PropTypes.string,
-    // A selector for the draggable handler
-    draggableHandle: PropTypes.string,
-
-    // Deprecated
-    verticalCompact: function(props: Props) {
-      if (
-        props.verticalCompact === false &&
-        process.env.NODE_ENV !== "production"
-      ) {
-        console.warn(
-          // eslint-disable-line no-console
-          "`verticalCompact` on <ReactGridLayout> is deprecated and will be removed soon. " +
-            'Use `compactType`: "horizontal" | "vertical" | null.'
-        );
-      }
-    },
-    // Choose vertical or hotizontal compaction
-    compactType: PropTypes.oneOf(["vertical", "horizontal"]),
-
-    // layout is an array of object with the format:
-    // {x: Number, y: Number, w: Number, h: Number, i: String}
-    layout: function(props: Props) {
-      var layout = props.layout;
-      // I hope you're setting the data-grid property on the grid items
-      if (layout === undefined) return;
-      validateLayout(layout, "layout");
-    },
-
-    //
-    // Grid Dimensions
-    //
-
-    // Margin between items [x, y] in px
-    margin: PropTypes.arrayOf(PropTypes.number),
-    // Padding inside the container [x, y] in px
-    containerPadding: PropTypes.arrayOf(PropTypes.number),
-    // Rows have a static height, but you can change this based on breakpoints if you like
-    rowHeight: PropTypes.number,
-    // Default Infinity, but you can specify a max here if you like.
-    // Note that this isn't fully fleshed out and won't error if you specify a layout that
-    // extends beyond the row capacity. It will, however, not allow users to drag/resize
-    // an item past the barrier. They can push items beyond the barrier, though.
-    // Intentionally not documented for this reason.
-    maxRows: PropTypes.number,
-
-    //
-    // Flags
-    //
-    isDraggable: PropTypes.bool,
-    isResizable: PropTypes.bool,
-    // If true, grid items won't change position when being dragged over.
-    preventCollision: PropTypes.bool,
-    // Use CSS transforms instead of top/left
-    useCSSTransforms: PropTypes.bool,
-    // parent layout transform scale
-    transformScale: PropTypes.number,
-    // If true, an external element can trigger onDrop callback with a specific grid position as a parameter
-    isDroppable: PropTypes.bool,
-
-    //
-    // Callbacks
-    //
-
-    // Callback so you can save the layout. Calls after each drag & resize stops.
-    onLayoutChange: PropTypes.func,
-
-    // Calls when drag starts. Callback is of the signature (layout, oldItem, newItem, placeholder, e, ?node).
-    // All callbacks below have the same signature. 'start' and 'stop' callbacks omit the 'placeholder'.
-    onDragStart: PropTypes.func,
-    // Calls on each drag movement.
-    onDrag: PropTypes.func,
-    // Calls when drag is complete.
-    onDragStop: PropTypes.func,
-    //Calls when resize starts.
-    onResizeStart: PropTypes.func,
-    // Calls when resize movement happens.
-    onResize: PropTypes.func,
-    // Calls when resize is complete.
-    onResizeStop: PropTypes.func,
-    // Calls when some element is dropped.
-    onDrop: PropTypes.func,
-
-    //
-    // Other validations
-    //
-
-    droppingItem: PropTypes.shape({
-      i: PropTypes.string.isRequired,
-      w: PropTypes.number.isRequired,
-      h: PropTypes.number.isRequired
-    }),
-
-    // Children must not have duplicate keys.
-    children: function(props: Props, propName: string) {
-      var children = props[propName];
-
-      // Check children keys for duplicates. Throw if found.
-      var keys = {};
-      React.Children.forEach(children, function(child) {
-        if (keys[child.key]) {
-          throw new Error(
-            'Duplicate child key "' +
-              child.key +
-              '" found! This will cause problems in ReactGridLayout.'
-          );
-        }
-        keys[child.key] = true;
-      });
-    }
-  };
+  // Refactored to another module to make way for preval
+  static propTypes = ReactGridLayoutPropTypes;
 
   static defaultProps = {
     autoSize: true,
@@ -365,6 +195,13 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     return null;
   }
 
+  shouldComponentUpdate(nextProps: Props, nextState: State) {
+    return (
+      !fastRGLPropsEqual(this.props, nextProps, isEqual) ||
+      !isEqual(this.state.activeDrag, nextState.activeDrag)
+    );
+  }
+
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (!this.state.activeDrag) {
       const newLayout = this.state.layout;