9775556604

Committed 03 Jul 2024 09:43AM CUT coverage: 81.206% (+0.02%) from 81.187%

Build # 9775556604

Build Type

Pull #6013

github

Committed by

web-flow

Commit Message

Merge a5e988047 into 9f2827610

Pull Request Pull Request #6013: feat(AnalyticalTable): fire select events on `keyup` instead of `keydown`

Run Details

2628 of 3861 branches covered (68.07%)

15 of 22 new or added lines in 3 files covered. (68.18%)

4740 of 5837 relevant lines covered (81.21%)

64543.27 hits per line

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

90.48

/packages/main/src/components/AnalyticalTable/pluginHooks/useRowDisableSelection.tsx

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

type DisableRowSelectionType = string | ((row: Record<any, any>) => boolean);

const customCheckBoxStyling = {
  verticalAlign: 'middle'
};

const headerProps = (
  props,
  {
    instance: {
      webComponentsReactProperties: { selectionMode }
    }
  }
) => {
  if (
    props.key === 'header___ui5wcr__internal_selection_column' &&
    selectionMode === AnalyticalTableSelectionMode.MultiSelect
  ) {
    const style = { ...props.style, cursor: 'auto' };
    return [props, { onClick: undefined, onKeyDown: undefined, title: undefined, style }];
  }
  return props;
};

const columns = (columns) => {
  return columns.map((column) => {
    if (column.id === '__ui5wcr__internal_selection_column') {
      return {
        ...column,
        Cell: (instance) => {
          const { webComponentsReactProperties, row } = instance;
          if (row.disableSelect === true) {
            if (
              row.isGrouped &&
              webComponentsReactProperties.selectionMode === AnalyticalTableSelectionMode.SingleSelect
            ) {
              return null;
            }
            if (webComponentsReactProperties.selectionMode === AnalyticalTableSelectionMode.SingleSelect) {
              return <div onClick={undefined} data-name="internal_selection_column" />;
            }
            return (
              <CheckBox
                {...row.getToggleRowSelectedProps()}
                disabled
                style={customCheckBoxStyling}
                data-name="internal_selection_column"
                tabIndex={-1}
              />
            );
          }
          return column.Cell(instance);
        },
        Header: () => null
      };
    }
    return column;
  });
};

/**
 * A plugin hook for disabling row selection of specific rows.
 *
 * __Note:__ The "Select All" checkbox is not available with this hook.
 *
 * @param disableRowSelection - Can be either a `string` or a `function`. `string:` Defines the key in the dataset for disabling rows. If the value of the key is `true`, then the row will not be selectable. `function:` Programmatically disable rows for selection. The function receives the current row as parameter.
 *
 * @deprecated It is not recommended to disable table rows, mainly because of the following reasons:
 *
 * * Users are not informed why items cannot be selected.
 * * ARIA lacks built-in support for selective item selection, complicating accessibility.
 * * Consistency to other applications which do not offer disabled items.
 */
