1859

pending completion

Build # 1859

Build Type

push

travis-ci

Committed by

web-flow

Commit Message

Merge pull request #1355 from gregnb/revert-1352-functional/tableHead

Revert "Refactoring TableHead"

Run Details

827 of 1164 branches covered (71.05%)

Branch coverage included in aggregate %.

20 of 20 new or added lines in 3 files covered. (100.0%)

1013 of 1357 relevant lines covered (74.65%)

99.73 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

71.67

/src/components/TableHead.js

import { makeStyles } from '@material-ui/core/styles';
import MuiTableHead from '@material-ui/core/TableHead';
import classNames from 'classnames';
import React, {useState} from 'react';
import TableHeadCell from './TableHeadCell';
import TableHeadRow from './TableHeadRow';
import TableSelectCell from './TableSelectCell';

const useStyles = makeStyles(theme => ({
  main: {},
  responsiveStacked: {
    [theme.breakpoints.down('sm')]: {
      display: 'none',
    },
  },
  responsiveSimple: {
    [theme.breakpoints.down('xs')]: {
      display: 'none',
    },
  },
}), {name: 'MUIDataTableHead'});

function TableHead(props) {
  
  const[dragging, setDragging] = useState(false);

  const {
    columns,
    count,
    options,
    data,
    setCellRef,
    selectedRows,
    expandedRows,
    updateColumnOrder,
    columnOrder = props.columns ? props.columns.map((item,idx) => idx) : [],
    draggableHeadCellRefs,
    timers,
    toggleSort,
    tableRef,
    sortOrder = {},
    components = {},
  } = props;
  const classes = useStyles();

  const handleToggleColumn = index => {
    toggleSort(index);
  };

  const handleRowSelect = () => {
    props.selectRowUpdate('head', null);
  };

  const numSelected = (selectedRows && selectedRows.data.length) || 0;
  let isIndeterminate = numSelected > 0 && numSelected < count;
  let isChecked = numSelected > 0 && numSelected >= count;

  // When the disableToolbarSelect option is true, there can be
  // selected items that aren't visible, so we need to be more
  // precise when determining if the head checkbox should be checked.
  if (
    options.disableToolbarSelect === true ||
    options.selectToolbarPlacement === 'none' ||
    options.selectToolbarPlacement === 'above'
  ) {
    if (isChecked) {
      for (let ii = 0; ii < data.length; ii++) {
        if (!selectedRows.lookup[data[ii].dataIndex]) {
          isChecked = false;
          isIndeterminate = true;
          break;
        }
      }
    } else {
      if (numSelected > count) {
        isIndeterminate = true;
      }
    }
  }

  let orderedColumns = columnOrder.map( (colIndex, idx) => {
    return {
      column: columns[colIndex],
      index: colIndex,
      colPos: idx,
    };
  });

  return (
    <MuiTableHead
      className={classNames({
        [classes.responsiveStacked]:
          options.responsive === 'vertical' ||
          options.responsive === 'stacked' ||
          options.responsive === 'stackedFullWidth',
        [classes.responsiveSimple]: options.responsive === 'simple',
        [classes.main]: true,
      })}>
      <TableHeadRow>
        <TableSelectCell
          setHeadCellRef={setCellRef}
          onChange={handleRowSelect.bind(null)}
          indeterminate={isIndeterminate}
          checked={isChecked}
          isHeaderCell={true}
          expandedRows={expandedRows}
          expandableRowsHeader={options.expandableRowsHeader}
          expandableOn={options.expandableRows}
          selectableOn={options.selectableRows}
          fixedHeader={options.fixedHeader}
          fixedSelectColumn={options.fixedSelectColumn}
          selectableRowsHeader={options.selectableRowsHeader}
          onExpand={props.toggleAllExpandableRows}
          isRowSelectable={true}
        />
        {orderedColumns.map(
          ({column, index, colPos}) =>
            column.display === 'true' &&
            (column.customHeadRender ? (
              column.customHeadRender({ index, ...column }, handleToggleColumn, sortOrder)
            ) : (
              <TableHeadCell
                cellHeaderProps={
                  columns[index].setCellHeaderProps ? columns[index].setCellHeaderProps({ index, ...column }) : {}
                }
                key={index}
                index={index}
                colPosition={colPos}
                type={'cell'}
                setCellRef={setCellRef}
                sort={column.sort}
                sortDirection={column.name === sortOrder.name ? sortOrder.direction : 'none'}
                toggleSort={handleToggleColumn}
                hint={column.hint}
                print={column.print}
                options={options}
                column={column}
                updateColumnOrder={updateColumnOrder}
                columnOrder={columnOrder}
                timers={timers}
                draggingHook={[dragging, setDragging]}
                draggableHeadCellRefs={draggableHeadCellRefs}
                tableRef={tableRef}
                components={components}>
                {column.label}
              </TableHeadCell>
            )),
        )}
      </TableHeadRow>
    </MuiTableHead>
  );
}

export default TableHead;

