text: import React, { Component } from 'react';
  import { Link } from 'react-router-dom';
  import routes from '../constants/routes';
  import {
    DatePicker,
    Button,
    Card,
    Table,
    Input,
    InputNumber,
    Popconfirm,
    Form,
    Icon
  } from 'antd';
  import moment from 'moment';
  
  const EditableContext = React.createContext();
  
  const EditableRow = ({ form, index, ...props }) => (
    <EditableContext.Provider value={form}>
      <tr {...props} />
    </EditableContext.Provider>
  );
  
  const EditableFormRow = Form.create()(EditableRow);
  
  class EditableCell extends React.Component {
    state = {
      editing: false
    };
  
    _toggleEdit = () => {
      const editing = !this.state.editing;
      this.setState({ editing }, () => {
        if (editing) {
          this.input.focus();
        }
      });
    };
  
    _save = e => {
      const { record, handleSave } = this.props;
      this.form.validateFields((error, values) => {
        try {
          if (error && error[e.currentTarget.id]) {
            return;
          }
          this._toggleEdit();
          handleSave({ ...record, ...values });
        } catch (ex) {
          //console.log('ERROR', ex);
        }
      });
    };
  
    renderCell = form => {
      this.form = form;
      const { children, dataIndex, record, title } = this.props;
  
      const { editing } = this.state;
      return editing ? (
        <Form.Item style={{ margin: 0 }}>
          {form.getFieldDecorator(dataIndex, {
            rules: [
              {
                required: true,
                message: `${title} is required.`
              }
            ],
            initialValue: record[dataIndex]
          })(
            <InputNumber
              ref={node => (this.input = node)}
              onPressEnter={this._save}
              onBlur={this._save}
            />
          )}
        </Form.Item>
      ) : (
        <div
          className="editable-cell-value-wrap"
          style={{ paddingRight: 24 }}
          onClick={this._toggleEdit}
        >
          {children}
        </div>
      );
    };
  
    render() {
      const {
        editable,
        dataIndex,
        title,
        record,
        index,
        handleSave,
        children,
        ...restProps
      } = this.props;
      
      return (
        <td {...restProps}>
          {editable ? (
            <EditableContext.Consumer>{this.renderCell}</EditableContext.Consumer>
          ) : (
            children
          )}
        </td>
      );
    }
  }
  
  export { EditableCell, EditableFormRow };
  