react-grid-layout 0.17.1 → 0.18.3

package/lib/ResponsiveReactGridLayout.jsx

@@ -1,5 +1,5 @@
 // @flow
-import React from "react";
+import * as React from "react";
 import PropTypes from "prop-types";
 import isEqual from "lodash.isequal";
 
@@ -7,16 +7,17 @@ import {
   cloneLayout,
   synchronizeLayoutWithChildren,
   validateLayout,
-  noop
+  noop,
+  type Layout
 } from "./utils";
 import {
   getBreakpointFromWidth,
   getColsFromBreakpoint,
-  findOrGenerateResponsiveLayout
+  findOrGenerateResponsiveLayout,
+  type ResponsiveLayout,
+  type Breakpoints,
 } from "./responsiveUtils";
 import ReactGridLayout from "./ReactGridLayout";
-import type { Props as RGLProps } from "./ReactGridLayout";
-import type { Layout } from "./utils";
 
 const type = obj => Object.prototype.toString.call(obj);
 
@@ -42,14 +43,14 @@ type State = {
   layouts?: { [key: string]: Layout }
 };
 
-type Props<Breakpoint: string = string> = {
-  ...$Exact<RGLProps>,
+type Props<Breakpoint: string = string> = {|
+  ...React.ElementConfig<typeof ReactGridLayout>,
 
   // Responsive config
-  breakpoint: Breakpoint,
-  breakpoints: { [key: Breakpoint]: number },
+  breakpoint?: ?Breakpoint,
+  breakpoints: Breakpoints<Breakpoint>,
   cols: { [key: Breakpoint]: number },
-  layouts: { [key: Breakpoint]: Layout },
+  layouts: ResponsiveLayout<Breakpoint>,
   width: number,
   margin: { [key: Breakpoint]: [number, number] } | [number, number],
   containerPadding: { [key: Breakpoint]: [number, number] } | [number, number],
@@ -63,7 +64,7 @@ type Props<Breakpoint: string = string> = {
     cols: number,
     containerPadding: [number, number] | null
   ) => void
-};
+|};
 
 export default class ResponsiveReactGridLayout extends React.Component<
   Props<>,
@@ -141,7 +142,13 @@ export default class ResponsiveReactGridLayout extends React.Component<
     cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
     layouts: {},
     margin: [10, 10],
-    containerPadding: { lg: null, md: null, sm: null, xs: null, xxs: null },
+    containerPadding: {
+      lg: [0, 0],
+      md: [0, 0],
+      sm: [0, 0],
+      xs: [0, 0],
+      xxs: [0, 0]
+    },
     onBreakpointChange: noop,
     onLayoutChange: noop,
     onWidthChange: noop
@@ -203,7 +210,7 @@ export default class ResponsiveReactGridLayout extends React.Component<
       !isEqual(this.props.breakpoints, prevProps.breakpoints) ||
       !isEqual(this.props.cols, prevProps.cols)
     ) {
-      this.onWidthChange(this.props);
+      this.onWidthChange(prevProps);
     }
   }
 
@@ -219,28 +226,29 @@ export default class ResponsiveReactGridLayout extends React.Component<
    * When the width changes work through breakpoints and reset state with the new width & breakpoint.
    * Width changes are necessary to figure out the widget widths.
    */
