9806057916

Committed 05 Jul 2024 09:19AM CUT coverage: 80.734% (-0.2%) from 80.928%

Build # 9806057916

Build Type

Pull #6020

github

Committed by

web-flow

Commit Message

Merge 5cdfcb721 into dba28ce13

Pull Request Pull Request #6020: feat: move `Loader` to `compat` package & replace with `BusyIndicator`

Run Details

2614 of 4029 branches covered (64.88%)

8 of 8 new or added lines in 2 files covered. (100.0%)

27 existing lines in 5 files now uncovered.

4727 of 5855 relevant lines covered (80.73%)

68409.77 hits per line

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

10.53

/packages/main/src/components/Loader/index.tsx

'use client';

import { deprecationNotice, useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
import { clsx } from 'clsx';
import type { CSSProperties } from 'react';
import { forwardRef, useEffect, useState } from 'react';
import { LoaderType } from '../../enums/index.js';
import { PLEASE_WAIT } from '../../i18n/i18n-defaults.js';
import type { CommonProps } from '../../types/index.js';
import { classNames, styleData } from './Loader.module.css.js';

export interface LoaderPropTypes extends CommonProps {
  /**
   * Delay in ms until the Loader will be displayed
   *
   * @default `0`
   */
  delay?: number;
  /**
   * Defines the type of the `Loader`.
   *
   * __Note:__ If the process completion rate can be detected the `Determinate` type should be used.
   *
   * @default `"Indeterminate"`
   */
  type?: LoaderType | keyof typeof LoaderType;
  /**
   * Defines the progress of the Loader Bar.
   *
   * __Note:__ This prop has no effect if used with type `Indeterminate`.
   *
   * @default `"0px"`
   */
  progress?: CSSProperties['width'];
}

/**
 * The `Loader` signals that an operation is currently being executed. It uses as little space as possible to allow the user to interact with the UI.<br />
 * It can be used to signal a data update on an already existing dataset, or where an expansion will happen.
 *
 * __Note:__ This component is __deprecated__ and will be removed with our next major release (v2.0.0)! Please use the [BusyIndicator](https://sap.github.io/ui5-webcomponents-react/?path=/docs/user-feedback-busyindicator--docs) instead.
 *
 * @deprecated This component is deprecated and will be removed with our next major release (v2.0.0)! Please use the [BusyIndicator](https://sap.github.io/ui5-webcomponents-react/?path=/docs/user-feedback-busyindicator--docs) instead.
 */
const Loader = forwardRef<HTMLDivElement, LoaderPropTypes>((props, ref) => {
  const { className, type = LoaderType.Indeterminate, progress = '0px', slot, style, delay = 0, ...rest } = props;

  useStylesheet(styleData, Loader.displayName);
  const [isVisible, setIsVisible] = useState(delay === 0);

  const loaderClasses = clsx(classNames.loader, className, classNames[`loader${type}`]);
  const backgroundSize = type !== LoaderType.Determinate ? '40%' : progress;

  useEffect(() => {
    deprecationNotice('Loader', 'The `Loader` component is deprecated. Please use the `BusyIndicator` instead.');
  }, []);

  useEffect(() => {
    let timeout;
    if (delay > 0) {
      timeout = setTimeout(() => {
        setIsVisible(true);
      }, delay);
    }
    return () => {
      clearTimeout(timeout);
    };
  }, []);

  const i18nBundle = useI18nBundle('@ui5/webcomponents-react');

  if (!isVisible) {
    return null;
  }

  return (
    <div
      ref={ref}
      className={loaderClasses}
      data-component-name="Loader"
      aria-busy="true"
      role="progressbar"
      title={i18nBundle.getText(PLEASE_WAIT)}
      slot={slot}
      style={{
        ...style,
        backgroundSize
      }}
      {...rest}
    />
  );
});

Loader.displayName = 'Loader';

export { Loader };

1	'use client';
2
3	import { deprecationNotice, useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
4	import { clsx } from 'clsx';
5	import type { CSSProperties } from 'react';
6	import { forwardRef, useEffect, useState } from 'react';
7	import { LoaderType } from '../../enums/index.js';
8	import { PLEASE_WAIT } from '../../i18n/i18n-defaults.js';
9	import type { CommonProps } from '../../types/index.js';
10	import { classNames, styleData } from './Loader.module.css.js';
11
12	export interface LoaderPropTypes extends CommonProps {
13	/**
14	* Delay in ms until the Loader will be displayed
15	*
16	* @default `0`
17	*/
18	delay?: number;
19	/**
20	* Defines the type of the `Loader`.
21	*
22	* __Note:__ If the process completion rate can be detected the `Determinate` type should be used.
23	*
24	* @default `"Indeterminate"`
25	*/
26	type?: LoaderType \| keyof typeof LoaderType;
27	/**
28	* Defines the progress of the Loader Bar.
29	*
30	* __Note:__ This prop has no effect if used with type `Indeterminate`.
31	*
32	* @default `"0px"`
33	*/
34	progress?: CSSProperties['width'];
35	}
36
37	/**
38	* The `Loader` signals that an operation is currently being executed. It uses as little space as possible to allow the user to interact with the UI.<br />
39	* It can be used to signal a data update on an already existing dataset, or where an expansion will happen.
40	*
41	* __Note:__ This component is __deprecated__ and will be removed with our next major release (v2.0.0)! Please use the [BusyIndicator](https://sap.github.io/ui5-webcomponents-react/?path=/docs/user-feedback-busyindicator--docs) instead.
42	*
43	* @deprecated This component is deprecated and will be removed with our next major release (v2.0.0)! Please use the [BusyIndicator](https://sap.github.io/ui5-webcomponents-react/?path=/docs/user-feedback-busyindicator--docs) instead.
44	*/
45	const Loader = forwardRef<HTMLDivElement, LoaderPropTypes>((props, ref) => {	91✔
UNCOV 46	const { className, type = LoaderType.Indeterminate, progress = '0px', slot, style, delay = 0, ...rest } = props;	×
47
UNCOV 48	useStylesheet(styleData, Loader.displayName);	×
UNCOV 49	const [isVisible, setIsVisible] = useState(delay === 0);	×
50
UNCOV 51	const loaderClasses = clsx(classNames.loader, className, classNames[`loader${type}`]);	×
UNCOV 52	const backgroundSize = type !== LoaderType.Determinate ? '40%' : progress;	×
53
UNCOV 54	useEffect(() => {	×
UNCOV 55	deprecationNotice('Loader', 'The `Loader` component is deprecated. Please use the `BusyIndicator` instead.');	×
56	}, []);
57
UNCOV 58	useEffect(() => {	×
59	let timeout;
UNCOV 60	if (delay > 0) {	×
UNCOV 61	timeout = setTimeout(() => {	×
UNCOV 62	setIsVisible(true);	×
63	}, delay);
64	}
UNCOV 65	return () => {	×
UNCOV 66	clearTimeout(timeout);	×
67	};
68	}, []);
69
UNCOV 70	const i18nBundle = useI18nBundle('@ui5/webcomponents-react');	×
71
UNCOV 72	if (!isVisible) {	×
UNCOV 73	return null;	×
74	}
75
UNCOV 76	return (	×
77	<div
78	ref={ref}
79	className={loaderClasses}
80	data-component-name="Loader"
81	aria-busy="true"
82	role="progressbar"
83	title={i18nBundle.getText(PLEASE_WAIT)}
84	slot={slot}
85	style={{
86	...style,
87	backgroundSize
88	}}
89	{...rest}
90	/>
91	);
92	});
93
94	Loader.displayName = 'Loader';	91✔
95
96	export { Loader };

SAP / ui5-webcomponents-react / 9806057916

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