xref: /expo/packages/expo-linear-gradient/build/NativeLinearGradient.web.js.map (revision 13308734)

{"version":3,"file":"NativeLinearGradient.web.js","sourceRoot":"","sources":["../src/NativeLinearGradient.web.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { StyleSheet, View } from 'react-native';\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 State = {\n  width?: number;\n  height?: number;\n};\n\ntype Point = [number, number];\n\nconst PI_2 = Math.PI / 2;\n\nfunction radToDeg(radians: number): number {\n  return (radians * 180.0) / Math.PI;\n}\n\nexport default class NativeLinearGradient extends React.PureComponent<Props, State> {\n  state = {\n    width: undefined,\n    height: undefined,\n  };\n\n  onLayout = event => {\n    this.setState({\n      width: event.nativeEvent.layout.width,\n      height: event.nativeEvent.layout.height,\n    });\n    if (this.props.onLayout) {\n      this.props.onLayout(event);\n    }\n  };\n\n  getControlPoints = (): Point[] => {\n    const { startPoint, endPoint } = this.props;\n\n    let correctedStartPoint: Point = [0.5, 0.0];\n    if (Array.isArray(startPoint)) {\n      correctedStartPoint = [\n        startPoint[0] != null ? startPoint[0] : 0.5,\n        startPoint[1] != null ? startPoint[1] : 0.0,\n      ];\n    }\n    let correctedEndPoint: Point = [0.5, 1.0];\n    if (Array.isArray(endPoint)) {\n      correctedEndPoint = [\n        endPoint[0] != null ? endPoint[0] : 0.5,\n        endPoint[1] != null ? endPoint[1] : 1.0,\n      ];\n    }\n    return [correctedStartPoint, correctedEndPoint];\n  };\n\n  calculateGradientAngleFromControlPoints = (): number => {\n    const [start, end] = this.getControlPoints();\n    const { width = 0, height = 0 } = this.state;\n    const radians = Math.atan2(height * (end[0] - start[0]), width * (end[1] - start[1])) + PI_2;\n    const degrees = radToDeg(radians);\n    return degrees;\n  };\n\n  getWebGradientColorStyle = (): string => {\n    return this.getGradientValues().join(',');\n  };\n\n  convertJSColorToGradientSafeColor = (color: number, index: number): string => {\n    const { locations } = this.props;\n    const hexColor = hexStringFromProcessedColor(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  getGradientValues = (): string[] => {\n    return this.props.colors.map(this.convertJSColorToGradientSafeColor);\n  };\n\n  getBackgroundImage = (): string => {\n    if (this.state.width && this.state.height) {\n      return `linear-gradient(${this.calculateGradientAngleFromControlPoints()}deg, ${this.getWebGradientColorStyle()})`;\n    }\n    return `transparent`;\n  };\n\n  render() {\n    const { colors, locations, startPoint, endPoint, onLayout, style, ...props } = this.props;\n\n    let flatStyle = style;\n    const backgroundImage = this.getBackgroundImage();\n    if (backgroundImage) {\n      let compiledStyle = StyleSheet.flatten(style) || {};\n      flatStyle = {\n        ...compiledStyle,\n        // @ts-ignore: [ts] Property 'backgroundImage' does not exist on type 'ViewStyle'.\n        backgroundImage: this.getBackgroundImage(),\n      };\n    }\n    // TODO: Bacon: In the future we could consider adding `backgroundRepeat: \"no-repeat\"`. For more browser support.\n    return <View style={flatStyle} onLayout={this.onLayout} {...props} />;\n  }\n}\n\nfunction hexStringFromProcessedColor(argbColor: number): string {\n  const hexColorString = argbColor.toString(16);\n  const withoutAlpha = hexColorString.substring(2);\n  const alpha = hexColorString.substring(0, 2);\n  return `#${withoutAlpha}${alpha}`;\n}\n"]}