react-grid-layout - npm Package Compare versions

Comparing version 0.7.0 to 0.7.1

build/GridItem.js

@@ -234,3 +234,3 @@ "use strict";
 
-      me.props[handlerName](me.props.i, x, y);
+      me.props[handlerName](me.props.i, x, y, { e: e, element: element, position: position });
     };
@@ -272,3 +272,3 @@ },
 
-      me.props[handlerName](me.props.i, w, h);
+      me.props[handlerName](me.props.i, w, h, { e: e, element: element, size: size });
     };
@@ -275,0 +275,0 @@ },

build/ReactGridLayout.js

@@ -77,4 +77,15 @@ "use strict";
     onLayoutChange: React.PropTypes.func,
+    // Calls when drag starts
+    onDragStart: React.PropTypes.func,
+    // Calls on each drag movement
+    onDrag: React.PropTypes.func,
+    // Calls when drag is complete
+    onDragStop: React.PropTypes.func,
+    //Calls when resize starts
+    onResizeStart: React.PropTypes.func,
+    // Calls when resize movement happens
+    onResize: React.PropTypes.func,
+    // Calls when resize is complete
+    onResizeStop: React.PropTypes.func,
 
-
     //
@@ -110,3 +121,9 @@ // Other validations
       useCSSTransforms: true,
-      onLayoutChange: function () {}
+      onLayoutChange: function () {},
+      onDragStart: function () {},
+      onDrag: function () {},
+      onDragStop: function () {},
+      onResizeStart: function () {},
+      onResize: function () {},
+      onResizeStop: function () {}
     };
@@ -173,8 +190,33 @@ },
 
