Add definition for react-panelgroup library

This commit is contained in:
Quentin Golsteyn 2018-12-09 17:40:31 -08:00
parent cf2baee61a
commit 24f5111c1a
4 changed files with 115 additions and 0 deletions

30
types/react-panelgroup/index.d.ts vendored Normal file
View File

@ -0,0 +1,30 @@
// Type definitions for react-panelgroup 1.0.7
// Project: https://github.com/DanFessler/react-panelgroup
// Definitions by: My Self <https://github.com/qgolsteyn>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
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[];
}
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> {}

View File

@ -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]
};

View File

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

View File

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