react-grid-layout 0.17.0 → 0.17.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+0.17.1 (Oct 29, 2019)
+----
+
+### Bugfixes
+
+- Surround `navigator` check in `try/catch` to avoid problems with mocked navigators [#1057](https://github.com/STRML/react-grid-layout/pull/1054)
+- TransformScale is not applied properly while dragging an element [#1046](https://github.com/STRML/react-grid-layout/pull/1054)
+
 0.17.0 (Oct 24, 2019)
 ----
 
@@ -9,7 +17,7 @@ Thanks to @daynin and @n1ghtmare for taking an active role in maintaining RGL, a
 
 ### New Features
 
-- Added ability to drag items into the grid from outside. [#980](https://github.com/STRML/react-grid-layout/pull/980). See [the example](https://strml.github.io/react-grid-layout/examples/15-drag-from-outside.html). 
+- Added ability to drag items into the grid from outside. [#980](https://github.com/STRML/react-grid-layout/pull/980). See [the example](https://strml.github.io/react-grid-layout/examples/15-drag-from-outside.html).
   - This is especially exciting as it opens up new "widget toolbox" use cases such as [Example 14](https://strml.github.io/react-grid-layout/examples/14-toolbox.html) with more intuitive interaction. Thanks @daynin.
 - `transformScale` prop [#987](https://github.com/STRML/react-grid-layout/pull/987)
 - `<ResponsiveReactGridLayout>` now supports margin-per-breakpoint [#1016](https://github.com/STRML/react-grid-layout/pull/1016)

package/build/GridItem.js

@@ -450,7 +450,8 @@ function (_React$Component) {
         onDrag: this.onDrag,
         onStop: this.onDragStop,
         handle: this.props.handle,
-        cancel: ".react-resizable-handle" + (this.props.cancel ? "," + this.props.cancel : "")
+        cancel: ".react-resizable-handle" + (this.props.cancel ? "," + this.props.cancel : ""),
+        scale: this.props.transformScale
       }, child);
     }
     /**

package/build/ReactGridLayout.js

@@ -65,11 +65,18 @@ var compactType = function compactType(props
 };
 
 var layoutClassName = "react-grid-layout";
-var isFirefox = navigator.userAgent.toLowerCase().includes("firefox");
+var isFirefox = false; // Try...catch will protect from navigator not existing (e.g. node) or a bad implementation of navigator
+
+try {
+  isFirefox = navigator.userAgent.toLowerCase().includes("firefox");
+} catch (e) {}
+/* Ignore */
+
 /**
  * A reactive, fluid grid layout with draggable, resizable components.
  */
 
+
 var ReactGridLayout =
 /*#__PURE__*/
 function (_React$Component) {

package/lib/GridItem.jsx

@@ -248,17 +248,19 @@ export default class GridItem extends React.Component<Props, State> {
     if (state && state.resizing) {
       out.width = Math.round(state.resizing.width);
       out.height = Math.round(state.resizing.height);
-    } 
+    }
     // Otherwise, calculate from grid units.
     else {
       // 0 * Infinity === NaN, which causes problems with resize constraints;
       // Fix this if it occurs.
       // Note we do it here rather than later because Math.round(Infinity) causes deopt
-      out.width = w === Infinity
+      out.width =
+        w === Infinity
           ? w
           : Math.round(colWidth * w + Math.max(0, w - 1) * margin[0]);
-      out.height = h === Infinity
-          ? h 
+      out.height =
+        h === Infinity
+          ? h
           : Math.round(rowHeight * h + Math.max(0, h - 1) * margin[1]);
     }
 
@@ -266,7 +268,7 @@ export default class GridItem extends React.Component<Props, State> {
     if (state && state.dragging) {
       out.top = Math.round(state.dragging.top);
       out.left = Math.round(state.dragging.left);
-    } 
+    }
     // Otherwise, calculate from grid units.
     else {
       out.top = Math.round((rowHeight + margin[1]) * y + containerPadding[1]);
@@ -378,6 +380,7 @@ export default class GridItem extends React.Component<Props, State> {
           ".react-resizable-handle" +
           (this.props.cancel ? "," + this.props.cancel : "")
         }
+        scale={this.props.transformScale}
       >
         {child}
       </DraggableCore>

package/lib/ReactGridLayout.jsx

@@ -97,7 +97,13 @@ const compactType = (props: Props): CompactType => {
 };
 
 const layoutClassName = "react-grid-layout";
-const isFirefox = navigator.userAgent.toLowerCase().includes("firefox");
+let isFirefox = false;
+// Try...catch will protect from navigator not existing (e.g. node) or a bad implementation of navigator
+try {
+  isFirefox = navigator.userAgent.toLowerCase().includes("firefox");
+} catch (e) {
+  /* Ignore */
+}
 
 /**
  * A reactive, fluid grid layout with draggable, resizable components.

package/package.json

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