QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-17 05:10:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(FinancialReports): add loading progress bar.

Browse Source 
fix(preformance): Optimize preformance of virtualized list.
fix(preformance): Optimize financial reports preformance.
This commit is contained in:
a.bouhuolia
2021-03-16 17:27:27 +02:00
parent f1cf02c9df
commit 42230fe64b
73 changed files with 969 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
client/src/components/Datatable/TableVirtualizedRows.js
View File

@@ -3,11 +3,13 @@ import { WindowScroller, AutoSizer, List } from 'react-virtualized';
import { CLASSES } from 'common/classes';
import TableContext from './TableContext';
/**
* Table virtualized list row.
*/
function TableVirtualizedListRow({
index,
isScrolling,
isVisible,
key,
style,
}) {
const {
@@ -18,7 +20,7 @@ function TableVirtualizedListRow({
const row = page[index];
prepareRow(row);
return <TableRowRenderer row={row} style={style} />;
return (<TableRowRenderer row={row} style={style} />);
}
/**
@@ -27,39 +29,38 @@ function TableVirtualizedListRow({
export default function TableVirtualizedListRows() {
const {
table: { page },
props: { vListrowHeight, vListOverscanRowCount }
props: { vListrowHeight, vListOverscanRowCount },
} = useContext(TableContext);
// Dashboard content pane.
const dashboardContentPane = document.querySelector(
const dashboardContentPane = React.useMemo(()=> document.querySelector(
`.${CLASSES.DASHBOARD_CONTENT_PANE}`,
);
), []);
const rowRenderer = React.useCallback(({ key, ...args }) => (
<TableVirtualizedListRow {...args} key={key} />
), []);
return (
<WindowScroller scrollElement={dashboardContentPane}>
{({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => (
<div className={'WindowScrollerWrapper'}>
<AutoSizer disableHeight>
{({ width }) => (
<div ref={registerChild}>
<List
autoHeight={true}
className={'List'}
height={height}
isScrolling={isScrolling}
onScroll={onChildScroll}
overscanRowCount={vListOverscanRowCount}
rowCount={page.length}
rowHeight={vListrowHeight}
rowRenderer={({ ...args }) => {
return <TableVirtualizedListRow {...args} />;
}}
scrollTop={scrollTop}
width={width}
/>
</div>
)}
</AutoSizer>
</div>
{({ height, isScrolling, onChildScroll, scrollTop }) => (
<AutoSizer disableHeight>
{({ width }) => (
<List
autoHeight={true}
className={'List'}
height={height}
isScrolling={isScrolling}
onScroll={onChildScroll}
overscanRowCount={vListOverscanRowCount}
rowCount={page.length}
rowHeight={vListrowHeight}
rowRenderer={rowRenderer}
scrollTop={scrollTop}
width={width}
/>
)}
</AutoSizer>
)}
</WindowScroller>
);