terriajs
Version:
Geospatial data visualization platform.
40 lines • 2.5 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from "styled-components";
import { useTranslation } from "react-i18next";
import CommonStrata from "../../Models/Definition/CommonStrata";
import { filterSelectableDimensions, isCheckboxGroup, isGroup } from "../../Models/SelectableDimensions/SelectableDimensions";
import Box from "../../Styled/Box";
import Text from "../../Styled/Text";
import Collapsible from "../Custom/Collapsible/Collapsible";
import SelectableDimension from "./SelectableDimension";
/**
* Component to render a SelectableDimensionGroup or DimensionSelectorCheckboxGroup.
*/
export const SelectableDimensionGroup = ({ id, dim }) => {
const { t } = useTranslation();
const childDims = filterSelectableDimensions(dim.placement)(dim.selectableDimensions);
// Hide static groups with empty children.
// We still show checkbox groups with empty children as they are stateful.
if (isGroup(dim) && childDims.length === 0)
return null;
return (_jsx(GroupContainer, { children: _jsx(Collapsible, { title: dim.type === "group"
? (dim.name ?? dim.id ?? "")
: (dim.options?.find((opt) => opt.id === dim.selectedId)?.name ??
(dim.selectedId === "true"
? t("selectableDimensions.enabled")
: t("selectableDimensions.disabled"))), titleTextProps: { bold: false }, bodyBoxProps: {
displayInlineBlock: true,
fullWidth: true
}, bodyTextProps: { large: true }, isOpen: dim.type === "group" ? dim.isOpen : dim.selectedId === "true", onToggle: dim.type === "group"
? dim.onToggle
: (isOpen) => {
dim.setDimensionValue(CommonStrata.user, isOpen ? "true" : "false");
return false;
}, btnStyle: dim.type === "checkbox-group" ? "checkbox" : undefined, btnRight: dim.type === "group", children: _jsxs(Box, { displayInlineBlock: true, fullWidth: true, styledPadding: "5px 0 0 20px", children: [isCheckboxGroup(dim) && childDims.length === 0 && dim.emptyText && (_jsx(Text, { children: dim.emptyText })), childDims.map((nestedDim) => (_jsx(SelectableDimension, { id: `${id}-${nestedDim.id}`, dim: nestedDim }, `${id}-${nestedDim.id}`)))] }) }) }));
};
const GroupContainer = styled.div `
padding: 10px 12px;
border-radius: 6px;
background: ${(p) => p.theme.overlay};
`;
//# sourceMappingURL=Group.js.map