@seasketch/geoprocessing/dist/src/components/table/FilterSelectTable.js

Geoprocessing and reporting framework for SeaSketch 2.0

import React from "react";
import Table from "./Table.js";
import CheckboxGroup from "../checkbox/CheckboxGroup.js";
import useCheckboxes from "../../hooks/useCheckboxes.js";
import { styled } from "styled-components";
export const FilterSelectTableStyled = styled.div `
  input {
    margin: 0px 10px 0px 0px;
  }

  table {
    margin-bottom: 10px;
  }
  .checkbox-group {
    margin: 10px 0px 10px 0px;
  }
`;
/**
 * Table with customizable filter functions as CheckboxGroup that when selected
 * filter the rows if the function return true.  By default only 'some' filter function
 * has to match for it to filter the row
 */
export function FilterSelectTable(props) {
    const { filterSelect, data, ...otherProps } = props;
    const { type = "some", filterPosition = "bottom", filters } = filterSelect;
    const options = filters.map((f) => ({
        name: f.name,
        checked: f.defaultValue,
    }));
    const checkboxState = useCheckboxes(options);
    const filteredData = React.useMemo(() => {
        const activeFilters = filters.filter((f, i) => checkboxState.checkboxes[i].checked);
        return data.filter((row) => {
            if (activeFilters.length === 0)
                return true;
            return activeFilters[type]((f) => f.filterFn(row));
        });
    }, [data, checkboxState.checkboxes]);
    const checkboxes = React.createElement(CheckboxGroup, { ...checkboxState });
    return (React.createElement(FilterSelectTableStyled, { className: "filter-select-table" },
        filterPosition === "top" && checkboxes,
        React.createElement(Table, { data: filteredData, ...otherProps }),
        filterPosition === "bottom" && checkboxes));
}
export default FilterSelectTable;
//# sourceMappingURL=FilterSelectTable.js.map