Skip to content

Commit

Permalink
changed the way the transactions show on mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@lelemm
lelemm committed Nov 7, 2024
1 parent cda3484 commit b9ff5e5
Showing 1 changed file with 131 additions and 36 deletions.
167 changes: 131 additions & 36 deletions packages/desktop-client/src/components/reports/reports/Calendar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@ import React, {
import { Trans, useTranslation } from 'react-i18next';
import { useDispatch } from 'react-redux';
import { useParams, useSearchParams } from 'react-router-dom';
import { useSpring, animated, config } from 'react-spring';

import { useDrag } from '@use-gesture/react';
import { format, isValid, parseISO } from 'date-fns';

import { SchedulesProvider } from 'loot-core/client/data-hooks/schedules';
Expand Down Expand Up @@ -43,8 +45,8 @@ import { useSyncedPref } from '../../../hooks/useSyncedPref';
import {
SvgArrowThickDown,
SvgArrowThickUp,
SvgViewHide,
SvgViewShow,
SvgCheveronDown,
SvgCheveronUp,
} from '../../../icons/v1';
import { styles, theme } from '../../../style';
import { Button } from '../../common/Button2';
Expand Down Expand Up @@ -118,7 +120,6 @@ function CalendarInner({ widget, parameters }: CalendarInnerProps) {

const [_firstDayOfWeekIdx] = useSyncedPref('firstDayOfWeekIdx');
const firstDayOfWeekIdx = _firstDayOfWeekIdx || '0';
const [calendarVisible, setCalendarVisible] = useState(true);
const {
conditions,
conditionsOp,
Expand Down Expand Up @@ -348,6 +349,78 @@ function CalendarInner({ widget, parameters }: CalendarInnerProps) {
[navigate],
);

const CHEVRON_HEIGHT = 26;

const refContainer = useRef<HTMLDivElement>(null);

useEffect(() => {
if (refContainer.current) {
setTotalHeight(refContainer.current.clientHeight - 115);
}
}, [query]);

const [totalHeight, setTotalHeight] = useState(0);
const closeY = useRef(3000);

const openY = 0;
const [mobileTransactionsOpen, setMobileTransactionsOpen] = useState(false);

const [{ y }, api] = useSpring(() => ({
y: closeY.current,
immediate: false,
}));

useEffect(() => {
closeY.current = totalHeight;
api.start({
y: mobileTransactionsOpen ? openY : closeY.current,
immediate: false,
});
}, [totalHeight, mobileTransactionsOpen, api]);

const open = ({ canceled }: { canceled: boolean }) => {
api.start({
y: openY,
immediate: false,
config: canceled ? config.wobbly : config.stiff,
});
setMobileTransactionsOpen(true);
};

const close = (velocity = 0) => {
api.start({
y: closeY.current,
config: { ...config.stiff, velocity },
});
setMobileTransactionsOpen(false);
};

const bind = useDrag(
({ offset: [, oy], cancel }) => {
if (oy < 0) {
cancel();
open({ canceled: false });
}

api.start({ y: oy, immediate: true });
if (oy > totalHeight - CHEVRON_HEIGHT * 1.5 && mobileTransactionsOpen) {
cancel();
close();
setMobileTransactionsOpen(false);
} else {
setMobileTransactionsOpen(true);
}
// }
},
{
from: () => [0, y.get()],
filterTaps: true,
bounds: { top: -totalHeight + 115, bottom: totalHeight - CHEVRON_HEIGHT },
axis: 'y',
rubberband: true,
},
);

return (
<Page
header={
Expand Down Expand Up @@ -395,12 +468,12 @@ function CalendarInner({ widget, parameters }: CalendarInnerProps) {
</Button>
)}
</Header>
<View style={{ flexGrow: 1 }}>
<View ref={refContainer as Ref<HTMLDivElement>} style={{ flexGrow: 1 }}>
<View
style={{
backgroundColor: theme.pageBackground,
paddingTop: 0,
minHeight: calendarVisible ? '350px' : '100px',
minHeight: '350px',
overflowY: 'auto',
}}
>
Expand All @@ -424,7 +497,7 @@ function CalendarInner({ widget, parameters }: CalendarInnerProps) {
overflow: 'auto',
height: '100%',
justifyContent: flexAlignment,
display: calendarVisible ? 'flex' : 'none',
display: 'flex',
...styles.horizontalScrollbar,
}}
>
Expand All @@ -447,29 +520,6 @@ function CalendarInner({ widget, parameters }: CalendarInnerProps) {
totalIncome={totalIncome}
isNarrowWidth={isNarrowWidth}
/>
{isNarrowWidth && (
<Button
variant="bare"
style={{
position: 'absolute',
right: 0,
top: 0,
flexDirection: 'row',
alignItems: 'center',
margin: 6,
}}
onPress={() => setCalendarVisible(!calendarVisible)}
>
{calendarVisible ? (
<SvgViewHide width={16} height={16} />
) : (
<SvgViewShow width={16} height={16} />
)}
<span style={{ marginLeft: 6 }}>
{calendarVisible ? 'Hide' : 'Show'} Calendars
</span>
</Button>
)}
</View>
</View>
<SelectedProviderWithItems
Expand Down Expand Up @@ -549,13 +599,58 @@ function CalendarInner({ widget, parameters }: CalendarInnerProps) {
/>
</SplitsExpandedProvider>
) : (
<TransactionListMobile
isLoading={false}
isNewTransaction={() => false}
onLoadMore={loadMoreTransactions}
transactions={allTransactions}
onOpenTransaction={onOpenTransaction}
/>
<animated.div
{...bind()}
style={{
y,
touchAction: 'pan-x',
backgroundColor: theme.mobileNavBackground,
borderTop: `1px solid ${theme.menuBorder}`,
...styles.shadow,
height: totalHeight + CHEVRON_HEIGHT,
width: '100%',
position: 'fixed',
zIndex: 100,
bottom: 0,
display: isNarrowWidth ? 'flex' : 'none',
flexDirection: 'column',
alignItems: 'center',
}}
>
<Button
variant="bare"
onPress={() =>
!mobileTransactionsOpen
? open({ canceled: false })
: close()
}
style={{ color: theme.pageTextSubdued }}
>
{!mobileTransactionsOpen && (
<>
<SvgCheveronUp width={16} height={16} />
Show Transactions
</>
)}
{mobileTransactionsOpen && (
<>
<SvgCheveronDown width={16} height={16} />
Hide Transactions
</>
)}
</Button>
<View
style={{ height: '100%', width: '100%', overflow: 'auto' }}
>
<TransactionListMobile
isLoading={false}
isNewTransaction={() => false}
onLoadMore={loadMoreTransactions}
transactions={allTransactions}
onOpenTransaction={onOpenTransaction}
/>
</View>
</animated.div>
)}
</View>
</SchedulesProvider>
Expand Down

0 comments on commit b9ff5e5

Please sign in to comment.