react-grid-layout - npm Package Compare versions

Comparing version 0.8.2 to 0.8.3

build/ReactGridLayout.js

@@ -36,2 +36,5 @@ 'use strict';
 
+    // If true, the layout will compact vertically
+    verticalCompact: React.PropTypes.bool,
+
     // layout is an array of object with the format:
@@ -118,2 +121,3 @@ // {x: Number, y: Number, w: Number, h: Number}
       useCSSTransforms: true,
+      verticalCompact: true,
       onLayoutChange: function onLayoutChange() {},
@@ -133,3 +137,3 @@ onDragStart: function onDragStart() {},
       isMounted: false,
-      layout: utils.synchronizeLayoutWithChildren(this.props.layout, this.props.children, this.props.cols),
+      layout: utils.synchronizeLayoutWithChildren(this.props.layout, this.props.children, this.props.cols, this.props.verticalCompact),
       width: this.props.initialWidth
@@ -154,3 +158,3 @@ };
       this.setState({
-        layout: utils.synchronizeLayoutWithChildren(this.state.layout, nextProps.children, nextProps.cols)
+        layout: utils.synchronizeLayoutWithChildren(this.state.layout, nextProps.children, nextProps.cols, this.props.verticalCompact)
       });
@@ -162,3 +166,3 @@ }
       this.setState({
-        layout: utils.synchronizeLayoutWithChildren(nextProps.layout, nextProps.children, nextProps.cols)
+        layout: utils.synchronizeLayoutWithChildren(nextProps.layout, nextProps.children, nextProps.cols, this.props.verticalCompact)
       });
@@ -243,3 +247,3 @@ }
     this.setState({
-      layout: utils.compact(layout),
+      layout: utils.compact(layout, this.props.verticalCompact),
       activeDrag: placeholder
@@ -274,3 +278,3 @@ });
     // Set state
-    this.setState({ layout: utils.compact(layout), activeDrag: null });
+    this.setState({ layout: utils.compact(layout, this.props.verticalCompact), activeDrag: null });
   },
@@ -311,3 +315,3 @@
     // Re-compact the layout and set the drag placeholder.
-    this.setState({ layout: utils.compact(layout), activeDrag: placeholder });
+    this.setState({ layout: utils.compact(layout, this.props.verticalCompact), activeDrag: placeholder });
   },
@@ -326,3 +330,3 @@
 
-    this.setState({ activeDrag: null, layout: utils.compact(layout) });
+    this.setState({ activeDrag: null, layout: utils.compact(layout, this.props.verticalCompact) });
   },
@@ -329,0 +333,0 @@

build/ResponsiveReactGridLayout.js

@@ -76,3 +76,3 @@ 'use strict';
     // for this layout.
-    var initialLayout = responsiveUtils.findOrGenerateResponsiveLayout(this.props.layouts, this.props.breakpoints, breakpoint, breakpoint, cols);
+    var initialLayout = responsiveUtils.findOrGenerateResponsiveLayout(this.props.layouts, this.props.breakpoints, breakpoint, breakpoint, cols, this.props.verticalCompact);
 
