react-grid-layout - npm Package Compare versions

Comparing version 0.5.2 to 0.6.0

build/GridItem.js

@@ -63,2 +63,5 @@ "use strict";
     isResizable: React.PropTypes.bool,
+    // Use CSS transforms instead of top/left
+    useCSSTransforms: React.PropTypes.bool,
+    isPlaceholder: React.PropTypes.bool,
 
@@ -75,2 +78,3 @@ // Others
       isResizable: true,
+      useCSSTransforms: true,
       className: "",
@@ -164,3 +168,4 @@ minH: 1,
       handle: this.props.handle,
-      cancel: ".react-resizable-handle"
+      cancel: ".react-resizable-handle",
+      useCSSTransforms: this.props.useCSSTransforms && this.isMounted()
     }, child);
@@ -275,2 +280,4 @@ },
         height: pos.height + "px",
+        left: pos.left + "px",
+        top: pos.top + "px",
         position: "absolute"
@@ -280,5 +287,14 @@ }
 
-    // If we're not mounted yet, use percentages; otherwise items won't fit the window properly
-    // because this.props.width hasn't actually been populated with a real value
-    if (!this.isMounted()) {
+    // CSS Transforms support
+    // No CSS Transforms on server rendering, b/c we can't do percentages with CSS Translate(),
+    // it inexplicably is % of the element's size, not the parent's size.
+    if (process.browser && this.props.useCSSTransforms) {
+      utils.setTransform(child.props.style, [pos.left, pos.top]);
+      delete child.props.style.left;
+      delete child.props.style.top;
+    }
+
+    // Server rendering support. Use percentages in case the user viewport is different than the
+    // server viewport (which is pretty much guaranteed)
+    if (!process.browser) {
       pos.left = utils.perc(pos.left / p.containerWidth);
@@ -297,6 +313,2 @@ child.props.style.width = utils.perc(pos.width / p.containerWidth);
     }
-    // Place the element directly if draggability is turned off.
-    else {
-      child.props.style.left = pos.left, child.props.style.top = pos.top;
-    }
 
@@ -303,0 +315,0 @@ return child;

build/ReactGridLayout.js

@@ -63,2 +63,4 @@ "use strict";
     isResizable: React.PropTypes.bool,
+    // Use CSS transforms instead of top/left
+    useCSSTransforms: React.PropTypes.bool,
 
@@ -104,2 +106,3 @@ //
       isResizable: true,
+      useCSSTransforms: true,
       onLayoutChange: function () {}
@@ -242,3 +245,3 @@ };
       i: this.state.activeDrag.i,
-      placeholder: true,
+      isPlaceholder: true,
       className: "react-grid-placeholder",
@@ -250,3 +253,4 @@ containerWidth: this.state.width,
       isDraggable: false,
-      isResizable: false
+      isResizable: false,
+      useCSSTransforms: this.props.useCSSTransforms
     }, React.createElement("div", null));
@@ -282,3 +286,4 @@ },
       isDraggable: l["static"] ? false : this.props.isDraggable,
-      isResizable: l["static"] ? false : this.props.isResizable
+      isResizable: l["static"] ? false : this.props.isResizable,
+      useCSSTransforms: this.props.useCSSTransforms
     }), child);
@@ -285,0 +290,0 @@ },

build/ResponsiveReactGridLayout.js

@@ -34,2 +34,6 @@ "use strict";
 
+    // Optional, but if you are managing width yourself you may want to set the breakpoint
+    // yourself as well.
+    breakpoint: React.PropTypes.string,
+
     // {name: pxVal}, e.g. {lg: 1200, md: 996, sm: 768, xs: 480}
@@ -75,3 +79,3 @@ breakpoints: React.PropTypes.object,
   getInitialState: function () {
-    var breakpoint = responsiveUtils.getBreakpointFromWidth(this.props.breakpoints, this.props.initialWidth);
+    var breakpoint = this.props.breakpoint || responsiveUtils.getBreakpointFromWidth(this.props.breakpoints, this.props.initialWidth);
     var cols = responsiveUtils.getColsFromBreakpoint(breakpoint, this.props.cols);
@@ -98,2 +102,7 @@
 
+    // Allow parent to set breakpoint directly.
+    if (nextProps.breakpoint !== this.props.breakpoint) {
+      this.onWidthChange(this.state.width);
+    }
+
     // Allow parent to set layouts directly.
@@ -127,3 +136,3 @@ if (nextProps.layouts && nextProps.layouts !== this.state.layouts) {
     var newState = { width: width };
-    newState.breakpoint = responsiveUtils.getBreakpointFromWidth(this.props.breakpoints, newState.width);
+    newState.breakpoint = this.props.breakpoint || responsiveUtils.getBreakpointFromWidth(this.props.breakpoints, newState.width);
     newState.cols = responsiveUtils.getColsFromBreakpoint(newState.breakpoint, this.props.cols);
@@ -130,0 +139,0 @@

build/utils.js

@@ -257,2 +257,14 @@ "use strict";
 
+  setTransform: function (style, coords) {
+    // Replace unitless items with px
+    var x = ("" + coords[0]).replace(/(\d)$/, "$1px");
+    var y = ("" + coords[1]).replace(/(\d)$/, "$1px");
+    style.transform = "translate(" + x + "," + y + ")";
+    style.WebkitTransform = "translate(" + x + "," + y + ")";
+    style.MozTransform = "translate(" + x + "," + y + ")";
+    style.msTransform = "translate(" + x + "," + y + ")";
+    style.OTransform = "translate(" + x + "," + y + ")";
+    return style;
+  },
+
   /**
@@ -259,0 +271,0 @@ * Get layout items sorted from top left to right and down.

package.json

 {
   "name": "react-grid-layout",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "A draggable and resizable grid layout with responsive breakpoints, for React.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -57,2 +57,4 @@ # React-Grid-Layout
 * Separate layouts per responsive breakpoint
+* Grid Items placed using CSS Transforms 
+  * Performance: [on](http://i.imgur.com/FTogpLp.jpg) / [off](http://i.imgur.com/gOveMm8.jpg), note paint (green) as % of time
 
@@ -167,2 +169,4 @@ #### Usage
 isResizable: React.PropTypes.bool,
+// Uses CSS3 translate() instead of position top/left, about 6x faster paint performance
+useCSSTransforms: React.PropTypes.bool,
 
@@ -254,2 +258,3 @@ // If false, you should supply width yourself. Good if you want to debounce resize events
   isResizable: true,
+  useCSSTransforms: true,
   listenToWindowResize: true
@@ -256,0 +261,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

58885

increased by3.43%

Lines of code

1247

increased by2.8%

Number of lines in readme file

276

increased by1.85%

No dependency changes