diff --git a/docs/src/components/Pages/Examples/Editors/Editors.js b/docs/src/components/Pages/Examples/Editors/Editors.js
index 5230c2b..d56f364 100644
--- a/docs/src/components/Pages/Examples/Editors/Editors.js
+++ b/docs/src/components/Pages/Examples/Editors/Editors.js
@@ -6,7 +6,7 @@ import styled from 'styled-components';
import Input from 'retail-ui/components/Input';
import Button from 'retail-ui/components/Button';
import RadioGroup from 'retail-ui/components/RadioGroup';
-import ComboBox from 'retail-ui/components/ComboBox';
+import ComboBox from 'retail-ui/components/ComboBoxOld';
import Select from 'retail-ui/components/Select';
import DatePicker from 'retail-ui/components/DatePicker';
import Textarea from 'retail-ui/components/Textarea';
@@ -14,11 +14,7 @@ import Checkbox from 'retail-ui/components/Checkbox';
import Link from 'retail-ui/components/Link';
import { validation } from './ValidationBuilder';
-import type {
- ContactInfo,
- ContactInfoValidationInfo,
- FormEditorProps,
-} from '../../../../Domain/ContactInfo';
+import type { ContactInfo, ContactInfoValidationInfo, FormEditorProps } from '../../../../Domain/ContactInfo';
import Demo from '../../../Demo';
import Form from '../../../Form';
@@ -30,36 +26,22 @@ function FormEditor({ data, validationInfo, onChange }: FormEditorProps): React.
return (
-
- onChange({ name: value })}
- />
+
+ onChange({ name: value })} />
-
- onChange({ email: value })}
- />
+
+ onChange({ email: value })} />
-
- onChange({ phone: value })}
- />
+
+ onChange({ phone: value })} />
-
+
-
+
x}
renderValue={x => x}
@@ -79,9 +60,7 @@ function FormEditor({ data, validationInfo, onChange }: FormEditorProps): React.
value={data.city}
source={async query => {
const cities = ['City 1', 'City 2', 'City 3'];
- const result = !query
- ? cities
- : cities.filter(x => x.includes(query));
+ const result = !query ? cities : cities.filter(x => x.includes(query));
return {
values: result,
infos: result,
@@ -96,7 +75,11 @@ function FormEditor({ data, validationInfo, onChange }: FormEditorProps): React.
- onChange({ confirmed: value })}
- />
+ onChange({ confirmed: value })} />
@@ -123,10 +103,7 @@ function FormEditor({ data, validationInfo, onChange }: FormEditorProps): React.
- onChange({ born: value })}
- />
+ onChange({ born: value })} />
@@ -145,37 +122,43 @@ function FormEditor({ data, validationInfo, onChange }: FormEditorProps): React.
}
const LinkContainer = styled.span`
- background-color: ${props => props.error ? '#FDE8E8' : 'transparent'}
+ background-color: ${props => (props.error ? '#FDE8E8' : 'transparent')}
padding: 1px 5px;
margin: -1px -5px;
`;
-
type Validate = (data: T) => U;
const validate: Validate = validation()
.property(x => x.name)
- .required()
- .satisfy(x => x.split(' ').length === 2, 'Имя должно состоять из двух слов')
+ .required()
+ .satisfy(x => x.split(' ').length === 2, 'Имя должно состоять из двух слов')
.property(x => x.email)
- .required()
- .satisfy(x => x.includes('@'), 'Почта указана неверно')
+ .required()
+ .satisfy(x => x.includes('@'), 'Почта указана неверно')
.property(x => x.phone)
- .required()
- .satisfy(
- phone => phone !== '' && /^[\s\d\-\+\(\)]*$/.test(phone),
- 'Телефон должен состоять только из цифр, пробелов и знаков -,+,(,)')
- .property(x => x.sex).required()
- .property(x => x.city).required()
- .property(x => x.confession).required()
- .property(x => x.confirmed).satisfy(x => x, 'Надо соглашаться', 'submit')
- .property(x => x.modalOpened).satisfy(x => x, 'Надо соглашаться', 'submit')
- .property(x => x.about).required()
+ .required()
+ .satisfy(
+ phone => phone !== '' && /^[\s\d\-\+\(\)]*$/.test(phone),
+ 'Телефон должен состоять только из цифр, пробелов и знаков -,+,(,)'
+ )
+ .property(x => x.sex)
+ .required()
+ .property(x => x.city)
+ .required()
+ .property(x => x.confession)
+ .required()
+ .property(x => x.confirmed)
+ .satisfy(x => x, 'Надо соглашаться', 'submit')
+ .property(x => x.modalOpened)
+ .satisfy(x => x, 'Надо соглашаться', 'submit')
+ .property(x => x.about)
+ .required()
.property(x => x.born)
- .satisfy(x => x, 'Заполни', 'submit')
+ .satisfy(x => x, 'Заполни', 'submit')
+ .satisfy(x => x <= new Date(), 'Дата рождения должна находится в прошлом')
.build();
-
export default class Editors extends React.Component {
state = {
data: {
@@ -203,7 +186,9 @@ export default class Editors extends React.Component {
onChange={update => this.setState({ data: { ...this.state.data, ...update } })}
/>
-
+
diff --git a/src/Behaviour/ValidationWrapper.jsx b/src/Behaviour/ValidationWrapper.jsx
index 37fd136..f070aa4 100644
--- a/src/Behaviour/ValidationWrapper.jsx
+++ b/src/Behaviour/ValidationWrapper.jsx
@@ -129,6 +129,7 @@ export default class ValidationWrapper extends React.Component {
validations.forEach((x, i) => this.processBlur(x, this.state.validationStates[i], i));
this.context.validationContext.instanceProcessBlur(this);
this.isChanging = false;
+ this.setState({});
}
async processSubmit(): Promise {
@@ -168,18 +169,14 @@ export default class ValidationWrapper extends React.Component {
{ ...validationState, visible: true },
...validationStates.slice(index + 1),
];
- this.setState({
- validationStates: validationStates,
- });
+ this.setState({ validationStates: validationStates });
} else if (!validation.error && (!validationStates[index] || validationStates[index].visible === true)) {
validationStates = [
...validationStates.slice(0, index),
{ ...validationState, visible: false },
...validationStates.slice(index + 1),
];
- this.setState({
- validationStates: validationStates,
- });
+ this.setState({ validationStates: validationStates });
}
const isValid = !validationStates.find(x => x.visible);
this.context.validationContext.onValidationUpdated(this, isValid);
@@ -265,6 +262,15 @@ export default class ValidationWrapper extends React.Component {
children.props.onBlur();
}
},
+ onInput: (...args) => {
+ if (ReactUiDetection.isDatePicker(children)) {
+ this.isChanging = true;
+ this.setState({});
+ }
+ if (children && children.props && children.props.onInput) {
+ children.props.onInput(...args);
+ }
+ },
onChange: (...args) => {
if (ReactUiDetection.isDatePicker(children)) {
const nextValue = args[1];
@@ -273,6 +279,7 @@ export default class ValidationWrapper extends React.Component {
!(nextValue == null && children.props.value == null)
) {
this.isChanging = true;
+ this.handleBlur();
}
} else {
this.isChanging = true;