139 lines
3.9 KiB
TypeScript
139 lines
3.9 KiB
TypeScript
import { PATHS } from '@/shared/constants/paths';
|
|
import { IMAGE_ROOT } from '@/shared/constants/common';
|
|
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
|
import {
|
|
FooterProps,
|
|
FooterItemActiveKey
|
|
} from '@/entities/common/model/types';
|
|
import { useEffect, useState } from 'react';
|
|
import { useAppBridge } from '@/hooks';
|
|
|
|
export const FooterNavigation = ({
|
|
setMenuOn,
|
|
footerCurrentPage,
|
|
setFavoriteEdit
|
|
}: FooterProps) => {
|
|
const { navigate } = useNavigate();
|
|
const [isFooterOn, setIsFooterOn] = useState<boolean>(false);
|
|
|
|
const onClickToNavigate = (path?: string) => {
|
|
if(!!path){
|
|
navigate(path);
|
|
}
|
|
};
|
|
const onClickToOpenMenu = () => {
|
|
setFavoriteEdit(false);
|
|
setMenuOn(true);
|
|
};
|
|
|
|
const buttonItems = [
|
|
{
|
|
activeIcon: IMAGE_ROOT + '/home-active.svg',
|
|
inactiveIcon: IMAGE_ROOT + '/home.svg',
|
|
path: PATHS.home,
|
|
activeKey: FooterItemActiveKey.Home,
|
|
title: '홈'
|
|
},
|
|
{
|
|
activeIcon: IMAGE_ROOT + '/chart-active.svg',
|
|
inactiveIcon: IMAGE_ROOT + '/chart.svg',
|
|
path: PATHS.transaction.allTransaction.list,
|
|
activeKey: FooterItemActiveKey.Transaction,
|
|
title: '거래조회'
|
|
},
|
|
{
|
|
activeIcon: IMAGE_ROOT + '/money-active.svg',
|
|
inactiveIcon: IMAGE_ROOT + '/money.svg',
|
|
path: PATHS.settlement.list,
|
|
activeKey: FooterItemActiveKey.Settlement,
|
|
title: '정산내역'
|
|
},
|
|
{
|
|
activeIcon: IMAGE_ROOT + '/users-active.svg',
|
|
inactiveIcon: IMAGE_ROOT + '/users.svg',
|
|
path: PATHS.account.user.manage,
|
|
activeKey: FooterItemActiveKey.Account,
|
|
title: '사용자관리'
|
|
},
|
|
{
|
|
activeIcon: IMAGE_ROOT + '/more-active.svg',
|
|
inactiveIcon: IMAGE_ROOT + '/more.svg',
|
|
title: '더보기'
|
|
},
|
|
];
|
|
|
|
const getFooterButtonItems = () => {
|
|
let rs = [];
|
|
for(let i=0;i<buttonItems.length;i++){
|
|
rs.push(
|
|
<button
|
|
key={ `footer-button-item-${i}` }
|
|
className={ `tab-button ${((footerCurrentPage && footerCurrentPage === buttonItems[i]?.activeKey)? 'active': '')}` }
|
|
data-tab={ `tab-${i}` }
|
|
data-active-icon={ buttonItems[i]?.activeIcon }
|
|
data-inactive-icon={ buttonItems[i]?.inactiveIcon }
|
|
onClick={ () => {
|
|
if(!!buttonItems[i]?.path){
|
|
onClickToNavigate(buttonItems[i]?.path);
|
|
}
|
|
else{
|
|
onClickToOpenMenu();
|
|
}
|
|
}
|
|
}
|
|
>
|
|
<div className="tab-icon">
|
|
<img
|
|
className="tab-icon-img"
|
|
src={ (footerCurrentPage && footerCurrentPage === buttonItems[i]?.activeKey)? buttonItems[i]?.activeIcon: buttonItems[i]?.inactiveIcon }
|
|
alt={ buttonItems[i]?.title }
|
|
/>
|
|
</div>
|
|
<span className="tab-text">{ buttonItems[i]?.title }</span>
|
|
</button>
|
|
)
|
|
}
|
|
return rs;
|
|
};
|
|
|
|
useEffect(() => {
|
|
let previousTouch: any;
|
|
|
|
const handleTouchStart = (e: TouchEvent) => {
|
|
const touch: Touch | undefined = e.touches[0];
|
|
previousTouch = touch;
|
|
};
|
|
const handleTouchMove = (e: TouchEvent) => {
|
|
const touch: Touch | undefined = e.touches[0];
|
|
let movementY: number | undefined;
|
|
if(touch && previousTouch){
|
|
movementY = touch.pageY - previousTouch.pageY;
|
|
if(movementY > 0){
|
|
setIsFooterOn(false);
|
|
}
|
|
else{
|
|
setIsFooterOn(true);
|
|
}
|
|
};
|
|
};
|
|
|
|
window.addEventListener('touchstart', handleTouchStart);
|
|
window.addEventListener('touchmove', handleTouchMove);
|
|
|
|
return () => {
|
|
window.removeEventListener('touchstart', handleTouchStart);
|
|
window.removeEventListener('touchmove', handleTouchMove);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
{ isFooterOn &&
|
|
<nav className="bottom-tabbar">
|
|
{ getFooterButtonItems() }
|
|
</nav>
|
|
}
|
|
</>
|
|
);
|
|
};
|