all files / src/ clickToEditForm.cjsx

100% Statements 24/24
100% Branches 4/4
100% Functions 8/8
100% Lines 22/22
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51                                                         
 
React = require('react')
Form = require('./form')
_ = require('underscore')
 
# see clickToEditForm.md
module.exports = class ClickToEditForm extends Form
  @displayName: "react-datum.ClickToEditForm"
 
  # override default for Form is all input, we start out readonly and then
  # switch to 'edit' mode when the user clicks edit button
  datumInputMode: 'readonly'
 
  constructor: (props) ->
    super
    @isEditing = false
 
 
  # override: only calls super if in edit mode, else renders single edit button
  renderButtons: (options) ->
    if @isEditing
      return super
    if @props.readonly
      return <span/>
    else
      return <button key="edit" ref="editButton" className="btn btn-primary" onClick={@onEditClick}>Edit</button>
 
 
  onEditClick: () =>
    @isEditing = true
    @datumInputMode = 'edit'
    @forceUpdate()
    _.defer => @focus()
 
 
 
  onSaveSuccess: () =>
    super
    @stopEditing()
 
 
  onCancelClick: () =>
    @stopEditing()
    super
 
 
  stopEditing: () =>
    @isEditing = false
    @datumInputMode = 'readonly'
    @forceUpdate()