react-grid-layout 1.2.0 → 1.2.4

package/lib/GridItem.jsx

@@ -1,6 +1,5 @@
 // @flow
 import React from "react";
-import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
 import { DraggableCore } from "react-draggable";
 import { Resizable } from "react-resizable";
@@ -29,7 +28,11 @@ import type {
 } from "./utils";
 
 import type { PositionParams } from "./calculateUtils";
-import type { ResizeHandles, ResizeHandle } from "./ReactGridLayoutPropTypes";
+import type {
+  ResizeHandles,
+  ResizeHandle,
+  ReactRef
+} from "./ReactGridLayoutPropTypes";
 
 type PartialPosition = { top: number, left: number };
 type GridItemCallback<Data: GridDragEvent | GridResizeEvent> = (
@@ -90,6 +93,17 @@ type Props = {
   onResizeStop?: GridItemCallback<GridResizeEvent>
 };
 
+type DefaultProps = {
+  className: string,
+  cancel: string,
+  handle: string,
+  minH: number,
+  minW: number,
+  maxH: number,
+  maxW: number,
+  transformScale: number
+};
+
 /**
  * An individual item within a ReactGridLayout.
  */
@@ -180,7 +194,7 @@ export default class GridItem extends React.Component<Props, State> {
     })
   };
 
