9775605501

Committed 03 Jul 2024 09:46AM CUT coverage: 80.971% (-0.2%) from 81.187%

Build # 9775605501

Build Type

Pull #6013

github

Committed by

web-flow

Commit Message

Merge eeb8af288 into 9f2827610

Pull Request Pull Request #6013: fix(AnalyticalTable): fire row select & click events on `keyup` instead of `keydown`

Run Details

2626 of 3834 branches covered (68.49%)

11 of 26 new or added lines in 3 files covered. (42.31%)

3 existing lines in 2 files now uncovered.

4736 of 5849 relevant lines covered (80.97%)

64642.69 hits per line

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

78.95

/packages/main/src/components/AnalyticalTable/hooks/useSingleRowStateSelection.ts

import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
import { AnalyticalTableSelectionBehavior, AnalyticalTableSelectionMode } from '../../../enums/index.js';
import { getTagNameWithoutScopingSuffix } from '../../../internal/utils.js';
import type { ReactTableHooks } from '../types/index.js';

const getRowProps = (rowProps, { row, instance }) => {
  const { webComponentsReactProperties, toggleRowSelected, selectedFlatRows, dispatch } = instance;
  const handleRowSelect = (e) => {
    const isSelectionCell = e.target.dataset.selectionCell === 'true';
    if (
      e.target?.dataset?.name !== 'internal_selection_column' &&
      !(e.markerAllowTableRowSelection === true || e.nativeEvent?.markerAllowTableRowSelection === true) &&
      webComponentsReactProperties.tagNamesWhichShouldNotSelectARow.has(
        getTagNameWithoutScopingSuffix(e.target.tagName)
      )
    ) {
      return;
    }

    // don't select grouped rows
    if (row.isGrouped) {
      return;
    }

    const { selectionBehavior, selectionMode, onRowSelect, onRowClick } = webComponentsReactProperties;

    if (typeof onRowClick === 'function' && e.target?.dataset?.name !== 'internal_selection_column') {
      onRowClick(enrichEventWithDetails(e, { row }));
    }

    if (selectionMode === AnalyticalTableSelectionMode.None) {
      return;
    }

    // don't continue if the row was clicked and selection mode is row selector only
    if (selectionBehavior === AnalyticalTableSelectionBehavior.RowSelector && !isSelectionCell) {
      return;
    }

    // deselect other rows
    if (selectionMode === AnalyticalTableSelectionMode.SingleSelect) {
      for (const selectedRow of selectedFlatRows) {
        if (selectedRow.id !== row.id) {
          toggleRowSelected(selectedRow.id, false);
        }
      }
    }

    toggleRowSelected(row.id);

    if (typeof onRowSelect === 'function') {
      // update state to return instance values after update (see useSelectionChangeCallback hook)
      dispatch({ type: 'SELECT_ROW_CB', payload: { event: e, row, fired: true } });
    }
  };

  const handleKeyDown = (e) => {
    if ((!e.target.hasAttribute('aria-expanded') || (e.shiftKey && e.code === 'Space')) && e.code === 'Enter') {
      if (
        !webComponentsReactProperties.tagNamesWhichShouldNotSelectARow.has(
          getTagNameWithoutScopingSuffix(e.target.tagName)
        )
      ) {
        e.preventDefault();
      }
      handleRowSelect(e);
    }
    if (e.code === 'Space') {
      e.preventDefault();
    }
  };

  const handleKeyUp = (e) => {
    if (!e.target.hasAttribute('aria-expanded') && !e.shiftKey && e.code === 'Space') {
      if (
        !webComponentsReactProperties.tagNamesWhichShouldNotSelectARow.has(
          getTagNameWithoutScopingSuffix(e.target.tagName)
        )
      ) {
        e.preventDefault();
      }
      handleRowSelect(e);
    }
  };

  return [
    rowProps,
    {
      onKeyDown: handleKeyDown,
      onKeyUp: handleKeyUp,
      onClick: handleRowSelect
    }
  ];
};

export const useSingleRowStateSelection = (hooks: ReactTableHooks) => {
  hooks.getRowProps.push(getRowProps);
};
useSingleRowStateSelection.pluginName = 'useSingleRowStateSelection';

