import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Form, Label, Input } from 'semantic-ui-react';

class FormInput extends Component {
  componentWillReceiveProps(nextProps) {
    const {
      input: { value, onChange },
      meta: { visited },
      defaultValue
    } = nextProps;
    if (!value && !visited && defaultValue) onChange(defaultValue);
  }

  render() {
    const {
      input,
      meta: { error, touched },
      readOnly,
      width,
      label,
      defaultValue,
      required,
      ...rest
    } = this.props;

    const hasError = touched && Boolean(error);

    if (readOnly) {
      return <span className="read-only">{input.value}</span>;
    }

    return (
      <Form.Field error={hasError} width={width || 10} required={required}>
        {label && <label>{label}</label>}
        <Input {...input} {...rest} />

        {hasError && <Label pointing={true}>{error}</Label>}
      </Form.Field>
    );
  }
}

export default FormInput;

@@ -533,16 +533,37 @@
 quired,%0A
+      errorPosition,%0A
       ..
@@ -711,16 +711,33 @@
 ut.value
+.toLocaleString()
 %7D%3C/span%3E
@@ -916,71 +916,463 @@
 st%7D 
-/%3E%0A%0A        %7BhasError && %3CLabel pointing=%7Btrue%7D%3E%7Berror%7D%3C/Label%3E
+value=%7Binput.value %7C%7C ''%7D /%3E%0A%0A        %7BhasError && (%0A          %3CLabel%0A            pointing=%7BerrorPosition === 'right' ? 'left' : true%7D%0A            style=%7B%0A              errorPosition === 'right'%0A                ? %7B%0A                    position: 'absolute',%0A                    width: 150,%0A                    top: error.length %3E 25 ? 0 : 5%0A                  %7D%0A                : %7B%7D%0A            %7D%0A          %3E%0A            %7Berror%7D%0A          %3C/Label%3E%0A        )
 %7D%0A  

allow for configuration of error position