diff --git a/types/react-blessed/index.d.ts b/types/react-blessed/index.d.ts new file mode 100644 index 0000000000..33c9fe2790 --- /dev/null +++ b/types/react-blessed/index.d.ts @@ -0,0 +1,16 @@ +// Type definitions for react-blessed 0.3 +// Project: https://github.com/yomguithereal/react-blessed#readme +// Definitions by: My Self +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.8 + +import * as React from 'react'; +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(bls: any): renderer; diff --git a/types/react-blessed/react-blessed-tests.tsx b/types/react-blessed/react-blessed-tests.tsx new file mode 100644 index 0000000000..5ac0ac073c --- /dev/null +++ b/types/react-blessed/react-blessed-tests.tsx @@ -0,0 +1,197 @@ +import * as React from 'react'; +import * as blessed from 'blessed'; +import { render } from 'react-blessed'; + +// Testing example from demos page +// https://github.com/Yomguithereal/react-blessed/blob/master/examples/dashboard.jsx + +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) { + clearInterval(interval); + return; + } + 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/react.d.ts b/types/react-blessed/react.d.ts new file mode 100644 index 0000000000..4344c2a871 --- /dev/null +++ b/types/react-blessed/react.d.ts @@ -0,0 +1,34 @@ +// relation to blessed export widgets, prepare for next version of react-blessed +declare namespace JSX { + interface IntrinsicElements { + 'blessed-box': any; + 'blessed-text': any; + 'blessed-line': any; + 'blessed-scrollablebox': any; + 'blessed-scrollabletext': any; + 'blessed-bigtext': any; + 'blessed-list': any; + 'blessed-filemanager': any; + 'blessed-listtable': any; + 'blessed-listbar': any; + 'blessed-form': any; + 'blessed-input': any; + 'blessed-textarea': any; + 'blessed-textbox': any; + 'blessed-button': any; + 'blessed-checkbox': any; + 'blessed-radioset': any; + 'blessed-radiobutton': any; + 'blessed-table': any; + 'blessed-prompt': any; + 'blessed-question': any; + 'blessed-message': any; + 'blessed-loading': any; + 'blessed-log': any; + 'blessed-progressbar': any; + 'blessed-program': any; + 'blessed-terminal': any; + 'blessed-layout': any; + 'blessed-escape': any; + } +} diff --git a/types/react-blessed/tsconfig.json b/types/react-blessed/tsconfig.json new file mode 100644 index 0000000000..6195735ac9 --- /dev/null +++ b/types/react-blessed/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true, + "jsx": "react" + }, + "files": [ + "index.d.ts", + "react.d.ts", + "react-blessed-tests.tsx" + ] +} diff --git a/types/react-blessed/tslint.json b/types/react-blessed/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/react-blessed/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }