📦 EqualifyEverything / equalify-v2-dashboard-mocks

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44import { capitalize } from "../utils/utils"
import CheckboxTable from "./CheckboxTable"

// Subtable for a group of blockers, including an accordion button to show/hide
// (itemName, groupValue) should be a unique pair, since we use that for the ID
const CheckboxTableGroup: React.FC<{
  groupValue: string
  itemName: string
  columns: Labeled[]
  data: any[]
  expanded: boolean
  setExpanded: Function
  onCheckedBoxesChange: Function
  }> = ({
  groupValue, itemName, columns, data, expanded, setExpanded, onCheckedBoxesChange
}) => {
  
  const buttonItemName = capitalize(`${itemName}${data.length === 1 ? '' : 's'}`)
  const buttonText = `${groupValue} (${buttonItemName})`

  return (
    <>
      <h4>
        <button
          type="button" 
          className="accordion-trigger"
          aria-expanded={expanded}
          onClick={(e) => setExpanded(!expanded)}
        >
          { buttonText }
        </button>
      </h4>
      <CheckboxTable 
        itemName={ itemName } 
        columns={ columns } 
        data={ data } 
        onCheckedBoxesChange={ onCheckedBoxesChange } 
        expanded={ expanded } 
      />
    </>
  )
}

export default CheckboxTableGroup