From cea40c3e95cf450f3a595d645d08623f0c6ecdc0 Mon Sep 17 00:00:00 2001
From: Linda_pp <rhysd@users.noreply.github.com>
Date: Sun, 7 Jan 2018 16:36:43 +0900
Subject: [PATCH] Add react-sortable-pane package (#22720)

* Add react-sortable-pane package

* strictFunctionTypes should be enabled
---
 types/react-sortable-pane/index.d.ts          | 88 +++++++++++++++++++
 .../react-sortable-pane-tests.tsx             | 17 ++++
 types/react-sortable-pane/tsconfig.json       | 25 ++++++
 types/react-sortable-pane/tslint.json         |  1 +
 4 files changed, 131 insertions(+)
 create mode 100644 types/react-sortable-pane/index.d.ts
 create mode 100644 types/react-sortable-pane/react-sortable-pane-tests.tsx
 create mode 100644 types/react-sortable-pane/tsconfig.json
 create mode 100644 types/react-sortable-pane/tslint.json

diff --git a/types/react-sortable-pane/index.d.ts b/types/react-sortable-pane/index.d.ts
new file mode 100644
index 0000000000..97b35f04bd
--- /dev/null
+++ b/types/react-sortable-pane/index.d.ts
@@ -0,0 +1,88 @@
+// Type definitions for react-sortable-pane 0.6
+// Project: https://github.com/bokuweb/react-sortable-pane
+// Definitions by: rhysd <https://github.com/rhysd>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.3
+
+import * as React from 'react';
+
+export type PaneId = string | number;
+
+export interface PaneSize {
+    width: number;
+    height: number;
+}
+
+export interface PaneProperty {
+    id: PaneId;
+    width: number | string;
+    height: number | string;
+    order: number;
+}
+
+export interface PaneResizeData {
+    pane: PaneProperty;
+    direction: 'x' | 'y' | 'xy';
+    delta: PaneSize;
+}
+
+export interface SortablePaneProps {
+    className?: string;
+    style?: React.HTMLAttributes<HTMLElement>;
+    direction?: 'horizontal' | 'vertical';
+    margin?: number;
+    zIndex?: number;
+    grid?: [number, number];
+    isSortable?: boolean;
+    disableEffect?: boolean;
+    dragHandleClassName?: string;
+    onOrderChange?: (oldPanes: PaneProperty[], newPanes: PaneProperty[]) => void;
+    onResizeStart?: (
+        e: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>,
+        id: PaneId,
+        panes: PaneProperty[],
+    ) => void;
+    onResize?: (
+        e: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>,
+        id: PaneId,
+        panes: PaneProperty[],
+        data: PaneResizeData,
+    ) => void;
+    onResizeStop?: (
+        e: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>,
+        id: PaneId,
+        panes: PaneProperty[],
+        data: PaneResizeData,
+    ) => void;
+    onDragStart?: (
+        e: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>,
+        id: PaneId,
+        panes: PaneProperty[],
+    ) => void;
+    onDragStop?: (
+        e: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>,
+        id: PaneId,
+        panes: PaneProperty[],
+    ) => void;
+}
+
+export class SortablePane extends React.Component<SortablePaneProps> {
+    render(): JSX.Element;
+}
+
+export interface PaneProps {
+    id: PaneId;
+    width: string | number;
+    height: string | number;
+    minWidth?: string | number;
+    minHeight?: string | number;
+    maxWidth?: string | number;
+    maxHeight?: string | number;
+    className?: string;
+    style?: React.HTMLAttributes<HTMLElement>;
+    isResizable?: { x?: boolean; y?: boolean; xy?: boolean };
+}
+
+export class Pane extends React.Component<PaneProps> {
+    render(): JSX.Element;
+}
diff --git a/types/react-sortable-pane/react-sortable-pane-tests.tsx b/types/react-sortable-pane/react-sortable-pane-tests.tsx
new file mode 100644
index 0000000000..78f3907f18
--- /dev/null
+++ b/types/react-sortable-pane/react-sortable-pane-tests.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { SortablePane, Pane } from 'react-sortable-pane';
+
+export default () => {
+    return (
+        <div>
+            <SortablePane direction="horizontal" margin={20}>
+                <Pane id={0} key={0} width={120} height="100%">
+                    <p>0</p>
+                </Pane>
+                <Pane id={1} key={1} width={120} height="100%">
+                    <p>1</p>
+                </Pane>
+            </SortablePane>
+        </div>
+    );
+};
diff --git a/types/react-sortable-pane/tsconfig.json b/types/react-sortable-pane/tsconfig.json
new file mode 100644
index 0000000000..2c919006c5
--- /dev/null
+++ b/types/react-sortable-pane/tsconfig.json
@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "react"
+    },
+    "files": [
+        "index.d.ts",
+        "react-sortable-pane-tests.tsx"
+    ]
+}
diff --git a/types/react-sortable-pane/tslint.json b/types/react-sortable-pane/tslint.json
new file mode 100644
index 0000000000..3db14f85ea
--- /dev/null
+++ b/types/react-sortable-pane/tslint.json
@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }