Skip to content

Commit

Permalink
update table layout
Browse files Browse the repository at this point in the history
  • Loading branch information
carkom committed Dec 13, 2023
1 parent 81c116e commit 4cff288
Show file tree
Hide file tree
Showing 13 changed files with 459 additions and 475 deletions.
18 changes: 13 additions & 5 deletions packages/desktop-client/src/components/reports/ChooseGraph.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -65,18 +65,26 @@ function ChooseGraph({
listScrollRef.current.scrollLeft = scroll.target.scrollLeft;
}
if (scroll.target.id === 'list') {
if (headerScrollRef.current.scrollLeft !== scroll.target.scrollLeft) {
headerScrollRef.current.scrollLeft = scroll.target.scrollLeft;
totalScrollRef.current.scrollLeft = scroll.target.scrollLeft;
} else {
if (indexScrollRef.current.scrollTop !== scroll.target.scrollTop) {
indexScrollRef.current.scrollTop = scroll.target.scrollTop;
scrollScrollRef.current.scrollTop = scroll.target.scrollTop;
} else {
if (headerScrollRef.current) {
headerScrollRef.current.scrollLeft = scroll.target.scrollLeft;
}
if (totalScrollRef.current) {
totalScrollRef.current.scrollLeft = scroll.target.scrollLeft;
}
}
}
if (scroll.target.id === 'index') {
listScrollRef.current.scrollTop = scroll.target.scrollTop;
scrollScrollRef.current.scrollTop = scroll.target.scrollTop;
}
if (scroll.target.id === 'scroll') {
listScrollRef.current.scrollTop = scroll.target.scrollTop;
indexScrollRef.current.scrollTop = scroll.target.scrollTop;
}
};

if (graphType === 'AreaGraph') {
Expand Down Expand Up @@ -123,7 +131,7 @@ function ChooseGraph({
<ReportTableHeader
headerScrollRef={headerScrollRef}
handleScroll={handleScroll}
interval={mode === 'time' && months}
interval={mode === 'time' && data.monthData}
scrollWidth={scrollWidth}
groupBy={groupBy}
balanceType={balanceType}
Expand Down
67 changes: 0 additions & 67 deletions packages/desktop-client/src/components/reports/ColumnPrimary.tsx

This file was deleted.

56 changes: 0 additions & 56 deletions packages/desktop-client/src/components/reports/ColumnScrollbar.tsx

This file was deleted.

73 changes: 43 additions & 30 deletions packages/desktop-client/src/components/reports/ReportTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ import React, {
} from 'react';
import { type RefProp } from 'react-spring';

import { type CSSProperties } from '../../style';
import { theme, type CSSProperties } from '../../style';
import Block from '../common/Block';
import View from '../common/View';

import ColumnPrimary from './ColumnPrimary';
import ColumnScrollbar from './ColumnScrollbar';
import { type GroupedEntity } from './entities';
import ReportTableColumnIndex from './ReportTableColumnIndex';
import ReportTableColumnTotals from './ReportTableColumTotals';
import ReportTableInner from './ReportTableInner';
import ReportTableRow from './ReportTableRow';

Expand Down Expand Up @@ -48,36 +48,48 @@ export default function ReportTable({

useLayoutEffect(() => {
if (scrollScrollRef.current && saveScrollWidth) {
saveScrollWidth(
scrollScrollRef.current ? scrollScrollRef.current.offsetWidth : 0,
);
const [parent, child] = [
scrollScrollRef.current.offsetWidth,
scrollScrollRef.current.clientWidth,
];

saveScrollWidth(parent > 0 && child > 0 && parent - child);
}
});

const renderItem = useCallback(
({ item, groupByItem, mode, monthsCount, style, key }) => {
const renderItemTotal = useCallback(
({ item, groupByItem, monthsCount, style, key }) => {
return (
<ReportTableRow
<ReportTableColumnTotals
key={key}
item={item}
balanceTypeOp={balanceTypeOp}
monthsCount={monthsCount}
groupByItem={groupByItem}
mode={mode}
monthsCount={monthsCount}
style={style}
/>
);
},
[],
);

const renderItem = useCallback(({ item, groupByItem, mode, style, key }) => {
return (
<ReportTableRow
key={key}
item={item}
balanceTypeOp={balanceTypeOp}
groupByItem={groupByItem}
mode={mode}
style={style}
/>
);
}, []);

return (
<View
innerRef={listScrollRef}
style={{
overflowY: 'auto',
scrollbarWidth: 'none',
'::-webkit-scrollbar': { display: 'none' },
flex: 1,
flexDirection: 'row',
outline: 'none',
Expand All @@ -102,19 +114,24 @@ export default function ReportTable({
>
{data.map(item => {
return (
<ColumnPrimary
<ReportTableColumnIndex
key={item.id}
item={item}
balanceTypeOp={balanceTypeOp}
groupByItem={groupByItem}
showEmpty={showEmpty}
headerStyle={
item.categories && {
color: theme.tableRowHeaderText,
backgroundColor: theme.tableRowHeaderBackground,
fontWeight: 600,
}
}
/>
);
})}
</Block>
<Block
style={{
overflowY: 'auto',
overflow: 'auto',
flex: 1,
scrollbarWidth: 'none',
'::-webkit-scrollbar': { display: 'none' },
Expand All @@ -125,9 +142,7 @@ export default function ReportTable({
>
<ReportTableInner
data={data}
showEmpty={showEmpty}
monthsCount={monthsCount}
balanceTypeOp={balanceTypeOp}
mode={mode}
groupBy={groupBy}
renderItem={renderItem}
Expand All @@ -139,18 +154,16 @@ export default function ReportTable({
onScroll={handleScroll}
style={{
overflowY: 'auto',
flexShrink: 0,
}}
>
{data.map(item => {
return (
<ColumnScrollbar
key={item.id}
item={item}
balanceTypeOp={balanceTypeOp}
showEmpty={showEmpty}
/>
);
})}
<ReportTableInner
data={data}
monthsCount={monthsCount}
mode={mode}
groupBy={groupBy}
renderItem={renderItemTotal}
/>
</Block>
</View>
);
Expand Down
Loading

0 comments on commit 4cff288

Please sign in to comment.