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

{"version":3,"file":"NativeLinearGradient.web.js","sourceRoot":"","sources":["../src/NativeLinearGradient.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAiBpC,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC;AAEzB,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,KAAK,CAAC,aAA2B;IAAnF;;QACE,UAAK,GAAG;YACN,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,SAAS;SAClB,CAAC;QAEF,aAAQ,GAAG,KAAK,CAAC,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC;gBACZ,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK;gBACrC,MAAM,EAAE,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,MAAM;aACxC,CAAC,CAAC;YACH,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;gBACvB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;aAC5B;QACH,CAAC,CAAC;QAEF,qBAAgB,GAAG,GAAY,EAAE;YAC/B,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YAE5C,IAAI,mBAAmB,GAAU,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YACxC,IAAI,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;gBAC7B,mBAAmB,GAAG;oBACpB,UAAU,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;oBAC3C,UAAU,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;iBAC5C,CAAC;aACH;YACD,IAAI,iBAAiB,GAAU,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;YAC1C,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;gBAC3B,iBAAiB,GAAG;oBAClB,QAAQ,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;oBACvC,QAAQ,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;iBACxC,CAAC;aACH;YACD,OAAO,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAC;QAClD,CAAC,CAAC;QAEF,4CAAuC,GAAG,GAAW,EAAE;YACrD,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC7C,MAAM,EAAE,KAAK,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YAC7C,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC;YAClB,GAAG,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC;YAChB,KAAK,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC;YACnB,GAAG,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC;YACjB,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;YAC7B,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;YAC7B,OAAO,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC;QACnD,CAAC,CAAC;QAEF,6BAAwB,GAAG,GAAW,EAAE;YACtC,OAAO,IAAI,CAAC,iBAAiB,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC5C,CAAC,CAAC;QAEF,sCAAiC,GAAG,CAAC,KAAa,EAAE,KAAa,EAAU,EAAE;YAC3E,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YACjC,MAAM,QAAQ,GAAG,2BAA2B,CAAC,KAAK,CAAC,CAAC;YACpD,IAAI,MAAM,GAAG,QAAQ,CAAC;YACtB,IAAI,SAAS,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE;gBACjC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;gBAC5D,2BAA2B;gBAC3B,MAAM,UAAU,GAAG,QAAQ,GAAG,GAAG,CAAC;gBAClC,MAAM,IAAI,IAAI,UAAU,GAAG,CAAC;aAC7B;YACD,OAAO,MAAM,CAAC;QAChB,CAAC,CAAC;QAEF,sBAAiB,GAAG,GAAa,EAAE;YACjC,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,iCAAiC,CAAC,CAAC;QACvE,CAAC,CAAC;QAEF,uBAAkB,GAAG,GAAW,EAAE;YAChC,OAAO,mBAAmB,IAAI,CAAC,uCAAuC,EAAE,QAAQ,IAAI,CAAC,wBAAwB,EAAE,GAAG,CAAC;QACrH,CAAC,CAAC;IAkBJ,CAAC;IAhBC,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC1F,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAClD,iHAAiH;QACjH,OAAO,CACL,CAAC,IAAI,CACH,KAAK,CAAC,CAAC;YACL,KAAK;YACL,kFAAkF;YAClF,EAAE,eAAe,EAAE;SACpB,CAAC,CACF,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,IAAI,KAAK,CAAC,EACV,CACH,CAAC;IACJ,CAAC;CACF;AAED,SAAS,2BAA2B,CAAC,SAAiB;IACpD,IAAI,SAAS,KAAK,CAAC,EAAE;QACnB,OAAO,eAAe,CAAC;KACxB;IACD,MAAM,cAAc,GAAG,SAAS,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC9C,MAAM,YAAY,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IACjD,MAAM,KAAK,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAC7C,OAAO,IAAI,YAAY,GAAG,KAAK,EAAE,CAAC;AACpC,CAAC","sourcesContent":["import React from 'react';\nimport { 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\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, 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  calculateGradientAngleFromControlPoints = (): number => {\n    const [start, end] = this.getControlPoints();\n    const { width = 1, height = 1 } = this.state;\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    return 90 + (Math.atan2(py, px) * 180) / Math.PI;\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    return `linear-gradient(${this.calculateGradientAngleFromControlPoints()}deg, ${this.getWebGradientColorStyle()})`;\n  };\n\n  render() {\n    const { colors, locations, startPoint, endPoint, onLayout, style, ...props } = this.props;\n    const backgroundImage = this.getBackgroundImage();\n    // TODO: Bacon: In the future we could consider adding `backgroundRepeat: \"no-repeat\"`. For more browser support.\n    return (\n      <View\n        style={[\n          style,\n          // @ts-ignore: [ts] Property 'backgroundImage' does not exist on type 'ViewStyle'.\n          { backgroundImage },\n        ]}\n        onLayout={this.onLayout}\n        {...props}\n      />\n    );\n  }\n}\n\nfunction hexStringFromProcessedColor(argbColor: number): string {\n  if (argbColor === 0) {\n    return `rgba(0,0,0,0)`;\n  }\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"]}