timetable-app

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

JumpToTodayFab.tsx (1331B)

      1 import { Fab, Zoom } from '@mui/material';
      2 import { addDays, isFuture, set } from 'date-fns';
      3 
      4 import formatDate from 'common/utils/formatDate';
      5 
      6 import type { Dispatch, SetStateAction } from 'react';
      7 
      8 type Props = {
      9 	index: number;
     10 	dateStrings: string[];
     11 	setIndex: Dispatch<SetStateAction<number>>;
     12 };
     13 
     14 export default function JumpToTodayFab({
     15 	index,
     16 	dateStrings,
     17 	setIndex,
     18 }: Props) {
     19 	let type: 'today' | 'tomorrow' | null = null;
     20 	let targetDate: Date;
     21 
     22 	// 16時以前なら当日、16時以降なら翌日
     23 	const todays16hour = set(new Date(), {
     24 		hours: 16,
     25 		minutes: 0,
     26 		seconds: 0,
     27 	});
     28 	if (isFuture(todays16hour)) {
     29 		// 16時以前
     30 		type = 'today';
     31 		targetDate = new Date();
     32 	} else {
     33 		// 16時以降
     34 		type = 'tomorrow';
     35 		targetDate = addDays(new Date(), 1);
     36 	}
     37 
     38 	const targetIndex = dateStrings.indexOf(formatDate(targetDate));
     39 
     40 	if (targetIndex === -1) {
     41 		return;
     42 	}
     43 
     44 	const handleClick = () => setIndex(targetIndex);
     45 
     46 	return (
     47 		<Zoom in={index !== targetIndex}>
     48 			<Fab
     49 				onClick={handleClick}
     50 				color='primary'
     51 				variant='extended'
     52 				size='large'
     53 				sx={{
     54 					position: 'absolute',
     55 					right: 0,
     56 					bottom: 0,
     57 					p: 2,
     58 					lineHeight: 1.3,
     59 					width: 'fit-content',
     60 				}}
     61 			>
     62 				{type === 'today' ? <>今日</> : <>明日</>}の
     63 				<br />
     64 				時間割
     65 			</Fab>
     66 		</Zoom>
     67 	);
     68 }