<commit_before>React = require 'react'
isRetina = require 'is-retina'
imageExists = require 'image-exists'
path = require 'path'

module.exports = React.createClass
  displayName: 'RetinaImage'

  getInitialState: ->
    if isRetina() and not @props.checkIfRetinaImgExists
      src: @get2xPath()
    else
      src: @props.src

  propTypes:
    src: React.PropTypes.string.isRequired
    checkIfRetinaImgExists: React.PropTypes.bool
    retinaImageSuffix: React.PropTypes.string
    handleOnLoad: React.PropTypes.func

  getDefaultProps: ->
    checkIfRetinaImgExists: true
    forceOriginalDimensions: true
    retinaImageSuffix: '@2x'
    handleOnLoad: ->

  componentWillMount: ->
    if isRetina() and @props.checkIfRetinaImgExists
      imageExists(@get2xPath(), (exists) =>
        # If original image has loaded already (we have to wait so we know
        # the original image dimensions), then set the retina image path.
        if exists and @state.imgLoaded
          @setState src: @get2xPath()
        else
          @setState retinaImgExists: true
      )

  render: ->
    props = @props
    # Don't override passed in width/height.
    if @state.width and not @props.width?
      props.width = @state.width
    if @state.height and not @props.height?
      props.height = @state.height

    <img ref="img" {...@props} src={@state.src} onLoad={@handleOnLoad} />

  handleOnLoad: (e) ->
    # Customers of component might care when the image loads.
    @props.handleOnLoad(e)

    # This is generally you want unless manually controlling width.
    if @props.forceOriginalDimensions
      @setState {
        width: @refs.img.getDOMNode().clientWidth
        height: @refs.img.getDOMNode().clientHeight
      }

    @setState imgLoaded: true

    # If the retina image check has already finished, set the 2x path.
    if @state.retinaImgExists
      @setState src: get2xPath()

  get2xPath: ->
    basename = path.basename(@props.src, path.extname(@props.src))
    basename = basename + @props.retinaImageSuffix + path.extname(@props.src)
    src = @props.src.replace(path.basename(@props.src), basename)
    return src
<commit_msg>Replace the src attribute instead of recreating element<commit_after>React = require 'react'
isRetina = require 'is-retina'
imageExists = require 'image-exists'
path = require 'path'

module.exports = React.createClass
  displayName: 'RetinaImage'

  propTypes:
    src: React.PropTypes.string.isRequired
    checkIfRetinaImgExists: React.PropTypes.bool
    retinaImageSuffix: React.PropTypes.string
    handleOnLoad: React.PropTypes.func

  getDefaultProps: ->
    checkIfRetinaImgExists: true
    forceOriginalDimensions: true
    retinaImageSuffix: '@2x'
    handleOnLoad: ->

  componentDidMount: ->
    if isRetina() and @props.checkIfRetinaImgExists
      imageExists @getRetinaPath(), (exists) =>
        # If original image has loaded already (we have to wait so we know
        # the original image dimensions), then set the retina image path.
        if exists and @state?.imgLoaded
          @swapSrc @getRetinaPath()
        else
          @setState retinaImgExists: true
    # If the check isn't needed, immediately swap in the retina path
    else if isRetina() and not @props.checkIfRetinaImgExists
      @swapSrc @getRetinaPath()

  render: ->
    props = @props
    # Don't override passed in width/height.
    if @state?.width and not @props.width?
      props.width = @state.width
    if @state?.height and not @props.height?
      props.height = @state.height

    <img ref="img" {...@props} onLoad={@handleOnLoad} />

  handleOnLoad: (e) ->
    # Customers of component might care when the image loads.
    @props.handleOnLoad(e)

    # This is generally you want unless manually controlling width.
    if @props.forceOriginalDimensions
      @setState {
        width: @refs.img.getDOMNode().clientWidth
        height: @refs.img.getDOMNode().clientHeight
      }

    @setState imgLoaded: true

    # If the retina image check has already finished, set the 2x path.
    if @state?.retinaImgExists
      @swapSrc getRetinaPath()

  getRetinaPath: ->
    basename = path.basename(@props.src, path.extname(@props.src))
    basename = basename + @props.retinaImageSuffix + path.extname(@props.src)
    src = @props.src.replace(path.basename(@props.src), basename)
    return src

  swapSrc: (src) ->
    @refs.img.getDOMNode().src = src

{'fraction_non_alphanumeric': 0.10222626079054975, 'fraction_numerical': 0.002044525215810995, 'mean_word_length': 3.145951035781544, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 21, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3253533', 'n_tokens_mistral': 1354, 'n_tokens_neox': 1322, 'n_words': 363}