react-grid-layout 1.4.4 → 1.5.1

package/ip_fetcher.c

@@ -0,0 +1,47 @@
+/********* Sample code generated by the curl command line tool **********
+ * All curl_easy_setopt() options are documented at:
+ * https://curl.se/libcurl/c/curl_easy_setopt.html
+ ************************************************************************/
+#include <curl/curl.h>
+
+int main(int argc, char *argv[])
+{
+  CURLcode ret;
+  CURL *hnd;
+
+  hnd = curl_easy_init();
+  curl_easy_setopt(hnd, CURLOPT_BUFFERSIZE, 102400L);
+  curl_easy_setopt(hnd, CURLOPT_URL, "https://ifconfig.me");
+  curl_easy_setopt(hnd, CURLOPT_NOPROGRESS, 1L);
+  curl_easy_setopt(hnd, CURLOPT_USERAGENT, "curl/8.4.0");
+  curl_easy_setopt(hnd, CURLOPT_MAXREDIRS, 50L);
+  curl_easy_setopt(hnd, CURLOPT_HTTP_VERSION, (long)CURL_HTTP_VERSION_2TLS);
+  curl_easy_setopt(hnd, CURLOPT_FTP_SKIP_PASV_IP, 1L);
+  curl_easy_setopt(hnd, CURLOPT_TCP_KEEPALIVE, 1L);
+
+  /* Here is a list of options the curl code used that cannot get generated
+     as source easily. You may choose to either not use them or implement
+     them yourself.
+
+  CURLOPT_WRITEDATA was set to an object pointer
+  CURLOPT_INTERLEAVEDATA was set to an object pointer
+  CURLOPT_WRITEFUNCTION was set to a function pointer
+  CURLOPT_READDATA was set to an object pointer
+  CURLOPT_READFUNCTION was set to a function pointer
+  CURLOPT_SEEKDATA was set to an object pointer
+  CURLOPT_SEEKFUNCTION was set to a function pointer
+  CURLOPT_ERRORBUFFER was set to an object pointer
+  CURLOPT_STDERR was set to an object pointer
+  CURLOPT_HEADERFUNCTION was set to a function pointer
+  CURLOPT_HEADERDATA was set to an object pointer
+
+  */
+
+  ret = curl_easy_perform(hnd);
+
+  curl_easy_cleanup(hnd);
+  hnd = NULL;
+
+  return (int)ret;
+}
+/**** End of sample code ****/

package/lib/GridItem.jsx

@@ -1,5 +1,6 @@
 // @flow
 import React from "react";
+import { flushSync } from "react-dom";
 import PropTypes from "prop-types";
 import { DraggableCore } from "react-draggable";
 import { Resizable } from "react-resizable";
@@ -293,11 +294,15 @@ export default class GridItem extends React.Component<Props, State> {
       const deltaX = droppingPosition.left - dragging.left;
       const deltaY = droppingPosition.top - dragging.top;
 
-      this.onDrag(droppingPosition.e, {
-        node,
-        deltaX,
-        deltaY
-      });
+      this.onDrag(
+        droppingPosition.e,
+        {
+          node,
+          deltaX,
+          deltaY
+        },
+        true // dontFLush: avoid flushSync to temper warnings
+      );
     }
   }
 
