9418003409

Committed 07 Jun 2024 01:40PM CUT coverage: 88.099% (-0.5%) from 88.645%

Build # 9418003409

Build Type

Pull #5860

github

Committed by

web-flow

Commit Message

Merge 2d8ec93e0 into 2bba948ab

Pull Request Pull Request #5860: feat: support React 19

Run Details

3096 of 4079 branches covered (75.9%)

88 of 94 new or added lines in 38 files covered. (93.62%)

31 existing lines in 4 files now uncovered.

5500 of 6243 relevant lines covered (88.1%)

66352.01 hits per line

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

5.26

/packages/base/src/hooks/useResponsiveContentPadding.ts

'use client';

import { useEffect, useRef, useState } from 'react';
import { createUseStyles } from 'react-jss';
import { getCurrentRange } from '../Device/index.js';

type Range = 'Phone' | 'Tablet' | 'Desktop' | 'LargeDesktop';

const useStyles = createUseStyles<Range>(
  {
    Phone: { paddingLeft: '1rem', paddingRight: '1rem' },
    Tablet: { paddingLeft: '2rem', paddingRight: '2rem' },
    Desktop: { paddingLeft: '2rem', paddingRight: '2rem' },
    LargeDesktop: { paddingLeft: '3rem', paddingRight: '3rem' }
  },
  { name: 'StdExtPadding' }
);

export function useResponsiveContentPadding(
  element: HTMLElement | undefined | null,
  returnRangeString?: boolean
): string;

export function useResponsiveContentPadding(
  element: HTMLElement | undefined | null,
  returnRangeString: true
): [string, Range];

/**
 * Hook for creating a style class, which sets `padding-left` and `padding-right` depending on the width of the element.
 *
 * @param {HTMLElement} element The element the calculation is based on.
 * @param {boolean} [returnRangeString=false] If set to `true`, returns a tuple with the class name and range.
 * @returns {(string|Array)} If `returnRangeString` is `true`, the hook returns a tuple with the class name on first and the range string on second position. Otherwise, only the class name string is returned.
 */
export function useResponsiveContentPadding(element: HTMLElement | undefined | null, returnRangeString = false) {
  const [currentRange, setCurrentRange] = useState(() => getCurrentRange()?.name ?? 'Desktop');
  const classes = useStyles();
  const requestAnimationFrameRef = useRef<number | undefined>(undefined);

  useEffect(() => {
    const observer = new ResizeObserver(([el]) => {
      if (requestAnimationFrameRef.current) {
        cancelAnimationFrame(requestAnimationFrameRef.current);
      }
      requestAnimationFrameRef.current = requestAnimationFrame(() => {
        setCurrentRange(getCurrentRange(el.target.getBoundingClientRect().width)?.name);
      });
    });
    if (element) {
      observer.observe(element);
    }
    return () => {
      observer.disconnect();
      if (requestAnimationFrameRef.current) {
        cancelAnimationFrame(requestAnimationFrameRef.current);
      }
    };
  }, [element]);

  if (returnRangeString) {
    return [classes[currentRange], currentRange];
  }

  return classes[currentRange];
}

1	'use client';
2
3	import { useEffect, useRef, useState } from 'react';
4	import { createUseStyles } from 'react-jss';
5	import { getCurrentRange } from '../Device/index.js';
6
7	type Range = 'Phone' \| 'Tablet' \| 'Desktop' \| 'LargeDesktop';
8
9	const useStyles = createUseStyles<Range>(	447✔
10	{
11	Phone: { paddingLeft: '1rem', paddingRight: '1rem' },
12	Tablet: { paddingLeft: '2rem', paddingRight: '2rem' },
13	Desktop: { paddingLeft: '2rem', paddingRight: '2rem' },
14	LargeDesktop: { paddingLeft: '3rem', paddingRight: '3rem' }
15	},
16	{ name: 'StdExtPadding' }
17	);
18
19	export function useResponsiveContentPadding(
20	element: HTMLElement \| undefined \| null,
21	returnRangeString?: boolean
22	): string;
23
24	export function useResponsiveContentPadding(
25	element: HTMLElement \| undefined \| null,
26	returnRangeString: true
27	): [string, Range];
28
29	/**
30	* Hook for creating a style class, which sets `padding-left` and `padding-right` depending on the width of the element.
31	*
32	* @param {HTMLElement} element The element the calculation is based on.
33	* @param {boolean} [returnRangeString=false] If set to `true`, returns a tuple with the class name and range.
34	* @returns {(string\|Array)} If `returnRangeString` is `true`, the hook returns a tuple with the class name on first and the range string on second position. Otherwise, only the class name string is returned.
35	*/
36	export function useResponsiveContentPadding(element: HTMLElement \| undefined \| null, returnRangeString = false) {	×
37	const [currentRange, setCurrentRange] = useState(() => getCurrentRange()?.name ?? 'Desktop');	×
38	const classes = useStyles();	×
NEW 39	const requestAnimationFrameRef = useRef<number \| undefined>(undefined);	×
40
41	useEffect(() => {	×
42	const observer = new ResizeObserver(([el]) => {	×
43	if (requestAnimationFrameRef.current) {	×
44	cancelAnimationFrame(requestAnimationFrameRef.current);	×
45	}
46	requestAnimationFrameRef.current = requestAnimationFrame(() => {	×
47	setCurrentRange(getCurrentRange(el.target.getBoundingClientRect().width)?.name);	×
48	});
49	});
50	if (element) {	×
51	observer.observe(element);	×
52	}
53	return () => {	×
54	observer.disconnect();	×
55	if (requestAnimationFrameRef.current) {	×
56	cancelAnimationFrame(requestAnimationFrameRef.current);	×
57	}
58	};
59	}, [element]);
60
61	if (returnRangeString) {	×
62	return [classes[currentRange], currentRange];	×
63	}
64
65	return classes[currentRange];	×
66	}

SAP / ui5-webcomponents-react / 9418003409

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