react-grid-layout 0.18.2 → 1.1.1

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,9 +103,11 @@ 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 keys.sort(function (a, b) {
     return breakpoints[a] - breakpoints[b];
   });
 }

package/lib/utils.js

@@ -18,9 +18,11 @@ export type LayoutItem = {
   moved?: boolean,
   static?: boolean,
   isDraggable?: ?boolean,
-  isResizable?: ?boolean
+  isResizable?: ?boolean,
+  resizeHandles?: Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'>,
+  isBounded?: ?boolean
 };
-export type Layout = Array<LayoutItem>;
+export type Layout = $ReadOnlyArray<LayoutItem>;
 export type Position = {
   left: number,
   top: number,
@@ -111,9 +113,11 @@ export function cloneLayoutItem(layoutItem: LayoutItem): LayoutItem {
     maxH: layoutItem.maxH,
     moved: Boolean(layoutItem.moved),
     static: Boolean(layoutItem.static),
-    // These can be null
+    // These can be null/undefined
     isDraggable: layoutItem.isDraggable,
-    isResizable: layoutItem.isResizable
+    isResizable: layoutItem.isResizable,
+    resizeHandles: layoutItem.resizeHandles,
+    isBounded: layoutItem.isBounded
   };
 }
 
@@ -165,6 +169,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 +253,9 @@ function resolveCompactionCollision(
 
 /**
  * Compact an item in the layout.
+ *
+ * Modifies item.
+ *
  */
 export function compactItem(
   compareWith: Layout,
@@ -294,6 +303,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 +383,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 +429,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 +593,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 +611,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 +629,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 +645,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 +680,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": "1.1.1",
   "description": "A draggable and resizable grid layout with responsive breakpoints, for React.",
   "main": "index.js",
   "scripts": {
@@ -39,49 +39,59 @@
     "lodash.isequal": "^4.0.0",
     "prop-types": "^15.0.0",
     "react-draggable": "^4.0.0",
-    "react-resizable": "^1.9.0"
+    "react-resizable": "^1.10.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.8.0",
-    "@babel/core": "^7.8.0",
-    "@babel/plugin-proposal-class-properties": "^7.8.0",
-    "@babel/plugin-transform-flow-comments": "^7.8.0",
-    "@babel/preset-env": "^7.8.2",
-    "@babel/preset-flow": "^7.8.0",
-    "@babel/preset-react": "^7.8.0",
-    "@babel/register": "^7.8.0",
-    "babel-eslint": "^10.0.3",
-    "babel-jest": "^25.1.0",
-    "babel-loader": "^8.0.6",
-    "babel-plugin-preval": "^4.0.0",
-    "css-loader": "^3.4.2",
-    "ejs": "^3.0.1",
-    "eslint": "^6.8.0",
-    "eslint-plugin-flowtype": "^4.6.0",
-    "eslint-plugin-mocha": "^6.2.2",
-    "eslint-plugin-react": "^7.17.0",
-    "exports-loader": "^0.7.0",
-    "flow-bin": "^0.119.0",
-    "husky": "^3.0.9",
-    "imports-loader": "^0.8.0",
-    "jest-cli": "^24.9.0",
-    "lint-staged": "^9.5.0",
-    "lodash": "^4.17.5",
-    "opener": "^1.4.3",
-    "prettier": "^1.19.1",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-hot-loader": "^4.12.18",
+    "@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-eslint": "^10.1.0",
+    "babel-jest": "^26.3.0",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-preval": "^5.0.0",
+    "css-loader": "^4.2.2",
+    "ejs": "^3.1.5",
+    "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",
+    "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",
+    "opener": "^1.5.2",
+    "prettier": "^2.1.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-hot-loader": "^4.12.21",
     "react-transform-hmr": "^1.0.2",
-    "style-loader": "^1.1.2",
-    "webpack": "^4.41.5",
-    "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.10.1"
+    "style-loader": "^1.2.1",
+    "timsort": "^0.3.0",
+    "webpack": "^4.44.1",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
   "jest": {
+    "setupFilesAfterEnv": [
+      "<rootDir>test/util/setupTests.js"
+    ],
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ],
     "testMatch": [
       "<rootDir>/test/spec/*.js"
     ],

package/interfaces/classnames.js

@@ -1,16 +0,0 @@
-// @flow
-// flow-typed signature: 3fba12a77525f37b0492c8dab3e04f0e
-// flow-typed version: 94e9f7e0a4/classnames_v2.x.x/flow_>=v0.28.x
-
-type $npm$classnames$Classes =
-  | string
-  | { [className: string]: ?boolean }
-  | Array<string>
-  | void
-  | null;
-
-declare module "classnames" {
-  declare module.exports: (
-    ...classes: Array<$npm$classnames$Classes>
-  ) => string;
-}