stitch-ui/src/services/mongodb/components/FilterRules.js

import React from "react"; // eslint-disable-line no-unused-vars
import PropTypes from "prop-types";
import { List } from "immutable";
import FilterRule from "./FilterRule";
import { Button } from "../../../core";

export default function FilterRules(props) {
  const {
    open,
    filters,
    setFilterWhenInput,
    setFilterMatchInput,
    removeFilter,
    discardFilterChanges,
    addFilter
  } = props;
  if (!open) {
    return null;
  }
  /* eslint-disable react/no-array-index-key */
  return (
    <div className="splitpanel-rightside-tabs-content">
      {filters.map((f, i) =>
        <FilterRule
          key={i}
          index={i}
          setFilterWhenInput={value => setFilterWhenInput(i, value)}
          setFilterMatchInput={value => setFilterMatchInput(i, value)}
          removeFilter={() => removeFilter(i)}
          discardChanges={() => discardFilterChanges(i)}
          filter={f}
        />
      )}
      <Button small default onClick={addFilter}>
        <i className="fa fa-plus" /> Add Filter
      </Button>
    </div>
  );
}

FilterRules.propTypes = {
  setFilterWhenInput: PropTypes.func.isRequired,
  setFilterMatchInput: PropTypes.func.isRequired,
  discardFilterChanges: PropTypes.func.isRequired,
  removeFilter: PropTypes.func.isRequired,
  addFilter: PropTypes.func.isRequired,
  filters: PropTypes.instanceOf(List).isRequired,
  open: PropTypes.bool
};
FilterRules.defaultProps = {
  open: false
};