terriajs
Version:
Geospatial data visualization platform.
70 lines • 3.19 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from "react";
import styled from "styled-components";
import isDefined from "../../Core/isDefined";
import { RawButton } from "../../Styled/Button";
import { StyledIcon } from "../../Styled/Icon";
import Text from "../../Styled/Text";
import { CollapseIcon } from "../Custom/Collapsible/Collapsible";
/**
* A generic panel component for left, right, context items etc.
*/
export const Panel = (props) => {
const [isOpen, setIsOpen] = useState(false);
useEffect(() => {
if (isDefined(props.isOpen)) {
setIsOpen(props.isOpen);
}
}, [props.isOpen]);
const toggleOpen = () => {
const newIsOpen = !isOpen;
// Only update isOpen state if onToggle doesn't consume the event
if (!props.onToggle || !props.onToggle(newIsOpen))
setIsOpen(newIsOpen);
};
return props.title && props.collapsible ? (_jsxs(Wrapper, { className: props.className, children: [_jsxs(CollapsibleTitleBar, { onClick: toggleOpen, fullWidth: true, isOpen: isOpen, css: { paddingBottom: isOpen ? "15px" : "0px" }, children: [props.icon !== undefined ? (_jsx(Icon, { glyph: props.icon, styledWidth: "16px", styledHeight: "16px" })) : null, _jsx(Title, { children: props.title }), _jsx(CollapseIcon, { isOpen: isOpen })] }), isOpen ? _jsx(Content, { children: props.children }) : null] })) : (_jsxs(Wrapper, { className: props.className, children: [props.title !== undefined && (_jsxs(TitleBar, { children: [props.icon !== undefined ? (_jsx(Icon, { glyph: props.icon, styledWidth: "16px", styledHeight: "16px" })) : null, _jsx(Title, { children: props.title }), props.menuComponent] })), _jsx(Content, { children: props.children })] }));
};
/** Simple PanelButton - this mimics style of CollapsibleTitleBar */
export const PanelButton = ({ onClick, title }) => (_jsx(Wrapper, { children: _jsx(CollapsibleTitleBar, { onClick: onClick, fullWidth: true, isOpen: false, activeStyles: true, css: { paddingBottom: "0px" }, children: _jsx(Title, { css: { textAlign: "center" }, children: title }) }) }));
const Wrapper = styled.div `
background-color: ${(p) => p.theme.darkWithOverlay};
margin: 15px 15px 0px 15px;
padding: 15px;
border-radius: 5px;
`;
const TitleBar = styled.div `
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid ${(p) => p.theme.darkLighter};
padding-bottom: 15px;
margin-bottom: 5px;
`;
const CollapsibleTitleBar = styled(RawButton) `
text-align: left;
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-bottom: 15px;
margin-bottom: 5px;
${(p) => (p.isOpen ? `border-bottom: 1px solid ${p.theme.darkLighter}` : "")};
`;
const Title = styled(Text).attrs({
textLight: true,
medium: true
}) `
flex-grow: 1;
`;
const Icon = styled(StyledIcon).attrs({
styledWidth: "18px",
styledHeight: "18px",
light: true
}) ``;
const Content = styled.div `
color: ${(p) => p.theme.textLight};
`;
//# sourceMappingURL=Panel.js.map