terriajs
Version:
Geospatial data visualization platform.
68 lines (67 loc) • 4.8 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { action } from "mobx";
import { observer } from "mobx-react";
import { sortable } from "react-anything-sortable";
import { useTranslation } from "react-i18next";
import styled, { useTheme } from "styled-components";
import getPath from "../../Core/getPath";
import CatalogMemberMixin, { getName } from "../../ModelMixins/CatalogMemberMixin";
import MappableMixin from "../../ModelMixins/MappableMixin";
import ReferenceMixin from "../../ModelMixins/ReferenceMixin";
import CommonStrata from "../../Models/Definition/CommonStrata";
import Box, { BoxSpan } from "../../Styled/Box";
import { RawButton } from "../../Styled/Button";
import Checkbox from "../../Styled/Checkbox/Checkbox";
import Icon, { StyledIcon } from "../../Styled/Icon";
import { Li } from "../../Styled/List";
import { TextSpan } from "../../Styled/Text";
import Loader from "../Loader";
import PrivateIndicator from "../PrivateIndicator/PrivateIndicator";
import WorkbenchItemControls from "./Controls/WorkbenchItemControls";
const WorkbenchItemRaw = observer((props) => {
const { item, style, className, viewState, onMouseDown, onTouchStart } = props;
const { t } = useTranslation();
const theme = useTheme();
const toggleDisplay = action(() => {
if (!CatalogMemberMixin.isMixedInto(item))
return;
item.setTrait(CommonStrata.user, "isOpenInWorkbench", !item.isOpenInWorkbench);
});
const toggleVisibility = action(() => {
if (MappableMixin.isMixedInto(item)) {
item.setTrait(CommonStrata.user, "show", !item.show);
}
});
/** If workbench item is CatalogMember use CatalogMemberTraits.isOpenInWorkbench
* Otherwise, defaults to true
*/
const isOpen = !CatalogMemberMixin.isMixedInto(item) || item.isOpenInWorkbench;
const isLoading = (CatalogMemberMixin.isMixedInto(item) && item.isLoading) ||
(ReferenceMixin.isMixedInto(item) && item.isLoadingReference);
return (_jsxs(StyledLi, { style: style, className: className, children: [_jsxs(Box, { fullWidth: true, justifySpaceBetween: true, paddedRatio: 3, styledMinHeight: "38px", children: [_jsx(Box, { fullWidth: true, children: _jsx(Box, { left: true, fullWidth: true, centered: true, children: _jsxs(DraggableBox, { onMouseDown: onMouseDown, onTouchStart: onTouchStart, title: getPath(item, " → "), fullWidth: true, children: [!item.isMappable && !isLoading && (_jsx(BoxSpan, { paddedHorizontally: true, displayInlineBlock: true, children: _jsx(Box, { padded: true, children: _jsx(StyledIcon, { styledHeight: "18px", light: true, glyph: Icon.GLYPHS.lineChart }) }) })), MappableMixin.isMixedInto(item) ? (_jsx(Box, { left: true, verticalCenter: true, children: _jsx(Checkbox, { id: "workbenchtoggleVisibility", isChecked: item.show, isSwitch: true, title: t("workbench.toggleVisibility"), onChange: toggleVisibility, css: `
overflow-wrap: anywhere;
margin-right: 5px;
`, textProps: { medium: true, fullWidth: true }, children: _jsx(TextSpan, { medium: true, maxLines: !isOpen ? 2 : false, title: getName(item), children: getName(item) }) }) })) : (_jsx(TextSpan, { medium: true, textLight: true, maxLines: !isOpen ? 2 : false, title: getName(item), css: `
overflow-wrap: anywhere;
`, children: getName(item) }))] }) }) }), CatalogMemberMixin.isMixedInto(item) ? (_jsxs(Box, { centered: true, paddedHorizontally: true, children: [item.isPrivate && (_jsx(BoxSpan, { paddedHorizontally: true, children: _jsx(PrivateIndicator, { inWorkbench: true }) })), _jsx(RawButton, { onClick: toggleDisplay, children: _jsx(BoxSpan, { padded: true, children: isOpen ? (_jsx(StyledIcon, { styledHeight: "8px", light: true, glyph: Icon.GLYPHS.opened })) : (_jsx(StyledIcon, { styledHeight: "8px", light: true, glyph: Icon.GLYPHS.closed })) }) })] })) : null] }), isOpen && (_jsxs(Box, { column: true, gap: 3, paddedRatio: 3, css: {
borderTop: `1px solid ${theme.grey}`,
color: theme.greyLighter
}, children: [_jsx(WorkbenchItemControls, { item: item, viewState: viewState }), isLoading ? (_jsx(Box, { paddedVertically: true, children: _jsx(Loader, { light: true }) })) : null] }))] }));
});
WorkbenchItemRaw.displayName = "WorkbenchItem";
const DraggableBox = styled(Box) `
cursor: move;
`;
const StyledLi = styled(Li) `
background: ${(p) => p.theme.darkWithOverlay};
color: ${(p) => p.theme.textLight};
border-radius: 8px;
border: 1px solid ${(p) => p.theme.grey};
width: 100%;
margin-bottom: 20px;
&:last-child {
margin-bottom: 0px;
}
`;
export default sortable(WorkbenchItemRaw);
//# sourceMappingURL=WorkbenchItem.js.map