import ReactDOM from 'react-dom';
import {Form, Input, Field} from '@alicd/next';

import FormItem from '../src/index';

import '../assets/index.scss';
import './app.scss';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.field = new Field(this);
  }

  render() {
    return (
      <Form field={this.field} size="small">
        <FormItem size="large" label="表单元素的标题">
          <Input />
        </FormItem>
        <FormItem
          label="表单元素的标题"
          showValidateType="tooltip"
          validateTooltipAlign="tl"
          validateStatus="error"
          rules={{ required: true }}
        >
          <Input { ... this.field.init("input", { rules: { required: true } }) }/>
        </FormItem>
        <FormItem
          label="表单元素的标题"
          showValidateType="tooltip"
          validateTooltipAlign="tr"
          validateStatus="error"
          rules={{ required: true }}
        >
          <Input { ... this.field.init("input", { rules: { required: true } }) }/>
        </FormItem>
        <FormItem
          label="表单元素的标题"
          showValidateType="tooltip"
          validateTooltipAlign="bl"
          validateStatus="error"
          rules={{ required: true }}
        >
          <Input { ... this.field.init("input", { rules: { required: true } }) }/>
        </FormItem>
        <FormItem
          label="表单元素的标题"
          showValidateType="tooltip"
          validateTooltipAlign="br"
          validateStatus="error"
          rules={{ required: true }}
        >
          <Input { ... this.field.init("input", { rules: { required: true } }) }/>
        </FormItem>
      </Form>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);