diff --git a/react-sortable-hoc/react-sortable-hoc-tests.tsx b/react-sortable-hoc/react-sortable-hoc-tests.tsx new file mode 100644 index 0000000000..9c382c4855 --- /dev/null +++ b/react-sortable-hoc/react-sortable-hoc-tests.tsx @@ -0,0 +1,57 @@ +/// +/// + +import React = require('react'); +import ReactDOM = require('react-dom'); +import ReactSortableHOC = require('react-sortable-hoc'); + +interface SortableItemProps { + value: string; +} + +interface SortableListProps { + items: Array; +} + +type SortableComponentState = SortableListProps; + +class Item extends React.Component { + public constructor(props: SortableItemProps) { + super(props); + } + + public render(): JSX.Element { + return
  • {this.props.value}
  • ; + } +} + +const SortableItem = ReactSortableHOC.SortableElement(Item); + +const SortableList = ReactSortableHOC.SortableContainer((props: SortableListProps): JSX.Element => { + const items: Array = props.items.map((value: string, index: number): JSX.Element => { + return ; + }); + return
      {items}
    ; +}); + +class SortableComponent extends React.Component { + 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 ; + } +} + +let bootstrapNode: HTMLDivElement = document.createElement('div'); +ReactDOM.render(, bootstrapNode); +document.body.appendChild(bootstrapNode); diff --git a/react-sortable-hoc/react-sortable-hoc.d.ts b/react-sortable-hoc/react-sortable-hoc.d.ts new file mode 100644 index 0000000000..a229eb6f43 --- /dev/null +++ b/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 +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +/// + +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) => 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

    = (props: P) => JSX.Element; + + export type WrappedComponent

    = React.ComponentClass

    | WrappedComponentFactory

    ; + + export function SortableContainer

    (wrappedComponent: WrappedComponent

    , config?: Config): React.ComponentClass

    ; + + export function SortableElement

    (wrappedComponent: WrappedComponent

    , config?: Config): React.ComponentClass

    ; + + export function SortableHandle

    (wrappedComponent: WrappedComponent

    , config?: Config): React.ComponentClass

    ; + + export function arrayMove(collection: Array, previousIndex: number, newIndex: number): Array; +}