@@ -103,3 +103,3 @@ return {
       // if one does not exist.
-      var newLayout = responsiveUtils.findOrGenerateResponsiveLayout(nextProps.layouts, nextProps.breakpoints, this.state.breakpoint, this.state.breakpoint, this.state.cols);
+      var newLayout = responsiveUtils.findOrGenerateResponsiveLayout(nextProps.layouts, nextProps.breakpoints, this.state.breakpoint, this.state.breakpoint, this.state.cols, this.props.verticalLayout);
 
@@ -141,6 +141,6 @@ this.setState({
       // Find or generate a new one.
-      newState.layout = responsiveUtils.findOrGenerateResponsiveLayout(newState.layouts, this.props.breakpoints, newState.breakpoint, this.state.breakpoint, newState.cols);
+      newState.layout = responsiveUtils.findOrGenerateResponsiveLayout(newState.layouts, this.props.breakpoints, newState.breakpoint, this.state.breakpoint, newState.cols, this.props.verticalLayout);
 
       // This adds missing items.
-      newState.layout = utils.synchronizeLayoutWithChildren(newState.layout, this.props.children, newState.cols);
+      newState.layout = utils.synchronizeLayoutWithChildren(newState.layout, this.props.children, newState.cols, this.props.verticalCompact);
 
@@ -147,0 +147,0 @@ // Store this new layout as well.

build/responsiveUtils.js

@@ -47,5 +47,7 @@ 'use strict';
    * @param  {Number} cols       Column count at new breakpoint.
+   * @param  {Boolean} verticalCompact Whether or not to compact the layout
+   *   vertically.
    * @return {Array}             New layout.
    */
-  findOrGenerateResponsiveLayout: function findOrGenerateResponsiveLayout(layouts, breakpoints, breakpoint, lastBreakpoint, cols) {
+  findOrGenerateResponsiveLayout: function findOrGenerateResponsiveLayout(layouts, breakpoints, breakpoint, lastBreakpoint, cols, verticalCompact) {
     // If it already exists, just return it.
@@ -66,3 +68,3 @@ if (layouts[breakpoint]) {
     layout = JSON.parse(JSON.stringify(layout || [])); // clone layout so we don't modify existing items
-    return utils.compact(utils.correctBounds(layout, { cols: cols }));
+    return utils.compact(utils.correctBounds(layout, { cols: cols }), verticalCompact);
   },
@@ -69,0 +71,0 @@

build/utils.js

@@ -63,5 +63,7 @@ 'use strict';
    * @param  {Array} layout Layout.
+   * @param  {Boolean} verticalCompact Whether or not to compact the layout
+   *   vertically.
    * @return {Array}       Compacted Layout.
    */
-  compact: function compact(layout) {
+  compact: function compact(layout, verticalCompact) {
     // Statics go in the compareWith array right away so items flow around them.
@@ -78,3 +80,3 @@ var compareWith = utils.getStatics(layout),
       if (!l['static']) {
-        l = utils.compactItem(compareWith, l);
+        l = utils.compactItem(compareWith, l, verticalCompact);
 
@@ -96,6 +98,8 @@ // Add to comparison array. We only collide with items before this one.
 
-  compactItem: function compactItem(compareWith, l) {
-    // Move the element up as far as it can go without colliding.
-    while (l.y > 0 && !utils.getFirstCollision(compareWith, l)) {
-      l.y--;
+  compactItem: function compactItem(compareWith, l, verticalCompact) {
+    if (verticalCompact) {
+      // Move the element up as far as it can go without colliding.
+      while (l.y > 0 && !utils.getFirstCollision(compareWith, l)) {
+        l.y--;
+      }
     }
@@ -321,5 +325,7 @@
    * @param  {String} breakpoint    Current responsive breakpoint.
+   * @param  {Boolean} verticalCompact Whether or not to compact the layout
+   *   vertically.
    * @return {Array}                Working layout.
    */
-  synchronizeLayoutWithChildren: function synchronizeLayoutWithChildren(initialLayout, children, cols) {
+  synchronizeLayoutWithChildren: function synchronizeLayoutWithChildren(initialLayout, children, cols, verticalCompact) {
     // ensure 'children' is always an array
@@ -349,3 +355,7 @@ if (!Array.isArray(children)) {
         // This allows you to do nice stuff like specify {y: Infinity}
-        layout.push(assign({}, g, { y: Math.min(utils.bottom(layout), g.y), i: child.key }));
+        if (verticalCompact) {
+          layout.push(assign({}, g, { y: Math.min(utils.bottom(layout), g.y), i: child.key }));
+        } else {
+          layout.push(assign({}, g, { y: g.y, i: child.key }));
+        }
       } else {
@@ -359,3 +369,3 @@ // Nothing provided: ensure this is added to the bottom
     layout = utils.correctBounds(layout, { cols: cols });
-    layout = utils.compact(layout);
+    layout = utils.compact(layout, verticalCompact);
 
@@ -362,0 +372,0 @@ return layout;

package.json

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

README.md

@@ -43,2 +43,3 @@ # React-Grid-Layout
 1. [Dynamic Minimum and Maximum Width/Height](https://strml.github.io/react-grid-layout/examples/10-dynamic-min-max-wh.html)
+1. [No Vertical Compacting (Free Movement)](https://strml.github.io/react-grid-layout/examples/11-no-vertical-compact.html)
 
@@ -157,2 +158,5 @@ #### Features
 
+// If true, the layout will compact vertically
+draggableHandle: React.PropTypes.string,
+
 // Layout is an array of object with the format:
@@ -308,3 +312,4 @@ // {x: Number, y: Number, w: Number, h: Number}
   useCSSTransforms: true,
-  listenToWindowResize: true
+  listenToWindowResize: true,
+  verticalCompact: true
 }
@@ -311,0 +316,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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

72662

increased by1.73%

Lines of code

1454

increased by1.04%

Number of lines in readme file

330

increased by1.54%

No dependency changes