Skip to content
This repository has been archived by the owner on Feb 16, 2021. It is now read-only.

Hold error message in state #390

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Hold error message in state #390

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 15 additions & 11 deletions src/components.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,8 @@ export class Component extends React.Component {
this.typeInfo = getTypeInfo(props.type)
this.state = {
isPristine: true,
hasError: false,
hasError: props.options ? !!props.options.hasError : false,
error: this.getError(),
value: this.getTransformer().format(props.value)
}
}
Expand All @@ -124,6 +125,7 @@ export class Component extends React.Component {
const should = (
nextState.value !== state.value ||
nextState.hasError !== state.hasError ||
nextState.error !== state.error ||
nextProps.options !== props.options ||
nextProps.type !== props.type ||
isArraysShallowDiffers(nextPath, curPath)
Expand Down Expand Up @@ -155,20 +157,21 @@ export class Component extends React.Component {
}

getValue() {
return this.getTransformer().parse(this.state.value)
const value = this.state ? this.state.value : this.getTransformer().format(this.props.value)
return this.getTransformer().parse(value)
}

isValueNully() {
return Nil.is(this.getValue())
}

removeErrors() {
this.setState({ hasError: false })
this.setState({ hasError: false, error: '' })
}

validate() {
const result = t.validate(this.getValue(), this.props.type, this.getValidationOptions())
this.setState({ hasError: !result.isValid() })
this.setState({ hasError: !result.isValid(), error: this.getError() })
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This could be a problem. e.g. if there is an error hasError will become true but in the moment when this.getError() is called hasError is still true. The result is that component will have error style but there is no error message. Possible solution is to wait until state has changed and than set state for error or, pass to getError param true to ignore the hasError state.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's right, thanks.

@gcanti
any opinions regarding this PR?

return result
}

Expand Down Expand Up @@ -208,7 +211,7 @@ export class Component extends React.Component {
}

hasError() {
return this.props.options.hasError || this.state.hasError
return this.props.options.hasError || (this.state && this.state.hasError)
}

getConfig() {
Expand Down Expand Up @@ -237,8 +240,8 @@ export class Component extends React.Component {
typeInfo: this.typeInfo,
path: this.props.ctx.path,
isPristine: this.state.isPristine,
error: this.getError(),
hasError: this.hasError(),
error: this.state.error,
hasError: this.state.hasError,
label: this.getLabel(),
onChange: this.onChange,
config: this.getConfig(),
Expand Down Expand Up @@ -438,6 +441,7 @@ export class Datetime extends Component {
return defaultDatetimeValue
},
parse: (value) => {
if (Nil.is(value)) { return defaultDatetimeValue }
const numbers = value.map(parseNumber)
if (numbers.every(t.Number.is)) {
return new Date(numbers[0], numbers[1], numbers[2])
Expand Down Expand Up @@ -474,7 +478,7 @@ export class Struct extends Component {
}

removeErrors() {
this.setState({ hasError: false })
this.setState({ hasError: false, error: '' })
Object.keys(this.refs).forEach((ref) => this.refs[ref].removeErrors())
}

Expand Down Expand Up @@ -507,7 +511,7 @@ export class Struct extends Component {
}
}

this.setState({ hasError: errors.length > 0 })
this.setState({ hasError: errors.length > 0, error: this.getError() })
return new t.ValidationResult({errors, value})
}

Expand Down Expand Up @@ -623,7 +627,7 @@ export class List extends Component {
}

removeErrors() {
this.setState({ hasError: false })
this.setState({ hasError: false, error: '' })
Object.keys(this.refs).forEach((ref) => this.refs[ref].removeErrors())
}

Expand All @@ -650,7 +654,7 @@ export class List extends Component {
errors = result.errors
}

this.setState({ hasError: errors.length > 0 })
this.setState({ hasError: errors.length > 0, error: this.getError() })
return new t.ValidationResult({errors: errors, value: value})
}

Expand Down