import React, {Component, PropTypes} from 'react'

class VisualizationName extends Component {
  constructor(props) {
    super(props)
  }

  handleInputBlur = e => {
    this.props.onCellRename(e.target.value)
  }

  render() {
    const {defaultName} = this.props

    return (
      <div className="graph-heading">
        <input
          type="text"
          className="form-control input-md"
          defaultValue={defaultName}
          onBlur={this.handleInputBlur}
          placeholder="Name this Cell..."
        />
      </div>
    )
  }
}

const {string, func} = PropTypes

VisualizationName.propTypes = {
  defaultName: string.isRequired,
  onCellRename: func,
}

export default VisualizationName

import React, {Component, PropTypes} from 'react'

class VisualizationName extends Component {
  constructor(props) {
    super(props)

    this.state = {
      reset: false,
    }
  }

  handleInputBlur = reset => e => {
    console.log(reset, this.props.defaultName)
    this.props.onCellRename(reset ? this.props.defaultName : e.target.value)
    this.setState({reset: false})
  }

  handleKeyDown = e => {
    if (e.key === 'Enter') {
      this.inputRef.blur()
    }
    if (e.key === 'Escape') {
      this.inputRef.value = this.props.defaultName
      this.setState({reset: true}, () => this.inputRef.blur())
    }
  }

  render() {
    const {defaultName} = this.props
    const {reset} = this.state

    return (
      <div className="graph-heading">
        <input
          type="text"
          className="form-control input-md"
          defaultValue={defaultName}
          onBlur={this.handleInputBlur(reset)}
          onKeyDown={this.handleKeyDown}
          placeholder="Name this Cell..."
          ref={r => (this.inputRef = r)}
        />
      </div>
    )
  }
}

const {string, func} = PropTypes

VisualizationName.propTypes = {
  defaultName: string.isRequired,
  onCellRename: func,
}

export default VisualizationName

Use enter and escape to stage changes to the cell name
Use enter and escape to stage changes to the cell name

Sort of confusing if you look at the implementation, but produces the
desired user experience. There’s a two-step saving process with cell
names now. The user has to change the cell name and hit Enter (or
manually blur) and the name is committed to CEO workingCellName state.
If they hit Escape it reverts to its name when the cell was initially
edited.
