import React, { Component } from 'react';
import {Form, Icon, Input,Button,InputNumber,DatePicker } from 'antd';
const FormItem = Form.Item;
class Item extends Component {
  render(){
    const {form,id}=this.props;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
    };
    let { validator } = this.props;
    if(!!!this.props.validator){
      validator=[{required:false}];
    }
    return(
      <span>
        <FormItem
          {...formItemLayout}
          label={this.props.name}
          hasFeedback = {this.props.hasFeedback}
          help={form.isFieldTouched(id) ?  form.getFieldError(id) : ''}
          validateStatus={form.isFieldTouched(id) ? (form.getFieldError(id) ? 'error' : 'success'):null}
        >
           {form.getFieldDecorator(id, {
              rules:[...validator],
           })(
             React.cloneElement(this.props.shape)
           )}
         </FormItem>
      </span>
    )
  }
}
export default Item;