{"size": 1953, "ext": "js", "max_stars_repo_path": "index.js", "max_stars_repo_name": "TuNguyenThanh/react-native-effect-instagram", "max_stars_repo_stars_event_min_datetime": "2019-11-14T09:43:15.000Z", "max_stars_repo_stars_event_max_datetime": "2020-10-31T11:30:54.000Z", "max_issues_repo_path": "index.js", "max_issues_repo_name": "TuNguyenThanh/react-native-effect-instagram", "max_issues_repo_issues_event_min_datetime": "2020-08-03T02:45:15.000Z", "max_issues_repo_issues_event_max_datetime": "2020-08-03T02:45:15.000Z", "max_forks_repo_path": "index.js", "max_forks_repo_name": "TuNguyenThanh/react-native-effect-instagram", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 2, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 26.04, "max_line_length": 102, "alphanum_fraction": 0.6026625704}
import React from 'react'
import PropsTypes from 'prop-types'
import { View, Image } from 'react-native'

import ListEffect from './ListEffect'
import Effect from './Effect'

// Style
import styles from './Styles'

export default class FilterInstagram extends React.PureComponent {
  static propTypes = {
    image: PropsTypes.object.isRequired,
    effect: PropsTypes.string.isRequired,
    onPressEffectSelected: PropsTypes.func.isRequired
  }

  constructor (props) {
    super(props)
    const { image } = this.props
    this.state = {
      image,
      effect: null
    }
  }

  static getDerivedStateFromProps (nextProps, prevState) {
    if (nextProps.effect !== prevState.effect) {
      return { effect: nextProps.effect }
    }
    return null
  }

  componentDidUpdate (prevProps, prevState, snapshot) {
    if (prevState.effect !== this.state.effect) {
      const { effect } = this.props
      this.setState({ effect })
    }
  }

  onPressEffectSelected = (effect) => {
    let onPress = this.props.onPressEffectSelected
    typeof onPress === 'function' && onPress(effect)
  }

  render () {
    const { effect, image } = this.state
    const { style, imagePreviewStyle, imagePreviewProps, renderImagePreview, numColumns } = this.props
    return (
      <View style={[styles.mainContainer, style]}>
        <Effect effect={effect}>
          {
            renderImagePreview ?
              renderImagePreview() :
              <Image
                style={[styles.imagePreview, imagePreviewStyle]}
                source={image}
                {...imagePreviewProps}
              />
          }
        </Effect>
        <View style={styles.wrapEffect}>
          <ListEffect
            effectDefault={effect || 'Normal'}
            imageDefault={image}
            effectSelected={this.onPressEffectSelected}
            {...this.props}
            horizontal={!numColumns}
          />
        </View>
      </View>
    )
  }
}
