Merge pull request #10913 from NoHomey/patch-18

Adding a new type definition for react-sortable-hoc

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

@@ -0,0 +1,57 @@
+/// <reference path="../react/react-dom.d.ts" />
+/// <reference path="./react-sortable-hoc.d.ts" />
+
+import React = require('react');
+import ReactDOM = require('react-dom');
+import ReactSortableHOC = require('react-sortable-hoc');
+
+interface SortableItemProps {
+    value: string;
+}
+
+interface SortableListProps {
+    items: Array<string>;
+}
+
+type SortableComponentState = SortableListProps;
+
+class Item extends React.Component<SortableItemProps, void> {
+    public constructor(props: SortableItemProps) {
+        super(props);
+    }
+
+    public render(): JSX.Element {
+        return <li>{this.props.value}</li>;
+    }
+}
+
+const SortableItem = ReactSortableHOC.SortableElement(Item);
+
+const SortableList = ReactSortableHOC.SortableContainer((props: SortableListProps): JSX.Element => {
+    const items: Array<JSX.Element> = props.items.map((value: string, index: number): JSX.Element => {
+        return <SortableItem key={`item-${index}`} index={index} value={value} />;
+    });
+    return <ul>{items}</ul>;
+});
+
+class SortableComponent extends React.Component<void, SortableComponentState> {
+    private _onSortEnd: ReactSortableHOC.SortEndHandler;
+
+    private _handleSotEnd(sort: ReactSortableHOC.SortEnd, event: ReactSortableHOC.SortEvent): void {
+        this.setState({items: ReactSortableHOC.arrayMove(this.state.items, sort.oldIndex, sort.newIndex)});
+    }
+
+    public constructor() {
+        super();
+        this.state = { items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'] };
+        this._onSortEnd = this._handleSotEnd.bind(this);
+    }
+
+    public render(): JSX.Element {
+        return <SortableList items={this.state.items} onSortEnd={this._onSortEnd} />;
+    }
+}
+
+let bootstrapNode: HTMLDivElement = document.createElement('div');
+ReactDOM.render(<SortableComponent />, bootstrapNode);
+document.body.appendChild(bootstrapNode);

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

@@ -0,0 +1,75 @@
+// Type definitions for nes 0.0.7
+// Project: https://github.com/clauderic/react-sortable-hoc
+// Definitions by: Ivo Stratev <https://github.com/NoHomey>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+/// <reference path="../react/react.d.ts" />
+
+declare module 'react-sortable-hoc' {
+    import React = require('react');
+
+    export type Axis = 'x' | 'y';
+
+    export type Offset = number | string;
+
+    export interface SortStart {
+        node: React.ReactNode;
+        index: number;
+        collection: Offset;
+    }
+
+    export type SortEvent = React.MouseEvent | React.TouchEvent;
+
+    export type SortStartHandler = (sort: SortStart, event: SortEvent) => void;
+
+    export type SortMoveHandler = (event: SortEvent) => void;
+
+    export interface SortEnd {
+        oldIndex: number;
+        newIndex: number;
+        collection: Offset;
+    }
+
+    export type SortEndHandler = (sort: SortEnd, event: SortEvent) => void;
+
+    export type ContainerGetter = (element: React.ReactElement<any>) => HTMLElement;
+
+    export interface SortableContainerProps {
+        axis?: Axis;
+        lockAxis?: Axis;
+        helperClass?: string;
+        transitionDuration?: number;
+        pressDelay?: number;
+        onSortStart?: SortStartHandler;
+        onSortMove?: SortMoveHandler;
+        onSortEnd?: SortEndHandler;
+        useDragHandle?: boolean;
+        useWindowAsScrollContainer?: boolean;
+        hideSortableGhost?: boolean;
+        lockToContainerEdges?: boolean;
+        lockOffset?: Offset | [Offset, Offset];
+        getContainer?: ContainerGetter;
+    }
+
+    export interface SortableElementProps {
+        index: number;
+        collection?: Offset;
+        disabled?: boolean;
+    }
+
+    export interface Config {
+        withRef: boolean;
+    }
+
+    export type WrappedComponentFactory<P> = (props: P) => JSX.Element;
+
+    export type WrappedComponent<P> = React.ComponentClass<P> | WrappedComponentFactory<P>;
+
+    export function SortableContainer<P>(wrappedComponent: WrappedComponent<P>, config?: Config): React.ComponentClass<P & SortableContainerProps>;
+
+    export function SortableElement<P>(wrappedComponent: WrappedComponent<P>, config?: Config): React.ComponentClass<P & SortableElementProps>;
+
+    export function SortableHandle<P>(wrappedComponent: WrappedComponent<P>, config?: Config): React.ComponentClass<P>;
+
+    export function arrayMove<T>(collection: Array<T>, previousIndex: number, newIndex: number): Array<T>;
+}