Merge pull request #228 from PabloDiablo/master

Fixes #227 issue where onDragStop is fired on mouse move over pane

Author: bokuweb

.gitignore

@@ -5,4 +5,6 @@ build/
 src/*.js
 .rpt2_cache
 *.d.ts
-cypress/videos
+cypress/videos
+.idea
+.vscode

README.md

@@ -152,7 +152,7 @@ export default class SimpleControlledFullExample extends React.Component<{}, Sta
 | `onResize`           |          |<code>(e: MouseEvent &#124; TouchEvent, key: string, dir: PaneResizeDirection, elementRef: HTMLElement, delta: PaneSize) => void</code>| `undefined`          | It is called when `Pane` component resize.                                                                                                                           |
 | `onResizeStop`       |          |<code>(e: MouseEvent &#124; TouchEvent, key: string, dir: PaneResizeDirection, elementRef: HTMLElement, delta: PaneSize) => void</code>| `undefined`          | It is called when `Pane` component resize stop.                                                                                                                      |
 | `onDragStart`        |          |<code>(e: React.MouseEvent<HTMLElement> &#124; React.TouchEvent<HTMLElement>,  key: string, elementRef: HTMLElement) => void</code>    | `undefined`          | It is called when `Pane` component dragging starts.                                                                                                                  |
-| `onDragStop`         |          |<code>(e: MouseEvent &#124; TouchEvent, key: PaneKey, elementRef: HTMLElement) => void</code>                                          | `undefined`          | It is called when `Pane` component dragging stop.                                                                                                                    |
+| `onDragStop`         |          |<code>(e: MouseEvent &#124; TouchEvent, key: PaneKey, elementRef: HTMLElement, order: string[]) => void</code>                                          | `undefined`          | It is called when `Pane` component dragging stop.                                                                                                                    |
 
 ## PaneComponent
 

src/index.tsx

@@ -85,7 +85,7 @@ export type SortablePaneProps = {
     key: PaneKey,
     elementRef: HTMLElement,
   ) => void;
-  onDragStop?: (e: MouseEvent | TouchEvent, key: PaneKey, elementRef: HTMLElement) => void;
+  onDragStop?: (e: MouseEvent | TouchEvent, key: PaneKey, elementRef: HTMLElement, order: string[]) => void;
   onOrderChange?: (order: string[]) => void;
   className?: string;
   disableEffect?: boolean;
@@ -500,14 +500,16 @@ class SortablePane extends React.Component<SortablePaneProps, State> {
   handleMouseUp(e: MouseEvent | TouchEvent) {
     const children = this.props.children || [];
     if (children.length === 0) return;
+    const wasPressed = this.state.isPressed;
     this.setState({ isPressed: false, delta: 0 });
     const child = children[this.state.lastPressed];
     const lastPressedId = child.key;
     if (!this.props.isSortable) return;
-    if (this.props.onDragStop) {
+    const panes = this.state.panes;
+    if (this.props.onDragStop && wasPressed) {
       const c = this.panes.find(p => p.key === child.key);
       if (c && c.ref) {
-        this.props.onDragStop(e, child.key, c.ref as HTMLElement);
+        this.props.onDragStop(e, child.key, c.ref as HTMLElement, panes.map(p => String(p.key)));
       }
     }
   }

src/react-sortable-pane.es5.js.flow

@@ -17,7 +17,7 @@ export type SortablePaneProps = {
   onResizeStop?: (e: MouseEvent | TouchEvent, key: PaneKey, dir: PaneResizeDirection, elementRef: HTMLElement, delta: PaneSize) => void,
   onResizeStart?: (e: SyntheticMouseEvent<HTMLElement> | SyntheticTouchEvent<HTMLElement>, key: PaneKey, dir: PaneResizeDirection) => void,
   onDragStart?: (e: SyntheticMouseEvent<HTMLElement> | SyntheticTouchEvent<HTMLElement>, key: PaneKey, elementRef: HTMLElement) => void,
-  onDragStop?: (e: MouseEvent | TouchEvent, key: PaneKey, elementRef: HTMLElement) => void,
+  onDragStop?: (e: MouseEvent | TouchEvent, key: PaneKey, elementRef: HTMLElement, order: string[]) => void,
   onOrderChange?: (order: string[]) => void,
   className?: string,
   disableEffect?: boolean,