InplaceEditable.js

import React, {Component} from 'react'
import {Button} from 'antd'
import './shared.css'

/**
 * abstract base class
 * subclasses should implement
 * const componentClassnamePrefix
 * method renderNormal
 * method renderEditing
 */
export default class InplaceEditable extends Component {
    constructor (props) {
      super(props)
      this.state = {
        status: 'normal',
        localValue: props.value
      }
    }

    componentClassnamePrefix = ''

    render () {
      switch (this.state.status) {
        case 'normal':
          return <div onMouseOver={this.showEditBtn} className={`inplace-editable ${this.componentClassnamePrefix}`}>
            {this.props.renderNormal(this)}
          </div>
        case 'hover':
          return <div onMouseLeave={this.hideEditBtn} className={`inplace-editable ${this.componentClassnamePrefix}`}>
            {this.props.renderNormal(this)}
            <Button size="small" type="ghost" icon="edit" shape="circle" onClick={this.startEditing} className="left-spacing"/>
          </div>
        case 'editing':
          return <div className={`inplace-editable ${this.componentClassnamePrefix}`}>
            {this.props.renderEditing(this)}
            <Button size="small" type="ghost" icon="check" shape="circle" onClick={this.onOK} className="left-spacing"/>
            <Button size="small" type="ghost" icon="close" shape="circle" onClick={this.onCancel} className="left-spacing"/>
          </div>
      }
    }

    onCancel = () => {
      this.setState({status: 'normal'})
    }
    onOK = () => {
      this.props.onSubmit(this.state.localValue).then(_ =>
        this.setState({status: 'normal'})
      )
    }

    hideEditBtn = () => {
      this.setState({status: 'normal'})
    }
    showEditBtn = () => {
      this.setState({status: 'hover'})
    }
    startEditing = () => {
      this.setState({localValue: this.props.value, status: 'editing'})
    }

}