diff --git a/flow-typed/npm/lodash.debounce_vx.x.x.js b/flow-typed/npm/lodash.debounce_vx.x.x.js new file mode 100644 index 000000000..688e28bd6 --- /dev/null +++ b/flow-typed/npm/lodash.debounce_vx.x.x.js @@ -0,0 +1,33 @@ +// flow-typed signature: 95241cb8305cb4cbda994a489dff963f +// flow-typed version: <>/lodash.debounce_v4.0.8/flow_v0.76.0 + +/** + * This is an autogenerated libdef stub for: + * + * 'lodash.debounce' + * + * Fill this stub out by replacing all the `any` types. + * + * Once filled out, we encourage you to share your work with the + * community by sending a pull request to: + * https://github.com/flowtype/flow-typed + */ + +declare module 'lodash.debounce' { + declare module.exports: any; +} + +/** + * We include stubs for each file inside this npm package in case you need to + * require those files directly. Feel free to delete any files that aren't + * needed. + */ + + +// Filename aliases +declare module 'lodash.debounce/index' { + declare module.exports: $Exports<'lodash.debounce'>; +} +declare module 'lodash.debounce/index.js' { + declare module.exports: $Exports<'lodash.debounce'>; +} diff --git a/flow-typed/npm/react-debounce-render_vx.x.x.js b/flow-typed/npm/react-debounce-render_vx.x.x.js new file mode 100644 index 000000000..80f5bc2a2 --- /dev/null +++ b/flow-typed/npm/react-debounce-render_vx.x.x.js @@ -0,0 +1,32 @@ +// flow-typed signature: 8416c078446255c2792e5980fa4c381c +// flow-typed version: <>/react-debounce-render_v4.0.3/flow_v0.76.0 + +/** + * This is an autogenerated libdef stub for: + * + * 'react-debounce-render' + * + * Fill this stub out by replacing all the `any` types. + * + * Once filled out, we encourage you to share your work with the + * community by sending a pull request to: + * https://github.com/flowtype/flow-typed + */ + +declare module 'react-debounce-render' { + declare module.exports: any; +} + +/** + * We include stubs for each file inside this npm package in case you need to + * require those files directly. Feel free to delete any files that aren't + * needed. + */ +declare module 'react-debounce-render/lib/index' { + declare module.exports: any; +} + +// Filename aliases +declare module 'react-debounce-render/lib/index.js' { + declare module.exports: $Exports<'react-debounce-render/lib/index'>; +} diff --git a/package.json b/package.json index 41a1b459e..94d9faac7 100644 --- a/package.json +++ b/package.json @@ -53,12 +53,14 @@ "fs-extra": "^5.0.0", "invariant": "^2.2.2", "jest": "^22.2.1", + "lodash.debounce": "^4.0.8", "mkdirp": "^0.5.1", "needle": "2.1.1", "openssl-wrapper": "^0.3.4", "prop-types": "^15.6.0", "react": "16", "react-color": "^2.11.7", + "react-debounce-render": "^4.0.3", "react-devtools-core": "3.1.0", "react-dom": "16", "react-redux": "^5.0.7", diff --git a/src/ui/components/console.js b/src/ui/components/console.js index 4588d71fb..e068191ab 100644 --- a/src/ui/components/console.js +++ b/src/ui/components/console.js @@ -81,9 +81,6 @@ export class Console extends Component { }, }; - static CommandsTable = ManagedTable.extends({ - flexGrow: 1, - }); static Window = FlexColumn.extends({ padding: '15px', flexGrow: 1, @@ -184,7 +181,7 @@ export class Console extends Component { ) .reduce((x, y) => x.concat(y), []); return rows.length ? ( - { {children} diff --git a/src/ui/components/table/ManagedTable.js b/src/ui/components/table/ManagedTable.js index ebe034a35..bc3e55403 100644 --- a/src/ui/components/table/ManagedTable.js +++ b/src/ui/components/table/ManagedTable.js @@ -26,6 +26,8 @@ import TableRow from './TableRow.js'; import ContextMenu from '../ContextMenu.js'; import FlexColumn from '../FlexColumn.js'; import createPaste from '../../../utils/createPaste.js'; +import debounceRender from 'react-debounce-render'; +import debounce from 'lodash.debounce'; import {DEFAULT_ROW_HEIGHT} from './types'; export type ManagedTableProps = {| @@ -121,7 +123,7 @@ type ManagedTableState = {| * If you require lower level access to the state then use [``]() * directly. */ -export default class ManagedTable extends styled.StylableComponent< +class ManagedTable extends styled.StylableComponent< ManagedTableProps, ManagedTableState, > { @@ -396,34 +398,37 @@ export default class ManagedTable extends styled.StylableComponent< .join('\n'); }; - onScroll = ({ - scrollDirection, - scrollOffset, - }: { - scrollDirection: 'forward' | 'backward', - scrollOffset: number, - scrollUpdateWasRequested: boolean, - }) => { - const {current} = this.scrollRef; - const parent = current ? current.parentElement : null; - if ( - this.props.stickyBottom && - scrollDirection === 'forward' && - !this.state.shouldScrollToBottom && - current && - parent instanceof HTMLElement && - current.offsetHeight - (scrollOffset + parent.offsetHeight) < - parent.offsetHeight - ) { - this.setState({shouldScrollToBottom: true}); - } else if ( - this.props.stickyBottom && - scrollDirection === 'backward' && - this.state.shouldScrollToBottom - ) { - this.setState({shouldScrollToBottom: false}); - } - }; + onScroll = debounce( + ({ + scrollDirection, + scrollOffset, + }: { + scrollDirection: 'forward' | 'backward', + scrollOffset: number, + scrollUpdateWasRequested: boolean, + }) => { + const {current} = this.scrollRef; + const parent = current ? current.parentElement : null; + if ( + this.props.stickyBottom && + scrollDirection === 'forward' && + !this.state.shouldScrollToBottom && + current && + parent instanceof HTMLElement && + current.offsetHeight - (scrollOffset + parent.offsetHeight) < + parent.offsetHeight + ) { + this.setState({shouldScrollToBottom: true}); + } else if ( + this.props.stickyBottom && + scrollDirection === 'backward' && + this.state.shouldScrollToBottom + ) { + this.setState({shouldScrollToBottom: false}); + } + }, + 100, + ); render() { const { @@ -459,7 +464,7 @@ export default class ManagedTable extends styled.StylableComponent< {({width, height}) => ( (rows[index] && rows[index].height) || rowLineHeight || @@ -474,6 +479,7 @@ export default class ManagedTable extends styled.StylableComponent< height={height}> {({index, style}) => ( this.onHighlight(e, rows[index], index)} @@ -499,3 +505,5 @@ export default class ManagedTable extends styled.StylableComponent< ); } } + +export default debounceRender(ManagedTable, 150, {maxTime: 200}); diff --git a/yarn.lock b/yarn.lock index b1a83ca01..ab5638d5e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3214,6 +3214,10 @@ lodash.clonedeep@^4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef" +lodash.debounce@^4.0.8: + version "4.0.8" + resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" + lodash.forin@^4.4.0: version "4.4.0" resolved "https://registry.yarnpkg.com/lodash.forin/-/lodash.forin-4.4.0.tgz#5d3f20ae564011fbe88381f7d98949c9c9519731" @@ -4031,6 +4035,13 @@ react-color@^2.11.7: reactcss "^1.2.0" tinycolor2 "^1.4.1" +react-debounce-render@^4.0.3: + version "4.0.3" + resolved "https://registry.yarnpkg.com/react-debounce-render/-/react-debounce-render-4.0.3.tgz#ce58026578d73b81f1f990d7c4bfd3fa038b5620" + dependencies: + lodash "^4.17.10" + lodash.debounce "^4.0.8" + react-devtools-core@3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-3.1.0.tgz#eec2e9e0e6edb77772e2bfc7d286a296f55a261a"