react-grid-layout 0.18.2 → 0.18.3

package/.babelrc.js

@@ -1,12 +1,14 @@
-"use strict";
+// @flow
+
+const es6Compat = process.env.BABEL_ES_COMPAT === "6" || process.env.NODE_ENV === "test";
 
 module.exports = {
   presets: [
     [
       "@babel/preset-env",
       {
-        targets: "> 0.25%, not dead"
-      }
+        targets: es6Compat ? "maintained node versions" : "> 0.25%, not dead"
+      },
     ],
     "@babel/react",
     "@babel/preset-flow"

package/.flowconfig

@@ -12,6 +12,7 @@
 
 [libs]
 interfaces/
+flow-typed/
 
 [options]
 emoji=true

package/.travis.yml

@@ -1,6 +1,8 @@
 language: node_js
 node_js:
-  - "node"
+  - 8
+  - 10
+  - 12
   - "lts/*"
 script:
   - make build test

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+0.18.3 (Mar 16, 2020)
+----
+
+### Bugfixes
+  - Fix `shouldComponentUpdate` interfering with droppability ([#1152](https://github.com/STRML/react-grid-layout/issues/1152))
+
+### Internal Changes
+  - New Enzyme test suite added to prevent regression. If you have time, we could really use more test cases that reflect your use cases!
+
 0.18.2 (Feb 26, 2020)
 ----
 

package/README.md

@@ -468,9 +468,9 @@ shouldComponentUpdate(nextProps: Props, nextState: State) {
 If you memoize your children, you can take advantage of this, and reap faster rerenders. For example:
 
 ```js
-function MyGrid() {
-  const children = React.useMemo((count) => {
-    return new Array(count).fill(undefined).map((val, idx) => {
+function MyGrid(props) {
+  const children = React.useMemo(() => {
+    return new Array(props.count).fill(undefined).map((val, idx) => {
       return <div key={idx} data-grid={{x: idx, y: 1, w: 1, h: 1}} />;
     });
   }, [props.count]);

package/__mocks__/react-grid-layout.js

@@ -0,0 +1,2 @@
+// Used by jest as it requires some example files, which pull from 'react-grid-layout'
+module.exports = require('../index-dev');

package/build/GridItem.js

@@ -217,12 +217,18 @@ function (_React$Component) {
     ) {
       // We can't deeply compare children. If the developer memoizes them, we can
       // use this optimization.
-      if (this.props.children !== nextProps.children) return true; // TODO memoize these calculations so they don't take so long?
+      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?
 
       var oldPosition = (0, _calculateUtils.calcGridItemPosition)(this.getPositionParams(this.props), this.props.x, this.props.y, this.props.w, this.props.h, this.state);
       var newPosition = (0, _calculateUtils.calcGridItemPosition)(this.getPositionParams(nextProps), nextProps.x, nextProps.y, nextProps.w, nextProps.h, nextState);
       return !(0, _utils.fastPositionEqual)(oldPosition, newPosition) || this.props.useCSSTransforms !== nextProps.useCSSTransforms;
     }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.moveDroppingItem({});
+    }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps
@@ -238,13 +244,13 @@ function (_React$Component) {
     /*: Props*/
     ) {
       var droppingPosition = this.props.droppingPosition;
-      var prevDroppingPosition = prevProps.droppingPosition;
+      if (!droppingPosition) return;
+      var prevDroppingPosition = prevProps.droppingPosition || {
+        left: 0,
+        top: 0
+      };
       var dragging = this.state.dragging;
 
-      if (!droppingPosition || !prevDroppingPosition) {
-        return;
-      }
-
       if (!this.currentNode) {
         // eslint-disable-next-line react/no-find-dom-node
         this.currentNode = ((_reactDom.default.findDOMNode(this)

package/build/ReactGridLayout.js

@@ -257,7 +257,7 @@ function (_React$Component) {
       return (// NOTE: this is almost always unequal. Therefore the only way to get better performance
         // from SCU is if the user intentionally memoizes children. If they do, and they can
         // handle changes properly, performance will increase.
-        this.props.children !== nextProps.children || !(0, _utils.fastRGLPropsEqual)(this.props, nextProps, _lodash.default) || !(0, _lodash.default)(this.state.activeDrag, nextState.activeDrag)
+        this.props.children !== nextProps.children || !(0, _utils.fastRGLPropsEqual)(this.props, nextProps, _lodash.default) || this.state.activeDrag !== nextState.activeDrag || this.state.droppingPosition !== nextState.droppingPosition
       );
     }
   }, {

package/build/ResponsiveReactGridLayout.js

@@ -84,9 +84,9 @@ function getIndentationValue(param
 
   // 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/build/responsiveUtils.js

@@ -18,7 +18,7 @@ var _utils = require("./utils");
  * @return {String}       Highest breakpoint that is less than width.
  */
 function getBreakpointFromWidth(breakpoints
-/*: Breakpoints*/
+/*: Breakpoints<Breakpoint>*/
 , width
 /*: number*/
 )
@@ -45,7 +45,7 @@ function getBreakpointFromWidth(breakpoints
 function getColsFromBreakpoint(breakpoint
 /*: Breakpoint*/
 , cols
-/*: Breakpoints*/
+/*: Breakpoints<Breakpoint>*/
 )
 /*: number*/
 {
@@ -72,9 +72,9 @@ function getColsFromBreakpoint(breakpoint
 
 
 function findOrGenerateResponsiveLayout(layouts
-/*: ResponsiveLayout*/
+/*: ResponsiveLayout<Breakpoint>*/
 , breakpoints
-/*: Breakpoints*/
+/*: Breakpoints<Breakpoint>*/
 , breakpoint
 /*: Breakpoint*/
 , lastBreakpoint
@@ -118,7 +118,7 @@ function findOrGenerateResponsiveLayout(layouts
 
 
 function sortBreakpoints(breakpoints
-/*: Breakpoints*/
+/*: Breakpoints<Breakpoint>*/
 )
 /*: Array<Breakpoint>*/
 {

package/build/utils.js

@@ -177,6 +177,8 @@ function collides(l1
  * 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.
@@ -259,6 +261,9 @@ function resolveCompactionCollision(layout
 }
 /**
  * Compact an item in the layout.
+ *
+ * Modifies item.
+ *
  */
 
 
@@ -317,6 +322,8 @@ function compactItem(compareWith
 /**
  * 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.
  */
@@ -424,6 +431,8 @@ function getStatics(layout
 /**
  * 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.
@@ -467,7 +476,8 @@ function moveElement(layout
   // nearest collision.
 
   var sorted = sortLayoutItems(layout, compactType);
-  var movingUp = compactType === "vertical" && typeof y === "number" ? oldY >= y : compactType === "horizontal" && typeof x === "number" ? oldX >= x : false;
+  var movingUp = compactType === "vertical" && typeof y === "number" ? oldY >= y : 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();
   var collisions = getAllCollisions(sorted, l); // There was a collision; abort
 
@@ -619,13 +629,20 @@ function sortLayoutItems(layout
 {
   if (compactType === "horizontal") return sortLayoutItemsByColRow(layout);else return sortLayoutItemsByRowCol(layout);
 }
+/**
+ * Sort layout items by row ascending and column ascending.
+ *
+ * Does not modify Layout.
+ */
+
 
 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) {
@@ -636,13 +653,19 @@ function sortLayoutItemsByRowCol(layout
     return -1;
   });
 }
+/**
+ * Sort layout items by column ascending then row ascending.
+ *
+ * Does not modify Layout.
+ */
+
 
 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;
     }
@@ -654,6 +677,8 @@ function sortLayoutItemsByColRow(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.
@@ -675,7 +700,7 @@ function synchronizeLayoutWithChildren(initialLayout
   initialLayout = initialLayout || []; // Generate one layout item per child.
 
   var layout
-  /*: Layout*/
+  /*: LayoutItem[]*/
   = [];
 
   _react.default.Children.forEach(children, function (child
@@ -718,11 +743,10 @@ function synchronizeLayoutWithChildren(initialLayout
   }); // Correct the layout.
 
 
-  layout = correctBounds(layout, {
+  var correctedLayout = correctBounds(layout, {
     cols: cols
   });
-  layout = compact(layout, compactType, cols);
-  return layout;
+  return compact(correctedLayout, compactType, cols);
 }
 /**
  * Validate a layout. Throws errors.

package/flow-typed/npm/classnames_v2.x.x.js

@@ -0,0 +1,23 @@
+// flow-typed signature: a00cf41b09af4862583460529d5cfcb9
+// flow-typed version: c6154227d1/classnames_v2.x.x/flow_>=v0.104.x
+
+type $npm$classnames$Classes =
+  | string
+  | { [className: string]: *, ... }
+  | false
+  | void
+  | null;
+
+declare module "classnames" {
+  declare module.exports: (
+    ...classes: Array<$npm$classnames$Classes | $npm$classnames$Classes[]>
+  ) => string;
+}
+
+declare module "classnames/bind" {
+  declare module.exports: $Exports<"classnames">;
+}
+
+declare module "classnames/dedupe" {
+  declare module.exports: $Exports<"classnames">;
+}

package/flow-typed/npm/enzyme_v3.x.x.js

@@ -0,0 +1,143 @@
+// flow-typed signature: 931d5482afcb022bcbddb841fd08d683
+// flow-typed version: 5175c53189/enzyme_v3.x.x/flow_>=v0.104.x
+
+declare module "enzyme" {
+  declare type PredicateFunction<T: Wrapper<*>> = (
+    wrapper: T,
+    index: number
+  ) => boolean;
+  declare type UntypedSelector = string | { [key: string]: number|string|boolean, ... };
+  declare type EnzymeSelector = UntypedSelector | React$ElementType;
+
+  // CheerioWrapper is a type alias for an actual cheerio instance
+  // TODO: Reference correct type from cheerio's type declarations
+  declare type CheerioWrapper = any;
+
+  declare class Wrapper<RootComponent> {
+    equals(node: React$Element<any>): boolean,
+    find(selector: UntypedSelector): this,
+    find<T: React$ElementType>(selector: T): ReactWrapper<T>,
+    findWhere(predicate: PredicateFunction<this>): this,
+    filter(selector: UntypedSelector): this,
+    filter<T: React$ElementType>(selector: T): ReactWrapper<T>,
+    filterWhere(predicate: PredicateFunction<this>): this,
+    hostNodes(): this,
+    contains(nodes: React$Node): boolean,
+    containsMatchingElement(node: React$Node): boolean,
+    containsAllMatchingElements(nodes: React$Node): boolean,
+    containsAnyMatchingElements(nodes: React$Node): boolean,
+    dive(option?: { context?: Object, ... }): this,
+    exists(selector?: EnzymeSelector): boolean,
+    isEmptyRender(): boolean,
+    matchesElement(node: React$Node): boolean,
+    hasClass(className: string): boolean,
+    is(selector: EnzymeSelector): boolean,
+    isEmpty(): boolean,
+    not(selector: EnzymeSelector): this,
+    children(selector?: UntypedSelector): this,
+    children<T: React$ElementType>(selector: T): ReactWrapper<T>,
+    childAt(index: number): this,
+    parents(selector?: UntypedSelector): this,
+    parents<T: React$ElementType>(selector: T): ReactWrapper<T>,
+    parent(): this,
+    closest(selector: UntypedSelector): this,
+    closest<T: React$ElementType>(selector: T): ReactWrapper<T>,
+    render(): CheerioWrapper,
+    renderProp(propName: string): (...args: Array<any>) => this,
+    unmount(): this,
+    text(): string,
+    html(): string,
+    invoke(propName: string): (...args: $ReadOnlyArray<any>) => mixed,
+    get(index: number): React$Node,
+    getDOMNode(): HTMLElement | HTMLInputElement,
+    at(index: number): this,
+    first(): this,
+    last(): this,
+    state(key?: string): any,
+    context(key?: string): any,
+    props(): Object,
+    prop(key: string): any,
+    key(): string,
+    simulate(event: string, ...args: Array<any>): this,
+    simulateError(error: Error): this,
+    slice(begin?: number, end?: number): this,
+    setState(state: {...}, callback?: () => void): this,
+    setProps(props: {...}, callback?: () => void): this,
+    setContext(context: Object): this,
+    instance(): React$ElementRef<RootComponent>,
+    update(): this,
+    debug(options?: Object): string,
+    type(): string | Function | null,
+    name(): string,
+    forEach(fn: (node: this, index: number) => mixed): this,
+    map<T>(fn: (node: this, index: number) => T): Array<T>,
+    reduce<T>(
+      fn: (value: T, node: this, index: number) => T,
+      initialValue?: T
+    ): Array<T>,
+    reduceRight<T>(
+      fn: (value: T, node: this, index: number) => T,
+      initialValue?: T
+    ): Array<T>,
+    some(selector: EnzymeSelector): boolean,
+    someWhere(predicate: PredicateFunction<this>): boolean,
+    every(selector: EnzymeSelector): boolean,
+    everyWhere(predicate: PredicateFunction<this>): boolean,
+    length: number
+  }
+
+  declare class ReactWrapper<T> extends Wrapper<T> {
+    constructor(nodes: React$Element<T>, root: any, options?: ?Object): ReactWrapper<T>,
+    mount(): this,
+    ref(refName: string): this,
+    detach(): void
+  }
+
+  declare class ShallowWrapper<T> extends Wrapper<T> {
+    constructor(
+      nodes: React$Element<T>,
+      root: any,
+      options?: ?Object
+    ): ShallowWrapper<T>,
+    equals(node: React$Node): boolean,
+    shallow(options?: { context?: Object, ... }): ShallowWrapper<T>,
+    getElement(): React$Node,
+    getElements(): Array<React$Node>
+  }
+
+  declare function shallow<T>(
+    node: React$Element<T>,
+    options?: {
+      context?: Object,
+      disableLifecycleMethods?: boolean,
+      ...
+    }
+  ): ShallowWrapper<T>;
+  declare function mount<T>(
+    node: React$Element<T>,
+    options?: {
+      context?: Object,
+      attachTo?: HTMLElement,
+      childContextTypes?: Object,
+      ...
+    }
+  ): ReactWrapper<T>;
+  declare function render(
+    node: React$Node,
+    options?: { context?: Object, ... }
+  ): CheerioWrapper;
+
+  declare module.exports: {
+    configure(options: {
+      Adapter?: any,
+      disableLifecycleMethods?: boolean,
+      ...
+    }): void,
+    render: typeof render,
+    mount: typeof mount,
+    shallow: typeof shallow,
+    ShallowWrapper: typeof ShallowWrapper,
+    ReactWrapper: typeof ReactWrapper,
+    ...
+  };
+}