• Home
  • Features
  • Pricing
  • Docs
  • Announcements
  • Sign In

SAP / ui5-webcomponents-react / 13813715622

12 Mar 2025 02:22PM CUT coverage: 88.947%. First build
13813715622

Pull #7068

github

web-flow
Merge d731a8ab7 into 397652146
Pull Request #7068: fix(I18nContext): scope context per react major version

3144 of 4088 branches covered (76.91%)

4 of 4 new or added lines in 1 file covered. (100.0%)

5625 of 6324 relevant lines covered (88.95%)

45049.05 hits per line

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

5.26
/packages/base/src/hooks/useResponsiveContentPadding.ts
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>(
457✔
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
}
STATUS · Troubleshooting · Open an Issue · Sales · Support · CAREERS · ENTERPRISE · START FREE · SCHEDULE DEMO
ANNOUNCEMENTS · TWITTER · TOS & SLA · Supported CI Services · What's a CI service? · Automated Testing

© 2025 Coveralls, Inc