Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | import React, { useMemo } from 'react';
import { Box, Card, Typography, useTheme } from '@mui/material';
import { DateTime } from 'luxon';
import { getShortDate } from '../../utils/date';
import Slider from '../Slider';
export type MapDateSliderControlProps = {
dates: DateTime[]; // date strings in the format 'YYYY-MM-DD'
selectedDate: DateTime;
onChange: (newDate: DateTime) => void;
};
const MapDateSliderControl = ({ dates, selectedDate, onChange }: MapDateSliderControlProps): JSX.Element => {
const theme = useTheme();
const earliestDate = useMemo(() => {
return dates.reduce((earliest, current) => {
return current < earliest ? current : earliest;
});
}, [dates]);
const latestDate = useMemo(() => {
return dates.reduce((latest, current) => {
return current > latest ? current : latest;
});
}, [dates]);
const marks = useMemo(() => {
return dates.map((date) => ({ value: date.valueOf() }));
}, [dates]);
const getDateString = (date: DateTime) => getShortDate(date);
const getDateLabel = (date: DateTime) => <Typography fontSize='12px'>{getDateString(date)}</Typography>;
return (
<Card
style={{
border: `1px solid ${theme.palette.TwClrBrdrTertiary}`,
borderRadius: '8px',
display: 'flex',
flexDirection: 'column',
padding: theme.spacing(2),
maxWidth: '270px',
width: dates.length > 1 ? '270px' : undefined,
}}
>
{selectedDate && (
<Typography fontSize='14px' fontWeight={600} textAlign='right'>
{getDateString(selectedDate)}
</Typography>
)}
{dates.length > 1 && (
<>
<Slider
value={selectedDate.valueOf()}
min={earliestDate.valueOf()}
max={latestDate.valueOf()}
marks={marks}
valueLabelDisplay='off'
onChange={(value) => onChange(DateTime.fromMillis(value))}
/>
<Box display='flex' justifyContent='space-between'>
{getDateLabel(earliestDate)}
{getDateLabel(latestDate)}
</Box>
</>
)}
</Card>
);
};
export default MapDateSliderControl;
|