react-data-view/packages/module/src/DataViewToolbar/DataViewToolbar.tsx at 0dcd8a3d53e0cd4463058d823831421b4b23922a · CodyWMitchell/react-data-view · GitHub

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import { FC, PropsWithChildren, useRef } from 'react';
import { Button, Toolbar, ToolbarContent, ToolbarItem, ToolbarItemVariant, ToolbarProps } from '@patternfly/react-core';
import { createUseStyles } from 'react-jss';

/** extends ToolbarProps */
export interface DataViewToolbarProps extends Omit<PropsWithChildren<ToolbarProps>, 'ref'> {
  /** Toolbar className */
  className?: string;
  /** Custom OUIA ID */
  ouiaId?: string;
  /** React node to display bulk select */
  bulkSelect?: React.ReactNode;
  /** React node to display pagination */
  pagination?: React.ReactNode;
  /** React node to display actions */
  actions?: React.ReactNode;
  /** React node to display toggle group */
  toggleGroup?: React.ReactNode;
  /** React node to display filters */
  filters?: React.ReactNode;
  /** React node to display custom filter labels */
  customLabelGroupContent?: React.ReactNode;
}

const useStyles = createUseStyles({
  dataViewToolbarPagination: {
    flexBasis: '100%',
    width: '100%'
  },
  dataViewToolbarPaginationWrapper: {
    flexBasis: '100%',
    width: '100%'
  }
});

export const DataViewToolbar: FC<DataViewToolbarProps> = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, actions, toggleGroup, pagination, filters, customLabelGroupContent, clearAllFilters, children, ...props }: DataViewToolbarProps) => {
  const classes = useStyles();
  const defaultClearFilters = useRef(
    <ToolbarItem>
      <Button ouiaId={`${ouiaId}-clear-all-filters`} variant="link" onClick={clearAllFilters} isInline>
        Clear filters
      </Button>
    </ToolbarItem>
  );
  return (
    <Toolbar ouiaId={ouiaId} className={className} customLabelGroupContent={customLabelGroupContent ?? defaultClearFilters.current} {...props}>
      <ToolbarContent>
        {bulkSelect && (
          <ToolbarItem data-ouia-component-id={`${ouiaId}-bulk-select`}>
            {bulkSelect}
          </ToolbarItem>
        )}
        {filters && (
          <ToolbarItem>
            {filters}
          </ToolbarItem>
        )}
        {actions && (
          <ToolbarItem>
            {actions}
          </ToolbarItem>
        )}
        {toggleGroup && (
          <ToolbarItem>
            {toggleGroup}
          </ToolbarItem>
        )}
        {pagination && (
          <ToolbarItem variant={ToolbarItemVariant.pagination} data-ouia-component-id={`${ouiaId}-pagination`} className={classes.dataViewToolbarPagination}>
            <div className={classes.dataViewToolbarPaginationWrapper}>
              {pagination}
            </div>
          </ToolbarItem>
        )}
        {children}
      </ToolbarContent>
    </Toolbar>
  )
};

export default DataViewToolbar;