All files / src/components/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;