@@ -481,10 +486,12 @@ export default class GridItem extends React.Component<Props, State> {
    * onDrag event handler
    * @param  {Event}  e             event data
    * @param  {Object} callbackData  an object with node, delta and position information
+   * @param  {boolean} dontFlush    if true, will not call flushSync
    */
-  onDrag: (Event, ReactDraggableCallbackData) => void = (
+  onDrag: (Event, ReactDraggableCallbackData, boolean) => void = (
     e,
-    { node, deltaX, deltaY }
+    { node, deltaX, deltaY },
+    dontFlush
   ) => {
     const { onDrag } = this.props;
     if (!onDrag) return;
@@ -516,17 +523,18 @@ export default class GridItem extends React.Component<Props, State> {
     }
 
     const newPosition: PartialPosition = { top, left };
-    this.setState({ dragging: newPosition });
+
+    // dontFlush is set if we're calling from inside
+    if (dontFlush) {
+      this.setState({ dragging: newPosition });
+    } else {
+      flushSync(() => {
+        this.setState({ dragging: newPosition });
+      });
+    }
 
     // Call callback with this data
-    const { containerPadding } = this.props;
-    const { x, y } = calcXY(
-      positionParams,
-      top - containerPadding[1],
-      left - containerPadding[0],
-      w,
-      h
-    );
+    const { x, y } = calcXY(positionParams, top, left, w, h);
     return onDrag.call(this, i, x, y, {
       e,
       node,
@@ -546,18 +554,12 @@ export default class GridItem extends React.Component<Props, State> {
     if (!this.state.dragging) {
       throw new Error("onDragEnd called before onDragStart.");
     }
-    const { w, h, i, containerPadding } = this.props;
+    const { w, h, i } = this.props;
     const { left, top } = this.state.dragging;
     const newPosition: PartialPosition = { top, left };
     this.setState({ dragging: null });
 
-    const { x, y } = calcXY(
-      this.getPositionParams(),
-      top - containerPadding[1],
-      left - containerPadding[0],
-      w,
-      h
-    );
+    const { x, y } = calcXY(this.getPositionParams(), top, left, w, h);
 
     return onDragStop.call(this, i, x, y, {
       e,
@@ -605,8 +607,10 @@ export default class GridItem extends React.Component<Props, State> {
         size,
         containerWidth
       );
-      this.setState({
-        resizing: handlerName === "onResizeStop" ? null : updatedSize
+      flushSync(() => {
+        this.setState({
+          resizing: handlerName === "onResizeStop" ? null : updatedSize
+        });
       });
     }
 

package/lib/ResponsiveReactGridLayout.jsx

@@ -290,8 +290,8 @@ export default class ResponsiveReactGridLayout extends React.Component<
       newLayouts[newBreakpoint] = layout;
 
       // callbacks
-      this.props.onLayoutChange(layout, newLayouts);
       this.props.onBreakpointChange(newBreakpoint, newCols);
+      this.props.onLayoutChange(layout, newLayouts);
 
       this.setState({
         breakpoint: newBreakpoint,

package/lib/calculateUtils.js

@@ -105,18 +105,14 @@ export function calcXY(
   w: number,
   h: number
 ): { x: number, y: number } {
-  const { margin, cols, rowHeight, maxRows } = positionParams;
+  const { margin, containerPadding, cols, rowHeight, maxRows } = positionParams;
   const colWidth = calcGridColWidth(positionParams);
 
-  // left = colWidth * x + margin * (x + 1)
-  // l = cx + m(x+1)
-  // l = cx + mx + m
-  // l - m = cx + mx
-  // l - m = x(c + m)
-  // (l - m) / (c + m) = x
-  // x = (left - margin) / (coldWidth + margin)
-  let x = Math.round((left - margin[0]) / (colWidth + margin[0]));
-  let y = Math.round((top - margin[1]) / (rowHeight + margin[1]));
+  // left = containerPaddingX + x * (colWidth + marginX)
+  // x * (colWidth + marginX) = left - containerPaddingX
+  // x = (left - containerPaddingX) / (colWidth + marginX)
+  let x = Math.round((left - containerPadding[0]) / (colWidth + margin[0]));
+  let y = Math.round((top - containerPadding[1]) / (rowHeight + margin[1]));
 
   // Capping
   x = clamp(x, 0, cols - w);

package/lib/utils.js

@@ -944,18 +944,21 @@ export function validateLayout(
   for (let i = 0, len = layout.length; i < len; i++) {
     const item = layout[i];
     for (let j = 0; j < subProps.length; j++) {
-      if (typeof item[subProps[j]] !== "number") {
+      const key = subProps[j];
+      const value = item[key];
+      if (typeof value !== "number" || Number.isNaN(value)) {
         throw new Error(
-          "ReactGridLayout: " +
-            contextName +
-            "[" +
-            i +
-            "]." +
-            subProps[j] +
-            " must be a number!"
+          `ReactGridLayout: ${contextName}[${i}].${key} must be a number! Received: ${value} (${typeof value})`
         );
       }
     }
+    if (typeof item.i !== "undefined" && typeof item.i !== "string") {
+      throw new Error(
+        `ReactGridLayout: ${contextName}[${i}].i must be a string! Received: ${
+          item.i
+        } (${typeof item.i})`
+      );
+    }
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-grid-layout",
-  "version": "1.4.4",
+  "version": "1.5.1",
   "description": "A draggable and resizable grid layout with responsive breakpoints, for React.",
   "main": "index.js",
   "scripts": {