| 1 | {"version":3,"file":"NativeLinearGradient.web.js","sourceRoot":"","sources":["../src/NativeLinearGradient.web.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FunctionComponent, useEffect, useState } from 'react';\nimport { LayoutRectangle, View } from 'react-native';\nimport normalizeColor from 'react-native-web/src/modules/normalizeColor';\n\ntype Props = {\n colors: number[];\n locations?: number[] | null;\n startPoint?: Point | null;\n endPoint?: Point | null;\n onLayout?: Function;\n} & React.ComponentProps<typeof View>;\n\ntype Point = [number, number];\n\nconst NativeLinearGradient: FunctionComponent<Props> = ({\n colors,\n locations,\n startPoint,\n endPoint,\n ...props\n}: Props) => {\n const [layout, setLayout] = useState<LayoutRectangle | null>(null);\n const [gradientColors, setGradientColors] = useState<string[]>([]);\n const [pseudoAngle, setPseudoAngle] = useState<number>(0);\n\n useEffect(() => {\n const getControlPoints = (): Point[] => {\n let correctedStartPoint: Point = [0, 0];\n if (Array.isArray(startPoint)) {\n correctedStartPoint = [\n startPoint[0] != null ? startPoint[0] : 0.0,\n startPoint[1] != null ? startPoint[1] : 0.0,\n ];\n }\n let correctedEndPoint: Point = [0.0, 1.0];\n if (Array.isArray(endPoint)) {\n correctedEndPoint = [\n endPoint[0] != null ? endPoint[0] : 0.0,\n endPoint[1] != null ? endPoint[1] : 1.0,\n ];\n }\n return [correctedStartPoint, correctedEndPoint];\n };\n\n const [start, end] = getControlPoints();\n const { width = 1, height = 1 } = layout || {};\n start[0] *= width;\n end[0] *= width;\n start[1] *= height;\n end[1] *= height;\n const py = end[1] - start[1];\n const px = end[0] - start[0];\n\n setPseudoAngle(90 + (Math.atan2(py, px) * 180) / Math.PI);\n }, [startPoint, endPoint]);\n\n useEffect(() => {\n const nextGradientColors = colors.map((color: number, index: number): string => {\n const hexColor = normalizeColor(color);\n let output = hexColor;\n if (locations && locations[index]) {\n const location = Math.max(0, Math.min(1, locations[index]));\n // Convert 0...1 to 0...100\n const percentage = location * 100;\n output += ` ${percentage}%`;\n }\n return output;\n });\n\n setGradientColors(nextGradientColors);\n }, [colors, locations]);\n\n const colorStyle = gradientColors.join(',');\n const backgroundImage = `linear-gradient(${pseudoAngle}deg, ${colorStyle})`;\n // TODO: Bacon: In the future we could consider adding `backgroundRepeat: \"no-repeat\"`. For more\n // browser support.\n return (\n <View\n {...props}\n style={[\n props.style,\n // @ts-ignore: [ts] Property 'backgroundImage' does not exist on type 'ViewStyle'.\n { backgroundImage },\n ]}\n onLayout={event => {\n setLayout(event.nativeEvent.layout);\n if (props.onLayout) {\n props.onLayout(event);\n }\n }}\n />\n );\n};\n\nexport default NativeLinearGradient;\n"]} |