export const useRowDisableSelection = (disableRowSelection: DisableRowSelectionType) => {
  const disableRowAccessor =
    typeof disableRowSelection === 'function'
      ? disableRowSelection
      : (d) => getBy(d.original, disableRowSelection, undefined);

  const getRowProps = (rowProps, { row, instance }) => {
    const { webComponentsReactProperties } = instance;
    if (disableRowAccessor(row) === true) {
      row.disableSelect = true;
      const handleClick = (e) => {
        if (typeof webComponentsReactProperties.onRowClick === 'function') {
          webComponentsReactProperties.onRowClick(enrichEventWithDetails(e, { row }));
        }
      };
      const onKeyDown = (e) => {
        if (e.code === 'Space' || e.code === 'Enter') {
          e.preventDefault();
          if (typeof webComponentsReactProperties.onRowClick === 'function') {
            webComponentsReactProperties.onRowClick(enrichEventWithDetails(e, { row }));
          }
        }
      };
      return { ...rowProps, onClick: handleClick, onKeyDown, className: webComponentsReactProperties.classes.tr };
    }
    return rowProps;
  };

  const columnDeps = (deps) => {
    return [...deps, disableRowSelection];
  };

  const cellProps = (cellProps, { cell: { row, column }, instance }) => {
    const { selectionMode, selectionBehavior } = instance.webComponentsReactProperties;
    if (
      disableRowAccessor(row) === true &&
      selectionMode !== AnalyticalTableSelectionMode.None &&
      (selectionBehavior !== AnalyticalTableSelectionBehavior.RowSelector ||
        column.id === '__ui5wcr__internal_selection_column')
    ) {
      const { 'aria-label': _0, ...updatedCellProps } = cellProps;
      if (column.id === '__ui5wcr__internal_selection_column') {
        const style = { ...cellProps.style, cursor: 'auto' };
        return { ...updatedCellProps, 'aria-disabled': true, style };
      }
      const { 'aria-selected': _1, ...updatedCellProsWithOutSelected } = updatedCellProps;
      return updatedCellProsWithOutSelected;
    }

    return cellProps;
  };

  const toggleRowSelectedProps = (rowProps, { row }) => {
    if (disableRowAccessor(row) === true) {
      const { title: _0, ...updatedRowProps } = rowProps;
      return updatedRowProps;
    }
    return rowProps;
  };

  const useDisableSelectionRow = (hooks: ReactTableHooks) => {
    hooks.getHeaderProps.push(headerProps);
    hooks.getRowProps.push(getRowProps);
    hooks.columns.push(columns);
    hooks.columnsDeps.push(columnDeps);
    hooks.getCellProps.push(cellProps);
    hooks.getToggleRowSelectedProps.push(toggleRowSelectedProps);
  };

  useDisableSelectionRow.pluginName = 'useRowDisableSelection';

  return useDisableSelectionRow;
};