-  onDragStart: function onDragStart(i, e, _ref) {
+  /**
+   * When dragging starts
+   * @param {Number} i Index of the child
+   * @param {Number} x X position of the move
+   * @param {Number} y Y position of the move
+   * @param {Event} e The mousedown event
+   * @param {Element} element The current dragging DOM element
+   * @param {Object} position Drag information
+   */
+  onDragStart: function onDragStart(i, x, y, _ref) {
+    var e = _ref.e;
     var element = _ref.element;
     var position = _ref.position;
+    var layout = this.state.layout;
+    var l = utils.getLayoutItem(layout, i);
+
+    this.props.onDragStart(layout, this.state.layout, l, null, { e: e, element: element, position: position });
   },
-
-  onDrag: function onDrag(i, x, y) {
+  /**
+   * Each drag movement create a new dragelement and move the element to the dragged location
+   * @param {Number} i Index of the child
+   * @param {Number} x X position of the move
+   * @param {Number} y Y position of the move
+   * @param {Event} e The mousedown event
+   * @param {Element} element The current dragging DOM element
+   * @param {Object} position Drag information   
+   */
+  onDrag: function onDrag(i, x, y, _ref2) {
+    var e = _ref2.e;
+    var element = _ref2.element;
+    var position = _ref2.position;
     var layout = this.state.layout;
@@ -191,2 +233,5 @@ var l = utils.getLayoutItem(layout, i);
 
+    this.props.onDrag(layout, this.state.layout, l, activeDrag, { e: e, element: element, position: position });
+
+
     this.setState({
@@ -201,5 +246,13 @@ layout: utils.compact(layout),
    * @param  {Number} i Index of the child.
-   * @param  {Event}  e DOM Event.
+   * @param {Number} i Index of the child
+   * @param {Number} x X position of the move
+   * @param {Number} y Y position of the move
+   * @param {Event} e The mousedown event
+   * @param {Element} element The current dragging DOM element
+   * @param {Object} position Drag information
    */
-  onDragStop: function onDragStop(i, x, y) {
+  onDragStop: function onDragStop(i, x, y, _ref3) {
+    var e = _ref3.e;
+    var element = _ref3.element;
+    var position = _ref3.position;
     var layout = this.state.layout;
@@ -210,2 +263,5 @@ var l = utils.getLayoutItem(layout, i);
     layout = utils.moveElement(layout, l, x, y, true /* isUserAction */);
+
+    this.props.onDragStop(layout, this.state.layout, l, null, { e: e, element: element, position: position });
+
     // Set state
@@ -215,6 +271,19 @@ this.setState({ layout: utils.compact(layout), activeDrag: null });
 
-  onResize: function onResize(i, w, h) {
+  onResizeStart: function onResizeStart(i, w, h, _ref4) {
+    var e = _ref4.e;
+    var element = _ref4.element;
+    var size = _ref4.size;
     var layout = this.state.layout;
     var l = utils.getLayoutItem(layout, i);
 
+    this.props.onResizeStart(layout, layout, l, null, { e: e, element: element, size: size });
+  },
+
+  onResize: function onResize(i, w, h, _ref5) {
+    var e = _ref5.e;
+    var element = _ref5.element;
+    var size = _ref5.size;
+    var layout = this.state.layout;
+    var l = utils.getLayoutItem(layout, i);
+
     // Set new width and height.
@@ -229,2 +298,4 @@ l.w = w;
 
+    this.props.onResize(layout, layout, l, activeDrag, { e: e, element: element, size: size });
+
     // Re-compact the layout and set the drag placeholder.
@@ -234,6 +305,12 @@ this.setState({ layout: utils.compact(layout), activeDrag: activeDrag });
 
-  onResizeStop: function onResizeStop(e, _ref2) {
-    var element = _ref2.element;
-    var position = _ref2.position;
-    this.setState({ activeDrag: null, layout: utils.compact(this.state.layout) });
+  onResizeStop: function onResizeStop(i, x, y, _ref6) {
+    var e = _ref6.e;
+    var element = _ref6.element;
+    var size = _ref6.size;
+    var layout = this.state.layout;
+    var l = utils.getLayoutItem(layout, i);
+
+    this.props.onResizeStop(layout, layout, l, null, { e: e, element: element, size: size });
+
+    this.setState({ activeDrag: null, layout: utils.compact(layout) });
   },
@@ -304,2 +381,3 @@
         onDrag: this.onDrag,
+        onResizeStart: this.onResizeStart,
         onResize: this.onResize,
@@ -332,3 +410,2 @@ onResizeStop: this.onResizeStop,
 
-module.exports = ReactGridLayout;
-// nothing
+module.exports = ReactGridLayout;

CHANGELOG.md

@@ -0,1 +1,6 @@
+0.7.1
+-----
+
+- Added callbacks for resize and drag start/active/stop.
+
 0.7.0
@@ -2,0 +7,0 @@ -----

package.json

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

README.md

@@ -186,2 +186,14 @@ # React-Grid-Layout
 onLayoutChange: React.PropTypes.func,
+// Calls when drag starts. Callback is of the signature (newLayout, oldLayout, layoutItem, placeholder, {e, element, position}.
+onDragStart: React.PropTypes.func,
+// Calls on each drag movement. Callback is of the signature (newLayout, oldLayout, layoutItem, placeholder, {e, element, position}.
+onDrag: React.PropTypes.func,
+// Calls when drag is complete. Callback is of the signature (newLayout, oldLayout, layoutItem, placeholder, {e, element, position}.
+onDragStop: React.PropTypes.func,
+//Calls when resize starts. Callback is of the signature (newLayout, oldLayout, layoutItem, placeholder, {e, element, size}.
+onResizeStart: React.PropTypes.func,
+// Calls when resize movement happens. Callback is of the signature (newLayout, oldLayout, layoutItem, placeholder, {e, element, size}.
+onResize: React.PropTypes.func,
+// Calls when resize is complete. Callback is of the signature (newLayout, oldLayout, layoutItem, placeholder, {e, element, size}.
+onResizeStop: React.PropTypes.func
 ```
@@ -188,0 +200,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

68090

increased by6.43%

Lines of code

1359

increased by5.35%

Number of lines in readme file

311

increased by4.01%

No dependency changes