wrap LiquidWrap.tsx

0% Statements 0/6

0% Branches 0/4

0% Functions 0/1

0% Lines 0/6

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { Liquid } from "@ant-design/plots";
import { useResizeDetector } from "react-resize-detector";
import React from "react";
 
// eslint-disable-next-line  @typescript-eslint/no-explicit-any
const LiquidWrap: React.FC<any> = (props) => {
	const { width, height, ref } = useResizeDetector<HTMLDivElement>();
 
	const roundedWidth = Math.trunc((width ?? 0) / 10) * 10;
	const roundedHeight = Math.trunc((height ?? 0) / 10) * 10;
 
	const configLiquid = {
		style: {
			outlineBorder: 4,
			outlineDistance: 8,
      fill: "#ADD8E6"
		},
	};
 
	return (
		<div
			ref={ref}
			style={{
				maxWidth: "70%",
				margin: "auto",
			}}
		>
			<Liquid
				{...configLiquid}
				{...props}
				width={roundedWidth}
				height={roundedHeight}
			/>
		</div>
	);
};
 
export default LiquidWrap;