jc-biz-components/components/editable-cell/index.js

jc component library based on Antd

import React, { Component } from 'react'
import { Icon, Input } from 'antd'
// import styles from './style.css'

export default class EditableCell extends Component {
  static defaultProps = {
    prefixCls: 'jc-editable-cell',
  }

  constructor(props) {
    super(props)
    this.state = {
      value: props.value,
      editable: false,
      changed: null
    }
  }

  componentWillReceiveProps(nextProp) {
    if (nextProp.value !== this.state.value) {
      this.setState({ value: nextProp.value })
    }
  }

  handleChange = (e) => {
    let value = e.target.value
    value = value.replace(/[\D]/g, '')
    if (!value && value !== this.state.value) {
      this.setState({
        value: '',
        changed: true
      })
    } else if (value && value !== this.state.value) {
      this.setState({
        value: value * 1,
        changed: true
      })
    }
  }

  check = () => {
    this.setState({ editable: false })
    if (this.state.changed) {
      this.props.onCheck(this.state.value)
      this.setState({
        changed: false
      })
    }
  }

  edit = () => {
    this.setState({ editable: true })
  }

  render() {
    const { value, editable, prefixCls } = this.state
    return (
      <div className={prefixCls}>
        {
          editable ? (
            <div className={`${prefixCls}-input-wrapper`}>
              <Input
                maxLength={4}
                value={value}
                onChange={this.handleChange}
                onPressEnter={this.check}
              />
              <Icon
                type='check'
                className={`${prefixCls}-input-icon-check`}
                onClick={this.check}
              />
            </div>
          ) : (
            <div className={`${prefixCls}-text-wrapper`}>
              {value || ' '}
              <Icon
                type='edit'
                className={`${prefixCls}-icon`}
                onClick={this.edit}
              />
            </div>
          )
        }
      </div>
    )
  }
}