import React from 'react';
import { Area } from 'victory-native';
import { Defs, LinearGradient, Stop } from 'react-native-svg';
import { useColors } from '../../../hooks/useColors';
export const GradientArea = (props: any) => {
const { colors }: any = useColors();
const { style, gradientColorStops, gradientStrokeStops, strokeLine = 3 } = props;
const getDefaults = (defaultValue: any, arr: any) => {
return arr && arr.length > 0 ? arr : defaultValue;
};
const defaultColorStop = { offset: 0.1, color: colors.action, stopOpacity: 0.3 };
const defaultStrokeStop = { offset: 1, color: 'transparent', stopOpacity: 0 };
const stopColor = getDefaults(defaultColorStop, gradientColorStops).map((stop: any, index: any) => {
const { offset, color, stopOpacity } = stop;
return <Stop key={index} offset={`${offset * 100}%`} stopColor={color} stopOpacity={stopOpacity} />;
});
const stopStrake = getDefaults(defaultStrokeStop, gradientStrokeStops).map((stop: any, index: any) => {
const { offset, color, stopOpacity } = stop;
return <Stop key={index} offset={`${offset * 100}%`} stopColor={color} stopOpacity={stopOpacity} />;
});
const gradientId = Math.random().toString();
const strokeId = Math.random().toString();
const newStyle = { ...style, fill: `url(#${gradientId})`, stroke: `url(#${strokeId})`, strokeWidth: strokeLine };
return (
<>
<Defs>
<LinearGradient id={gradientId} x1="0%" y1="0%" x2="0%" y2="100%">
{stopColor}
</LinearGradient>
</Defs>
<Defs>
<LinearGradient id={strokeId} x1="0%" y1="0%" x2="0%" y2="100%">
{stopStrake}
</LinearGradient>
</Defs>
<Area {...props} style={newStyle} />
</>
);
};