13433379092

Committed 20 Feb 2025 10:38AM CUT coverage: 88.662%. First build

Build # 13433379092

Build Type

Pull #6973

github

Committed by

web-flow

Commit Message

Merge e60aa8511 into 9600d3630

Pull Request Pull Request #6973: docs(FilterBar): include selection in `With Logic` story

Run Details

3130 of 4086 branches covered (76.6%)

5599 of 6315 relevant lines covered (88.66%)

44938.38 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>();

  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>(	456✔
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();	×
39	const requestAnimationFrameRef = useRef<number \| 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 / 13433379092

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