import React from 'react';
import ReactDOM from 'react-dom';
import { Form as AntForm, Input, Button, Modal } from 'antd';
import { Form } from 'rx-model';
import {
PresenceValidator, EmailValidator, StringValidator,
} from 'rx-model/validators';
import { FormConnect } from 'react-rx-form';
class SimpleForm extends Form {
rules() {
return {
name: new PresenceValidator(),
email: [
new PresenceValidator(),
new EmailValidator(),
],
password: [
new PresenceValidator(),
new StringValidator({
minLength: 6
}),
],
}
}
}
const FormItem = AntForm.Item;
export default class SimpleFormComponent extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
form: new SimpleForm()
};
this.handleSubmit = this.handleSubmit.bind(this);
}
setAttributeRef(attr, el) {
this[`attr_${attr}`] = el;
}
getAttributeRef(attr) {
return this[`attr_${attr}`];
}
focus(component) {
if (component.focus) {
component.focus();
} else if (component.getWrappedInstance) {
component = component.getWrappedInstance();
this.focus(component);
} else {
component = ReactDOM.findDOMNode(component);
component && component.focus();
}
}
handleSubmit() {
const { form } = this.state;
form.validate().then(isValid => {
if (isValid) {
const attributes = form.getAttributes();
Modal.success({
title: 'Attributes',
content: <pre>{JSON.stringify(attributes, null, " ")}</pre>,
})
} else {
const error = form.getFirstError();
const component = this.getAttributeRef(error.attribute);
component && this.focus(component);
}
})
}
render() {
const { form } = this.state;
return (
<AntForm>
<FormConnect
form={form}
whenModel={['name']}
>{() => {
return <FormItem
label={<span><b>name</b></span>}
validateStatus={form.getValidationStatus('name')}
help={form.getValidationError('name')}
required={form.isAttributeRequired('name')}
>
<Input
ref={el => this.setAttributeRef('name', el)}
value={form.getAttribute('name')}
onChange={(e) => form.setAttribute('name', e.target.value)}
onBlur={() => form.validateAttributes(['name'])}
disabled={!form.isAttributeSafe('name')}
/>
</FormItem>
}}</FormConnect>
<FormConnect
form={form}
whenModel={['email']}
>{() => {
return <FormItem
label={<span><b>email</b></span>}
validateStatus={form.getValidationStatus('email')}
help={form.getValidationError('email')}
required={form.isAttributeRequired('email')}
>
<Input
ref={el => this.setAttributeRef('email', el)}
value={form.getAttribute('email')}
onChange={(e) => form.setAttribute('email', e.target.value)}
onBlur={() => form.validateAttributes(['email'])}
disabled={!form.isAttributeSafe('email')}
/>
</FormItem>
}}</FormConnect>
<FormConnect
form={form}
whenModel={['password']}
>{() => {
return <FormItem
label={<span><b>password</b> (минимум 6 символов)</span>}
validateStatus={form.getValidationStatus('password')}
help={form.getValidationError('password')}
required={form.isAttributeRequired('password')}
>
<Input
ref={el => this.setAttributeRef('password', el)}
value={form.getAttribute('password')}
onChange={(e) => form.setAttribute('password', e.target.value)}
onBlur={() => form.validateAttributes(['password'])}
disabled={!form.isAttributeSafe('password')}
/>
</FormItem>
}}</FormConnect>
<FormItem>
<Button onClick={this.handleSubmit}>Submit</Button>
</FormItem>
</AntForm>
);
}
}