text: import React from 'react';
  import styles from './UserModal.less'
  import { Modal, Form, Input } from 'antd'
  
  const FormItem = Form.Item
  
  class UserModal extends React.Component {
    constructor (props) {
      super(props)
      this.state = {
        visible: false
      }
    }
    showModalHandler = e => {
      if (e) e.preventDefault()
      this.setState({
        visible: true
      })
    }
    hideModalHandle = () => {
      this.setState({
        visible: false
      })
    }
  
    okHandle = () => {
      const { onOk } = this.props
      this.props.form.validateFields((err, values) => {
        if (!err) {
          onOk(values);
          this.hideModalHandle()
        }
      })
    }
  
    render () {
      const { children } = this.props
      const { getFieldDecorator } = this.props.form
      const { name, email, website } = this.props.record
      const formItemLayout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 }
      }
      return (
        <span>
          <span onClick={this.showModalHandler}>
            { children }
          </span>
          <Modal
            title="Edit User"
            visible={this.state.visible}
            onOk={this.okHandle}
            onCancel={this.hideModalHandle}
          >
            <Form layout="horizontal" onSubmit={this.okHandle}>
              <FormItem
                {...formItemLayout} label="Name"
              >
                {
                  getFieldDecorator('name', {
                    initialValue: name
                  })(<Input />)
                }
              </FormItem>
              <FormItem
                {...formItemLayout}
                label="Email"
              >
                {
                  getFieldDecorator('email', {
                    initialValue: email
                  })(<Input/>)
                }
              </FormItem>
              <FormItem
                {...formItemLayout}
                label="Website"
              >
                {
                  getFieldDecorator('website', {
                    initialValue: website
                  })(<Input/>)
                }
              </FormItem>
            </Form>
          </Modal>
        </span>
      )
    }
  }
  export default Form.create()(UserModal)
  