export default()

in source/frontend/src/components/Drawer/Diagrams/ViewSelector/Graph/DiagramTable.js [13:103]

• 90 lines of code
• 1 McCabe index (conditional complexity)

export default ({
  trackBy,
  header,
  rows,
  columns,
  sortColumn,
  pageSize,
  selectedItems,
  onSelectionChange,
  handleDelete,
  handleOpen,
}) => {
  const {
    items,
    filterProps,
    collectionProps,
    paginationProps,
  } = useCollection(rows, {
    filtering: {
      empty: (
        <Box textAlign='center' color='inherit'>
          <b>No Architecture diagrams</b>
          <Box padding={{ bottom: 's' }} variant='p' color='inherit'>
            No Architecture diagrams to display.
          </Box>
        </Box>
      ),
      noMatch: (
        <Box textAlign='center' color='inherit'>
          <b>No match</b>
          <Box padding={{ bottom: 's' }} variant='p' color='inherit'>
            No Architecture diagrams matched.
          </Box>
        </Box>
      ),
    },
    pagination: { pageSize: pageSize },
    sorting: { sortingColumn: sortColumn },
  });

  return (
    <Table
      {...collectionProps}
      header={
        <Header
          actions={
            <SpaceBetween direction='horizontal' size='xs'>
              <Button
                disabled={selectedItems.length === 0}
                onClick={handleDelete}
                variant='link'>
                Delete
              </Button>
              <Button
                onClick={handleOpen}
                disabled={R.isEmpty(selectedItems)}
                variant='primary'>
                Open
              </Button>
            </SpaceBetween>
          }
          variant='h2'>
          {header}
        </Header>
      }
      trackBy={trackBy}
      resizableColumns
      stickyHeader
      columnDefinitions={columns}
      items={items}
      selectedItems={selectedItems}
      selectionType='single'
      onSelectionChange={(evt) => onSelectionChange(evt.detail.selectedItems)}
      filter={
        <TextFilter
          {...filterProps}
          filteringPlaceholder='Find an architecture diagram'
        />
      }
      empty={
        <Box textAlign='center' color='inherit'>
          <b>No Architecture diagrams</b>
          <Box padding={{ bottom: 's' }} variant='p' color='inherit'>
            No Architecture diagrams to display.
          </Box>
        </Box>
      }
      pagination={<Pagination {...paginationProps} />}
    />
  );
};