react-grid-layout 0.18.2 → 0.18.3

package/lib/GridItem.jsx

@@ -182,6 +182,7 @@ export default class GridItem extends React.Component<Props, State> {
     // We can't deeply compare children. If the developer memoizes them, we can
     // use this optimization.
     if (this.props.children !== nextProps.children) return true;
+    if (this.props.droppingPosition !== nextProps.droppingPosition) return true;
     // TODO memoize these calculations so they don't take so long?
     const oldPosition = calcGridItemPosition(
       this.getPositionParams(this.props),
@@ -205,6 +206,10 @@ export default class GridItem extends React.Component<Props, State> {
     );
   }
 
+  componentDidMount() {
+    this.moveDroppingItem({});
+  }
+
   componentDidUpdate(prevProps: Props) {
     this.moveDroppingItem(prevProps);
   }
@@ -213,12 +218,13 @@ export default class GridItem extends React.Component<Props, State> {
   // this element by `x, y` pixels.
   moveDroppingItem(prevProps: Props) {
     const { droppingPosition } = this.props;
-    const prevDroppingPosition = prevProps.droppingPosition;
-    const { dragging } = this.state;
+    if (!droppingPosition) return;
 
-    if (!droppingPosition || !prevDroppingPosition) {
-      return;
-    }
+    const prevDroppingPosition = prevProps.droppingPosition || {
+      left: 0,
+      top: 0
+    };
+    const { dragging } = this.state;
 
     if (!this.currentNode) {
       // eslint-disable-next-line react/no-find-dom-node

package/lib/ReactGridLayout.jsx

@@ -202,7 +202,8 @@ export default class ReactGridLayout extends React.Component<Props, State> {
       // handle changes properly, performance will increase.
       this.props.children !== nextProps.children ||
       !fastRGLPropsEqual(this.props, nextProps, isEqual) ||
-      !isEqual(this.state.activeDrag, nextState.activeDrag)
+      this.state.activeDrag !== nextState.activeDrag ||
+      this.state.droppingPosition !== nextState.droppingPosition
     );
   }
 

package/lib/ResponsiveReactGridLayout.jsx

@@ -7,15 +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 { Layout } from "./utils";
 
 const type = obj => Object.prototype.toString.call(obj);
 
@@ -46,9 +48,9 @@ type Props<Breakpoint: string = string> = {|
 
   // Responsive config
   breakpoint?: ?Breakpoint,
-  breakpoints: { [key: Breakpoint]: number },
+  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],

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,
@@ -165,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.
@@ -247,6 +249,9 @@ function resolveCompactionCollision(
 
 /**
  * Compact an item in the layout.
+ *
+ * Modifies item.
+ *
  */
 export function compactItem(
   compareWith: Layout,
@@ -294,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.
  */
@@ -372,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.
@@ -416,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);
 
@@ -579,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) {
@@ -591,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;
     }
@@ -604,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.
@@ -618,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));
@@ -653,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);
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-grid-layout",
-  "version": "0.18.2",
+  "version": "0.18.3",
   "description": "A draggable and resizable grid layout with responsive breakpoints, for React.",
   "main": "index.js",
   "scripts": {
@@ -56,6 +56,9 @@
     "babel-plugin-preval": "^4.0.0",
     "css-loader": "^3.4.2",
     "ejs": "^3.0.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "enzyme-to-json": "^3.4.4",
     "eslint": "^6.8.0",
     "eslint-plugin-flowtype": "^4.6.0",
     "eslint-plugin-mocha": "^6.2.2",
@@ -64,7 +67,7 @@
     "flow-bin": "^0.119.0",
     "husky": "^3.0.9",
     "imports-loader": "^0.8.0",
-    "jest-cli": "^24.9.0",
+    "jest": "^24.9.0",
     "lint-staged": "^9.5.0",
     "lodash": "^4.17.5",
     "opener": "^1.4.3",
@@ -74,6 +77,7 @@
     "react-hot-loader": "^4.12.18",
     "react-transform-hmr": "^1.0.2",
     "style-loader": "^1.1.2",
+    "timsort": "^0.3.0",
     "webpack": "^4.41.5",
     "webpack-cli": "^3.3.10",
     "webpack-dev-server": "^3.10.1"
@@ -82,6 +86,12 @@
     "registry": "https://registry.npmjs.org"
   },
   "jest": {
+    "setupFilesAfterEnv": [
+      "<rootDir>test/util/setupTests.js"
+    ],
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ],
     "testMatch": [
       "<rootDir>/test/spec/*.js"
     ],