9778945367

Committed 03 Jul 2024 01:37PM CUT coverage: 82.278% (+1.1%) from 81.187%

Build # 9778945367

Build Type

Pull #6012

github

Committed by

web-flow

Commit Message

Merge ee7bb7fc3 into f1386f869

Pull Request Pull Request #6012: refactor(FilterGroupItem): api alignment

Run Details

2626 of 4021 branches covered (65.31%)

0 of 8 new or added lines in 3 files covered. (0.0%)

4 existing lines in 3 files now uncovered.

4745 of 5767 relevant lines covered (82.28%)

65488.31 hits per line

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

94.67

/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'
} as CSSProperties;

/*
 * COMPONENTS
 */

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

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

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

  return (
    <CheckBox
      {...row.getToggleRowSelectedProps()}
      tabIndex={-1}
      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.MultiSelect
  ) {
    const 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 (e.code === 'Space' || e.code === 'Enter') {
        e.preventDefault();
        onClick(e);
      }
    };
    return [props, { onClick, onKeyDown, 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 = {	398✔
8	verticalAlign: 'middle',
9	pointerEvents: 'none'
10	} as CSSProperties;
11
12	/*
13	* COMPONENTS
14	*/
15
16	const Header = (instance) => {	398✔
17	const {
18	getToggleAllRowsSelectedProps,
19	webComponentsReactProperties: { selectionMode }
20	} = instance;	11,504✔
21
22	if (selectionMode === AnalyticalTableSelectionMode.SingleSelect) {	11,504✔
23	return null;	1,700✔
24	}
25	const checkBoxProps = getToggleAllRowsSelectedProps();	9,804✔
26	return (	9,804✔
27	<CheckBox
28	{...checkBoxProps}
29	style={customCheckBoxStyling}
30	tabIndex={-1}
31	onChange={undefined}
32	checked={checkBoxProps.indeterminate ? true : checkBoxProps.checked}	9,804✔
33	/>
34	);
35	};
36
37	const Cell = ({ row, webComponentsReactProperties: { selectionMode } }) => {	398✔
38	if (selectionMode === AnalyticalTableSelectionMode.SingleSelect \|\| row.isGrouped) {	87,734✔
39	return null;	9,380✔
40	}
41
42	return (	78,354✔
43	<CheckBox
44	{...row.getToggleRowSelectedProps()}
45	tabIndex={-1}
46	style={customCheckBoxStyling}
47	data-name="internal_selection_column"
48	/>
49	);
50	};
51
52	function getNextSelectedRowIds(rowsById) {
53	return Object.keys(rowsById).reduce((acc, cur) => {	262✔
54	acc[cur] = true;	28,372✔
55	return acc;	28,372✔
56	}, {});
57	}
58
59	const headerProps = (props, { instance }) => {	398✔
60	const {
61	flatRows,
62	webComponentsReactProperties: {
63	onRowSelect,
64	selectionMode,
65	translatableTexts: { selectAllText, deselectAllText }
66	},
67	toggleAllRowsSelected,
68	isAllRowsSelected,
69	rowsById,
70	dispatch,
71	state: { filters, globalFilter }
72	} = instance;	138,414✔
73	const style = { ...props.style, cursor: 'pointer', display: 'flex', justifyContent: 'center' };	138,414✔
74	if (	138,414✔
75	props.key === 'header___ui5wcr__internal_selection_column' &&	150,071✔
76	selectionMode === AnalyticalTableSelectionMode.MultiSelect
77	) {
78	const onClick = (e) => {	9,957✔
79	toggleAllRowsSelected(!isAllRowsSelected);	679✔
80	const isFiltered = filters?.length > 0 \|\| !!globalFilter;	679✔
81	if (typeof onRowSelect === 'function') {	679✔
82	if (isFiltered) {	474✔
83	dispatch({ type: 'SELECT_ROW_CB', payload: { event: e, row: undefined, selectAll: true, fired: true } });	42✔
84	} else {
85	onRowSelect(	432✔
86	// cannot use instance.selectedFlatRows here as it only returns all rows on the first level
87	enrichEventWithDetails(e, {
88	allRowsSelected: !isAllRowsSelected,
89	selectedFlatRows: !isAllRowsSelected ? flatRows : [],	432✔
90	selectedRowIds: !isAllRowsSelected ? getNextSelectedRowIds(rowsById) : {}	432✔
91	})
92	);
93	}
94	}
95	};
96
97	const onKeyDown = (e) => {	9,957✔
98	if (e.code === 'Space' \|\| e.code === 'Enter') {	×
99	e.preventDefault();	×
100	onClick(e);	×
101	}
102	};
103	return [props, { onClick, onKeyDown, style, title: isAllRowsSelected ? deselectAllText : selectAllText }];	×
104	}
105	return props;
106	};	9,957✔
107		×
108	const columnDeps = (deps, { instance: { webComponentsReactProperties } }) => {	91✔
UNCOV 109	return [...deps, webComponentsReactProperties.selectionMode, webComponentsReactProperties.selectionBehavior];	×
110	};
111
112	const visibleColumnsDeps = (deps, { instance }) => [	91✔
113	...deps,	9,957✔
114	instance.webComponentsReactProperties.selectionMode,
115	instance.webComponentsReactProperties.selectionBehavior	128,457✔
116	];
117
118	const visibleColumns = (currentVisibleColumns, { instance: { webComponentsReactProperties } }) => {	398✔
119	if (	44,877!
120	webComponentsReactProperties.selectionMode === AnalyticalTableSelectionMode.None \|\|	×
121	webComponentsReactProperties.selectionBehavior === AnalyticalTableSelectionBehavior.RowOnly
122	) {	44,922✔
123	return currentVisibleColumns;
124	}
125
126	const selectionColumn = currentVisibleColumns.find(({ id }) => id === '__ui5wcr__internal_selection_column');
127	return [selectionColumn, ...currentVisibleColumns.filter(({ id }) => id !== '__ui5wcr__internal_selection_column')];
128	};	307✔
129	const columns = (currentColumns, { instance }) => {	13,433✔
130	const { webComponentsReactProperties } = instance;	16,186✔
131	const { selectionMode, selectionBehavior, tableRef } = webComponentsReactProperties;
132
133	if (	10,606!
134	selectionMode === AnalyticalTableSelectionMode.None \|\|	×
135	selectionBehavior === AnalyticalTableSelectionBehavior.RowOnly
136	) {	3,280✔
137	return currentColumns;	11,968✔
138	}
139	const tableSelectionColumnWidth =	307✔
140	tableRef.current &&	12,772!
141	parseInt(	12,772✔
142	getComputedStyle(tableRef.current).getPropertyValue(
143	CssSizeVariablesNames.ui5WcrAnalyticalTableSelectionColumnWidth	12,772✔
144	),	15,576✔
145	10
146	);
147	const selectionColumnWidth = !isNaN(tableSelectionColumnWidth) ? tableSelectionColumnWidth : 47;	10,076!
148
149	return [
150	{	2,696✔
151	id: '__ui5wcr__internal_selection_column',
152	disableFilters: true,
153	disableSortBy: true,
154	disableGroupBy: true,
155	disableResizing: true,
156	disableDragAndDrop: true,
157	width: selectionColumnWidth,	2,696!
158	minWidth: selectionColumnWidth,
159	maxWidth: selectionColumnWidth,	2,696✔
160	Header,
161	Cell
162	},
163	...currentColumns
164	];
165	};
166
167	const getCellProps = (props, { cell }) => {	91✔
168	if (cell.column.id === '__ui5wcr__internal_selection_column') {	×
169	const style = { ...props.style, cursor: 'pointer', justifyContent: 'center' };
170	return [props, { style }];
171	}
172	return props;
173	};
174
175	const setToggleAllRowsSelectedProps = (props, { instance: { webComponentsReactProperties } }) => {	91✔
176	const { classes } = webComponentsReactProperties;
177	return [props, { className: classes.checkBox, title: undefined }];	307✔
178	};	1,469,724✔
179	const setToggleRowSelectedProps = (props, { instance: { webComponentsReactProperties } }) => {	103,467✔
180	const { classes } = webComponentsReactProperties;	103,376✔
181	return [props, { className: classes.checkBox, title: undefined }];
182	};	1,366,348✔
183
184	export const useRowSelectionColumn = (hooks: ReactTableHooks) => {	91✔
185	hooks.getCellProps.push(getCellProps);	307✔
186	hooks.getHeaderProps.push(headerProps);	9,804✔
187	hooks.getToggleRowSelectedProps.push(setToggleRowSelectedProps);	9,804✔
188	hooks.getToggleAllRowsSelectedProps.push(setToggleAllRowsSelectedProps);
189	hooks.columns.push(columns);	307✔
190	hooks.columnsDeps.push(columnDeps);	78,490✔
191	hooks.visibleColumnsDeps.push(visibleColumnsDeps);	78,490✔
192	hooks.visibleColumns.push(visibleColumns);
193	};
194	useRowSelectionColumn.pluginName = 'useRowSelectionColumn';	398✔

SAP / ui5-webcomponents-react / 9778945367

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