@seasketch/geoprocessing/dist/src/components/checkbox/CheckboxGroup.js

Geoprocessing and reporting framework for SeaSketch 2.0

import React, { useCallback } from "react";
import { styled } from "styled-components";
const CheckboxStyled = styled.input `
  margin: 3px 10px;
  cursor: pointer;
`;
const CheckboxLabel = styled.label `
  cursor: pointer;
  display: block;
  font-weight: normal;

  & input {
    vertical-align: middle;
  }

  & .checkbox-label-text {
    vertical-align: middle;
  }
`;
/**
 * Controlled checkbox group
 * @param param0
 * @returns
 */
export function CheckboxGroup({ checkboxes, setCheckbox }) {
    return (React.createElement("div", { className: "checkbox-group" }, checkboxes.map((checkbox, i) => (React.createElement(CheckboxLabel, { key: i },
        React.createElement(CheckboxStyled, { key: i, type: "checkbox", checked: checkbox.checked, onChange: useCallback((e) => {
                setCheckbox(i, e.target.checked);
            }, [checkboxes]) }),
        React.createElement("span", { className: "checkbox-label-text" }, checkbox.name))))));
}
export default CheckboxGroup;
//# sourceMappingURL=CheckboxGroup.js.map