120 lines
3.4 KiB
TypeScript
120 lines
3.4 KiB
TypeScript
import { BillingListProps } from '../model/types';
|
|
import { ListDateGroup } from './list-date-group';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useEffect, useState } from 'react';
|
|
import { GetListHeight, IMAGE_ROOT, ListScrollOn, setScrollAction } from '@/shared/constants/common';
|
|
|
|
export const BillingList = ({
|
|
transactionCategory,
|
|
listItems,
|
|
setDetailData,
|
|
filterUsed,
|
|
onClickToOpenFilter,
|
|
onClickToOpenDownloadBottomSheet
|
|
}: BillingListProps) => {
|
|
const { t, i18n } = useTranslation();
|
|
|
|
const [groupDate, setGroupDate] = useState<string>('');
|
|
const [groupDateOn, setGroupDateOn] = useState<boolean>(false);
|
|
|
|
const [listHeight, setListHeight] = useState<number>(0);
|
|
|
|
const getListDateGroup = () => {
|
|
let rs = [];
|
|
let date = '';
|
|
let list = [];
|
|
for(let i=0;i<listItems.length;i++){
|
|
let item = listItems[i];
|
|
if(!!item){
|
|
let transactionDate = item?.transactionDate;
|
|
if(!!transactionDate){
|
|
if(i === 0){
|
|
date = transactionDate;
|
|
}
|
|
if(date !== transactionDate){
|
|
if(list.length > 0){
|
|
rs.push(
|
|
<ListDateGroup
|
|
transactionCategory={ transactionCategory }
|
|
key={ date + '-' + i }
|
|
date={ date }
|
|
items={ list }
|
|
setDetailData={ setDetailData }
|
|
></ListDateGroup>
|
|
);
|
|
}
|
|
date = transactionDate;
|
|
list = [];
|
|
}
|
|
list.push(item);
|
|
}
|
|
}
|
|
}
|
|
if(list.length > 0){
|
|
rs.push(
|
|
<ListDateGroup
|
|
transactionCategory={ transactionCategory }
|
|
key={ date + '-last' }
|
|
date={ date }
|
|
items={ list }
|
|
setDetailData={ setDetailData }
|
|
></ListDateGroup>
|
|
);
|
|
}
|
|
return rs;
|
|
};
|
|
|
|
useEffect(() => {
|
|
ListScrollOn(true);
|
|
let heightList = GetListHeight();
|
|
setListHeight(heightList.listHeight);
|
|
|
|
let tabContent = document.querySelector('.tab-content');
|
|
tabContent?.addEventListener('scroll', (e: Event) => {
|
|
setScrollAction(e, setGroupDate, setGroupDateOn);
|
|
});
|
|
|
|
return () => {
|
|
ListScrollOn(false);
|
|
tabContent?.removeEventListener('scroll', (e: Event) => {
|
|
setScrollAction(e, setGroupDate, setGroupDateOn);
|
|
});
|
|
};
|
|
}, []);
|
|
|
|
|
|
return (
|
|
<>
|
|
{ groupDateOn &&
|
|
<div className="summary-amount scroll-group-date">
|
|
<span className="amount-text">{ groupDate }</span>
|
|
<div className="summary-actions">
|
|
<button className="filter-btn">
|
|
<img
|
|
src={ IMAGE_ROOT + '/ico_setting.svg' }
|
|
alt={t('transaction.searchOptions')}
|
|
onClick={ onClickToOpenFilter }
|
|
/>
|
|
{ filterUsed &&
|
|
<span className="notification-badge2"></span>
|
|
}
|
|
</button>
|
|
<button className="download-btn">
|
|
<img
|
|
src={ IMAGE_ROOT + '/ico_download.svg' }
|
|
alt={t('transaction.download')}
|
|
onClick={ onClickToOpenDownloadBottomSheet }
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
}
|
|
<div
|
|
className="transaction-list"
|
|
style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
|
|
>
|
|
{ getListDateGroup() }
|
|
</div>
|
|
</>
|
|
);
|
|
}; |