From 3fa073fafb8da9461a5863db199082f643e792f6 Mon Sep 17 00:00:00 2001 From: guoshencheng <648772021@qq.com> Date: Tue, 6 Nov 2018 23:03:28 +0800 Subject: [PATCH 1/8] add react-blessed typing file --- types/react-blessed/index.d.ts | 29 +++ types/react-blessed/react-blessed-tests.tsx | 192 ++++++++++++++++++++ types/react-blessed/tsconfig.json | 26 +++ types/react-blessed/tslint.json | 7 + 4 files changed, 254 insertions(+) create mode 100644 types/react-blessed/index.d.ts create mode 100644 types/react-blessed/react-blessed-tests.tsx create mode 100644 types/react-blessed/tsconfig.json create mode 100644 types/react-blessed/tslint.json 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 + } +} From 7a1023f4ca7057d210bcffdb1b9a2b8b668ba3cc Mon Sep 17 00:00:00 2001 From: guoshencheng <648772021@qq.com> Date: Wed, 7 Nov 2018 09:48:53 +0800 Subject: [PATCH 2/8] add blessed widget type --- types/react-blessed/index.d.ts | 29 +++++++++++++++++++-- types/react-blessed/react-blessed-tests.tsx | 3 +++ 2 files changed, 30 insertions(+), 2 deletions(-) diff --git a/types/react-blessed/index.d.ts b/types/react-blessed/index.d.ts index d16016ecef..2fb3486781 100644 --- a/types/react-blessed/index.d.ts +++ b/types/react-blessed/index.d.ts @@ -18,12 +18,37 @@ declare module 'react-blessed' { export function createBlessedRenderer(b: typeof Blessd): renderer; } +// relation to blessed export widgets declare namespace JSX { interface IntrinsicElements { - 'blessed-progressbar': any, '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-form': 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/react-blessed-tests.tsx b/types/react-blessed/react-blessed-tests.tsx index 3c0d6e4ec1..90cabcc765 100644 --- a/types/react-blessed/react-blessed-tests.tsx +++ b/types/react-blessed/react-blessed-tests.tsx @@ -2,6 +2,9 @@ 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; /** From 16a8dca700583db6ef35d85ddac742b904ced356 Mon Sep 17 00:00:00 2001 From: guoshencheng <648772021@qq.com> Date: Wed, 7 Nov 2018 09:52:28 +0800 Subject: [PATCH 3/8] add comment for next version of react-blessed --- types/react-blessed/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/react-blessed/index.d.ts b/types/react-blessed/index.d.ts index 2fb3486781..1d86badd2a 100644 --- a/types/react-blessed/index.d.ts +++ b/types/react-blessed/index.d.ts @@ -18,7 +18,7 @@ declare module 'react-blessed' { export function createBlessedRenderer(b: typeof Blessd): renderer; } -// relation to blessed export widgets +// relation to blessed export widgets, prepare for next version of react-blessed declare namespace JSX { interface IntrinsicElements { 'blessed-box': any, From 53649a923c736d1168a461052969644f85d55fa8 Mon Sep 17 00:00:00 2001 From: guoshencheng <648772021@qq.com> Date: Wed, 7 Nov 2018 10:03:50 +0800 Subject: [PATCH 4/8] change ts version to follow react --- types/react-blessed/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/react-blessed/index.d.ts b/types/react-blessed/index.d.ts index 1d86badd2a..0951ad5a2f 100644 --- a/types/react-blessed/index.d.ts +++ b/types/react-blessed/index.d.ts @@ -2,7 +2,7 @@ // Project: https://github.com/Yomguithereal/react-blessed // Definitions by: Century Guo // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 2.3 +// TypeScript Version: 2.8 declare module 'react-blessed' { import * as React from 'react'; From 160b65c7142e22c1c1e0298d131a741f292cfda8 Mon Sep 17 00:00:00 2001 From: guoshencheng <648772021@qq.com> Date: Wed, 7 Nov 2018 10:25:45 +0800 Subject: [PATCH 5/8] use dt-gen to re generate the file --- types/react-blessed/index.d.ts | 99 +++++++++++++++---------------- types/react-blessed/tsconfig.json | 21 +++---- types/react-blessed/tslint.json | 8 +-- 3 files changed, 59 insertions(+), 69 deletions(-) diff --git a/types/react-blessed/index.d.ts b/types/react-blessed/index.d.ts index 0951ad5a2f..5abf0e39bc 100644 --- a/types/react-blessed/index.d.ts +++ b/types/react-blessed/index.d.ts @@ -1,54 +1,53 @@ -// Type definitions for react-blessed 0.3.0 -// Project: https://github.com/Yomguithereal/react-blessed -// Definitions by: Century Guo +// 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 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; -} - -// 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, + 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; + } + + // 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 index 4c74e5205e..ea7dcee1d9 100644 --- a/types/react-blessed/tsconfig.json +++ b/types/react-blessed/tsconfig.json @@ -1,26 +1,23 @@ { - "files": [ - "index.d.ts", - "react-blessed-tests.tsx" - ], "compilerOptions": { "module": "commonjs", "lib": [ - "es6", - "dom" + "es6" ], "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 + "forceConsistentCasingInFileNames": true, + "jsx": "react" + }, + "files": [ + "index.d.ts", + "react-blessed-tests.tsx" + ] +} diff --git a/types/react-blessed/tslint.json b/types/react-blessed/tslint.json index 946c3b6691..3db14f85ea 100644 --- a/types/react-blessed/tslint.json +++ b/types/react-blessed/tslint.json @@ -1,7 +1 @@ -{ - "extends": "dtslint/dt.json", - "rules": { - // TODO - "dt-header": false - } -} +{ "extends": "dtslint/dt.json" } From b120dc36c9a4a10522a67025be9474dead058547 Mon Sep 17 00:00:00 2001 From: guoshencheng <648772021@qq.com> Date: Wed, 7 Nov 2018 10:27:13 +0800 Subject: [PATCH 6/8] add typescript version --- types/react-blessed/index.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/types/react-blessed/index.d.ts b/types/react-blessed/index.d.ts index 5abf0e39bc..2a1c02bd6e 100644 --- a/types/react-blessed/index.d.ts +++ b/types/react-blessed/index.d.ts @@ -2,6 +2,7 @@ // Project: https://github.com/yomguithereal/react-blessed#readme // Definitions by: My Self // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.8 declare module 'react-blessed' { import * as React from 'react'; From b885669fe68d990e9e970216721b3be603fce37f Mon Sep 17 00:00:00 2001 From: guoshencheng <648772021@qq.com> Date: Wed, 7 Nov 2018 10:34:09 +0800 Subject: [PATCH 7/8] add strictFunctionTypes --- types/react-blessed/tsconfig.json | 1 + 1 file changed, 1 insertion(+) diff --git a/types/react-blessed/tsconfig.json b/types/react-blessed/tsconfig.json index ea7dcee1d9..46c89eec29 100644 --- a/types/react-blessed/tsconfig.json +++ b/types/react-blessed/tsconfig.json @@ -7,6 +7,7 @@ "noImplicitAny": true, "noImplicitThis": true, "strictNullChecks": true, + "strictFunctionTypes": true, "baseUrl": "../", "typeRoots": [ "../" From 8e89323086228895f6519bfc6fdb4a0c44aecfbf Mon Sep 17 00:00:00 2001 From: guoshencheng <648772021@qq.com> Date: Wed, 7 Nov 2018 14:08:46 +0800 Subject: [PATCH 8/8] fix lint --- types/react-blessed/index.d.ts | 58 ++++----------------- types/react-blessed/react-blessed-tests.tsx | 6 ++- types/react-blessed/react.d.ts | 34 ++++++++++++ types/react-blessed/tsconfig.json | 1 + 4 files changed, 49 insertions(+), 50 deletions(-) create mode 100644 types/react-blessed/react.d.ts diff --git a/types/react-blessed/index.d.ts b/types/react-blessed/index.d.ts index 2a1c02bd6e..33c9fe2790 100644 --- a/types/react-blessed/index.d.ts +++ b/types/react-blessed/index.d.ts @@ -4,51 +4,13 @@ // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.8 -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; - } - - // 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, - } - } +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 index 90cabcc765..5ac0ac073c 100644 --- a/types/react-blessed/react-blessed-tests.tsx +++ b/types/react-blessed/react-blessed-tests.tsx @@ -125,8 +125,10 @@ class Progress extends Component { super(props); const interval: NodeJS.Timer = setInterval(() => { const { progress } = this.state; - if (this.state.progress >= 100) - return clearInterval(interval); + if (this.state.progress >= 100) { + clearInterval(interval); + return; + } this.setState({ progress: progress + 1, }); 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 index 46c89eec29..6195735ac9 100644 --- a/types/react-blessed/tsconfig.json +++ b/types/react-blessed/tsconfig.json @@ -19,6 +19,7 @@ }, "files": [ "index.d.ts", + "react.d.ts", "react-blessed-tests.tsx" ] }