1	import { makeStyles } from '@material-ui/core/styles';
2	import MuiTableHead from '@material-ui/core/TableHead';
3	import classNames from 'classnames';
4	import React, {useState} from 'react';
5	import TableHeadCell from './TableHeadCell';
6	import TableHeadRow from './TableHeadRow';
7	import TableSelectCell from './TableSelectCell';
8
9	const useStyles = makeStyles(theme => ({	1✔
10	main: {},	3✔
11	responsiveStacked: {
12	[theme.breakpoints.down('sm')]: {
13	display: 'none',
14	},
15	},
16	responsiveSimple: {
17	[theme.breakpoints.down('xs')]: {
18	display: 'none',
19	},
20	},
21	}), {name: 'MUIDataTableHead'});
22
23	function TableHead(props) {
24
25	const[dragging, setDragging] = useState(false);
26
27	const {	49✔
28	columns,
29	count,
30	options,
31	data,
32	setCellRef,
33	selectedRows,
34	expandedRows,
35	updateColumnOrder,
36	columnOrder = props.columns ? props.columns.map((item,idx) => idx) : [],
37	draggableHeadCellRefs,
38	timers,	32!
39	toggleSort,
40	tableRef,
41	sortOrder = {},
42	components = {},
43	} = props;	8✔
44	const classes = useStyles();	8✔
45		49✔
46	const handleToggleColumn = index => {	49✔
47	toggleSort(index);
48	};	49✔
49		3✔
50	const handleRowSelect = () => {
51	props.selectRowUpdate('head', null);
52	};	49✔
53		1✔
54	const numSelected = (selectedRows && selectedRows.data.length) \|\| 0;
55	let isIndeterminate = numSelected > 0 && numSelected < count;
56	let isChecked = numSelected > 0 && numSelected >= count;	49✔
57		49✔
58	// When the disableToolbarSelect option is true, there can be	49✔
59	// selected items that aren't visible, so we need to be more
60	// precise when determining if the head checkbox should be checked.
61	if (
62	options.disableToolbarSelect === true \|\|
63	options.selectToolbarPlacement === 'none' \|\|	49!
64	options.selectToolbarPlacement === 'above'	147✔
65	) {
66	if (isChecked) {
67	for (let ii = 0; ii < data.length; ii++) {
68	if (!selectedRows.lookup[data[ii].dataIndex]) {	×
69	isChecked = false;	×
70	isIndeterminate = true;	×
71	break;	×
72	}	×
73	}	×
74	} else {
75	if (numSelected > count) {
76	isIndeterminate = true;
77	}	×
78	}	×
79	}
80
81	let orderedColumns = columnOrder.map( (colIndex, idx) => {
82	return {
83	column: columns[colIndex],	49✔
84	index: colIndex,	234✔
85	colPos: idx,
86	};
87	});
88
89	return (
90	<MuiTableHead
91	className={classNames({	49✔
92	[classes.responsiveStacked]:
93	options.responsive === 'vertical' \|\|
94	options.responsive === 'stacked' \|\|
95	options.responsive === 'stackedFullWidth',	65✔
96	[classes.responsiveSimple]: options.responsive === 'simple',
97	[classes.main]: true,
98	})}>
99	<TableHeadRow>
100	<TableSelectCell
101	setHeadCellRef={setCellRef}
102	onChange={handleRowSelect.bind(null)}
103	indeterminate={isIndeterminate}
104	checked={isChecked}
105	isHeaderCell={true}
106	expandedRows={expandedRows}
107	expandableRowsHeader={options.expandableRowsHeader}
108	expandableOn={options.expandableRows}
109	selectableOn={options.selectableRows}
110	fixedHeader={options.fixedHeader}
111	fixedSelectColumn={options.fixedSelectColumn}
112	selectableRowsHeader={options.selectableRowsHeader}
113	onExpand={props.toggleAllExpandableRows}
114	isRowSelectable={true}
115	/>
116	{orderedColumns.map(
117	({column, index, colPos}) =>
118	column.display === 'true' &&
119	(column.customHeadRender ? (
120	column.customHeadRender({ index, ...column }, handleToggleColumn, sortOrder)	234✔
121	) : (	230✔
122	<TableHeadCell
123	cellHeaderProps={
124	columns[index].setCellHeaderProps ? columns[index].setCellHeaderProps({ index, ...column }) : {}
125	}
126	key={index}	185!
127	index={index}
128	colPosition={colPos}
129	type={'cell'}
130	setCellRef={setCellRef}
131	sort={column.sort}
132	sortDirection={column.name === sortOrder.name ? sortOrder.direction : 'none'}
133	toggleSort={handleToggleColumn}
134	hint={column.hint}	185✔
135	print={column.print}
136	options={options}
137	column={column}
138	updateColumnOrder={updateColumnOrder}
139	columnOrder={columnOrder}
140	timers={timers}
141	draggingHook={[dragging, setDragging]}
142	draggableHeadCellRefs={draggableHeadCellRefs}
143	tableRef={tableRef}
144	components={components}>
145	{column.label}
146	</TableHeadCell>
147	)),
148	)}
149	</TableHeadRow>
150	</MuiTableHead>
151	);
152	}
153
154	export default TableHead;

gregnb / mui-datatables / 1859

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous