From c2ef82f1afe510e5be25d6f59745743c4ef5d2b1 Mon Sep 17 00:00:00 2001 From: Ivo Stratev Date: Tue, 30 Aug 2016 17:07:54 +0300 Subject: [PATCH 01/10] Create react-sortable-hoc.d.ts --- react-sortable-hoc/react-sortable-hoc.d.ts | 76 ++++++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 react-sortable-hoc/react-sortable-hoc.d.ts 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..37c694f929 --- /dev/null +++ b/react-sortable-hoc/react-sortable-hoc.d.ts @@ -0,0 +1,76 @@ +// 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 * as React from '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; +} From 32d6b2171c0a2e911efce247a9960c2bc97e7465 Mon Sep 17 00:00:00 2001 From: Ivo Stratev Date: Tue, 30 Aug 2016 17:10:37 +0300 Subject: [PATCH 02/10] 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 @@ +/// + +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; +} + +type SortableComponentState = SortableListProps; + +class Item extends React.Component { + public constructor(props: SortableItemProps) { + super(props); + } + + public render(): JSX.Element { + return

  • {this.props.value}
    • ; + } +} + +const SortableItem = SortableElement(Item); + +const SortableList = 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: 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 ; + } +} + +let bootstrapNode: HTMLDivElement = document.createElement('div'); +ReactDOM.render(, bootstrapNode); +document.body.appendChild(bootstrapNode); From 58fe7e55d554eba45559384932b082198892b160 Mon Sep 17 00:00:00 2001 From: Ivo Stratev Date: Tue, 30 Aug 2016 17:23:46 +0300 Subject: [PATCH 03/10] Update react-sortable-hoc.d.ts --- react-sortable-hoc/react-sortable-hoc.d.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/react-sortable-hoc/react-sortable-hoc.d.ts b/react-sortable-hoc/react-sortable-hoc.d.ts index 37c694f929..0c73627e76 100644 --- a/react-sortable-hoc/react-sortable-hoc.d.ts +++ b/react-sortable-hoc/react-sortable-hoc.d.ts @@ -4,10 +4,9 @@ // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped /// -/// declare module 'react-sortable-hoc' { - import * as React from 'react'; + const React = require('react'); export type Axis = 'x' | 'y'; From 18a2be294d787ceaa8d414e16191e5b49d5b9d3d Mon Sep 17 00:00:00 2001 From: Ivo Stratev Date: Tue, 30 Aug 2016 17:26:35 +0300 Subject: [PATCH 04/10] Create react-sortable-hoc.tsx --- react-sortable-hoc/react-sortable-hoc.tsx | 57 +++++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 react-sortable-hoc/react-sortable-hoc.tsx diff --git a/react-sortable-hoc/react-sortable-hoc.tsx b/react-sortable-hoc/react-sortable-hoc.tsx new file mode 100644 index 0000000000..f6b86ec4f4 --- /dev/null +++ b/react-sortable-hoc/react-sortable-hoc.tsx @@ -0,0 +1,57 @@ +/// +/// + +const React = require('react'); +const ReactDOM = require('react-dom'); +const { SortableElement, SortableContainer, SortEndHandler, SortEnd, SortEvent, arrayMove } = 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 = SortableElement(Item); + +const SortableList = 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: 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 ; + } +} + +let bootstrapNode: HTMLDivElement = document.createElement('div'); +ReactDOM.render(, bootstrapNode); +document.body.appendChild(bootstrapNode); From e2bc84dc3b025ff7543d97c3fece4a5d9b43cf23 Mon Sep 17 00:00:00 2001 From: Ivo Stratev Date: Tue, 30 Aug 2016 17:27:15 +0300 Subject: [PATCH 05/10] Delete react-sortable-hoc-tests.tsx --- react-sortable-hoc-tests.tsx | 57 ------------------------------------ 1 file changed, 57 deletions(-) delete mode 100644 react-sortable-hoc-tests.tsx diff --git a/react-sortable-hoc-tests.tsx b/react-sortable-hoc-tests.tsx deleted file mode 100644 index 832b42df1d..0000000000 --- a/react-sortable-hoc-tests.tsx +++ /dev/null @@ -1,57 +0,0 @@ -/// - -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; -} - -type SortableComponentState = SortableListProps; - -class Item extends React.Component { - public constructor(props: SortableItemProps) { - super(props); - } - - public render(): JSX.Element { - return
  • {this.props.value}
    • ; - } -} - -const SortableItem = SortableElement(Item); - -const SortableList = 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: 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 ; - } -} - -let bootstrapNode: HTMLDivElement = document.createElement('div'); -ReactDOM.render(, bootstrapNode); -document.body.appendChild(bootstrapNode); From 3fe8eac6fa3c3c29ea1faac50ec8ad509771d490 Mon Sep 17 00:00:00 2001 From: Ivo Stratev Date: Tue, 30 Aug 2016 17:27:37 +0300 Subject: [PATCH 06/10] Rename react-sortable-hoc.tsx to react-sortable-hoc-tests.tsx --- .../{react-sortable-hoc.tsx => react-sortable-hoc-tests.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename react-sortable-hoc/{react-sortable-hoc.tsx => react-sortable-hoc-tests.tsx} (100%) diff --git a/react-sortable-hoc/react-sortable-hoc.tsx b/react-sortable-hoc/react-sortable-hoc-tests.tsx similarity index 100% rename from react-sortable-hoc/react-sortable-hoc.tsx rename to react-sortable-hoc/react-sortable-hoc-tests.tsx From 80cea0f9fab00642a12a2a9caf6496b509d1accd Mon Sep 17 00:00:00 2001 From: Ivo Stratev Date: Tue, 30 Aug 2016 17:32:33 +0300 Subject: [PATCH 07/10] Update react-sortable-hoc.d.ts --- react-sortable-hoc/react-sortable-hoc.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react-sortable-hoc/react-sortable-hoc.d.ts b/react-sortable-hoc/react-sortable-hoc.d.ts index 0c73627e76..a229eb6f43 100644 --- a/react-sortable-hoc/react-sortable-hoc.d.ts +++ b/react-sortable-hoc/react-sortable-hoc.d.ts @@ -6,7 +6,7 @@ /// declare module 'react-sortable-hoc' { - const React = require('react'); + import React = require('react'); export type Axis = 'x' | 'y'; From f13188e74fe70e5944b813e8dfc762c83efea6f2 Mon Sep 17 00:00:00 2001 From: Ivo Stratev Date: Tue, 30 Aug 2016 17:32:55 +0300 Subject: [PATCH 08/10] Update react-sortable-hoc-tests.tsx --- react-sortable-hoc/react-sortable-hoc-tests.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/react-sortable-hoc/react-sortable-hoc-tests.tsx b/react-sortable-hoc/react-sortable-hoc-tests.tsx index f6b86ec4f4..f4b3f39dd2 100644 --- a/react-sortable-hoc/react-sortable-hoc-tests.tsx +++ b/react-sortable-hoc/react-sortable-hoc-tests.tsx @@ -1,9 +1,9 @@ /// /// -const React = require('react'); -const ReactDOM = require('react-dom'); -const { SortableElement, SortableContainer, SortEndHandler, SortEnd, SortEvent, arrayMove } = require('react-sortable-hoc'); +import React = require('react'); +import ReactDOM = require('react-dom'); +import { SortableElement, SortableContainer, SortEndHandler, SortEnd, SortEvent, arrayMove } = require('react-sortable-hoc'); interface SortableItemProps { value: string; From 7ecb681d35b95f7bd6f447b45827dd0c82b05594 Mon Sep 17 00:00:00 2001 From: Ivo Stratev Date: Tue, 30 Aug 2016 17:52:33 +0300 Subject: [PATCH 09/10] Update react-sortable-hoc-tests.tsx --- react-sortable-hoc/react-sortable-hoc-tests.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/react-sortable-hoc/react-sortable-hoc-tests.tsx b/react-sortable-hoc/react-sortable-hoc-tests.tsx index f4b3f39dd2..fc66090d09 100644 --- a/react-sortable-hoc/react-sortable-hoc-tests.tsx +++ b/react-sortable-hoc/react-sortable-hoc-tests.tsx @@ -3,7 +3,7 @@ import React = require('react'); import ReactDOM = require('react-dom'); -import { SortableElement, SortableContainer, SortEndHandler, SortEnd, SortEvent, arrayMove } = require('react-sortable-hoc'); +import ReactSortableHOC = require('react-sortable-hoc'); interface SortableItemProps { value: string; @@ -25,9 +25,9 @@ class Item extends React.Component { } } -const SortableItem = SortableElement(Item); +const SortableItem = ReactSortableHOC.SortableElement(Item); -const SortableList = SortableContainer((props: SortableListProps): JSX.Element => { +const SortableList = ReactSortableHOC.SortableContainer((props: SortableListProps): JSX.Element => { const items: Array = props.items.map((value: string, index: number): JSX.Element => { return ; }); @@ -35,10 +35,10 @@ const SortableList = SortableContainer((props: SortableListProps): JSX.Element = }); class SortableComponent extends React.Component { - private _onSortEnd: SortEndHandler; + private _onSortEnd: ReactSortableHOC.SortEndHandler; - private _handleSotEnd(sort: SortEnd, event: SortEvent): void { - this.setState({items: arrayMove(this.state.items, sort.oldIndex, sort.newIndex)}); + private _handleSotEnd(sort: ReactSortableHOC.SortEnd, event: ReactSortableHOC.SortEvent): void { + this.setState({items: ReactSortableHOC.arrayMove(this.state.items, sort.oldIndex, sort.newIndex)}); } public constructor() { From bc69eb3397394f964590e239155bce67005da7a9 Mon Sep 17 00:00:00 2001 From: Ivo Stratev Date: Tue, 30 Aug 2016 17:58:01 +0300 Subject: [PATCH 10/10] Update react-sortable-hoc-tests.tsx --- react-sortable-hoc/react-sortable-hoc-tests.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react-sortable-hoc/react-sortable-hoc-tests.tsx b/react-sortable-hoc/react-sortable-hoc-tests.tsx index fc66090d09..9c382c4855 100644 --- a/react-sortable-hoc/react-sortable-hoc-tests.tsx +++ b/react-sortable-hoc/react-sortable-hoc-tests.tsx @@ -1,4 +1,4 @@ -/// +/// /// import React = require('react');