react-panel: Input validation should be optional

This commit is contained in:
Johannes Schill 2018-11-30 11:04:56 +01:00
parent 6cbbffffb9
commit c722ea4f76
2 changed files with 19 additions and 12 deletions

View File

@ -1,6 +1,6 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { ValidationEvents, ValidationRule } from 'app/types'; import { ValidationEvents, ValidationRule } from 'app/types';
import { validate } from 'app/core/utils/validate'; import { validate, hasValidationEvent } from 'app/core/utils/validate';
export enum InputStatus { export enum InputStatus {
Invalid = 'invalid', Invalid = 'invalid',
@ -21,7 +21,7 @@ export enum EventsWithValidation {
} }
interface Props extends React.HTMLProps<HTMLInputElement> { interface Props extends React.HTMLProps<HTMLInputElement> {
validationEvents: ValidationEvents; validationEvents?: ValidationEvents;
hideErrorMessage?: boolean; hideErrorMessage?: boolean;
// Override event props and append status as argument // Override event props and append status as argument
@ -57,15 +57,17 @@ export class Input extends PureComponent<Props> {
populateEventPropsWithStatus = (restProps, validationEvents: ValidationEvents) => { populateEventPropsWithStatus = (restProps, validationEvents: ValidationEvents) => {
const inputElementProps = { ...restProps }; const inputElementProps = { ...restProps };
Object.keys(EventsWithValidation).forEach(eventName => { Object.keys(EventsWithValidation).forEach((eventName: EventsWithValidation) => {
if (hasValidationEvent(eventName, validationEvents) || restProps[eventName]) {
inputElementProps[eventName] = async evt => { inputElementProps[eventName] = async evt => {
if (validationEvents[eventName]) { if (hasValidationEvent(eventName, validationEvents)) {
await this.validatorAsync(validationEvents[eventName]).apply(this, [evt]); await this.validatorAsync(validationEvents[eventName]).apply(this, [evt]);
} }
if (restProps[eventName]) { if (restProps[eventName]) {
restProps[eventName].apply(null, [evt, this.status]); restProps[eventName].apply(null, [evt, this.status]);
} }
}; };
}
}); });
return inputElementProps; return inputElementProps;
}; };

View File

@ -1,4 +1,5 @@
import { ValidationRule } from 'app/types'; import { ValidationRule, ValidationEvents } from 'app/types';
import { EventsWithValidation } from 'app/core/components/Form/Input';
export const validate = (value: string, validationRules: ValidationRule[]) => { export const validate = (value: string, validationRules: ValidationRule[]) => {
const errors = validationRules.reduce((acc, currRule) => { const errors = validationRules.reduce((acc, currRule) => {
@ -9,3 +10,7 @@ export const validate = (value: string, validationRules: ValidationRule[]) => {
}, []); }, []);
return errors.length > 0 ? errors : null; return errors.length > 0 ? errors : null;
}; };
export const hasValidationEvent = (event: EventsWithValidation, validationEvents: ValidationEvents) => {
return validationEvents && validationEvents[event];
};