14454581125

Committed 14 Apr 2025 07:59PM UTC coverage: 71.708% (-2.7%) from 74.385%

Build # 14454581125

Build Type

push

github

Committed by

web-flow

Commit Message

chore: update-all-packages (#631)

update-all-packages

Run Details

1154 of 1753 branches covered (65.83%)

Branch coverage included in aggregate %.

18 of 25 new or added lines in 14 files covered. (72.0%)

120 existing lines in 23 files now uncovered.

1122 of 1421 relevant lines covered (78.96%)

6.97 hits per line

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

71.64

/src/HashLoader.tsx

import * as React from "react";

import { calculateRgba } from "./helpers/colors";
import { parseLengthAndUnit, cssValue } from "./helpers/unitConverter";
import { LoaderSizeProps } from "./helpers/props";
import { createAnimation } from "./helpers/animation";

function HashLoader({
  loading = true,
  color = "#000000",
  speedMultiplier = 1,
  cssOverride = {},
  size = 50,
  ...additionalprops
}: LoaderSizeProps): React.JSX.Element | null {
  const { value, unit } = parseLengthAndUnit(size);

  const wrapper: React.CSSProperties = {
    display: "inherit",
    position: "relative",
    width: cssValue(size),
    height: cssValue(size),
    transform: "rotate(165deg)",
    ...cssOverride,
  };

  const thickness = value / 5;

  const lat = (value - thickness) / 2;

  const offset = lat - thickness;

  const colorValue = calculateRgba(color, 0.75);

  const before = createAnimation(
    "HashLoader",
    `0% {width: ${thickness}px; box-shadow: ${lat}px ${-offset}px ${colorValue}, ${-lat}px ${offset}px ${colorValue}}
    35% {width: ${cssValue(size)}; box-shadow: 0 ${-offset}px ${colorValue}, 0 ${offset}px ${colorValue}}
    70% {width: ${thickness}px; box-shadow: ${-lat}px ${-offset}px ${colorValue}, ${lat}px ${offset}px ${colorValue}}
    100% {box-shadow: ${lat}px ${-offset}px ${colorValue}, ${-lat}px ${offset}px ${colorValue}}`,
    "before"
  );

  const after = createAnimation(
    "HashLoader",
    `0% {height: ${thickness}px; box-shadow: ${offset}px ${lat}px ${color}, ${-offset}px ${-lat}px ${color}}
    35% {height: ${cssValue(size)}; box-shadow: ${offset}px 0 ${color}, ${-offset}px 0 ${color}}
    70% {height: ${thickness}px; box-shadow: ${offset}px ${-lat}px ${color}, ${-offset}px ${lat}px ${color}}
    100% {box-shadow: ${offset}px ${lat}px ${color}, ${-offset}px ${-lat}px ${color}}`,
    "after"
  );

  const style = (i: number): React.CSSProperties => {
    return {
      position: "absolute",
      top: "50%",
      left: "50%",
      display: "block",
      width: `${value / 5}${unit}`,
      height: `${value / 5}${unit}`,
      borderRadius: `${value / 10}${unit}`,
      transform: "translate(-50%, -50%)",
      animationFillMode: "none",
      animation: `${i === 1 ? before : after} ${2 / speedMultiplier}s infinite`,
    };
  };

  if (!loading) {
    return null;
  }

  return (
    <span style={wrapper} {...additionalprops}>
      <span style={style(1)} />
      <span style={style(2)} />
    </span>
  );
}

export default HashLoader;

1	import * as React from "react";
2		1✔
3	import { calculateRgba } from "./helpers/colors";	1!
4	import { parseLengthAndUnit, cssValue } from "./helpers/unitConverter";	×
5	import { LoaderSizeProps } from "./helpers/props";	×
6	import { createAnimation } from "./helpers/animation";	×
7		×
8	function HashLoader({
9	loading = true,	×
10	color = "#000000",
11	speedMultiplier = 1,	1✔
12	cssOverride = {},
13	size = 50,	1!
14	...additionalprops	41!
15	}: LoaderSizeProps): React.JSX.Element \| null {	41✔
16	const { value, unit } = parseLengthAndUnit(size);	41!
17		41✔
18	const wrapper: React.CSSProperties = {
19	display: "inherit",	41✔
20	position: "relative",
21	width: cssValue(size),	×
22	height: cssValue(size),	×
23	transform: "rotate(165deg)",
24	...cssOverride,	1!
25	};	1✔
26
27	const thickness = value / 5;	×
28
29	const lat = (value - thickness) / 2;	1✔
30		1✔
31	const offset = lat - thickness;	1!
UNCOV 32		×
UNCOV 33	const colorValue = calculateRgba(color, 0.75);	×
UNCOV 34		×
35	const before = createAnimation(
36	"HashLoader",	1✔
37	`0% {width: ${thickness}px; box-shadow: ${lat}px ${-offset}px ${colorValue}, ${-lat}px ${offset}px ${colorValue}}
38	35% {width: ${cssValue(size)}; box-shadow: 0 ${-offset}px ${colorValue}, 0 ${offset}px ${colorValue}}	1✔
39	70% {width: ${thickness}px; box-shadow: ${-lat}px ${-offset}px ${colorValue}, ${lat}px ${offset}px ${colorValue}}	1!
40	100% {box-shadow: ${lat}px ${-offset}px ${colorValue}, ${-lat}px ${offset}px ${colorValue}}`,	1✔
41	"before"	41!
42	);	1✔
43		1✔
44	const after = createAnimation(
45	"HashLoader",
46	`0% {height: ${thickness}px; box-shadow: ${offset}px ${lat}px ${color}, ${-offset}px ${-lat}px ${color}}	1✔
47	35% {height: ${cssValue(size)}; box-shadow: ${offset}px 0 ${color}, ${-offset}px 0 ${color}}	3✔
48	70% {height: ${thickness}px; box-shadow: ${offset}px ${-lat}px ${color}, ${-offset}px ${lat}px ${color}}	3✔
49	100% {box-shadow: ${offset}px ${lat}px ${color}, ${-offset}px ${-lat}px ${color}}`,	1✔
50	"after"	3!
51	);	3✔
UNCOV 52		×
UNCOV 53	const style = (i: number): React.CSSProperties => {	×
54	return {
55	position: "absolute",	3✔
56	top: "50%",
57	left: "50%",	1✔
58	display: "block",	1✔
59	width: `${value / 5}${unit}`,	1✔
60	height: `${value / 5}${unit}`,	1✔
61	borderRadius: `${value / 10}${unit}`,	1✔
62	transform: "translate(-50%, -50%)",
63	animationFillMode: "none",	3!
64	animation: `${i === 1 ? before : after} ${2 / speedMultiplier}s infinite`,	3✔
65	};	3✔
66	};	3✔
67		3✔
68	if (!loading) {	3✔
69	return null;	3✔
70	}	3✔
71		3✔
72	return (	3✔
73	<span style={wrapper} {...additionalprops}>	4✔
74	<span style={style(1)} />
75	<span style={style(2)} />
76	</span>
77	);
78	}
79
80	export default HashLoader;

davidhu2000 / react-spinners / 14454581125

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