pt.2-React/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React!</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <!-- tady -->
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://unpkg.com/react@15/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
  <script src="https://unpkg.com/react-dom@15/dist/react-dom-server.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <!-- tady -->

</head>
<body>
  <div id="app"></div>
</body>
<script type="text/babel" data-presets="es2015,stage-0,react">
(function()  {
// tady =>
var DOM = React.DOM
var div = DOM.div
// ---

const Button = (props) => {
  return (
    <button className={`btn ${props.class || 'btn-danger'}`}>
      {props.text || 'This is default text'}
    </button>
  )
}
Button.propTypes = {
  text: React.PropTypes.string,
  class: React.PropTypes.string,
}


var state = {
  components: [Button]
}


const Container = (props) => {
  return (
    <div className="container">
      {props.children}
    </div>
  )
}

const Row = (props) => {
  return (
    <div className="row">
      {(props.children || []).map(child => {
        return (
          <div className={`col-md-${Math.round(12 / props.children.length)}`}>
            {child}
          </div>
        )
      })}
    </div>
  )
}

const ValueInput = ({ field, value, onInputChange }) => {
  const handleInputChange = (e) => {
    if (e.target.type === 'checkbox') {
      return onInputChange(field.name, e.target.checked)
    }

    return onInputChange(field.name, e.target.value)
  }

  return (
    <input
      className="form-control"
      id={field.id}
      type={field.type}
      defaultChecked={Boolean(value)}
      defaultValue={value || ''}
      onInput={handleInputChange}
      />
  )
}

const Form = ({ fields, values, onFieldChange }) => {
  const handleSubmit = (e) => {
    e.prevetDefault()
  }

  return (
    <form onSubmit={handleSubmit}>
      {fields.map(field => {
        return (
          <div className="form-group">
            <label htmlFor={field.id}>{field.name}</label>
            <ValueInput field={field} value={values[field.name]} onInputChange={onFieldChange}/>
          </div>
        )
      })}
    </form>
  )
}

class ComponentContainer extends React.Component {
  state = {
    values: {},
  }

  handleFormFieldChange = (fieldName, value) => {
    this.setState({
      values: Object.assign({}, this.state.values, {
        [fieldName]: value,
      })
    })
  }

  render() {
    console.log(this.state.values)
    const { Component } = this.props
    const component = <Component {...this.state.values} />
    return (
      <Row>
        <Form
          values={this.state.values}
          fields={getFormFieldsFromPropTypes(Component)}
          onFieldChange={this.handleFormFieldChange}
        />
        <code>
          <xmp dangerouslySetInnerHTML={{__html: ReactDOMServer.renderToStaticMarkup(component)}}/>
        </code>
        {component}
      </Row>
    )
  }
}

const Components = (props) => {
  return (
    <Container>
      {props.components.map(Component => {
        return <ComponentContainer
          key={Component.type || Component.name}
          Component={Component}
          values={props.values}
          />
      })}
    </Container>
  )
}

const getInputTypeOfPropType = (propType) => {
  switch (propType) {
    case React.PropTypes.number:
      return 'number'

    case React.PropTypes.bool:
      return 'checkbox'

    case React.PropTypes.array:
      return 'array'

    default:
      return 'text'
  }
}

const getFormFieldsFromPropTypes = (component) => {
  return Object.keys(component.propTypes || {}).map(key => {
    const propType = component.propTypes[key]
    return {
      type: getInputTypeOfPropType(propType),
      name: key,
      id: `${component.type || component.name}__${key}`,
    }
  })
}


ReactDOM.render(<Components {...state} />, document.getElementById('app'))


//$.getJSON('https://jsonplaceholder.typicode.com/posts/', const( = posts) { =>
// })

})()
</script>

</html>