63 lines
2.1 KiB
TypeScript
63 lines
2.1 KiB
TypeScript
|
import React, { useEffect, useRef } from 'react';
|
||
|
|
|
||
|
|
interface SignalSVGProps {
|
||
|
|
signal: number; // Принимаем signal как пропс
|
||
|
|
color: string;
|
||
|
|
size: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const SignalSVG: React.FC<SignalSVGProps> = ({ signal, color, size }) => {
|
||
|
|
const svgRef = useRef<SVGSVGElement | null>(null);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
// Устанавливаем цвета в зависимости от signal
|
||
|
|
const colors = {
|
||
|
|
'--st1-color': signal >= 1 ? color : 'black',
|
||
|
|
'--st2-color': signal >= 2 ? color : 'black',
|
||
|
|
'--st3-color': signal >= 3 ? color : 'black',
|
||
|
|
'--st4-color': signal >= 4 ? color : 'black',
|
||
|
|
'--st5-color': signal === 5 ? color : 'black',
|
||
|
|
};
|
||
|
|
|
||
|
|
// Применяем стили к SVG
|
||
|
|
if (svgRef.current) {
|
||
|
|
Object.entries(colors).forEach(([key, value]) => {
|
||
|
|
svgRef.current?.style.setProperty(key, value);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}, [signal]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<svg
|
||
|
|
ref={svgRef}
|
||
|
|
version="1.1"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||
|
|
x="0px"
|
||
|
|
y="0px"
|
||
|
|
viewBox="0 0 296 235"
|
||
|
|
xmlSpace="preserve"
|
||
|
|
width={size} // Фиксированная ширина
|
||
|
|
height={size}
|
||
|
|
>
|
||
|
|
<style type="text/css">
|
||
|
|
{`
|
||
|
|
.st1 { fill-rule: evenodd; clip-rule: evenodd; fill: var(--st1-color, white); }
|
||
|
|
.st2 { fill-rule: evenodd; clip-rule: evenodd; fill: var(--st2-color, white); }
|
||
|
|
.st3 { fill-rule: evenodd; clip-rule: evenodd; fill: var(--st3-color, white); }
|
||
|
|
.st4 { fill-rule: evenodd; clip-rule: evenodd; fill: var(--st4-color, white); }
|
||
|
|
.st5 { fill-rule: evenodd; clip-rule: evenodd; fill: var(--st5-color, white); }
|
||
|
|
`}
|
||
|
|
</style>
|
||
|
|
<g>
|
||
|
|
<polygon className="st1" points="47,138 47,188 0,188 0,164" />
|
||
|
|
<polygon className="st2" points="109,104 109,188 62,188 62,130" />
|
||
|
|
<polygon className="st3" points="171,69 171,188 124,188 124,95" />
|
||
|
|
<polygon className="st4" points="234,35 234,188 187,188 187,61" />
|
||
|
|
<polygon className="st5" points="296,0 296,188 249,188 249,26" />
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default SignalSVG;
|