Merge pull request #43 from IanVS/add-drag-callbacks

Add drag callbacks

Author: bokuweb

README.md

@@ -152,8 +152,8 @@ Calls back with (`id: number or string`, `direction: string`)
 
 #### `onResize`: PropTypes.func
 
-Calls when Pane component resize.
-Calls back with (`id: number or string`, `direction: string`, `coputedSize: object`, `clientSize: object`)
+Calls when Pane component resizes.
+Calls back with (`id: number or string`, `direction: string`, `computedSize: object`, `clientSize: object`)
 
 - id: pane id
 - direction: `x` or `y` or `xy`
@@ -166,8 +166,8 @@ For example, when `<Resizable width={100} height={200} style={{ padding: '20px'}
 
 #### `onResizeStop`: PropTypes.func
 
-Calls when Pane component resizeStop.
-Calls back with (`id: number or string`, `direction: string`, `coputedSize: object`, `clientSize: object`)
+Calls when Pane component resize stops.
+Calls back with (`id: number or string`, `direction: string`, `computedSize: object`, `clientSize: object`)
 
 - id: pane id
 - direction: `x` or `y` or `xy`
@@ -178,19 +178,35 @@ Calls back with (`id: number or string`, `direction: string`, `coputedSize: obje
 
 For example, when `<Resizable width={100} height={200} style={{ padding: '20px'}} onResize={...} />` mounted and resize 'x', this callback is called with `('x', { width: 100, height: 200 }, { width: 140, height: 240 })`
 
+#### `onDragStart`: PropTypes.function
+
+Calls when a Pane component is clicked (e.g. to sort it). It will not be executed if `isSortable` is `false`.
+Calls back with (`id: number or string`)
+
+- id: pane id
+
+#### `onDragEnd`: PropTypes.function
+
+Calls when a Pane component is released (finished sorting). It will not be executed if `isSortable` is `false`.
+Calls back with (`id: number or string`)
+
+- id: pane id
+
 ## Pane Component
 
 #### `id`: PropTypes.oneOfType([PropTypes.string, PropTypes.number ]).isRequired
 
 The `id` property is used to Pane component id.
 
-#### `width`: PropTypes.number
+#### `width`: oneOfType([PropTypes.number, PropTypes.string])
 
 The `width` property is used to set the width of a Pane component.
+For example, it can be 300, '300px', or 50%.
 
-#### `height`: PropTypes.number
+#### `height`: oneOfType([PropTypes.number, PropTypes.string])
 
 The `height` property is used to set the width of a Pane component.
+For example, it can be 300, '300px', or 50%.
 
 #### `minWidth`: PropTypes.number
 
@@ -208,6 +224,16 @@ The `maxWidth` property is used to set the maximum width of a Pane component.
 
 The `maxHeight` property is used to set the maximum height of a Pane component.
 
+#### `onDragStart`: PropTypes.function
+
+If provided, an `onDragStart` function will be executed when the mouse is pressed
+down on the pane to drag it.  It will not be executed if `isSortable` is `false`.
+
+#### `onDragEnd`: PropTypes.function
+
+If provided, an `onDragEnd` function will be executed when the mouse is released
+after clicking a pane.  It will not be executed if `isSortable` is `false`.
+
 #### `className`: PropTypes.string
 
 The `className` property is used to set the css class name of a Pane component.

src/index.js

@@ -26,9 +26,11 @@ class SortablePane extends Component {
     onResizeStart: PropTypes.func,
     onResize: PropTypes.func,
     onResizeStop: PropTypes.func,
-    disableEffect: PropTypes.bool,
+    onDragStart: PropTypes.func,
+    onDragEnd: PropTypes.func,
     onOrderChange: PropTypes.func,
     className: PropTypes.string,
+    disableEffect: PropTypes.bool,
     isResizable: PropTypes.shape({
       x: React.PropTypes.bool,
       y: React.PropTypes.bool,
@@ -46,6 +48,8 @@ class SortablePane extends Component {
     onResizeStart: () => null,
     onResize: () => null,
     onResizeStop: () => null,
+    onDragStart: () => null,
+    onDragEnd: () => null,
     onOrderChange: () => null,
     customStyle: {},
     className: '',
@@ -310,6 +314,8 @@ class SortablePane extends Component {
       isPressed: true,
       lastPressed: pos,
     });
+    this.props.children[pos].props.onDragStart();
+    this.props.onDragStart(this.props.children[pos].props.id);
   }
 
   handleMouseMove({ pageX, pageY }) {
@@ -338,6 +344,9 @@ class SortablePane extends Component {
 
   handleMouseUp() {
     this.setState({ isPressed: false, delta: 0 });
+    this.props.children[this.state.lastPressed].props.onDragEnd();
+    const lastPressedId = this.props.children[this.state.lastPressed].props.id;
+    this.props.onDragEnd(lastPressedId);
   }
 
   renderPanes() {

src/pane.js

@@ -3,21 +3,31 @@ import React, { Component, PropTypes } from 'react';
 export default class Pane extends Component {
   static propTypes = {
     id: PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.number,
+      PropTypes.string,
+      PropTypes.number,
     ]).isRequired,
-    width: PropTypes.number,
-    height: PropTypes.number,
+    width: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.string,
+    ]),
+    height: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.string,
+    ]),
     minWidth: PropTypes.number,
     maxWidth: PropTypes.number,
     minHeight: PropTypes.number,
     maxHeight: PropTypes.number,
+    onDragStart: PropTypes.func,
+    onDragEnd: PropTypes.func,
     style: PropTypes.object,
     className: PropTypes.string,
     children: PropTypes.any,
   };
 
   static defaultProps = {
+    onDragStart: () => null,
+    onDragEnd: () => null,
     style: {},
     className: '',
   };
@@ -28,4 +38,3 @@ export default class Pane extends Component {
     );
   }
 }
-