<commit_before>import React from 'react'
import classNames from 'classnames'

import { InputStyles } from '../../styles'
import TextField from '../TextField'

class BrowseField extends React.Component<any, any> {
  constructor(props : any) {
    super(props)
  }

  onChange = (event : React.FormEvent<any>) => {
    const { onChange } = this.props
    const { input } = this.refs

    if (input.files.length) {
      onChange(input.files)
    }
  }

  render() {
    const { id, value, onChange } = this.props

    return (
      <div>
        <label htmlFor={id}>
          New image
        </label>
        <input
          className="BrowseField-fileInput"
          id={id}
          onChange={this.onChange}
          ref="input"
          type="file"
          value={value}
        />
        <style jsx>{`
          .BrowseField-fileInput {

          }
        `}</style>
      </div>
    )
  }
}

export interface ImageFieldProps {
  field : string | Array<string>,
  helpText: string,
  id: string,
  imageUrl: string,
  label: string,
  name: string,
  onChange : Function,
  value: Object,
}

class ImageField extends React.Component<ImageFieldProps, any> {
  static contextTypes = {
    tux: React.PropTypes.object,
  }

  constructor(props : ImageFieldProps) {
    super(props)

    this.state = {
      isToggled: false,
      imageUrl: '',
      fullModel: null,
    }
  }

  async componentDidMount() {
    const { value } = this.props
    const fullModel = await this.context.tux.adapter.loadAsset(value)

    this.setState({
      fullModel
    })
  }

  async componentWillReceiveProps(props : ImageFieldProps) {
    if (!props.value || !props.value.sys) {
      return
    }

    if (props.value.sys.id !== this.props.value.sys.id) {
      const fullModel = await this.context.tux.adapter.loadAsset(props.value)

      this.setState({
        fullModel
      })
    }
  }

  onCardClick = () => {
    const { isToggled } = this.state
    this.setState({ isToggled: !isToggled})
  }

  onFileChange = async(files : FileList) => {
    const { onChange } = this.props

    this.setState({
      isLoadingImage: true,
    })

    const asset = await this.context.tux.adapter.createAssetFromFile(files[0])

    onChange({
      id: asset.sys.id,
      linkType: 'Asset',
      type: 'Link'
    })<commit_msg>Describe value in props for ImageField<commit_after>import React from 'react'
import classNames from 'classnames'

import { InputStyles } from '../../styles'
import TextField from '../TextField'

class BrowseField extends React.Component<any, any> {
  constructor(props : any) {
    super(props)
  }

  onChange = (event : React.FormEvent<any>) => {
    const { onChange } = this.props
    const { input } = this.refs

    if (input.files.length) {
      onChange(input.files)
    }
  }

  render() {
    const { id, value, onChange } = this.props

    return (
      <div>
        <label htmlFor={id}>
          New image
        </label>
        <input
          className="BrowseField-fileInput"
          id={id}
          onChange={this.onChange}
          ref="input"
          type="file"
          value={value}
        />
        <style jsx>{`
          .BrowseField-fileInput {

          }
        `}</style>
      </div>
    )
  }
}

export interface ImageFieldProps {
  field : string | Array<string>,
  helpText: string,
  id: string,
  imageUrl: string,
  label: string,
  name: string,
  onChange : Function,
  value: {
    sys: {
      id: string,
      type: string,
      linkType: string,
    }
  },
}

class ImageField extends React.Component<ImageFieldProps, any> {
  static contextTypes = {
    tux: React.PropTypes.object,
  }

  constructor(props : ImageFieldProps) {
    super(props)

    this.state = {
      isToggled: false,
      imageUrl: '',
      fullModel: null,
    }
  }

  async componentDidMount() {
    const { value } = this.props
    const fullModel = await this.context.tux.adapter.loadAsset(value)

    this.setState({
      fullModel
    })
  }

  async componentWillReceiveProps(props : ImageFieldProps) {
    if (!props.value || !props.value.sys) {
      return
    }

    if (props.value.sys.id !== this.props.value.sys.id) {
      const fullModel = await this.context.tux.adapter.loadAsset(props.value)

      this.setState({
        fullModel
      })
    }
  }

  onCardClick = () => {
    const { isToggled } = this.state
    this.setState({ isToggled: !isToggled})
  }

  onFileChange = async(files : FileList) => {
    const { onChange } = this.props

    this.setState({
      isLoadingImage: true,
    })

    const asset = await this.context.tux.adapter.createAssetFromFile(files[0])

    onChange({
      id: asset.sys.id,
      linkType: 'Asset',
      type: 'Link'
    }, {
      type: this.props.id
    })
{'fraction_non_alphanumeric': 0.128338898163606, 'fraction_numerical': 0.00041736227045075126, 'mean_word_length': 2.2211021505376345, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 31, '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': '2364124', 'n_tokens_mistral': 1543, 'n_tokens_neox': 1533, 'n_words': 319}