Add react-sortable-pane package (#22720)

* Add react-sortable-pane package

* strictFunctionTypes should be enabled

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;
+}

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>
+    );
+};

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"
+    ]
+}

types/react-sortable-pane/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }