10522890701

Committed 23 Aug 2024 08:55AM CUT coverage: 87.893% (+0.007%) from 87.886%

Build # 10522890701

Build Type

Pull #6255

github

Committed by

web-flow

Commit Message

Merge fb11d72fa into 93439fb97

Pull Request Pull Request #6255: refactor(AnalyticalTable): remove `selectedFlatRows` & add `rowsById` to `onRowSelect`

Run Details

2818 of 3777 branches covered (74.61%)

4 of 4 new or added lines in 2 files covered. (100.0%)

3 existing lines in 1 file now uncovered.

5038 of 5732 relevant lines covered (87.89%)

93416.89 hits per line

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

96.3

/packages/main/src/components/AnalyticalTable/hooks/useRowSelectionColumn.tsx

import { CssSizeVariablesNames, enrichEventWithDetails } from '@ui5/webcomponents-react-base';
import type { CSSProperties } from 'react';
import { AnalyticalTableSelectionBehavior, AnalyticalTableSelectionMode } from '../../../enums/index.js';
import { CheckBox } from '../../../webComponents/CheckBox/index.js';
import type { ReactTableHooks } from '../types/index.js';

const customCheckBoxStyling = {
  verticalAlign: 'middle',
  pointerEvents: 'none',
  display: 'block'
} as CSSProperties;

/*
 * COMPONENTS
 */

const Header = (instance) => {
  const {
    getToggleAllRowsSelectedProps,
    webComponentsReactProperties: { selectionMode }
  } = instance;

  if (selectionMode === AnalyticalTableSelectionMode.Single) {
    return null;
  }
  const checkBoxProps = getToggleAllRowsSelectedProps();
  return (
    <CheckBox
      {...checkBoxProps}
      style={customCheckBoxStyling}
      tabIndex={-1}
      onChange={undefined}
      checked={checkBoxProps.indeterminate ? true : checkBoxProps.checked}
      aria-hidden="true"
    />
  );
};

const Cell = ({ row, webComponentsReactProperties: { selectionMode } }) => {
  if (selectionMode === AnalyticalTableSelectionMode.Single || row.isGrouped) {
    return null;
  }

  return (
    <CheckBox
      {...row.getToggleRowSelectedProps()}
      tabIndex={-1}
      aria-hidden="true"
      style={customCheckBoxStyling}
      data-name="internal_selection_column"
    />
  );
};

function getNextSelectedRowIds(rowsById) {
  return Object.keys(rowsById).reduce((acc, cur) => {
    acc[cur] = true;
    return acc;
  }, {});
}

const headerProps = (props, { instance }) => {
  const {
    flatRows,
    webComponentsReactProperties: {
      onRowSelect,
      selectionMode,
      translatableTexts: { selectAllText, deselectAllText }
    },
    toggleAllRowsSelected,
    isAllRowsSelected,
    rowsById,
    dispatch,
    state: { filters, globalFilter }
  } = instance;
  const style = { ...props.style, cursor: 'pointer', display: 'flex', justifyContent: 'center' };
  if (
    props.key === 'header___ui5wcr__internal_selection_column' &&
    selectionMode === AnalyticalTableSelectionMode.Multiple
  ) {
    const onClick = (e) => {
      if (typeof props.onClick === 'function') {
        props.onClick(e);
      }
      toggleAllRowsSelected(!isAllRowsSelected);
      const isFiltered = filters?.length > 0 || !!globalFilter;
      if (typeof onRowSelect === 'function') {
        if (isFiltered) {
          dispatch({ type: 'SELECT_ROW_CB', payload: { event: e, row: undefined, selectAll: true, fired: true } });
        } else {
          onRowSelect(
            // cannot use instance.selectedFlatRows here as it only returns all rows on the first level
            enrichEventWithDetails(e, {
              allRowsSelected: !isAllRowsSelected,
              selectedFlatRows: !isAllRowsSelected ? flatRows : [],
              selectedRowIds: !isAllRowsSelected ? getNextSelectedRowIds(rowsById) : {}
            })
          );
        }
      }
    };

    const onKeyDown = (e) => {
      if (typeof props.onKeyDown === 'function') {
        props.onKeyDown(e);
      }
      if (e.code === 'Enter' || e.code === 'Space') {
        e.preventDefault();
        if (e.code === 'Enter') {
          onClick(e);
        }
      }
    };

    const onKeyUp = (e) => {
      if (typeof props.onKeyUp === 'function') {
        props.onKeyUp(e);
      }
      if (e.code === 'Space') {
        e.preventDefault();
        onClick(e);
      }
    };

    return [props, { onClick, onKeyDown, onKeyUp, style, title: isAllRowsSelected ? deselectAllText : selectAllText }];
  }
  return props;
};

const columnDeps = (deps, { instance: { webComponentsReactProperties } }) => {
  return [...deps, webComponentsReactProperties.selectionMode, webComponentsReactProperties.selectionBehavior];
};

const visibleColumnsDeps = (deps, { instance }) => [
  ...deps,
  instance.webComponentsReactProperties.selectionMode,
  instance.webComponentsReactProperties.selectionBehavior
];

const visibleColumns = (currentVisibleColumns, { instance: { webComponentsReactProperties } }) => {
  if (
    webComponentsReactProperties.selectionMode === AnalyticalTableSelectionMode.None ||
    webComponentsReactProperties.selectionBehavior === AnalyticalTableSelectionBehavior.RowOnly
  ) {
    return currentVisibleColumns;
  }

  const selectionColumn = currentVisibleColumns.find(({ id }) => id === '__ui5wcr__internal_selection_column');
  return [selectionColumn, ...currentVisibleColumns.filter(({ id }) => id !== '__ui5wcr__internal_selection_column')];
};
const columns = (currentColumns, { instance }) => {
  const { webComponentsReactProperties } = instance;
  const { selectionMode, selectionBehavior, tableRef } = webComponentsReactProperties;

  if (
    selectionMode === AnalyticalTableSelectionMode.None ||
    selectionBehavior === AnalyticalTableSelectionBehavior.RowOnly
  ) {
    return currentColumns;
  }
  const tableSelectionColumnWidth =
    tableRef.current &&
    parseInt(
      getComputedStyle(tableRef.current).getPropertyValue(
        CssSizeVariablesNames.ui5WcrAnalyticalTableSelectionColumnWidth
      ),
      10
    );
  const selectionColumnWidth = !isNaN(tableSelectionColumnWidth) ? tableSelectionColumnWidth : 47;

  return [
    {
      id: '__ui5wcr__internal_selection_column',
      disableFilters: true,
      disableSortBy: true,
      disableGroupBy: true,
      disableResizing: true,
      disableDragAndDrop: true,
      width: selectionColumnWidth,
      minWidth: selectionColumnWidth,
      maxWidth: selectionColumnWidth,
      Header,
      Cell
    },
    ...currentColumns
  ];
};

const getCellProps = (props, { cell }) => {
  if (cell.column.id === '__ui5wcr__internal_selection_column') {
    const style = { ...props.style, cursor: 'pointer', justifyContent: 'center' };
    return [props, { style }];
  }
  return props;
};

const setToggleAllRowsSelectedProps = (props, { instance: { webComponentsReactProperties } }) => {
  const { classes } = webComponentsReactProperties;
  return [props, { className: classes.checkBox, title: undefined }];
};
const setToggleRowSelectedProps = (props, { instance: { webComponentsReactProperties } }) => {
  const { classes } = webComponentsReactProperties;
  return [props, { className: classes.checkBox, title: undefined }];
};

export const useRowSelectionColumn = (hooks: ReactTableHooks) => {
  hooks.getCellProps.push(getCellProps);
  hooks.getHeaderProps.push(headerProps);
  hooks.getToggleRowSelectedProps.push(setToggleRowSelectedProps);
  hooks.getToggleAllRowsSelectedProps.push(setToggleAllRowsSelectedProps);
  hooks.columns.push(columns);
  hooks.columnsDeps.push(columnDeps);
  hooks.visibleColumnsDeps.push(visibleColumnsDeps);
  hooks.visibleColumns.push(visibleColumns);
};
useRowSelectionColumn.pluginName = 'useRowSelectionColumn';

1	import { CssSizeVariablesNames, enrichEventWithDetails } from '@ui5/webcomponents-react-base';
2	import type { CSSProperties } from 'react';
3	import { AnalyticalTableSelectionBehavior, AnalyticalTableSelectionMode } from '../../../enums/index.js';
4	import { CheckBox } from '../../../webComponents/CheckBox/index.js';
5	import type { ReactTableHooks } from '../types/index.js';
6
7	const customCheckBoxStyling = {	400✔
8	verticalAlign: 'middle',
9	pointerEvents: 'none',
10	display: 'block'
11	} as CSSProperties;
12
13	/*
14	* COMPONENTS
15	*/
16
17	const Header = (instance) => {	400✔
18	const {
19	getToggleAllRowsSelectedProps,
20	webComponentsReactProperties: { selectionMode }
21	} = instance;	11,752✔
22
23	if (selectionMode === AnalyticalTableSelectionMode.Single) {	11,752✔
24	return null;	1,700✔
25	}
26	const checkBoxProps = getToggleAllRowsSelectedProps();	10,052✔
27	return (	10,052✔
28	<CheckBox
29	{...checkBoxProps}
30	style={customCheckBoxStyling}
31	tabIndex={-1}
32	onChange={undefined}
33	checked={checkBoxProps.indeterminate ? true : checkBoxProps.checked}	10,052✔
34	aria-hidden="true"
35	/>
36	);
37	};
38
39	const Cell = ({ row, webComponentsReactProperties: { selectionMode } }) => {	400✔
40	if (selectionMode === AnalyticalTableSelectionMode.Single \|\| row.isGrouped) {	91,978✔
41	return null;	9,460✔
42	}
43
44	return (	82,518✔
45	<CheckBox
46	{...row.getToggleRowSelectedProps()}
47	tabIndex={-1}
48	aria-hidden="true"
49	style={customCheckBoxStyling}
50	data-name="internal_selection_column"
51	/>
52	);
53	};
54
55	function getNextSelectedRowIds(rowsById) {
56	return Object.keys(rowsById).reduce((acc, cur) => {	304✔
57	acc[cur] = true;	29,254✔
58	return acc;	29,254✔
59	}, {});
60	}
61
62	const headerProps = (props, { instance }) => {	400✔
63	const {
64	flatRows,
65	webComponentsReactProperties: {
66	onRowSelect,
67	selectionMode,
68	translatableTexts: { selectAllText, deselectAllText }
69	},
70	toggleAllRowsSelected,
71	isAllRowsSelected,
72	rowsById,
73	dispatch,
74	state: { filters, globalFilter }
75	} = instance;	142,023✔
76	const style = { ...props.style, cursor: 'pointer', display: 'flex', justifyContent: 'center' };	142,023✔
77	if (	142,023!
78	props.key === 'header___ui5wcr__internal_selection_column' &&	153,928✔
79	selectionMode === AnalyticalTableSelectionMode.Multiple	×
80	) {	×
81	const onClick = (e) => {	10,205✔
82	if (typeof props.onClick === 'function') {	763!
UNCOV 83	props.onClick(e);	×
84	}	×
85	toggleAllRowsSelected(!isAllRowsSelected);	763✔
86	const isFiltered = filters?.length > 0 \|\| !!globalFilter;	763✔
87	if (typeof onRowSelect === 'function') {	763✔
88	if (isFiltered) {	558✔
89	dispatch({ type: 'SELECT_ROW_CB', payload: { event: e, row: undefined, selectAll: true, fired: true } });	42!
90	} else {
91	onRowSelect(	516✔
92	// cannot use instance.selectedFlatRows here as it only returns all rows on the first level
93	enrichEventWithDetails(e, {
94	allRowsSelected: !isAllRowsSelected,
95	selectedFlatRows: !isAllRowsSelected ? flatRows : [],	516✔
96	selectedRowIds: !isAllRowsSelected ? getNextSelectedRowIds(rowsById) : {}	516✔
97	})	×
98	);
99	}
100	}
101	};
102
103	const onKeyDown = (e) => {	10,205✔
104	if (typeof props.onKeyDown === 'function') {	126!
UNCOV 105	props.onKeyDown(e);	×
106	}
107	if (e.code === 'Enter' \|\| e.code === 'Space') {	126✔
108	e.preventDefault();	84!
109	if (e.code === 'Enter') {	84✔
110	onClick(e);	42!
111	}
112	}
113	};
114
115	const onKeyUp = (e) => {	10,205✔
116	if (typeof props.onKeyUp === 'function') {	126!
UNCOV 117	props.onKeyUp(e);	×
118	}
119	if (e.code === 'Space') {	126✔
120	e.preventDefault();	42!
121	onClick(e);	42✔
122	}
123	};
124
125	return [props, { onClick, onKeyDown, onKeyUp, style, title: isAllRowsSelected ? deselectAllText : selectAllText }];	10,205✔
126	}	×
127	return props;	131,818✔
128	};
129
130	const columnDeps = (deps, { instance: { webComponentsReactProperties } }) => {	240✔
131	return [...deps, webComponentsReactProperties.selectionMode, webComponentsReactProperties.selectionBehavior];	46,439✔
132	};
133
134	const visibleColumnsDeps = (deps, { instance }) => [	46,279✔
135	...deps,	160✔
136	instance.webComponentsReactProperties.selectionMode,
137	instance.webComponentsReactProperties.selectionBehavior
138	];
139
140	const visibleColumns = (currentVisibleColumns, { instance: { webComponentsReactProperties } }) => {	240✔
141	if (	13,910✔
142	webComponentsReactProperties.selectionMode === AnalyticalTableSelectionMode.None \|\|	16,594!
143	webComponentsReactProperties.selectionBehavior === AnalyticalTableSelectionBehavior.RowOnly	×
144	) {
145	return currentVisibleColumns;	11,014✔
146	}
147
148	const selectionColumn = currentVisibleColumns.find(({ id }) => id === '__ui5wcr__internal_selection_column');	3,280✔
149	return [selectionColumn, ...currentVisibleColumns.filter(({ id }) => id !== '__ui5wcr__internal_selection_column')];	11,968✔
150	};
151	const columns = (currentColumns, { instance }) => {	240✔
152	const { webComponentsReactProperties } = instance;	13,340✔
153	const { selectionMode, selectionBehavior, tableRef } = webComponentsReactProperties;	13,180✔
154
155	if (	13,180✔
156	selectionMode === AnalyticalTableSelectionMode.None \|\|	15,984!
157	selectionBehavior === AnalyticalTableSelectionBehavior.RowOnly	×
158	) {
159	return currentColumns;	10,484✔
160	}
161	const tableSelectionColumnWidth =
162	tableRef.current &&	2,696✔
163	parseInt(	×
164	getComputedStyle(tableRef.current).getPropertyValue(
165	CssSizeVariablesNames.ui5WcrAnalyticalTableSelectionColumnWidth
166	),
167	10
168	);
169	const selectionColumnWidth = !isNaN(tableSelectionColumnWidth) ? tableSelectionColumnWidth : 47;	2,696!
170		×
171	return [	2,696✔
172	{
173	id: '__ui5wcr__internal_selection_column',
174	disableFilters: true,
175	disableSortBy: true,
176	disableGroupBy: true,
177	disableResizing: true,
178	disableDragAndDrop: true,
179	width: selectionColumnWidth,
180	minWidth: selectionColumnWidth,
181	maxWidth: selectionColumnWidth,
182	Header,
183	Cell
184	},
185	...currentColumns
186	];
187	};
188
189	const getCellProps = (props, { cell }) => {	240✔
190	if (cell.column.id === '__ui5wcr__internal_selection_column') {	1,527,905✔
191	const style = { ...props.style, cursor: 'pointer', justifyContent: 'center' };	107,620!
192	return [props, { style }];	107,620✔
193	}
194	return props;	1,420,125✔
195	};
196
197	const setToggleAllRowsSelectedProps = (props, { instance: { webComponentsReactProperties } }) => {	240✔
198	const { classes } = webComponentsReactProperties;	10,212✔
199	return [props, { className: classes.checkBox, title: undefined }];	10,052✔
200	};
201	const setToggleRowSelectedProps = (props, { instance: { webComponentsReactProperties } }) => {	240✔
202	const { classes } = webComponentsReactProperties;	82,814✔
203	return [props, { className: classes.checkBox, title: undefined }];	82,654✔
204	};
205
206	export const useRowSelectionColumn = (hooks: ReactTableHooks) => {	240✔
207	hooks.getCellProps.push(getCellProps);	46,439✔
208	hooks.getHeaderProps.push(headerProps);	46,279✔
209	hooks.getToggleRowSelectedProps.push(setToggleRowSelectedProps);	46,279✔
210	hooks.getToggleAllRowsSelectedProps.push(setToggleAllRowsSelectedProps);	46,279✔
211	hooks.columns.push(columns);	46,279✔
212	hooks.columnsDeps.push(columnDeps);	46,279✔
213	hooks.visibleColumnsDeps.push(visibleColumnsDeps);	46,279✔
214	hooks.visibleColumns.push(visibleColumns);	46,279✔
215	};
216	useRowSelectionColumn.pluginName = 'useRowSelectionColumn';	240✔

SAP / ui5-webcomponents-react / 10522890701

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