# @cjsx React.DOM $ = require('jquery') React = require('react/addons') Modal = require('react-bootstrap/lib/Modal') Button = require('react-bootstrap/lib/Button')
module.exports = React.createClass
mixins: [React.addons.LinkedStateMixin] displayName: 'EditTag' getInitialState: ()-> updating: false name: @props.tag.get('name') errors: false shaking: false onChangeName: (event)-> @setState name: event.target.value onClickOk: (event)-> event.preventDefault() @setState updating: true attributes = {new_name: @state.name} @props.tag.save attributes, success: ()=> @props.tag.set 'name', @state.name @props.onRequestHide() error: (model, response, options)=> @setState errors: response.responseJSON.tag.errors @setState updating: false @setState shaking: true setTimeout (=> @setState shaking: false), 300 render: -> <Modal className={"animated infinite shake" if @state.shaking} {...@props} bsStyle='default' title={<i className="glyphicon glyphicon-edit" />} animation={false}> <div className='modal-body'> { if @state.errors <div className="alert alert-danger" role="alert"> <ul> { for key, errors of @state.errors for error in errors <li>{key + ' ' + error}</li> } </ul> </div> } <div className="form-group"> <label className="control-label">Name</label> <input type="text" className="form-control" value={@state.name} onChange={@onChangeName} disabled={@state.updating} id="inputError1" /> </div> <div className="form-group"> <button className="btn btn-default pull-right" onClick={@onClickOk} disabled={@state.updating}> OK { if @state.updating <i className='glyphicon glyphicon-refresh glyphicon-refresh-animate' /> } </button> </div> </div> </Modal>