terriajs
Version:
Geospatial data visualization platform.
78 lines • 5.57 kB
JavaScript
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { observer } from "mobx-react";
import { forwardRef } from "react";
import { useTranslation, withTranslation } from "react-i18next";
import styled, { withTheme } from "styled-components";
import Box from "../../Styled/Box";
import Button from "../../Styled/Button";
import Icon, { StyledIcon } from "../../Styled/Icon";
import Spacing from "../../Styled/Spacing";
import Text from "../../Styled/Text";
import { ExplorerWindowElementName } from "../ExplorerWindow/ExplorerWindow";
import { useRefForTerria } from "../Hooks/useRefForTerria";
import SearchBoxAndResults from "../Search/SearchBoxAndResults";
import { useViewState, withViewState } from "../Context";
import Workbench from "../Workbench/Workbench";
import { applyTranslationIfExists } from "../../Language/languageHelpers";
import { Category, HelpAction } from "../../Core/AnalyticEvents/analyticEvents";
import { runInAction } from "mobx";
const BoxHelpfulHints = styled(Box) `
align-self: flex-end;
margin-top: auto;
color: ${(p) => p.theme.greyLighter};
`;
const EmptyWorkbench = observer(() => {
const { t } = useTranslation();
const viewState = useViewState();
const transContent = t("emptyWorkbenchInfo", {
returnObjects: true
});
return (_jsx(Box, { overflowY: "auto", scroll: true, column: true, fullWidth: true, children: _jsx(Text, { medium: true, light: true, children: _jsxs(BoxHelpfulHints, { column: true, gap: 4, paddedVertically: 5, paddedRatio: 3, overflowY: "auto", scroll: true, children: [transContent.map((content, idx) => (_jsxs("div", { children: [content.heading && (_jsxs(Text, { css: "margin-bottom: 5px; margin-top: 0", as: "h5", medium: true, bold: true, children: [content.heading, " "] })), content.body && _jsx(Text, { medium: true, children: content.body }), content.list && (_jsx("ul", { css: "padding-inline-start: 25px; margin: 0", children: content.list.map((item) => (_jsx("li", { children: item }, item))) }))] }, idx))), _jsx(Box, { centered: true, css: "margin-top: 25px", children: _jsx(Button, { textLight: true, transparentBg: true, onClick: () => {
viewState.terria.analytics?.logEvent(Category.help, HelpAction.takeTour);
runInAction(() => {
viewState.setTourIndex(0);
});
}, renderIcon: () => (_jsx(StyledIcon, { light: true, styledWidth: "18px", glyph: Icon.GLYPHS.info })), textProps: {
large: true,
textLight: true
}, css: ``, children: t("helpPanel.takeTour") }) })] }) }) }));
});
const SidePanelButton = forwardRef(function SidePanelButton(props, ref) {
const { btnText, ...rest } = props;
return (_jsx(Button, { primary: true, ref: ref, renderIcon: props.children && (() => props.children), textProps: {
large: true
}, ...rest, children: btnText ? btnText : "" }));
});
export const EXPLORE_MAP_DATA_NAME = "ExploreMapDataButton";
export const SIDE_PANEL_UPLOAD_BUTTON_NAME = "SidePanelUploadButton";
const SidePanel = observer(({ viewState, theme, refForExploreMapData, refForUploadData }) => {
const terria = viewState.terria;
const { t, i18n } = useTranslation();
const onAddDataClicked = (e) => {
e.stopPropagation();
viewState.setTopElement(ExplorerWindowElementName);
viewState.openAddData();
};
const onAddLocalDataClicked = (e) => {
e.stopPropagation();
viewState.setTopElement(ExplorerWindowElementName);
viewState.openUserData();
};
const addData = t("addData.addDataBtnText");
const uploadText = t("models.catalog.upload");
return (_jsxs(Box, { column: true, styledMinHeight: "0", flex: 1, children: [_jsxs("div", { css: `
padding: 0 15px;
background: none;
`, children: [_jsx(SearchBoxAndResults, { placeholder: applyTranslationIfExists(terria.searchBarModel.placeholder, i18n) }), _jsx(Spacing, { bottom: 2 }), _jsxs(Box, { justifySpaceBetween: true, children: [_jsx(SidePanelButton, { ref: refForExploreMapData, onClick: onAddDataClicked, title: addData, btnText: addData, styledWidth: "152px", children: _jsx(StyledIcon, { glyph: Icon.GLYPHS.add, light: true, styledWidth: "20px" }) }), _jsx(SidePanelButton, { ref: refForUploadData, onClick: onAddLocalDataClicked, title: t("addData.load"), btnText: uploadText, styledWidth: "152px", children: _jsx(StyledIcon, { glyph: Icon.GLYPHS.uploadThin, light: true, styledWidth: "20px" }) })] }), _jsx(Spacing, { bottom: 2 })] }), _jsx(Box, { fullHeight: true, column: true, flex: 1, css: `
overflow: hidden;
`, children: terria.workbench.items.length > 0 ? (_jsx(Workbench, { viewState: viewState, terria: terria })) : (_jsx(EmptyWorkbench, { theme: theme })) })] }));
});
// Used to create two refs for <SidePanel /> to consume, rather than
// using the withTerriaRef() HOC twice, designed for a single ref
const SidePanelWithRefs = (props) => {
const refForExploreMapData = useRefForTerria(EXPLORE_MAP_DATA_NAME, props.viewState);
const refForUploadData = useRefForTerria(SIDE_PANEL_UPLOAD_BUTTON_NAME, props.viewState);
return (_jsx(SidePanel, { ...props, refForExploreMapData: refForExploreMapData, refForUploadData: refForUploadData }));
};
export default withTranslation()(withViewState(withTheme(SidePanelWithRefs)));
//# sourceMappingURL=SidePanel.js.map