import React from 'react';
import ReactDom from 'react-dom';

import Doc from './doc.md';

import { Demo, DemoPanel } from '../../../external/demo/index';
import DemoBase from './demoBase';
import DemoMsg from './demoMsg';
import DemoPlacer from './demoPlacer';
import DemoTrigger from './demoTrigger';
import DemoAddOn from './demoAddOn';
import DemoChecking from './demoChecking';
import DemoApi from './demoApi';
import DemoCallback from './demoCallback';

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

    this.state = {};
  }

  render() {
    return (
      <Demo doc={<Doc />} name="Validator">
        <DemoPanel title="基本使用">
          <DemoBase />
        </DemoPanel>

        <DemoPanel title="使用msgAlign属性改变提示信息位置">
          <DemoMsg />
        </DemoPanel>

        <DemoPanel title="使用data-placer自定义表单提示信息位置">
          <DemoPlacer />
        </DemoPanel>

        <DemoPanel title="使用data-trigger自定义表单校验时机">
          <DemoTrigger />
        </DemoPanel>

        <DemoPanel title="使用data-prefix(suffix)添加额外内容">
          <DemoAddOn />
        </DemoPanel>

        <DemoPanel title="使用data-checking控制校验">
          <DemoChecking />
        </DemoPanel>

        <DemoPanel title="使用Validator的实例方法">
          <DemoApi />
        </DemoPanel>

        <DemoPanel title="onValid & onInValid回调">
          <DemoCallback />
        </DemoPanel>
      </Demo>
    );
  }
}

const demo = document.getElementById('demo');

if (demo) {
  ReactDom.render(<App />, demo);
}