terriajs
Version:
Geospatial data visualization platform.
58 lines (56 loc) • 2.22 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef } from "react";
import styled from "styled-components";
import { Button } from "../../Styled/Button";
import Icon, { StyledIcon } from "../../Styled/Icon";
import { useViewState } from "../Context";
const NotificationToast = ({ notification }) => {
const viewState = useViewState();
const nodeRef = useRef(null);
const notificationState = viewState.terria.notificationState;
const durationMsecs = notification.toastVisibleDuration
? notification.toastVisibleDuration * 1000
: undefined;
const message = typeof notification.message === "function"
? notification.message(viewState)
: notification.message;
useEffect(() => {
const timeout = setTimeout(() => {
if (notificationState.currentNotification === notification) {
notificationState.dismissCurrentNotification();
}
}, durationMsecs);
return () => clearTimeout(timeout);
}, [notification, notificationState, durationMsecs]);
return (_jsxs(Wrapper, { ref: nodeRef, children: [_jsx(StyledIcon, { styledWidth: "24px", styledHeight: "24px", glyph: Icon.GLYPHS.warning, fillColor: "#EA580C" }), _jsx("div", { children: message }), _jsx(CloseButton, { onClick: (e) => {
e.stopPropagation();
notificationState.dismissCurrentNotification();
} })] }));
};
const Wrapper = styled.div `
display: flex;
flex-direction: row;
align-items: center;
position: fixed;
bottom: 70px;
left: 50%;
transform: translate(-35%);
border: 1px solid #ea580c;
border-radius: 6px;
z-index: ${(p) => p.theme.notificationWindowZIndex};
max-width: 50%;
padding: 16px;
gap: 16px;
background-color: #f2f2f2;
`;
const CloseButton = styled(Button).attrs({
styledWidth: "24px",
styledHeight: "24px",
renderIcon: () => (_jsx(StyledIcon, { glyph: Icon.GLYPHS.closeLight, styledWidth: "16px", styledHeight: "16px", dark: true }))
}) `
background-color: transparent;
border: 0;
min-height: max-content;
`;
export default NotificationToast;
//# sourceMappingURL=NotificationToast.js.map