Merge pull request #17504 from mhanders/react-sortable-hoc-update

[react-sortable-hoc] Update typings to 0.6.3

types/react-sortable-hoc/index.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for nes 0.0.7
+// Type definitions for nes 0.6.3
 // Project: https://github.com/clauderic/react-sortable-hoc
 // Definitions by: Ivo Stratev <https://github.com/NoHomey>, Charles Rey <https://github.com/charlesrey>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
@@ -33,12 +33,20 @@ declare module 'react-sortable-hoc' {
 
     export type ContainerGetter = (element: React.ReactElement<any>) => HTMLElement;
 
+    export interface Dimensions {
+        width: number;
+        height: number;
+    }
+
     export interface SortableContainerProps {
         axis?: Axis;
         lockAxis?: Axis;
         helperClass?: string;
         transitionDuration?: number;
         pressDelay?: number;
+        pressThreshold?: number;
+        distance?: number;
+        shouldCancelStart?: (event: SortEvent) => boolean;
         onSortStart?: SortStartHandler;
         onSortMove?: SortMoveHandler;
         onSortEnd?: SortEndHandler;
@@ -48,7 +56,7 @@ declare module 'react-sortable-hoc' {
         lockToContainerEdges?: boolean;
         lockOffset?: Offset | [Offset, Offset];
         getContainer?: ContainerGetter;
-        shouldCancelStart?: (event: SortEvent) => boolean;
+        getHelperDimensions?: (sort: SortStart) => Dimensions;
     }
 
     export interface SortableElementProps {

types/react-sortable-hoc/react-sortable-hoc-tests.tsx

@@ -35,21 +35,38 @@ const SortableList = ReactSortableHOC.SortableContainer((props: SortableListProp
 class SortableComponent extends React.Component<{}, SortableComponentState> {
     private _onSortEnd: ReactSortableHOC.SortEndHandler;
 
-    private _handleSotEnd(sort: ReactSortableHOC.SortEnd, event: ReactSortableHOC.SortEvent): void {
+    private _handleSortEnd(sort: ReactSortableHOC.SortEnd, event: ReactSortableHOC.SortEvent): void {
         this.setState({items: ReactSortableHOC.arrayMove(this.state.items, sort.oldIndex, sort.newIndex)});
     }
 
+    private _getHelperDimensions(sort: ReactSortableHOC.SortStart): ReactSortableHOC.Dimensions {
+        if (sort.node instanceof HTMLElement) {
+            return ({
+                width: sort.node.offsetWidth,
+                height: sort.node.offsetHeight
+            });
+        }
+        return {width: 0, height: 0};
+    }
+
     public constructor() {
         super();
         this.state = {
             items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
             axis: 'x'
         };
-        this._onSortEnd = this._handleSotEnd.bind(this);
+        this._onSortEnd = this._handleSortEnd.bind(this);
     }
 
     public render(): JSX.Element {
-        return <SortableList items={this.state.items} axis={this.state.axis} onSortEnd={this._onSortEnd} />;
+        return <SortableList
+            items={this.state.items}
+            axis={this.state.axis}
+            pressThreshold={5}
+            distance={100}
+            onSortEnd={this._onSortEnd}
+            getHelperDimensions={this._getHelperDimensions}
+        />;
     }
 }