diff --git a/types/react-blessed/index.d.ts b/types/react-blessed/index.d.ts new file mode 100644 index 0000000000..d16016ecef --- /dev/null +++ b/types/react-blessed/index.d.ts @@ -0,0 +1,29 @@ +// Type definitions for react-blessed 0.3.0 +// Project: https://github.com/Yomguithereal/react-blessed +// Definitions by: Century Guo +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.3 + +declare module 'react-blessed' { + import * as React from 'react'; + import * as Blessd from 'blessed'; + import { Widgets, screen } from 'blessed'; + export type Callback = () => void | null | undefined; + export type renderer = ( + c: JSX.Element, s: Widgets.Screen, callback?: Callback, + ) => React.Component | null; + export function render( + c: JSX.Element, s: Widgets.Screen, callback?: Callback + ): React.Component | null; + export function createBlessedRenderer(b: typeof Blessd): renderer; +} + +declare namespace JSX { + interface IntrinsicElements { + 'blessed-progressbar': any, + 'blessed-box': any, + 'blessed-listtable': any, + 'blessed-button': any, + 'blessed-form': any + } +} diff --git a/types/react-blessed/react-blessed-tests.tsx b/types/react-blessed/react-blessed-tests.tsx new file mode 100644 index 0000000000..3c0d6e4ec1 --- /dev/null +++ b/types/react-blessed/react-blessed-tests.tsx @@ -0,0 +1,192 @@ +import * as React from 'react'; +import * as blessed from 'blessed'; +import { render } from 'react-blessed'; + +const { Component } = React; + +/** + * Stylesheet + */ +const stylesheet = { + bordered: { + border: { + type: 'line' + }, + style: { + border: { + fg: 'blue' + } + } + } +}; + +/** + * Top level component. + */ +class Dashboard extends Component { + render() { + return ( + <> + + + + + + + + ); + } +} + +/** + * Log component. + */ +class Log extends Component { + render() { + return ( + + {'Hello'}, {0}, {'World'} + + ); + } +} + +/** + * Request component. + */ +class Request extends Component { + render() { + return ( + + {0} + + ); + } +} + +/** + * Response component. + */ +class Response extends Component { + render() { + return ( + + ); + } +} + +/** + * Jobs component. + */ +class Jobs extends Component { + render() { + return ( + + ); + } +} + +/** + * Progress component. + */ +class Progress extends Component { + state: { + progress: number, + color: string, + } = { + progress: 0, + color: 'blue' + }; + + constructor(props: any) { + super(props); + const interval: NodeJS.Timer = setInterval(() => { + const { progress } = this.state; + if (this.state.progress >= 100) + return clearInterval(interval); + this.setState({ + progress: progress + 1, + }); + }, 50); + } + + render() { + const { progress, color } = this.state; + const label = `Progress - ${progress}%`; + + return ( + this.setState({ + color: 'green' + })} + class={stylesheet.bordered} + filled={progress} + top='60%' + left='60%' + width='40%' + height='10%' + style={{ + bar: { + bg: color + } + }} + /> + ); + } +} + +/** + * Stats component. + */ +class Stats extends Component { + render() { + return ( + + Some stats + + ); + } +} + +/** + * Rendering the screen. + */ +const screen = blessed.screen({ + autoPadding: true, + smartCSR: true, + title: 'react-blessed dashboard' +}); + +screen.key(['escape', 'q', 'C-c'], () => { + return process.exit(0); +}); + +render(, screen); diff --git a/types/react-blessed/tsconfig.json b/types/react-blessed/tsconfig.json new file mode 100644 index 0000000000..4c74e5205e --- /dev/null +++ b/types/react-blessed/tsconfig.json @@ -0,0 +1,26 @@ +{ + "files": [ + "index.d.ts", + "react-blessed-tests.tsx" + ], + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "baseUrl": "../", + "jsx": "react", + "experimentalDecorators": true, + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + } +} \ No newline at end of file diff --git a/types/react-blessed/tslint.json b/types/react-blessed/tslint.json new file mode 100644 index 0000000000..946c3b6691 --- /dev/null +++ b/types/react-blessed/tslint.json @@ -0,0 +1,7 @@ +{ + "extends": "dtslint/dt.json", + "rules": { + // TODO + "dt-header": false + } +}