1import * as React from 'react';
2import { View } from 'react-native';
3import normalizeColor from 'react-native-web/src/modules/normalizeColor';
4export default function NativeLinearGradient({ colors, locations, startPoint, endPoint, ...props }) {
5    const [layout, setLayout] = React.useState(null);
6    const [gradientColors, setGradientColors] = React.useState([]);
7    const [pseudoAngle, setPseudoAngle] = React.useState(0);
8    const { width = 1, height = 1 } = layout ?? {};
9    React.useEffect(() => {
10        const getControlPoints = () => {
11            let correctedStartPoint = [0, 0];
12            if (Array.isArray(startPoint)) {
13                correctedStartPoint = [
14                    startPoint[0] != null ? startPoint[0] : 0.0,
15                    startPoint[1] != null ? startPoint[1] : 0.0,
16                ];
17            }
18            let correctedEndPoint = [0.0, 1.0];
19            if (Array.isArray(endPoint)) {
20                correctedEndPoint = [
21                    endPoint[0] != null ? endPoint[0] : 0.0,
22                    endPoint[1] != null ? endPoint[1] : 1.0,
23                ];
24            }
25            return [correctedStartPoint, correctedEndPoint];
26        };
27        const [start, end] = getControlPoints();
28        start[0] *= width;
29        end[0] *= width;
30        start[1] *= height;
31        end[1] *= height;
32        const py = end[1] - start[1];
33        const px = end[0] - start[0];
34        setPseudoAngle(90 + (Math.atan2(py, px) * 180) / Math.PI);
35    }, [width, height, startPoint, endPoint]);
36    React.useEffect(() => {
37        const nextGradientColors = colors.map((color, index) => {
38            const hexColor = normalizeColor(color);
39            let output = hexColor;
40            if (locations && locations[index]) {
41                const location = Math.max(0, Math.min(1, locations[index]));
42                // Convert 0...1 to 0...100
43                const percentage = location * 100;
44                output += ` ${percentage}%`;
45            }
46            return output;
47        });
48        setGradientColors(nextGradientColors);
49    }, [colors, locations]);
50    const colorStyle = gradientColors.join(',');
51    const backgroundImage = `linear-gradient(${pseudoAngle}deg, ${colorStyle})`;
52    // TODO(Bacon): In the future we could consider adding `backgroundRepeat: "no-repeat"`. For more
53    // browser support.
54    return (React.createElement(View, Object.assign({}, props, { style: [
55            props.style,
56            // @ts-ignore: [ts] Property 'backgroundImage' does not exist on type 'ViewStyle'.
57            { backgroundImage },
58        ], onLayout: event => {
59            const { x, y, width, height } = event.nativeEvent.layout;
60            const oldLayout = layout ?? { x: 0, y: 0, width: 1, height: 1 };
61            // don't set new layout state unless the layout has actually changed
62            if (x !== oldLayout.x ||
63                y !== oldLayout.y ||
64                width !== oldLayout.width ||
65                height !== oldLayout.height) {
66                setLayout({ x, y, width, height });
67            }
68            if (props.onLayout) {
69                props.onLayout(event);
70            }
71        } })));
72}
73//# sourceMappingURL=NativeLinearGradient.web.js.map