Untitled
unknown
plain_text
a year ago
1.8 kB
4
Indexable
Never
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} /> </> ); };