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 77 78 79 | import React, { useCallback, useState } from 'react';
import { Box } from '@mui/material';
import { action } from '@storybook/addon-actions';
import { Story } from '@storybook/react';
import { DateTime } from 'luxon';
import MapBox, { MapBoxProps } from '../components/Map/MapBox';
import MapContainer from '../components/Map/MapContainer';
import MapDateSliderControl from '../components/Map/MapDateSliderControl';
import { MapViewStyle } from '../components/Map/types';
import { useDeviceInfo } from '../utils';
export default {
title: 'MapDateSliderControl',
component: MapBox,
};
const Template: Story<MapBoxProps> = (args) => {
const { isDesktop } = useDeviceInfo();
const [mapViewStyle, setMapViewStyle] = useState<MapViewStyle>('Satellite');
const dates = [
DateTime.fromISO('2024-01-01'),
DateTime.fromISO('2024-03-01'),
DateTime.fromISO('2024-04-01'),
DateTime.fromISO('2024-08-01'),
DateTime.fromISO('2024-12-01'),
];
const [selectedDate, setSelectedDate] = useState<DateTime>(dates[0]);
const onSelectDate = useCallback(
(date: DateTime) => {
action('Date Selected')(date);
setSelectedDate(date);
},
[action]
);
return (
<MapContainer
containerId={'map-container'}
map={
<MapBox
{...args}
containerId={'map-container'}
mapViewStyle={mapViewStyle}
setMapViewStyle={setMapViewStyle}
controlBottomLeft={<MapDateSliderControl dates={dates} selectedDate={selectedDate} onChange={onSelectDate} />}
/>
}
legend={
<Box
display={'flex'}
minWidth={'184px'}
width={isDesktop ? '184px' : 'fill'}
minHeight={'700px'}
height={'fill'}
bgcolor={'#FCF4A3'}
alignItems={'center'}
justifyContent={'center'}
textAlign={'center'}
>
Legend Placeholder
</Box>
}
/>
);
};
export const Default = Template.bind({});
Default.args = {
mapId: 'map',
mapViewStyle: 'Satellite',
token: process.env.TERRAWARE_MAPBOX_API_TOKEN,
};
|