1	import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
2	import { AnalyticalTableSelectionBehavior, AnalyticalTableSelectionMode } from '../../../enums/index.js';
3	import { CheckBox } from '../../../webComponents/CheckBox/index.js';
4	import type { ReactTableHooks } from '../types/index.js';
5	import { getBy } from '../util/index.js';
6
7	type DisableRowSelectionType = string \| ((row: Record<any, any>) => boolean);
8
9	const customCheckBoxStyling = {	398✔
10	verticalAlign: 'middle'
11	};
12
13	const headerProps = (	398✔
14	props,
15	{
16	instance: {
17	webComponentsReactProperties: { selectionMode }
18	}
19	}
20	) => {
21	if (	765✔
22	props.key === 'header___ui5wcr__internal_selection_column' &&	918✔
23	selectionMode === AnalyticalTableSelectionMode.MultiSelect
24	) {
25	const style = { ...props.style, cursor: 'auto' };	153✔
26	return [props, { onClick: undefined, onKeyDown: undefined, title: undefined, style }];	153✔
27	}
28	return props;	612✔
29	};
30
31	const columns = (columns) => {	398✔
32	return columns.map((column) => {	68✔
33	if (column.id === '__ui5wcr__internal_selection_column') {	340✔
34	return {	68✔
35	...column,
36	Cell: (instance) => {
37	const { webComponentsReactProperties, row } = instance;	544✔
38	if (row.disableSelect === true) {	544✔
39	if (	136!
40	row.isGrouped &&	136!
41	webComponentsReactProperties.selectionMode === AnalyticalTableSelectionMode.SingleSelect
42	) {
43	return null;	×
44	}
45	if (webComponentsReactProperties.selectionMode === AnalyticalTableSelectionMode.SingleSelect) {	136!
46	return <div onClick={undefined} data-name="internal_selection_column" />;	×
47	}
48	return (	136✔
49	<CheckBox
50	{...row.getToggleRowSelectedProps()}
51	disabled
52	style={customCheckBoxStyling}
53	data-name="internal_selection_column"
54	tabIndex={-1}
55	/>
56	);
57	}
58	return column.Cell(instance);	408✔
59	},
60	Header: () => null	153✔
61	};
62	}
63	return column;	272✔
64	});
65	};
66
67	/**
68	* A plugin hook for disabling row selection of specific rows.
69	*
70	* __Note:__ The "Select All" checkbox is not available with this hook.
71	*
72	* @param disableRowSelection - Can be either a `string` or a `function`. `string:` Defines the key in the dataset for disabling rows. If the value of the key is `true`, then the row will not be selectable. `function:` Programmatically disable rows for selection. The function receives the current row as parameter.
73	*
74	* @deprecated It is not recommended to disable table rows, mainly because of the following reasons:
75	*
76	* * Users are not informed why items cannot be selected.
77	* * ARIA lacks built-in support for selective item selection, complicating accessibility.
78	* * Consistency to other applications which do not offer disabled items.
79	*/
80	export const useRowDisableSelection = (disableRowSelection: DisableRowSelectionType) => {	398✔
81	const disableRowAccessor =
82	typeof disableRowSelection === 'function'	17!
83	? disableRowSelection
84	: (d) => getBy(d.original, disableRowSelection, undefined);	3,808✔
85
86	const getRowProps = (rowProps, { row, instance }) => {	17✔
87	const { webComponentsReactProperties } = instance;	544✔
88	if (disableRowAccessor(row) === true) {	544✔
89	row.disableSelect = true;	136✔
90	const handleClick = (e) => {	136✔
91	if (typeof webComponentsReactProperties.onRowClick === 'function') {	34✔
92	webComponentsReactProperties.onRowClick(enrichEventWithDetails(e, { row }));	34✔
93	}
94	};
95	const onKeyDown = (e) => {	136✔
NEW 96	if (e.code === 'Space' \|\| e.code === 'Enter') {	×
NEW 97	e.preventDefault();	×
NEW 98	if (typeof webComponentsReactProperties.onRowClick === 'function') {	×
NEW 99	webComponentsReactProperties.onRowClick(enrichEventWithDetails(e, { row }));	×
100	}
101	}
102	};
103	return { ...rowProps, onClick: handleClick, onKeyDown, className: webComponentsReactProperties.classes.tr };	136✔
104	}	×
105	return rowProps;	408✔
106	};	×
107
108	const columnDeps = (deps) => {	17✔
109	return [...deps, disableRowSelection];	238✔
110	};
111
112	const cellProps = (cellProps, { cell: { row, column }, instance }) => {	17✔
113	const { selectionMode, selectionBehavior } = instance.webComponentsReactProperties;	2,720✔
114	if (	2,720✔
115	disableRowAccessor(row) === true &&	4,080!
116	selectionMode !== AnalyticalTableSelectionMode.None &&
117	(selectionBehavior !== AnalyticalTableSelectionBehavior.RowSelector \|\|
118	column.id === '__ui5wcr__internal_selection_column')
119	) {
120	const { 'aria-label': _0, ...updatedCellProps } = cellProps;	680✔
121	if (column.id === '__ui5wcr__internal_selection_column') {	680✔
122	const style = { ...cellProps.style, cursor: 'auto' };	136✔
123	return { ...updatedCellProps, 'aria-disabled': true, style };	136✔
124	}
125	const { 'aria-selected': _1, ...updatedCellProsWithOutSelected } = updatedCellProps;	544✔
126	return updatedCellProsWithOutSelected;	544✔
127	}
128		×
129	return cellProps;	2,040!
130	};
131
132	const toggleRowSelectedProps = (rowProps, { row }) => {	17✔
133	if (disableRowAccessor(row) === true) {	544✔
134	const { title: _0, ...updatedRowProps } = rowProps;	136✔
135	return updatedRowProps;	136!
136	}
137	return rowProps;	408✔
138	};
139
140	const useDisableSelectionRow = (hooks: ReactTableHooks) => {	17✔
141	hooks.getHeaderProps.push(headerProps);	238✔
142	hooks.getRowProps.push(getRowProps);	238✔
143	hooks.columns.push(columns);	238✔
144	hooks.columnsDeps.push(columnDeps);	238✔
145	hooks.getCellProps.push(cellProps);	238✔
146	hooks.getToggleRowSelectedProps.push(toggleRowSelectedProps);	238✔
147	};	×
148
149	useDisableSelectionRow.pluginName = 'useRowDisableSelection';	17✔
150
151	return useDisableSelectionRow;	17✔
152	};

SAP / ui5-webcomponents-react / 9775556604

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