import React, {PropTypes} from 'react'

const NameableGraph = ({
  cell: {
    name,
    isEditing,
    x,
    y,
  },
  cell,
  children,
  onEditCell,
  onRenameCell,
  onUpdateCell,
}) => {
  let nameOrField

  if (isEditing) {
    nameOrField = (
      <input
        type="text"
        value={name}
        autoFocus={true}
        onChange={onRenameCell(x, y)}
        onBlur={onUpdateCell(cell)}
        onKeyUp={(evt) => {
          if (evt.key === 'Enter') {
            onUpdateCell(cell)()
          }
        }}
      />
    )
  } else {
    nameOrField = name
  }

  return (
    <div>
      <h2 className="dash-graph--heading" onClick={onEditCell(x, y, isEditing)}>{nameOrField}</h2>
      <div className="dash-graph--container">
        {children}
      </div>
    </div>
  )
}

const {
  func,
  node,
  number,
  shape,
  string,
} = PropTypes

NameableGraph.propTypes = {
  cell: shape({
    name: string.isRequired,
    x: number.isRequired,
    y: number.isRequired,
  }).isRequired,
  children: node.isRequired,
  onEditCell: func.isRequired,
  onRenameCell: func.isRequired,
  onUpdateCell: func.isRequired,
}

export default NameableGraph;

@@ -203,16 +203,84 @@
 eOrField
+%0A  const isEditable = !!(onEditCell %7C%7C onRenameCell %7C%7C onUpdateCell)
 %0A%0A  if (
@@ -288,16 +288,30 @@
 sEditing
+ && isEditable
 ) %7B%0A    
@@ -654,16 +654,155 @@
 me%0A  %7D%0A%0A
+  let onClickHandler%0A  if (isEditable) %7B%0A    onClickHandler = onEditCell%0A  %7D else %7B%0A    onClickHandler = () =%3E %7B%0A      // no-op%0A    %7D%0A  %7D%0A%0A
   return
@@ -867,24 +867,28 @@
 lick=%7Bon
-EditCell
+ClickHandler
 (x, y, i
@@ -1266,35 +1266,24 @@
 itCell: func
-.isRequired
 ,%0A  onRename
@@ -1292,27 +1292,16 @@
 ll: func
-.isRequired
 ,%0A  onUp
@@ -1314,27 +1314,16 @@
 ll: func
-.isRequired
 ,%0A%7D%0A%0Aexp

Make NameableGraph optionally editable