1	import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
2	import { AnalyticalTableSelectionBehavior, AnalyticalTableSelectionMode } from '../../../enums/index.js';
3	import { getTagNameWithoutScopingSuffix } from '../../../internal/utils.js';
4	import type { ReactTableHooks } from '../types/index.js';
5
6	const getRowProps = (rowProps, { row, instance }) => {	398✔
7	const { webComponentsReactProperties, toggleRowSelected, selectedFlatRows, dispatch } = instance;	233,292✔
8	const handleRowSelect = (e) => {	233,292✔
9	const isSelectionCell = e.target.dataset.selectionCell === 'true';	1,727✔
10	if (	1,727✔
11	e.target?.dataset?.name !== 'internal_selection_column' &&	5,117✔
12	!(e.markerAllowTableRowSelection === true \|\| e.nativeEvent?.markerAllowTableRowSelection === true) &&	3,454✔
13	webComponentsReactProperties.tagNamesWhichShouldNotSelectARow.has(
14	getTagNameWithoutScopingSuffix(e.target.tagName)
15	)
16	) {
17	return;	119✔
18	}
19
20	// don't select grouped rows
21	if (row.isGrouped) {	1,608!
UNCOV 22	return;	×
23	}
24
25	const { selectionBehavior, selectionMode, onRowSelect, onRowClick } = webComponentsReactProperties;	1,608✔
26
27	if (typeof onRowClick === 'function' && e.target?.dataset?.name !== 'internal_selection_column') {	1,608✔
28	onRowClick(enrichEventWithDetails(e, { row }));	298✔
29	}
30
31	if (selectionMode === AnalyticalTableSelectionMode.None) {	1,608!
UNCOV 32	return;	×
33	}
34
35	// don't continue if the row was clicked and selection mode is row selector only
36	if (selectionBehavior === AnalyticalTableSelectionBehavior.RowSelector && !isSelectionCell) {	1,608!
37	return;	×
38	}
39
40	// deselect other rows
41	if (selectionMode === AnalyticalTableSelectionMode.SingleSelect) {	1,608✔
42	for (const selectedRow of selectedFlatRows) {	328✔
43	if (selectedRow.id !== row.id) {	248✔
44	toggleRowSelected(selectedRow.id, false);	248✔
45	}
46	}
47	}
48
49	toggleRowSelected(row.id);	1,608✔
50
51	if (typeof onRowSelect === 'function') {	1,608✔
52	// update state to return instance values after update (see useSelectionChangeCallback hook)
53	dispatch({ type: 'SELECT_ROW_CB', payload: { event: e, row, fired: true } });	1,494✔
54	}
55	};
56
57	const handleKeyDown = (e) => {	233,292✔
58	if ((!e.target.hasAttribute('aria-expanded') \|\| (e.shiftKey && e.code === 'Space')) && e.code === 'Enter') {	450!
59	if (	43!
60	!webComponentsReactProperties.tagNamesWhichShouldNotSelectARow.has(
61	getTagNameWithoutScopingSuffix(e.target.tagName)
62	)
63	) {
NEW 64	e.preventDefault();	×
65	}
66	handleRowSelect(e);	43✔
67	}
68	if (e.code === 'Space') {	450!
NEW 69	e.preventDefault();	×
70	}
71	};
72
73	const handleKeyUp = (e) => {	233,292✔
74	if (!e.target.hasAttribute('aria-expanded') && !e.shiftKey && e.code === 'Space') {	345!
NEW 75	if (	×
76	!webComponentsReactProperties.tagNamesWhichShouldNotSelectARow.has(
77	getTagNameWithoutScopingSuffix(e.target.tagName)
78	)
79	) {
NEW 80	e.preventDefault();	×
81	}
NEW 82	handleRowSelect(e);	×
83	}
84	};
85
86	return [	233,292✔
87	rowProps,
88	{
89	onKeyDown: handleKeyDown,
90	onKeyUp: handleKeyUp,
91	onClick: handleRowSelect
92	}
93	];
94	};
95
96	export const useSingleRowStateSelection = (hooks: ReactTableHooks) => {	398✔
97	hooks.getRowProps.push(getRowProps);	45,145✔
98	};
99	useSingleRowStateSelection.pluginName = 'useSingleRowStateSelection';	398✔

SAP / ui5-webcomponents-react / 9775605501

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