AutoMate/src/MetaData.js

import React from 'react'

class MetaDataForm extends React.Component {
  constructor () {
    super()
    this.changeType = this.changeType.bind(this)
  }

  changeType (event) {
    console.log(this.sali.value)
    this.props.data.type = this.sali.value
  }

  render () {
    const { data } = this.props
    const metaElements = {
      text: (
        <fieldset>
          <input type='text' placeholder='Key Name' />
          <input type='text' placeholder='Value' />
        </fieldset>
      ),
      image: (
        <fieldset>
          <input type='text' placeholder='Image URL' />
          <button>Select from Gallery</button>
          <input type='file' placeholder='Upload file' />
          <input type='text' placeholder='Name' />
          <input type='text' placeholder='Description' />
        </fieldset>
      ),
      link: (
        <fieldset>
          <input type='text' placeholder='URL' />
          <input type='text' placeholder='Description' />
        </fieldset>
      ),
      file: (
        <fieldset>
          <input type='file' placeholder='URL' />
          <input type='text' placeholder='Description' />
        </fieldset>
      )
    }
    if (typeof data.type === 'undefined') {
      data.type = 'text'
    }

    return (
      <form>
        <select value={data.type} ref={(input) => { this.sali = input }} onChange={this.changeType}>
          <option value='text'>Text</option>
          <option value='image'>Image</option>
          <option value='link'>Link</option>
          <option value='file'>File</option>
        </select>
        {metaElements[data.type]}
      </form>
    )
  }
}

class MetaDataDisplay extends React.Component {
  constructor () {
    super()
    this.changeType = this.changeType.bind(this)
  }

  changeType (event) {
    console.log(event, this.sali)
    this.props.data.type = this.sali.value
  }

  render () {
    const { data } = this.props
    const metaElements = {
      text: (
        <p>
          <em>{data.key}</em>&nbsp;<span>{data.value}</span>
        </p>
      ),
      image: (
        <fieldset>
          <input type='text' placeholder='Image URL' />
          <button>Select from Gallery</button>
          <input type='file' placeholder='Upload file' />
          <input type='text' placeholder='Name' />
          <input type='text' placeholder='Description' />
        </fieldset>
      ),
      link: (
        <fieldset>
          <input type='text' placeholder='URL' />
          <input type='text' placeholder='Description' />
        </fieldset>
      ),
      file: (
        <fieldset>
          <input type='file' placeholder='URL' />
          <input type='text' placeholder='Description' />
        </fieldset>
      )
    }

    return (
      <form>
        <select value={data.type} ref={(input) => { this.sali = input }} onChange={this.changeType}>
          <option value='text'>Text</option>
          <option value='image'>Image</option>
          <option value='link'>Link</option>
          <option value='file'>File</option>
        </select>
        {metaElements[data.type]}
      </form>
    )
  }
}

class MetaData extends React.Component {
  render () {
    const { method, data } = this.props
    if (method === 'form') {
      return (
        <MetaDataForm method={method} data={data} />
      )
    }
    return (
      <MetaDataDisplay method={method} data={data} />
    )
  }
}

export default MetaData