import React from 'react';

import Validator from '../index';
import Button from '../../button/index';

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

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

    this.state = {
      isChecking: true
    };

    this.toggleChecking = this.toggleChecking.bind(this);
  }

  toggleChecking() {
    this.setState({
      isChecking: !this.state.isChecking
    });
  }

  render() {
    return (
      <Validator>
        <Input
          name="field"
          placeholder="请填写5-50个字"
          data-checking={this.state.isChecking}
          data-patterns={[{
            key: 'limit',
            msg: '须在5-50个字内',
            limit: {
              min: 5,
              max: 50
            }
          }]}
        />
        <br />
        <Button onClick={this.toggleChecking}>toggle校验</Button>
      </Validator>
    );
  }
}