From 32d6b2171c0a2e911efce247a9960c2bc97e7465 Mon Sep 17 00:00:00 2001
From: Ivo Stratev <ivo.stratev.tues@gmail.com>
Date: Tue, 30 Aug 2016 17:10:37 +0300
Subject: [PATCH] Create react-sortable-hoc-tests.tsx

---
 react-sortable-hoc-tests.tsx | 57 ++++++++++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 react-sortable-hoc-tests.tsx

diff --git a/react-sortable-hoc-tests.tsx b/react-sortable-hoc-tests.tsx
new file mode 100644
index 0000000000..832b42df1d
--- /dev/null
+++ b/react-sortable-hoc-tests.tsx
@@ -0,0 +1,57 @@
+/// <reference path="./react-sortable-hoc.d.ts" />
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { SortableElement, SortableContainer, SortEndHandler, SortEnd, SortEvent, arrayMove } from '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 = SortableElement(Item);
+
+const SortableList = 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: SortEndHandler;
+
+    private _handleSotEnd(sort: SortEnd, event: SortEvent): void {
+        this.setState({items: 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);