Use ErrorMessage component

This commit is contained in:
Ken-Håvard Lieng 2018-10-06 08:46:28 +02:00
parent 66bf957460
commit 09de41c0a2
3 changed files with 18 additions and 16 deletions

File diff suppressed because one or more lines are too long

View File

@ -4,6 +4,7 @@ import { Form, withFormik } from 'formik';
import Navicon from 'containers/Navicon'; import Navicon from 'containers/Navicon';
import Checkbox from 'components/ui/Checkbox'; import Checkbox from 'components/ui/Checkbox';
import TextInput from 'components/ui/TextInput'; import TextInput from 'components/ui/TextInput';
import Error from 'components/ui/formik/Error';
import { isValidNick, isValidChannel, isValidUsername, isInt } from 'utils'; import { isValidNick, isValidChannel, isValidUsername, isInt } from 'utils';
const getSortedDefaultChannels = createSelector( const getSortedDefaultChannels = createSelector(
@ -36,7 +37,7 @@ class Connect extends Component {
<div> <div>
{!hexIP && [ {!hexIP && [
<TextInput name="username" placeholder="Username" />, <TextInput name="username" placeholder="Username" />,
this.renderError('username') <Error name="username" />
]} ]}
<TextInput type="password" name="password" placeholder="Password" /> <TextInput type="password" name="password" placeholder="Password" />
<TextInput name="realname" placeholder="Realname" /> <TextInput name="realname" placeholder="Realname" />
@ -44,13 +45,6 @@ class Connect extends Component {
); );
}; };
renderError = name => {
const { touched, errors } = this.props;
if (touched[name] && errors[name]) {
return <div className="form-error">{errors[name]}</div>;
}
};
render() { render() {
const { defaults, values } = this.props; const { defaults, values } = this.props;
const { readOnly, showDetails } = defaults; const { readOnly, showDetails } = defaults;
@ -71,7 +65,7 @@ class Connect extends Component {
</div> </div>
)} )}
<TextInput name="nick" placeholder="Nick" /> <TextInput name="nick" placeholder="Nick" />
{this.renderError('nick')} <Error name="nick" />
<button>Connect</button> <button>Connect</button>
</Form> </Form>
); );
@ -85,12 +79,12 @@ class Connect extends Component {
<TextInput name="port" type="number" placeholder="Port" /> <TextInput name="port" type="number" placeholder="Port" />
<Checkbox name="tls" label="SSL" onChange={this.handleSSLChange} /> <Checkbox name="tls" label="SSL" onChange={this.handleSSLChange} />
</div> </div>
{this.renderError('host')} <Error name="host" />
{this.renderError('port')} <Error name="port" />
<TextInput name="nick" placeholder="Nick" /> <TextInput name="nick" placeholder="Nick" />
{this.renderError('nick')} <Error name="nick" />
<TextInput name="channels" placeholder="Channels" /> <TextInput name="channels" placeholder="Channels" />
{this.renderError('channels')} <Error name="channels" />
{this.state.showOptionals && this.renderOptionals()} {this.state.showOptionals && this.renderOptionals()}
<i className="icon-ellipsis" onClick={this.handleShowClick} /> <i className="icon-ellipsis" onClick={this.handleShowClick} />
<button>Connect</button> <button>Connect</button>

View File

@ -0,0 +1,8 @@
import React from 'react';
import { ErrorMessage } from 'formik';
const Error = props => (
<ErrorMessage component="div" className="form-error" {...props} />
);
export default Error;