Merge pull request #31219 from qgolsteyn/reactpanels

Add types for react-panelgroup

types/react-panelgroup/index.d.ts

@@ -0,0 +1,31 @@
+// Type definitions for react-panelgroup 1.0
+// Project: https://github.com/DanFessler/react-panelgroup
+// Definitions by: Quentin Golsteyn <https://github.com/qgolsteyn>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 3.0
+
+import * as React from "react";
+
+/**
+ * Interface used to define a number of options for a panel.
+ */
+export interface PanelWidth {
+    size?: number;
+    minSize?: number;
+    resize?: "fixed" | "dynamic" | "stretch";
+    snap?: number[];
+}
+
+export interface PropTypes {
+    spacing?: number;
+    borderColor?: string;
+    panelColor?: string;
+    direction?: "row" | "column";
+    panelWidths?: Array<PanelWidth | null>;
+    onUpdate?: (data: PanelWidth) => void;
+}
+
+/**
+ * React component that allows for the creation of resizable panels.
+ */
+export default class PanelGroup extends React.Component<PropTypes> {}

types/react-panelgroup/react-panelgroup-tests.tsx

@@ -0,0 +1,68 @@
+import PanelGroup, { PanelWidth } from "react-panelgroup";
+import * as React from "react";
+
+const test1 = (
+    <PanelGroup>
+        <div>panel 1</div>
+        <div>panel 2</div>
+        <div>panel 3</div>
+    </PanelGroup>
+);
+
+const test2 = (
+    <PanelGroup direction="column">
+        <div>panel 1</div>
+        <div>panel 2</div>
+        <div>panel 3</div>
+    </PanelGroup>
+);
+
+const test3 = (
+    <PanelGroup direction="row">
+        <PanelGroup direction="column">
+            <div>panel 1</div>
+            <div>panel 2</div>
+            <div>panel 3</div>
+        </PanelGroup>
+        <div>panel 4</div>
+        <PanelGroup direction="column">
+            <div>panel 5</div>
+            <div>panel 6</div>
+        </PanelGroup>
+    </PanelGroup>
+);
+
+const test4 = (
+    <PanelGroup
+        panelWidths={[
+            { size: 100, minSize: 50, resize: "dynamic" },
+            { minSize: 100, resize: "stretch" },
+            { size: 100, minSize: 50, resize: "dynamic" }
+        ]}
+    >
+        <div>panel 1</div>
+        <div>panel 2</div>
+        <div>panel 3</div>
+    </PanelGroup>
+);
+
+const test5 = (
+    <PanelGroup
+        direction="column"
+        borderColor="#FFF"
+        panelColor="#FFF"
+        spacing={12}
+        onUpdate={data => {}}
+    >
+        <div>panel 1</div>
+        <div>panel 2</div>
+        <div>panel 3</div>
+    </PanelGroup>
+);
+
+const test6: PanelWidth = {
+    size: 100,
+    minSize: 100,
+    resize: "fixed",
+    snap: [50, 75]
+};

types/react-panelgroup/tsconfig.json

@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "jsx": "react",
+        "lib": ["es6"],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "typeRoots": ["../"],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": ["index.d.ts", "react-panelgroup-tests.tsx"]
+}

types/react-panelgroup/tslint.json

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