-  static defaultProps = {
+  static defaultProps: DefaultProps = {
     className: "",
     cancel: "",
     handle: "",
@@ -197,9 +211,9 @@ export default class GridItem extends React.Component<Props, State> {
     className: ""
   };
 
-  currentNode: HTMLElement;
+  elementRef: ReactRef<HTMLDivElement> = React.createRef();
 
-  shouldComponentUpdate(nextProps: Props, nextState: State) {
+  shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
     // We can't deeply compare children. If the developer memoizes them, we can
     // use this optimization.
     if (this.props.children !== nextProps.children) return true;
@@ -240,6 +254,9 @@ export default class GridItem extends React.Component<Props, State> {
   moveDroppingItem(prevProps: Props) {
     const { droppingPosition } = this.props;
     if (!droppingPosition) return;
+    const node = this.elementRef.current;
+    // Can't find DOM node (are we unmounted?)
+    if (!node) return;
 
     const prevDroppingPosition = prevProps.droppingPosition || {
       left: 0,
@@ -247,18 +264,13 @@ export default class GridItem extends React.Component<Props, State> {
     };
     const { dragging } = this.state;
 
-    if (!this.currentNode) {
-      // eslint-disable-next-line react/no-find-dom-node
-      this.currentNode = ((ReactDOM.findDOMNode(this): any): HTMLElement);
-    }
-
     const shouldDrag =
       (dragging && droppingPosition.left !== prevDroppingPosition.left) ||
       droppingPosition.top !== prevDroppingPosition.top;
 
     if (!dragging) {
       this.onDragStart(droppingPosition.e, {
-        node: this.currentNode,
+        node,
         deltaX: droppingPosition.left,
         deltaY: droppingPosition.top
       });
@@ -267,7 +279,7 @@ export default class GridItem extends React.Component<Props, State> {
       const deltaY = droppingPosition.top - dragging.top;
 
       this.onDrag(droppingPosition.e, {
-        node: this.currentNode,
+        node,
         deltaX,
         deltaY
       });
@@ -337,6 +349,7 @@ export default class GridItem extends React.Component<Props, State> {
           (this.props.cancel ? "," + this.props.cancel : "")
         }
         scale={this.props.transformScale}
+        nodeRef={this.elementRef}
       >
         {child}
       </DraggableCore>
@@ -382,7 +395,8 @@ export default class GridItem extends React.Component<Props, State> {
     return (
       <Resizable
         draggableOpts={{
-          disabled: !isResizable
+          disabled: !isResizable,
+          nodeRef: this.elementRef
         }}
         className={isResizable ? undefined : "react-resizable-hide"}
         width={position.width}
@@ -406,8 +420,8 @@ export default class GridItem extends React.Component<Props, State> {
    * @param  {Event}  e             event data
    * @param  {Object} callbackData  an object with node, delta and position information
    */
-  onDragStart = (e: Event, { node }: ReactDraggableCallbackData) => {
-    const { onDragStart } = this.props;
+  onDragStart: (Event, ReactDraggableCallbackData) => void = (e, { node }) => {
+    const { onDragStart, transformScale } = this.props;
     if (!onDragStart) return;
 
     const newPosition: PartialPosition = { top: 0, left: 0 };
@@ -417,10 +431,10 @@ export default class GridItem extends React.Component<Props, State> {
     if (!offsetParent) return;
     const parentRect = offsetParent.getBoundingClientRect();
     const clientRect = node.getBoundingClientRect();
-    const cLeft = clientRect.left / this.props.transformScale;
-    const pLeft = parentRect.left / this.props.transformScale;
-    const cTop = clientRect.top / this.props.transformScale;
-    const pTop = parentRect.top / this.props.transformScale;
+    const cLeft = clientRect.left / transformScale;
+    const pLeft = parentRect.left / transformScale;
+    const cTop = clientRect.top / transformScale;
+    const pTop = parentRect.top / transformScale;
     newPosition.left = cLeft - pLeft + offsetParent.scrollLeft;
     newPosition.top = cTop - pTop + offsetParent.scrollTop;
     this.setState({ dragging: newPosition });
@@ -446,11 +460,12 @@ export default class GridItem extends React.Component<Props, State> {
    * @param  {Event}  e             event data
    * @param  {Object} callbackData  an object with node, delta and position information
    */
-  onDrag = (e: Event, { node, deltaX, deltaY }: ReactDraggableCallbackData) => {
-    const { onDrag, transformScale } = this.props;
+  onDrag: (Event, ReactDraggableCallbackData) => void = (
+    e,
+    { node, deltaX, deltaY }
+  ) => {
+    const { onDrag } = this.props;
     if (!onDrag) return;
-    deltaX /= transformScale;
-    deltaY /= transformScale;
 
     if (!this.state.dragging) {
       throw new Error("onDrag called before onDragStart.");
@@ -495,7 +510,7 @@ export default class GridItem extends React.Component<Props, State> {
    * @param  {Event}  e             event data
    * @param  {Object} callbackData  an object with node, delta and position information
    */
-  onDragStop = (e: Event, { node }: ReactDraggableCallbackData) => {
+  onDragStop: (Event, ReactDraggableCallbackData) => void = (e, { node }) => {
     const { onDragStop } = this.props;
     if (!onDragStop) return;
 
@@ -521,9 +536,9 @@ export default class GridItem extends React.Component<Props, State> {
    * @param  {Event}  e             event data
    * @param  {Object} callbackData  an object with node and size information
    */
-  onResizeStop = (
-    e: Event,
-    callbackData: { node: HTMLElement, size: Position }
+  onResizeStop: (Event, { node: HTMLElement, size: Position }) => void = (
+    e,
+    callbackData
   ) => {
     this.onResizeHandler(e, callbackData, "onResizeStop");
   };
@@ -533,9 +548,9 @@ export default class GridItem extends React.Component<Props, State> {
    * @param  {Event}  e             event data
    * @param  {Object} callbackData  an object with node and size information
    */
-  onResizeStart = (
-    e: Event,
-    callbackData: { node: HTMLElement, size: Position }
+  onResizeStart: (Event, { node: HTMLElement, size: Position }) => void = (
+    e,
+    callbackData
   ) => {
     this.onResizeHandler(e, callbackData, "onResizeStart");
   };
@@ -545,9 +560,9 @@ export default class GridItem extends React.Component<Props, State> {
    * @param  {Event}  e             event data
    * @param  {Object} callbackData  an object with node and size information
    */
-  onResize = (
-    e: Event,
-    callbackData: { node: HTMLElement, size: Position }
+  onResize: (Event, { node: HTMLElement, size: Position }) => void = (
+    e,
+    callbackData
   ) => {
     this.onResizeHandler(e, callbackData, "onResize");
   };
@@ -564,7 +579,7 @@ export default class GridItem extends React.Component<Props, State> {
     e: Event,
     { node, size }: { node: HTMLElement, size: Position },
     handlerName: string
-  ) {
+  ): void {
     const handler = this.props[handlerName];
     if (!handler) return;
     const { cols, x, y, i, maxH, minH } = this.props;
@@ -618,6 +633,7 @@ export default class GridItem extends React.Component<Props, State> {
 
     // Create the child element. We clone the existing element but modify its className and style.
     let newChild = React.cloneElement(child, {
+      ref: this.elementRef,
       className: classNames(
         "react-grid-item",
         child.props.className,

package/lib/ReactGridLayout.jsx

@@ -1,5 +1,5 @@
 // @flow
-import React from "react";
+import * as React from "react";
 
 import isEqual from "lodash.isequal";
 import classNames from "classnames";
@@ -9,13 +9,14 @@ import {
   childrenEqual,
   cloneLayoutItem,
   compact,
+  compactType,
+  fastRGLPropsEqual,
+  getAllCollisions,
   getLayoutItem,
   moveElement,
-  synchronizeLayoutWithChildren,
-  getAllCollisions,
-  compactType,
   noop,
-  fastRGLPropsEqual
+  synchronizeLayoutWithChildren,
+  withLayoutItem
 } from "./utils";
 
 import { calcXY } from "./calculateUtils";
@@ -55,7 +56,7 @@ type State = {
   propsLayout?: Layout
 };
 
-import type { Props } from "./ReactGridLayoutPropTypes";
+import type { Props, DefaultProps } from "./ReactGridLayoutPropTypes";
 
 // End Types
 
@@ -74,12 +75,12 @@ try {
 
 export default class ReactGridLayout extends React.Component<Props, State> {
   // TODO publish internal ReactClass displayName transform
-  static displayName = "ReactGridLayout";
+  static displayName: ?string = "ReactGridLayout";
 
   // Refactored to another module to make way for preval
   static propTypes = ReactGridLayoutPropTypes;
 
-  static defaultProps = {
+  static defaultProps: DefaultProps = {
     autoSize: true,
     cols: 12,
     className: "",
@@ -133,7 +134,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     children: []
   };
 
-  dragEnterCounter = 0;
+  dragEnterCounter: number = 0;
 
   constructor(props: Props, context: any): void {
     super(props, context);
@@ -154,7 +155,10 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     this.onLayoutMaybeChanged(this.state.layout, this.props.layout);
   }
 
-  static getDerivedStateFromProps(nextProps: Props, prevState: State) {
+  static getDerivedStateFromProps(
+    nextProps: Props,
+    prevState: State
+  ): $Shape<State> | null {
     let newLayoutBase;
 
     if (prevState.activeDrag) {
@@ -197,7 +201,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     return null;
   }
 
-  shouldComponentUpdate(nextProps: Props, nextState: State) {
+  shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
     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
@@ -223,7 +227,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
    * Calculates a pixel value for the container.
    * @return {String} Container height in pixels.
    */
-  containerHeight() {
+  containerHeight(): ?string {
     if (!this.props.autoSize) return;
     const nbRow = bottom(this.state.layout);
     const containerPaddingY = this.props.containerPadding
@@ -245,9 +249,14 @@ export default class ReactGridLayout extends React.Component<Props, State> {
    * @param {Event} e The mousedown event
    * @param {Element} node The current dragging DOM element
    */
-  onDragStart(i: string, x: number, y: number, { e, node }: GridDragEvent) {
+  onDragStart(
+    i: string,
+    x: number,
+    y: number,
+    { e, node }: GridDragEvent
+  ): void {
     const { layout } = this.state;
-    var l = getLayoutItem(layout, i);
+    const l = getLayoutItem(layout, i);
     if (!l) return;
 
     this.setState({
@@ -266,15 +275,15 @@ export default class ReactGridLayout extends React.Component<Props, State> {
    * @param {Event} e The mousedown event
    * @param {Element} node The current dragging DOM element
    */
-  onDrag(i: string, x: number, y: number, { e, node }: GridDragEvent) {
+  onDrag(i: string, x: number, y: number, { e, node }: GridDragEvent): void {
     const { oldDragItem } = this.state;
     let { layout } = this.state;
     const { cols } = this.props;
-    var l = getLayoutItem(layout, i);
+    const l = getLayoutItem(layout, i);
     if (!l) return;
 
     // Create placeholder (display only)
-    var placeholder = {
+    const placeholder = {
       w: l.w,
       h: l.h,
       x: l.x,
@@ -312,7 +321,12 @@ export default class ReactGridLayout extends React.Component<Props, State> {
    * @param {Event} e The mousedown event
    * @param {Element} node The current dragging DOM element
    */
-  onDragStop(i: string, x: number, y: number, { e, node }: GridDragEvent) {
+  onDragStop(
+    i: string,
+    x: number,
+    y: number,
+    { e, node }: GridDragEvent
+  ): void {
     if (!this.state.activeDrag) return;
 
     const { oldDragItem } = this.state;
@@ -359,7 +373,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
 
   onResizeStart(i: string, w: number, h: number, { e, node }: GridResizeEvent) {
     const { layout } = this.state;
-    var l = getLayoutItem(layout, i);
+    const l = getLayoutItem(layout, i);
     if (!l) return;
 
     this.setState({
@@ -373,41 +387,46 @@ export default class ReactGridLayout extends React.Component<Props, State> {
   onResize(i: string, w: number, h: number, { e, node }: GridResizeEvent) {
     const { layout, oldResizeItem } = this.state;
     const { cols, preventCollision } = this.props;
-    const l: ?LayoutItem = getLayoutItem(layout, i);
-    if (!l) return;
 
-    // Something like quad tree should be used
-    // to find collisions faster
-    let hasCollisions;
-    if (preventCollision) {
-      const collisions = getAllCollisions(layout, { ...l, w, h }).filter(
-        layoutItem => layoutItem.i !== l.i
-      );
-      hasCollisions = collisions.length > 0;
-
-      // If we're colliding, we need adjust the placeholder.
-      if (hasCollisions) {
-        // adjust w && h to maximum allowed space
-        let leastX = Infinity,
-          leastY = Infinity;
-        collisions.forEach(layoutItem => {
-          if (layoutItem.x > l.x) leastX = Math.min(leastX, layoutItem.x);
-          if (layoutItem.y > l.y) leastY = Math.min(leastY, layoutItem.y);
-        });
-
-        if (Number.isFinite(leastX)) l.w = leastX - l.x;
-        if (Number.isFinite(leastY)) l.h = leastY - l.y;
+    const [newLayout, l] = withLayoutItem(layout, i, l => {
+      // Something like quad tree should be used
+      // to find collisions faster
+      let hasCollisions;
+      if (preventCollision) {
+        const collisions = getAllCollisions(layout, { ...l, w, h }).filter(
+          layoutItem => layoutItem.i !== l.i
+        );
+        hasCollisions = collisions.length > 0;
+
+        // If we're colliding, we need adjust the placeholder.
+        if (hasCollisions) {
+          // adjust w && h to maximum allowed space
+          let leastX = Infinity,
+            leastY = Infinity;
+          collisions.forEach(layoutItem => {
+            if (layoutItem.x > l.x) leastX = Math.min(leastX, layoutItem.x);
+            if (layoutItem.y > l.y) leastY = Math.min(leastY, layoutItem.y);
+          });
+
+          if (Number.isFinite(leastX)) l.w = leastX - l.x;
+          if (Number.isFinite(leastY)) l.h = leastY - l.y;
+        }
       }
-    }
 
-    if (!hasCollisions) {
-      // Set new width and height.
-      l.w = w;
-      l.h = h;
-    }
+      if (!hasCollisions) {
+        // Set new width and height.
+        l.w = w;
+        l.h = h;
+      }
+
+      return l;
+    });
+
+    // Shouldn't ever happen, but typechecking makes it necessary
+    if (!l) return;
 
     // Create placeholder element (display only)
-    var placeholder = {
+    const placeholder = {
       w: l.w,
       h: l.h,
       x: l.x,
@@ -416,11 +435,11 @@ export default class ReactGridLayout extends React.Component<Props, State> {
       i: i
     };
 
-    this.props.onResize(layout, oldResizeItem, l, placeholder, e, node);
+    this.props.onResize(newLayout, oldResizeItem, l, placeholder, e, node);
 
-    // Re-compact the layout and set the drag placeholder.
+    // Re-compact the newLayout and set the drag placeholder.
     this.setState({
-      layout: compact(layout, compactType(this.props), cols),
+      layout: compact(newLayout, compactType(this.props), cols),
       activeDrag: placeholder
     });
   }
@@ -428,7 +447,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
   onResizeStop(i: string, w: number, h: number, { e, node }: GridResizeEvent) {
     const { layout, oldResizeItem } = this.state;
     const { cols } = this.props;
-    var l = getLayoutItem(layout, i);
+    const l = getLayoutItem(layout, i);
 
     this.props.onResizeStop(layout, oldResizeItem, l, null, e, node);
 
@@ -579,13 +598,14 @@ export default class ReactGridLayout extends React.Component<Props, State> {
 
   // Called while dragging an element. Part of browser native drag/drop API.
   // Native event target might be the layout itself, or an element within the layout.
-  onDragOver = (e: DragOverEvent) => {
+  onDragOver: DragOverEvent => void | false = e => {
     // we should ignore events from layout's children in Firefox
     // to avoid unpredictable jumping of a dropping placeholder
     // FIXME remove this hack
     if (
       isFirefox &&
-      e.nativeEvent.target.className.indexOf(layoutClassName) === -1
+      // $FlowIgnore can't figure this out
+      !e.nativeEvent.target?.classList.contains(layoutClassName)
     ) {
       // without this Firefox will not allow drop if currently over droppingItem
       e.preventDefault();
@@ -650,7 +670,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     e.preventDefault();
   };
 
-  removeDroppingPlaceholder = () => {
+  removeDroppingPlaceholder: () => void = () => {
     const { droppingItem, cols } = this.props;
     const { layout } = this.state;
 
@@ -668,7 +688,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     });
   };
 
-  onDragLeave = () => {
+  onDragLeave: () => void = () => {
     this.dragEnterCounter--;
 
     // onDragLeave can be triggered on each layout's child.
@@ -681,11 +701,11 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     }
   };
 
-  onDragEnter = () => {
+  onDragEnter: () => void = () => {
     this.dragEnterCounter++;
   };
 
-  onDrop = (e: Event) => {
+  onDrop: EventHandler = (e: Event) => {
     const { droppingItem } = this.props;
     const { layout } = this.state;
     const item = layout.find(l => l.i === droppingItem.i);
@@ -698,7 +718,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     this.props.onDrop(layout, item, e);
   };
 
-  render() {
+  render(): React.Element<"div"> {
     const { className, style, isDroppable, innerRef } = this.props;
 
     const mergedClassName = classNames(layoutClassName, className);

package/lib/ReactGridLayoutPropTypes.js

@@ -14,6 +14,11 @@ export type ResizeHandle =
   | ReactElement<any>
   | ((resizeHandleAxis: ResizeHandleAxis) => ReactElement<any>);
 
+// util
+export type ReactRef<T: HTMLElement> = {|
+  +current: T | null
+|};
+
 // Defines which resize handles should be rendered (default: 'se')
 // Allows for any combination of:
 // 's' - South handle (bottom-center)
@@ -24,14 +29,13 @@ export type ResizeHandle =
 // 'nw' - Northwest handle (top-left)
 // 'se' - Southeast handle (bottom-right)
 // 'ne' - Northeast handle (top-right)
-export const resizeHandlesType = PropTypes.arrayOf(
+export const resizeHandlesType: ReactPropsChainableTypeChecker = PropTypes.arrayOf(
   PropTypes.oneOf(["s", "w", "e", "n", "sw", "nw", "se", "ne"])
 );
 // Custom component for resize handles
-export const resizeHandleType = PropTypes.oneOfType([
-  PropTypes.node,
-  PropTypes.func
-]);
+export const resizeHandleType: ReactPropsChainableTypeChecker = PropTypes.oneOfType(
+  [PropTypes.node, PropTypes.func]
+);
 
 export type Props = {|
   className: string,
@@ -72,6 +76,14 @@ export type Props = {|
   innerRef?: Ref<"div">
 |};
 
+export type DefaultProps = $Diff<
+  Props,
+  {
+    children: ReactChildrenArray<ReactElement<any>>,
+    width: number
+  }
+>;
+
 export default {
   //
   // Basic props
@@ -108,7 +120,10 @@ export default {
     }
   },
   // Choose vertical or hotizontal compaction
-  compactType: PropTypes.oneOf(["vertical", "horizontal"]),
+  compactType: (PropTypes.oneOf([
+    "vertical",
+    "horizontal"
+  ]): ReactPropsChainableTypeChecker),
 
   // layout is an array of object with the format:
   // {x: Number, y: Number, w: Number, h: Number, i: String}
@@ -124,9 +139,11 @@ export default {
   //
 
   // Margin between items [x, y] in px
-  margin: PropTypes.arrayOf(PropTypes.number),
+  margin: (PropTypes.arrayOf(PropTypes.number): ReactPropsChainableTypeChecker),
   // Padding inside the container [x, y] in px
-  containerPadding: PropTypes.arrayOf(PropTypes.number),
+  containerPadding: (PropTypes.arrayOf(
+    PropTypes.number
+  ): ReactPropsChainableTypeChecker),
   // 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.
@@ -182,11 +199,11 @@ export default {
   // Other validations
   //
 
-  droppingItem: PropTypes.shape({
+  droppingItem: (PropTypes.shape({
     i: PropTypes.string.isRequired,
     w: PropTypes.number.isRequired,
     h: PropTypes.number.isRequired
-  }),
+  }): ReactPropsChainableTypeChecker),
 
   // Children must not have duplicate keys.
   children: function (props: Props, propName: string) {