-  onWidthChange(nextProps: Props<*>) {
-    const { breakpoints, cols, layouts, compactType } = nextProps;
+  onWidthChange(prevProps: Props<*>) {
+    const { breakpoints, cols, layouts, compactType } = this.props;
     const newBreakpoint =
-      nextProps.breakpoint ||
-      getBreakpointFromWidth(nextProps.breakpoints, nextProps.width);
+      this.props.breakpoint ||
+      getBreakpointFromWidth(this.props.breakpoints, this.props.width);
 
     const lastBreakpoint = this.state.breakpoint;
     const newCols: number = getColsFromBreakpoint(newBreakpoint, cols);
+    const newLayouts = { ...layouts };
 
     // Breakpoint change
     if (
       lastBreakpoint !== newBreakpoint ||
-      this.props.breakpoints !== breakpoints ||
-      this.props.cols !== cols
+      prevProps.breakpoints !== breakpoints ||
+      prevProps.cols !== cols
     ) {
       // Preserve the current layout if the current breakpoint is not present in the next layouts.
-      if (!(lastBreakpoint in layouts))
-        layouts[lastBreakpoint] = cloneLayout(this.state.layout);
+      if (!(lastBreakpoint in newLayouts))
+        newLayouts[lastBreakpoint] = cloneLayout(this.state.layout);
 
       // Find or generate a new layout.
       let layout = findOrGenerateResponsiveLayout(
-        layouts,
+        newLayouts,
         breakpoints,
         newBreakpoint,
         lastBreakpoint,
@@ -251,16 +259,16 @@ export default class ResponsiveReactGridLayout extends React.Component<
       // This adds missing items.
       layout = synchronizeLayoutWithChildren(
         layout,
-        nextProps.children,
+        this.props.children,
         newCols,
         compactType
       );
 
       // Store the new layout.
-      layouts[newBreakpoint] = layout;
+      newLayouts[newBreakpoint] = layout;
 
       // callbacks
-      this.props.onLayoutChange(layout, layouts);
+      this.props.onLayoutChange(layout, newLayouts);
       this.props.onBreakpointChange(newBreakpoint, newCols);
 
       this.setState({
@@ -270,15 +278,15 @@ export default class ResponsiveReactGridLayout extends React.Component<
       });
     }
 
-    const margin = getIndentationValue(nextProps.margin, newBreakpoint);
+    const margin = getIndentationValue(this.props.margin, newBreakpoint);
     const containerPadding = getIndentationValue(
-      nextProps.containerPadding,
+      this.props.containerPadding,
       newBreakpoint
     );
 
     //call onWidthChange on every change of width, not only on breakpoint changes
     this.props.onWidthChange(
-      nextProps.width,
+      this.props.width,
       margin,
       newCols,
       containerPadding

package/lib/calculateUtils.js

@@ -0,0 +1,142 @@
+// @flow
+import type { Position } from "./utils";
+
+export type PositionParams = {
+  margin: [number, number],
+  containerPadding: [number, number],
+  containerWidth: number,
+  cols: number,
+  rowHeight: number,
+  maxRows: number
+};
+
+// Helper for generating column width
+export function calcGridColWidth(positionParams: PositionParams): number {
+  const { margin, containerPadding, containerWidth, cols } = positionParams;
+  return (
+    (containerWidth - margin[0] * (cols - 1) - containerPadding[0] * 2) / cols
+  );
+}
+
+/**
+ * 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 function calcGridItemPosition(
+  positionParams: PositionParams,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  state: ?Object
+): Position {
+  const { margin, containerPadding, rowHeight } = positionParams;
+  const colWidth = calcGridColWidth(positionParams);
+  const out = {};
+
+  // If resizing, use the exact width and height as returned from resizing callbacks.
+  if (state && state.resizing) {
+    out.width = Math.round(state.resizing.width);
+    out.height = Math.round(state.resizing.height);
+  }
+  // Otherwise, calculate from grid units.
+  else {
+    // 0 * Infinity === NaN, which causes problems with resize constraints;
+    // Fix this if it occurs.
+    // Note we do it here rather than later because Math.round(Infinity) causes deopt
+    out.width =
+      w === Infinity
+        ? w
+        : Math.round(colWidth * w + Math.max(0, w - 1) * margin[0]);
+    out.height =
+      h === Infinity
+        ? h
+        : Math.round(rowHeight * h + Math.max(0, h - 1) * margin[1]);
+  }
+
+  // If dragging, use the exact width and height as returned from dragging callbacks.
+  if (state && state.dragging) {
+    out.top = Math.round(state.dragging.top);
+    out.left = Math.round(state.dragging.left);
+  }
+  // Otherwise, calculate from grid units.
+  else {
+    out.top = Math.round((rowHeight + margin[1]) * y + containerPadding[1]);
+    out.left = Math.round((colWidth + margin[0]) * x + containerPadding[0]);
+  }
+
+  return out;
+}
+
+/**
+ * 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 function calcXY(
+  positionParams: PositionParams,
+  top: number,
+  left: number,
+  w: number,
+  h: number
+): { x: number, y: number } {
+  const { margin, cols, rowHeight, maxRows } = positionParams;
+  const colWidth = calcGridColWidth(positionParams);
+
+  // left = colWidth * x + margin * (x + 1)
+  // l = cx + m(x+1)
+  // l = cx + mx + m
+  // l - m = cx + mx
+  // l - m = x(c + m)
+  // (l - m) / (c + m) = x
+  // x = (left - margin) / (coldWidth + margin)
+  let x = Math.round((left - margin[0]) / (colWidth + margin[0]));
+  let y = Math.round((top - margin[1]) / (rowHeight + margin[1]));
+
+  // Capping
+  x = Math.max(Math.min(x, cols - w), 0);
+  y = Math.max(Math.min(y, maxRows - h), 0);
+
+  return { x, y };
+}
+
+/**
+ * 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 function calcWH(
+  positionParams: PositionParams,
+  width: number,
+  height: number,
+  x: number,
+  y: number
+): { w: number, h: number } {
+  const { margin, maxRows, cols, rowHeight } = positionParams;
+  const colWidth = calcGridColWidth(positionParams);
+
+  // width = colWidth * w - (margin * (w - 1))
+  // ...
+  // w = (width + margin) / (colWidth + margin)
+  let w = Math.round((width + margin[0]) / (colWidth + margin[0]));
+  let h = Math.round((height + margin[1]) / (rowHeight + margin[1]));
+
+  // Capping
+  w = Math.max(Math.min(w, cols - x), 0);
+  h = Math.max(Math.min(h, maxRows - y), 0);
+  return { w, h };
+}

package/lib/components/WidthProvider.jsx

@@ -1,30 +1,49 @@
 // @flow
-import React from "react";
+import * as React from "react";
 import PropTypes from "prop-types";
 import ReactDOM from "react-dom";
-import type { ComponentType as ReactComponentType } from "react";
 
-type WPProps = {
+type WPDefaultProps = {|
+  measureBeforeMount: boolean
+|};
+
+// eslint-disable-next-line no-unused-vars
+type WPProps = {|
   className?: string,
-  measureBeforeMount: boolean,
-  style?: Object
-};
+  style?: Object,
+  ...WPDefaultProps
+|};
 
-type WPState = {
+type WPState = {|
   width: number
-};
+|};
 
 /*
  * 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<
-  Props,
-  ComposedProps: { ...Props, ...WPProps }
->(
-  ComposedComponent: ReactComponentType<Props>
-): ReactComponentType<ComposedProps> {
-  return class WidthProvider extends React.Component<ComposedProps, WPState> {
-    static defaultProps = {
+export default function WidthProvider<Config>(
+  ComposedComponent: React.AbstractComponent<Config>
+): React.AbstractComponent<{|
+  ...Config,
+  measureBeforeMount?: boolean,
+  className?: string,
+  style?: Object,
+  width?: number
+|}> {
+  return class WidthProvider extends React.Component<
+    {|
+      ...Config,
+      measureBeforeMount?: boolean,
+      className?: string,
+      style?: Object,
+      width?: number
+    |},
+    WPState
+  > {
+    static defaultProps: WPDefaultProps = {
       measureBeforeMount: false
     };
 

package/lib/fastRGLPropsEqual.js

@@ -0,0 +1,46 @@
+// @preval
+
+require("@babel/register");
+
+// Fast way to compare RGL props in shouldComponentUpdate.
+// Generates the fastest possible comparison of the type:
+// function (a, b) { return a.className === b.className && a.style === b.style && ... }
+// This avoids enumerating keys, avoids us keeping our own key list, and can be very easily optimized.
+
+const PropTypes = require("prop-types");
+const propTypes = require("./ReactGridLayoutPropTypes").default;
+const keys = Object.keys(propTypes);
+
+// Remove 'children' key as we don't want to compare it
+keys.splice(keys.indexOf("children"), 1);
+
+// Returns a code string indicating what to do here.
+// In most cases we want to do a simple equality comparison,
+// but we have some arrays and tuples and objects we want
+// to do a shallow comparison on.
+function getEqualType(key) {
+  if (
+    [
+      PropTypes.number,
+      PropTypes.bool,
+      PropTypes.string,
+      PropTypes.func
+    ].includes(propTypes[key])
+  ) {
+    return `(a.${key} === b.${key})`;
+  }
+  return `isEqualImpl(a.${key}, b.${key})`;
+}
+
+// Exports a function that compares a and b. `isEqualImpl` is a required
+// third prop, as we can't otherwise access it.
+module.exports = () =>
+  eval(`
+  function fastRGLPropsEqual(a, b, isEqualImpl) {
+    if (a === b) return true;
+    return (
+      ${keys.map(getEqualType).join(" && ")}
+    );
+  }
+  fastRGLPropsEqual;
+`);

package/lib/responsiveUtils.js

@@ -4,22 +4,15 @@ import { cloneLayout, compact, correctBounds } from "./utils";
 
 import type { CompactType, Layout } from "./utils";
 
-export type ResponsiveLayout = {
-  lg?: Layout,
-  md?: Layout,
-  sm?: Layout,
-  xs?: Layout,
-  xxs?: Layout
-};
-
-type Breakpoint = string;
+export type Breakpoint = string;
+export type DefaultBreakpoints = 'lg' | 'md' | 'sm' | 'xs' | 'xxs';
 
-type Breakpoints = {
-  lg?: number,
-  md?: number,
-  sm?: number,
-  xs?: number,
-  xxs?: number
+// + indicates read-only
+export type ResponsiveLayout<T: Breakpoint> = {
+  +[breakpoint: T]: Layout
+};
+export type Breakpoints<T: Breakpoint> = {
+  +[breakpoint: T]: number
 };
 
 /**
@@ -30,7 +23,7 @@ type Breakpoints = {
  * @return {String}       Highest breakpoint that is less than width.
  */
 export function getBreakpointFromWidth(
-  breakpoints: Breakpoints,
+  breakpoints: Breakpoints<Breakpoint>,
   width: number
 ): Breakpoint {
   const sorted = sortBreakpoints(breakpoints);
@@ -50,7 +43,7 @@ export function getBreakpointFromWidth(
  */
 export function getColsFromBreakpoint(
   breakpoint: Breakpoint,
-  cols: Breakpoints
+  cols: Breakpoints<Breakpoint>
 ): number {
   if (!cols[breakpoint]) {
     throw new Error(
@@ -77,8 +70,8 @@ export function getColsFromBreakpoint(
  * @return {Array}             New layout.
  */
 export function findOrGenerateResponsiveLayout(
-  layouts: ResponsiveLayout,
-  breakpoints: Breakpoints,
+  layouts: ResponsiveLayout<Breakpoint>,
+  breakpoints: Breakpoints<Breakpoint>,
   breakpoint: Breakpoint,
   lastBreakpoint: Breakpoint,
   cols: number,
@@ -110,7 +103,7 @@ export function findOrGenerateResponsiveLayout(
  * @param  {Object} breakpoints Key/value pair of breakpoint names to widths.
  * @return {Array}              Sorted breakpoints.
  */
-export function sortBreakpoints(breakpoints: Breakpoints): Array<Breakpoint> {
+export function sortBreakpoints(breakpoints: Breakpoints<Breakpoint>): Array<Breakpoint> {
   const keys: Array<string> = Object.keys(breakpoints);
   return keys.sort(function(a, b) {
     return breakpoints[a] - breakpoints[b];

package/lib/utils.js

@@ -20,7 +20,7 @@ export type LayoutItem = {
   isDraggable?: ?boolean,
   isResizable?: ?boolean
 };
-export type Layout = Array<LayoutItem>;
+export type Layout = $ReadOnlyArray<LayoutItem>;
 export type Position = {
   left: number,
   top: number,
@@ -38,7 +38,7 @@ export type ReactDraggableCallbackData = {
 };
 
 export type PartialPosition = { left: number, top: number };
-export type DroppingPosition = { x: number, y: number, e: Event };
+export type DroppingPosition = { left: number, top: number, e: Event };
 export type Size = { width: number, height: number };
 export type GridDragEvent = {
   e: Event,
@@ -128,6 +128,27 @@ export function childrenEqual(a: ReactChildren, b: ReactChildren): boolean {
   );
 }
 
+/**
+ * See `fastRGLPropsEqual.js`.
+ * We want this to run as fast as possible - it is called often - and to be
+ * resilient to new props that we add. So rather than call lodash.isEqual,
+ * which isn't suited to comparing props very well, we use this specialized
+ * function in conjunction with preval to generate the fastest possible comparison
+ * function, tuned for exactly our props.
+ */
+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) {
+  return (
+    a.left === b.left &&
+    a.top === b.top &&
+    a.width === b.width &&
+    a.height === b.height
+  );
+}
+
 /**
  * Given two layoutitems, check if they collide.
  */
@@ -144,6 +165,8 @@ export function collides(l1: LayoutItem, l2: LayoutItem): boolean {
  * Given a layout, compact it. This involves going down each y coordinate and removing gaps
  * between items.
  *
+ * Does not modify layout items (clones). Creates a new layout array.
+ *
  * @param  {Array} layout Layout.
  * @param  {Boolean} verticalCompact Whether or not to compact the layout
  *   vertically.
@@ -226,6 +249,9 @@ function resolveCompactionCollision(
 
 /**
  * Compact an item in the layout.
+ *
+ * Modifies item.
+ *
  */
 export function compactItem(
   compareWith: Layout,
@@ -273,6 +299,8 @@ export function compactItem(
 /**
  * Given a layout, make sure all elements fit within its bounds.
  *
+ * Modifies layout items.
+ *
  * @param  {Array} layout Layout array.
  * @param  {Number} bounds Number of columns.
  */
@@ -351,6 +379,8 @@ export function getStatics(layout: Layout): Array<LayoutItem> {
 /**
  * Move an element. Responsible for doing cascading movements of other elements.
  *
+ * Modifies layout items.
+ *
  * @param  {Array}      layout            Full layout to modify.
  * @param  {LayoutItem} l                 element to move.
  * @param  {Number}     [x]               X position in grid units.
@@ -366,7 +396,9 @@ export function moveElement(
   compactType: CompactType,
   cols: number
 ): Layout {
-  if (l.static) return layout;
+  // If this is static and not explicitly enabled as draggable,
+  // no move is possible, so we can short-circuit this immediately.
+  if (l.static && l.isDraggable !== true) return layout;
 
   // Short-circuit if nothing to do.
   if (l.y === y && l.x === x) return layout;
@@ -393,6 +425,7 @@ export function moveElement(
       : compactType === "horizontal" && typeof x === "number"
       ? oldX >= x
       : false;
+  // $FlowIgnore acceptable modification of read-only array as it was recently cloned
   if (movingUp) sorted = sorted.reverse();
   const collisions = getAllCollisions(sorted, l);
 
@@ -556,8 +589,14 @@ export function sortLayoutItems(
   else return sortLayoutItemsByRowCol(layout);
 }
 
+/**
+ * Sort layout items by row ascending and column ascending.
+ *
+ * Does not modify Layout.
+ */
 export function sortLayoutItemsByRowCol(layout: Layout): Layout {
-  return [].concat(layout).sort(function(a, b) {
+  // Slice to clone array as sort modifies
+  return layout.slice(0).sort(function(a, b) {
     if (a.y > b.y || (a.y === b.y && a.x > b.x)) {
       return 1;
     } else if (a.y === b.y && a.x === b.x) {
@@ -568,8 +607,13 @@ export function sortLayoutItemsByRowCol(layout: Layout): Layout {
   });
 }
 
+/**
+ * Sort layout items by column ascending then row ascending.
+ *
+ * Does not modify Layout.
+ */
 export function sortLayoutItemsByColRow(layout: Layout): Layout {
-  return [].concat(layout).sort(function(a, b) {
+  return layout.slice(0).sort(function(a, b) {
     if (a.x > b.x || (a.x === b.x && a.y > b.y)) {
       return 1;
     }
@@ -581,6 +625,8 @@ export function sortLayoutItemsByColRow(layout: Layout): Layout {
  * Generate a layout using the initialLayout and children as a template.
  * Missing entries will be added, extraneous ones will be truncated.
  *
+ * Does not modify initialLayout.
+ *
  * @param  {Array}  initialLayout Layout passed in through props.
  * @param  {String} breakpoint    Current responsive breakpoint.
  * @param  {?String} compact      Compaction option.
@@ -595,7 +641,7 @@ export function synchronizeLayoutWithChildren(
   initialLayout = initialLayout || [];
 
   // Generate one layout item per child.
-  let layout: Layout = [];
+  const layout: LayoutItem[] = [];
   React.Children.forEach(children, (child: ReactElement<any>, i: number) => {
     // Don't overwrite if it already exists.
     const exists = getLayoutItem(initialLayout, String(child.key));
@@ -630,10 +676,8 @@ export function synchronizeLayoutWithChildren(
   });
 
   // Correct the layout.
-  layout = correctBounds(layout, { cols: cols });
-  layout = compact(layout, compactType, cols);
-
-  return layout;
+  const correctedLayout = correctBounds(layout, { cols: cols });
+  return compact(correctedLayout, compactType, cols);
 }
 
 /**
@@ -682,6 +726,14 @@ export function validateLayout(
   }
 }
 
+// Legacy support for verticalCompact: false
+export function compactType(
+  props: ?{ verticalCompact: boolean, compactType: CompactType }
+): CompactType {
+  const { verticalCompact, compactType } = props || {};
+  return verticalCompact === false ? null : compactType;
+}
+
 // Flow can't really figure this out, so we just use Object
 export function autoBindHandlers(el: Object, fns: Array<string>): void {
   fns.forEach(key => (el[key] = el[key].bind(el)));