react-grid-layout 1.1.0 → 1.2.2

package/lib/GridItem.jsx

@@ -13,6 +13,10 @@ import {
   calcWH,
   clamp
 } from "./calculateUtils";
+import {
+  resizeHandlesType,
+  resizeHandleType
+} from "./ReactGridLayoutPropTypes";
 import classNames from "classnames";
 import type { Element as ReactElement, Node as ReactNode } from "react";
 
@@ -25,6 +29,7 @@ import type {
 } from "./utils";
 
 import type { PositionParams } from "./calculateUtils";
+import type { ResizeHandles, ResizeHandle } from "./ReactGridLayoutPropTypes";
 
 type PartialPosition = { top: number, left: number };
 type GridItemCallback<Data: GridDragEvent | GridResizeEvent> = (
@@ -74,7 +79,8 @@ type Props = {
   maxH: number,
   i: string,
 
-  resizeHandles?: Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'>,
+  resizeHandles?: ResizeHandles,
+  resizeHandle?: ResizeHandle,
 
   onDrag?: GridItemCallback<GridDragEvent>,
   onDragStart?: GridItemCallback<GridDragEvent>,
@@ -84,6 +90,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.
  */
@@ -138,6 +155,10 @@ export default class GridItem extends React.Component<Props, State> {
     // ID is nice to have for callbacks
     i: PropTypes.string.isRequired,
 
+    // Resize handle options
+    resizeHandles: resizeHandlesType,
+    resizeHandle: resizeHandleType,
+
     // Functions
     onDragStop: PropTypes.func,
     onDragStart: PropTypes.func,
@@ -170,7 +191,7 @@ export default class GridItem extends React.Component<Props, State> {
     })
   };
 
-  static defaultProps = {
+  static defaultProps: DefaultProps = {
     className: "",
     cancel: "",
     handle: "",
@@ -189,7 +210,7 @@ export default class GridItem extends React.Component<Props, State> {
 
   currentNode: HTMLElement;
 
-  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;
@@ -352,7 +373,8 @@ export default class GridItem extends React.Component<Props, State> {
       maxW,
       maxH,
       transformScale,
-      resizeHandles
+      resizeHandles,
+      resizeHandle
     } = this.props;
     const positionParams = this.getPositionParams();
 
@@ -383,6 +405,7 @@ export default class GridItem extends React.Component<Props, State> {
         onResize={this.onResize}
         transformScale={transformScale}
         resizeHandles={resizeHandles}
+        handle={resizeHandle}
       >
         {child}
       </Resizable>
@@ -394,8 +417,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 };
@@ -405,10 +428,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 });
@@ -434,11 +457,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.");
@@ -483,7 +507,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;
 
@@ -509,9 +533,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");
   };
@@ -521,9 +545,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");
   };
@@ -533,9 +557,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");
   };
@@ -552,7 +576,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;

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);
 
@@ -515,7 +534,8 @@ export default class ReactGridLayout extends React.Component<Props, State> {
       transformScale,
       draggableCancel,
       draggableHandle,
-      resizeHandles
+      resizeHandles,
+      resizeHandle
     } = this.props;
     const { mounted, droppingPosition } = this.state;
 
@@ -569,6 +589,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
         static={l.static}
         droppingPosition={isDroppingItem ? droppingPosition : undefined}
         resizeHandles={resizeHandlesOptions}
+        resizeHandle={resizeHandle}
       >
         {child}
       </GridItem>
@@ -577,14 +598,17 @@ 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();
       return false;
     }
 
@@ -646,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;
 
@@ -664,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.
@@ -677,16 +701,16 @@ 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);
 
-    // reset gragEnter counter on drop
+    // reset dragEnter counter on drop
     this.dragEnterCounter = 0;
 
     this.removeDroppingPlaceholder();
@@ -694,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

@@ -8,6 +8,30 @@ import type {
 } from "react";
 import type { EventCallback, CompactType, Layout, LayoutItem } from "./utils";
 
+type ResizeHandleAxis = "s" | "w" | "e" | "n" | "sw" | "nw" | "se" | "ne";
+export type ResizeHandles = Array<ResizeHandleAxis>;
+export type ResizeHandle =
+  | ReactElement<any>
+  | ((resizeHandleAxis: ResizeHandleAxis) => ReactElement<any>);
+
+// Defines which resize handles should be rendered (default: 'se')
+// Allows for any combination of:
+// 's' - South handle (bottom-center)
+// 'w' - West handle (left-center)
+// 'e' - East handle (right-center)
+// 'n' - North handle (top-center)
+// 'sw' - Southwest handle (bottom-left)
+// 'nw' - Northwest handle (top-left)
+// 'se' - Southeast handle (bottom-right)
+// 'ne' - Northeast handle (top-right)
+export const resizeHandlesType: ReactPropsChainableTypeChecker = PropTypes.arrayOf(
+  PropTypes.oneOf(["s", "w", "e", "n", "sw", "nw", "se", "ne"])
+);
+// Custom component for resize handles
+export const resizeHandleType: ReactPropsChainableTypeChecker = PropTypes.oneOfType(
+  [PropTypes.node, PropTypes.func]
+);
+
 export type Props = {|
   className: string,
   style: Object,
@@ -31,7 +55,8 @@ export type Props = {|
   useCSSTransforms: boolean,
   transformScale: number,
   droppingItem: $Shape<LayoutItem>,
-  resizeHandles: Array<"s" | "w" | "e" | "n" | "sw" | "nw" | "se" | "ne">,
+  resizeHandles: ResizeHandles,
+  resizeHandle?: ResizeHandle,
 
   // Callbacks
   onLayoutChange: Layout => void,
@@ -46,6 +71,14 @@ export type Props = {|
   innerRef?: Ref<"div">
 |};
 
+export type DefaultProps = $Diff<
+  Props,
+  {
+    children: ReactChildrenArray<ReactElement<any>>,
+    width: number
+  }
+>;
+
 export default {
   //
   // Basic props
@@ -82,7 +115,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}
@@ -98,9 +134,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.
@@ -124,19 +162,10 @@ export default {
   transformScale: PropTypes.number,
   // If true, an external element can trigger onDrop callback with a specific grid position as a parameter
   isDroppable: PropTypes.bool,
-  // Defines which resize handles should be rendered (default: 'se')
-  // Allows for any combination of:
-  // 's' - South handle (bottom-center)
-  // 'w' - West handle (left-center)
-  // 'e' - East handle (right-center)
-  // 'n' - North handle (top-center)
-  // 'sw' - Southwest handle (bottom-left)
-  // 'nw' - Northwest handle (top-left)
-  // 'se' - Southeast handle (bottom-right)
-  // 'ne' - Northeast handle (top-right)
-  resizeHandles: PropTypes.arrayOf(
-    PropTypes.oneOf(["s", "w", "e", "n", "sw", "nw", "se", "ne"])
-  ),
+
+  // Resize handle options
+  resizeHandles: resizeHandlesType,
+  resizeHandle: resizeHandleType,
 
   //
   // Callbacks
@@ -165,11 +194,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) {