125 lines
3.1 KiB
TypeScript
125 lines
3.1 KiB
TypeScript
import { useTranslation } from "react-i18next";
|
|
import { PayoutListProps, PayoutSearchDateType } from "../../model/payout/types";
|
|
import { ListDateGroup } from "../list-date-group";
|
|
import { useEffect, useState } from "react";
|
|
import { GetListHeight, IMAGE_ROOT, ListScrollOn, setScrollAction } from "@/shared/constants/common";
|
|
|
|
export const PayoutList = ({
|
|
additionalServiceCategory,
|
|
listItems,
|
|
searchDateType,
|
|
mid,
|
|
setDetailData,
|
|
filterUsed,
|
|
onClickToOpenFilter,
|
|
onClickToOpenDownloadBottomSheet
|
|
}: PayoutListProps) => {
|
|
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 itemDateStr = '';
|
|
if (searchDateType === PayoutSearchDateType.REQUEST_DATE) {
|
|
itemDateStr = listItems[i]?.requestDate || '';
|
|
}
|
|
else if (searchDateType === PayoutSearchDateType.SETTLEMENT_DATE) {
|
|
itemDateStr = listItems[i]?.settlementDate || '';
|
|
}
|
|
let itemDate = itemDateStr.substring(0, 8);
|
|
if (i === 0) {
|
|
date = itemDate;
|
|
}
|
|
if (date !== itemDate) {
|
|
if (list.length > 0) {
|
|
rs.push(
|
|
<ListDateGroup
|
|
additionalServiceCategory={additionalServiceCategory}
|
|
mid={mid}
|
|
key={date + '-' + i}
|
|
date={date}
|
|
items={list}
|
|
setDetailData={setDetailData}
|
|
></ListDateGroup>
|
|
);
|
|
}
|
|
date = itemDate;
|
|
list = [];
|
|
}
|
|
list.push(listItems[i] as any);
|
|
}
|
|
if (list.length > 0) {
|
|
rs.push(
|
|
<ListDateGroup
|
|
additionalServiceCategory={additionalServiceCategory}
|
|
mid={mid}
|
|
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>
|
|
}
|
|
<section
|
|
className="transaction-list"
|
|
>
|
|
{getListDateGroup()}
|
|
</section>
|
|
</>
|
|
);
|
|
|
|
}; |