terriajs
Version:
Geospatial data visualization platform.
65 lines • 3.07 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { observer } from "mobx-react";
import { useEffect, useRef, useState } from "react";
import { Trans } from "react-i18next";
import { useTheme } from "styled-components";
import Box from "../Styled/Box";
import { RawButton } from "../Styled/Button";
import Icon, { StyledIcon } from "../Styled/Icon";
import Text, { TextSpan } from "../Styled/Text";
import { useViewState } from "./Context";
const DragDropNotification = observer(({ uploadedFiles }) => {
const theme = useTheme();
const viewState = useViewState();
const [showNotification, setShowNotification] = useState(false);
const notificationTimeoutRef = useRef(null);
useEffect(() => {
if (notificationTimeoutRef.current) {
clearTimeout(notificationTimeoutRef.current);
}
// show notification, restart timer
setShowNotification(true);
// initialise new time out
notificationTimeoutRef.current = setTimeout(() => {
setShowNotification(false);
}, 5000);
return () => {
if (notificationTimeoutRef.current) {
clearTimeout(notificationTimeoutRef.current);
}
};
}, [uploadedFiles]);
const handleHover = () => {
// reset timer on hover
if (notificationTimeoutRef.current) {
clearTimeout(notificationTimeoutRef.current);
}
};
const handleMouseLeave = () => {
notificationTimeoutRef.current = setTimeout(() => {
setShowNotification(false);
}, 4000);
};
const handleClick = () => {
viewState.openUserData();
};
const fileNames = uploadedFiles.join(",");
return (_jsxs(RawButton, { css: `
display: flex;
background: #ffffff;
position: fixed;
right: -280px;
top: 80px;
z-index: 9;
transition: all 0.25s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
${showNotification && fileNames.length > 0 && `right: 100px;`};
`, onMouseEnter: handleHover, onMouseLeave: handleMouseLeave, onClick: handleClick, children: [_jsx(Box, { paddedRatio: 3, css: `
background: ${theme.colorPrimary};
`, children: _jsx(StyledIcon, { glyph: Icon.GLYPHS.upload, light: true, styledWidth: "35px", opacity: 0.9 }) }), _jsx(Box, { paddedRatio: 3, displayInlineBlock: true, styledWidth: "210px", css: `
color: ${theme.dark};
`, children: _jsx(Text, { extraLarge: true, breakWord: true, children: _jsxs(Trans, { i18nKey: "dragDrop.notification", count: uploadedFiles.length, children: [_jsxs(TextSpan, { bold: true, noFontSize: true, children: ["\"", { fileNames }, "\""] }), { count: uploadedFiles.length }, " been added to", " ", _jsx(TextSpan, { primary: true, noFontSize: true, children: "My data" })] }) }) })] }));
});
DragDropNotification.displayName = "DragDropNotification";
export default DragDropNotification;
//# sourceMappingURL=DragDropNotification.js.map