Add onDragStart and onDragEnd props

Author: IanVS

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,6 +178,20 @@ 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
@@ -210,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(pos);
   }
 
   handleMouseMove({ pageX, pageY }) {
@@ -338,6 +344,8 @@ class SortablePane extends Component {
 
   handleMouseUp() {
     this.setState({ isPressed: false, delta: 0 });
+    this.props.children[this.state.lastPressed].props.onDragEnd();
+    this.props.onDragEnd(this.state.lastPressed);
   }
 
   renderPanes() {

src/pane.js

@@ -18,12 +18,16 @@ export default class Pane extends Component {
     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: '',
   };