@seasketch/geoprocessing/dist/src/components/Collapse.js

Geoprocessing and reporting framework for SeaSketch 2.0

import { CaretDownFill, CaretRightFill } from "@styled-icons/bootstrap";
import React from "react";
import { styled } from "styled-components";
const StyledCollapse = styled.div `
  .collapse-header {
    margin-top: 15px;
    display: flex;
    height: 20px;
  }

  .collapse-button {
    display: flex;
    align-items: center;
    border: 0;
    background-color: transparent;
    font-size: 15px;
    font-weight: bold;
    color: #767676;
    cursor: pointer;
    padding: 0;
    margin-bottom: 10px;
  }

  .collapse-content {
    margin-left: 15px;
    background-color: transparent;
    & p {
      margin: 10px 0px;
    }
  }

  .collapse-content.collapsed {
    display: none;
  }

  .collapse-content.expanded {
    display: block;
  }
`;
export const Collapse = ({ collapsed = true, children, title, }) => {
    const [isCollapsed, setIsCollapsed] = React.useState(collapsed);
    return (React.createElement(StyledCollapse, { "aria-label": isCollapsed ? `Expand ${title}` : `Collapse ${title}`, "aria-expanded": !isCollapsed, role: "button" },
        React.createElement("div", { className: "collapse-header" },
            React.createElement("button", { className: "collapse-button", onClick: () => setIsCollapsed(!isCollapsed) },
                isCollapsed ? (React.createElement(CaretRightFill, { size: 15, style: { marginRight: "5px" }, "aria-hidden": "true" })) : (React.createElement(CaretDownFill, { size: 15, style: { marginRight: "5px" }, "aria-hidden": "true" })),
                " ",
                title)),
        React.createElement("div", { className: `collapse-content ${isCollapsed ? "collapsed" : "expanded"}` }, children)));
};
///////////
const StyledCollapseGroup = styled.div `
  margin-top: 15px;
  & .collapse-header {
    margin-top: 0px;
  }
`;
export const CollapseGroup = ({ children, }) => {
    return React.createElement(StyledCollapseGroup, null, children);
};
//# sourceMappingURL=Collapse.js.map