{"ast":null,"code":"var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _slicedToArray2=_interopRequireDefault(require(\"@babel/runtime/helpers/slicedToArray\"));var _objectWithoutProperties2=_interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutProperties\"));var _react=_interopRequireWildcard(require(\"react\"));var _View=_interopRequireDefault(require(\"react-native-web/dist/exports/View\"));var _normalizeColor=_interopRequireDefault(require(\"react-native-web/src/modules/normalizeColor\"));var NativeLinearGradient=function NativeLinearGradient(_ref){var colors=_ref.colors,locations=_ref.locations,startPoint=_ref.startPoint,endPoint=_ref.endPoint,props=(0,_objectWithoutProperties2.default)(_ref,[\"colors\",\"locations\",\"startPoint\",\"endPoint\"]);var _useState=(0,_react.useState)(null),_useState2=(0,_slicedToArray2.default)(_useState,2),layout=_useState2[0],setLayout=_useState2[1];var _useState3=(0,_react.useState)([]),_useState4=(0,_slicedToArray2.default)(_useState3,2),gradientColors=_useState4[0],setGradientColors=_useState4[1];var _useState5=(0,_react.useState)(0),_useState6=(0,_slicedToArray2.default)(_useState5,2),pseudoAngle=_useState6[0],setPseudoAngle=_useState6[1];(0,_react.useEffect)(function(){var getControlPoints=function getControlPoints(){var correctedStartPoint=[0,0];if(Array.isArray(startPoint)){correctedStartPoint=[startPoint[0]!=null?startPoint[0]:0.0,startPoint[1]!=null?startPoint[1]:0.0];}var correctedEndPoint=[0.0,1.0];if(Array.isArray(endPoint)){correctedEndPoint=[endPoint[0]!=null?endPoint[0]:0.0,endPoint[1]!=null?endPoint[1]:1.0];}return[correctedStartPoint,correctedEndPoint];};var _getControlPoints=getControlPoints(),_getControlPoints2=(0,_slicedToArray2.default)(_getControlPoints,2),start=_getControlPoints2[0],end=_getControlPoints2[1];var _ref2=layout||{},_ref2$width=_ref2.width,width=_ref2$width===void 0?1:_ref2$width,_ref2$height=_ref2.height,height=_ref2$height===void 0?1:_ref2$height;start[0]*=width;end[0]*=width;start[1]*=height;end[1]*=height;var py=end[1]-start[1];var px=end[0]-start[0];setPseudoAngle(90+Math.atan2(py,px)*180/Math.PI);},[startPoint,endPoint]);(0,_react.useEffect)(function(){var nextGradientColors=colors.map(function(color,index){var hexColor=(0,_normalizeColor.default)(color);var output=hexColor;if(locations&&locations[index]){var location=Math.max(0,Math.min(1,locations[index]));var percentage=location*100;output+=\" \"+percentage+\"%\";}return output;});setGradientColors(nextGradientColors);},[colors,locations]);var colorStyle=gradientColors.join(',');var backgroundImage=\"linear-gradient(\"+pseudoAngle+\"deg, \"+colorStyle+\")\";return _react.default.createElement(_View.default,(0,_extends2.default)({},props,{style:[props.style,{backgroundImage:backgroundImage}],onLayout:function onLayout(event){setLayout(event.nativeEvent.layout);if(props.onLayout){props.onLayout(event);}}}));};var _default=NativeLinearGradient;exports.default=_default;","map":{"version":3,"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"],"sourceRoot":""},"metadata":{},"sourceType":"script"}