import React from 'react';

import Validator from '../index';
import Button from '../../button/index';
import { Form, FormRow, Label } from '../../form/index';

import Input from '../../input/index';

export default class demoMsg extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  render() {
    return (
      <Validator msgAlign="bottom">
        <Form inline horizontal={false}>
          <FormRow>
            <Label>Field 1</Label>
            <Input
              name="email"
              data-required
              data-patterns={[{
                key: 'email',
                msg: '请输入邮箱地址',
              }]}
            />
          </FormRow>

          <FormRow>
            <Label>Field 2</Label>
            <Input
              name="mobile"
              data-required
              data-patterns={[{
                key: 'mobile',
                msg: '请输入手机号码',
              }]}
            />
          </FormRow>

          <FormRow>
            <Label>Field 3</Label>
            <Input
              name="integer"
              data-required
              data-patterns={[{
                key: 'integer',
                msg: '必须是数字',
              }]}
            />
          </FormRow>
          <FormRow>
            <Label>自定义data-required文案</Label>
            <Input
              name="data-tips"
              data-required
              data-required-msg="该选项不能为空，请输入"
              data-patterns={[]}
            />
          </FormRow>

          <FormRow>
            <Label>data-tips默认提示</Label>
            <Input
              name="required-msg"
              data-required
              data-tips="默认提示"
              data-patterns={[]}
            />
          </FormRow>
        </Form>
        <Button>查询</Button>
      </Validator>
    );
  }
}