terriajs
Version:
Geospatial data visualization platform.
104 lines (101 loc) • 5.06 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import dateFormat from "dateformat";
import { observer } from "mobx-react";
import { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import styled from "styled-components";
import JulianDate from "terriajs-cesium/Source/Core/JulianDate";
import CommonStrata from "../../../Models/Definition/CommonStrata";
import Box from "../../../Styled/Box";
import Button from "../../../Styled/Button";
import Icon, { StyledIcon } from "../../../Styled/Icon";
import Spacing from "../../../Styled/Spacing";
import Text, { TextSpan } from "../../../Styled/Text";
import { formatDateTime } from "../../BottomDock/Timeline/DateFormats";
import DateTimePicker from "../../BottomDock/Timeline/DateTimePicker";
const DatePicker = forwardRef((props, ref) => {
const { heading, item, onDateSet } = props;
const { t } = useTranslation();
const [isOpen, setIsOpen] = useState(false);
const currentDate = useMemo(() => {
const date = item.currentDiscreteJulianDate;
return date && JulianDate.toDate(date);
}, [item.currentDiscreteJulianDate]);
const formattedCurrentDate = useMemo(() => {
if (currentDate === undefined) {
return;
}
const dateFormatting = undefined; // TODO
const formattedDate = dateFormatting !== undefined
? dateFormat(currentDate, dateFormatting)
: formatDateTime(currentDate);
return formattedDate;
}, [currentDate]);
const toggleOpen = useCallback(() => {
setIsOpen(!isOpen);
}, [isOpen]);
const changeCurrentDate = useCallback((date) => {
item.setTrait(CommonStrata.user, "currentTime", date.toISOString());
onDateSet();
}, [item, onDateSet]);
const moveToPreviousDate = useCallback(() => {
item.moveToPreviousDiscreteTime(CommonStrata.user);
onDateSet();
}, [item, onDateSet]);
const moveToNextDate = useCallback(() => {
item.moveToNextDiscreteTime(CommonStrata.user);
onDateSet();
}, [item, onDateSet]);
useImperativeHandle(ref, () => {
return {
open: () => {
setIsOpen(true);
},
close: () => {
setIsOpen(false);
}
};
}, []);
return (_jsxs(Box, { column: true, centered: true, flex: 1, children: [_jsx(Spacing, { bottom: 4 }), _jsxs(Box, { centered: true, children: [_jsx(StyledIcon, { light: true, styledWidth: "21px", glyph: Icon.GLYPHS.calendar2, css: "margin-top:-2px;" }), _jsx(Spacing, { right: 2 }), _jsx(Text, { textLight: true, extraLarge: true, children: heading })] }), _jsx(Spacing, { bottom: 2 }), _jsxs(Box, { children: [_jsx(PrevButton, { disabled: item.isPreviousDiscreteTimeAvailable === false, title: t("diffTool.datePicker.previousDateTitle"), onClick: moveToPreviousDate }), _jsx(DateButton, { primary: true, isOpen: isOpen, onClick: toggleOpen, title: t("diffTool.datePicker.dateButtonTitle"), children: _jsx(TextSpan, { extraLarge: true, children: formattedCurrentDate || "-" }) }), _jsx(NextButton, { disabled: item.isNextDiscreteTimeAvailable === false, title: t("diffTool.datePicker.nextDateTitle"), onClick: moveToNextDate })] }), _jsx("div", { style: {
display: isOpen ? "block" : "none",
position: "absolute"
}, children: _jsx(DateTimePicker, { currentDate: currentDate, dates: item.objectifiedDates, onChange: changeCurrentDate, openDirection: "up", isOpen: isOpen, onClose: () => setIsOpen(false) }) }), _jsx(Spacing, { bottom: 4 })] }));
});
DatePicker.displayName = "DatePicker";
const PagerButton = styled(Button).attrs({
iconProps: {
css: "margin-right:0;"
}
}) `
cursor: pointer;
background-color: ${(props) => props.theme.colorPrimary};
width: 40px;
border: 1px solid transparent;
${({ theme }) => theme.centerWithFlex()}
flex-direction: column;
`;
const PrevButton = styled(PagerButton).attrs({
renderIcon: () => (_jsx(StyledIcon, { css: "transform:rotate(90deg);", light: true, styledWidth: "15px", glyph: Icon.GLYPHS.arrowDown }))
}) `
${({ theme }) => theme.borderRadiusLeft(theme.radius40Button)}
margin-right: 1px;
`;
const NextButton = styled(PagerButton).attrs({
renderIcon: () => (_jsx(StyledIcon, { css: "transform:rotate(270deg);", light: true, styledWidth: "15px", glyph: Icon.GLYPHS.arrowDown }))
}) `
${({ theme }) => theme.borderRadiusRight(theme.radius40Button)}
margin-left: 1px;
`;
const DateButton = styled(Button) `
// z-index: 1000; // (Nanda): So that we don't loose the button clicks to the date picker popup
z-index: 0;
${(props) => props.isOpen && `z-index: 1000;`};
border-radius: 0px;
border: 1px solid ${(props) => props.theme.colorPrimary};
min-width: 235px;
@media (max-width: ${(props) => props.theme.lg}px) {
min-width: 150px;
}
`;
export default observer(DatePicker);
//# sourceMappingURL=DatePicker.js.map