9841065723

Committed 08 Jul 2024 02:01PM CUT coverage: 80.8% (+0.02%) from 80.782%

Build # 9841065723

Build Type

Pull #6040

github

Committed by

web-flow

Commit Message

Merge 90d9c0650 into 7e19fbbce

Pull Request Pull Request #6040: refactor: harmonize prop/enum names

Run Details

2607 of 3822 branches covered (68.21%)

9 of 9 new or added lines in 7 files covered. (100.0%)

1 existing line in 1 file now uncovered.

4709 of 5828 relevant lines covered (80.8%)

66578.06 hits per line

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

85.29

/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.Multiple
  ) {
    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.Single) {
              return null;
            }
            if (webComponentsReactProperties.selectionMode === AnalyticalTableSelectionMode.Single) {
              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 === 'Enter' || e.code === 'Space') {
          e.preventDefault();
          if (e.code === 'Enter' && typeof webComponentsReactProperties.onRowClick === 'function') {
            webComponentsReactProperties.onRowClick(enrichEventWithDetails(e, { row }));
          }
        }
      };
      const onKeyUp = (e) => {
        if (e.code === 'Space') {
          e.preventDefault();
          if (typeof webComponentsReactProperties.onRowClick === 'function') {
            webComponentsReactProperties.onRowClick(enrichEventWithDetails(e, { row }));
          }
        }
      };
      return {
        ...rowProps,
        onClick: handleClick,
        onKeyDown,
        onKeyUp,
        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 = {	393✔
10	verticalAlign: 'middle'
11	};
12
13	const headerProps = (	393✔
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.Multiple
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) => {	393✔
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 (row.isGrouped && webComponentsReactProperties.selectionMode === AnalyticalTableSelectionMode.Single) {	136!
UNCOV 40	return null;	×
41	}
42	if (webComponentsReactProperties.selectionMode === AnalyticalTableSelectionMode.Single) {	136!
43	return <div onClick={undefined} data-name="internal_selection_column" />;	×
44	}
45	return (	136✔
46	<CheckBox
47	{...row.getToggleRowSelectedProps()}
48	disabled
49	style={customCheckBoxStyling}
50	data-name="internal_selection_column"
51	tabIndex={-1}
52	/>
53	);
54	}
55	return column.Cell(instance);	408✔
56	},
57	Header: () => null	153✔
58	};
59	}
60	return column;	272✔
61	});
62	};
63
64	/**
65	* A plugin hook for disabling row selection of specific rows.
66	*
67	* __Note:__ The "Select All" checkbox is not available with this hook.
68	*
69	* @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.
70	*
71	* @deprecated It is not recommended to disable table rows, mainly because of the following reasons:
72	*
73	* * Users are not informed why items cannot be selected.
74	* * ARIA lacks built-in support for selective item selection, complicating accessibility.
75	* * Consistency to other applications which do not offer disabled items.
76	*/
77	export const useRowDisableSelection = (disableRowSelection: DisableRowSelectionType) => {	393✔
78	const disableRowAccessor =
79	typeof disableRowSelection === 'function'	17!
80	? disableRowSelection
81	: (d) => getBy(d.original, disableRowSelection, undefined);	3,808✔
82
83	const getRowProps = (rowProps, { row, instance }) => {	17✔
84	const { webComponentsReactProperties } = instance;	544✔
85	if (disableRowAccessor(row) === true) {	544✔
86	row.disableSelect = true;	136✔
87	const handleClick = (e) => {	136✔
88	if (typeof webComponentsReactProperties.onRowClick === 'function') {	34✔
89	webComponentsReactProperties.onRowClick(enrichEventWithDetails(e, { row }));	34✔
90	}
91	};
92	const onKeyDown = (e) => {	136✔
93	if (e.code === 'Enter' \|\| e.code === 'Space') {	×
94	e.preventDefault();	×
95	if (e.code === 'Enter' && typeof webComponentsReactProperties.onRowClick === 'function') {	×
96	webComponentsReactProperties.onRowClick(enrichEventWithDetails(e, { row }));	×
97	}
98	}
99	};
100	const onKeyUp = (e) => {	136✔
101	if (e.code === 'Space') {	×
102	e.preventDefault();	×
103	if (typeof webComponentsReactProperties.onRowClick === 'function') {	×
104	webComponentsReactProperties.onRowClick(enrichEventWithDetails(e, { row }));	×
105	}
106	}
107	};
108	return {	136✔
109	...rowProps,
110	onClick: handleClick,
111	onKeyDown,
112	onKeyUp,
113	className: webComponentsReactProperties.classes.tr
114	};
115	}
116	return rowProps;	408✔
117	};
118
119	const columnDeps = (deps) => {	17✔
120	return [...deps, disableRowSelection];	238✔
121	};
122
123	const cellProps = (cellProps, { cell: { row, column }, instance }) => {	17✔
124	const { selectionMode, selectionBehavior } = instance.webComponentsReactProperties;	2,720✔
125	if (	2,720✔
126	disableRowAccessor(row) === true &&	4,080!
127	selectionMode !== AnalyticalTableSelectionMode.None &&
128	(selectionBehavior !== AnalyticalTableSelectionBehavior.RowSelector \|\|
129	column.id === '__ui5wcr__internal_selection_column')
130	) {
131	const { 'aria-label': _0, ...updatedCellProps } = cellProps;	680✔
132	if (column.id === '__ui5wcr__internal_selection_column') {	680✔
133	const style = { ...cellProps.style, cursor: 'auto' };	136✔
134	return { ...updatedCellProps, 'aria-disabled': true, style };	136✔
135	}
136	const { 'aria-selected': _1, ...updatedCellProsWithOutSelected } = updatedCellProps;	544✔
137	return updatedCellProsWithOutSelected;	544✔
138	}
139
140	return cellProps;	2,040✔
141	};
142
143	const toggleRowSelectedProps = (rowProps, { row }) => {	17✔
144	if (disableRowAccessor(row) === true) {	544✔
145	const { title: _0, ...updatedRowProps } = rowProps;	136✔
146	return updatedRowProps;	136✔
147	}
148	return rowProps;	408✔
149	};
150
151	const useDisableSelectionRow = (hooks: ReactTableHooks) => {	17✔
152	hooks.getHeaderProps.push(headerProps);	238✔
153	hooks.getRowProps.push(getRowProps);	238✔
154	hooks.columns.push(columns);	238✔
155	hooks.columnsDeps.push(columnDeps);	238✔
156	hooks.getCellProps.push(cellProps);	238✔
157	hooks.getToggleRowSelectedProps.push(toggleRowSelectedProps);	238✔
158	};
159
160	useDisableSelectionRow.pluginName = 'useRowDisableSelection';	17✔
161
162	return useDisableSelectionRow;	17✔
163	};

SAP / ui5-webcomponents-react / 9841065723

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