Another Editor

by ramnathv

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/paper/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>
<script src="//npmcdn.com/[email protected]/lib/mobx.umd.js"></script>
<script src="//npmcdn.com/[email protected]/index.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-6">
      <div id="app"></div>
    </div>
  </div>
</div>

Babel + JSX

const {render} = ReactDOM
const {observable, computed} = mobx
const {observer} = mobxReact

class Store {
  options = [1, 2, 3, 4]
  @observable items = []
  @observable item = 1
  setItem(v){
    this.item = v
  }
  addItem(){
    this.items.push(this.item)
  }
}



const Variables = ({store}) => 
  <select className="form-control"
    onChange={e => {
      store.setItem(e.target.value)
      console.log(store.item)
    }}
  >{
    store.options.map((d, i) => 
      <option key={i}>{d}</option>
    )
  }</select>

  
const VariableSelector = observer(({store}) =>
  <div className="input-group">
    <Variables store={store} />  
    <span className="input-group-addon">
      <button className='btn btn-sm btn-primary'
        onClick={e => store.addItem()}
      >
        +
      </button>
    </span>
  </div>
)
  
const ListItem = (props) => 
  <div className="list-group-item">
    {props.children}
  </div>
  
const ListGroup = (props) => 
  <div className='list-group'>{props.children}</div>

const App = observer(({store}) => 
  <div>
    <VariableSelector store={store} />
    <ListGroup>
      {store.items.map((d, i) => 
        <ListItem key={i}>{d}</ListItem>
      )}
    </ListGroup>
  </div>
)

const store = new Store()

render(
  <App store={store}/>,
  document.getElementById("app")
)