keii.dev
1// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
2// See the LICENCE file in the repository root for full licence text.
3
4import { FormErrors } from 'form-errors';
5import { observer } from 'mobx-react';
6import * as React from 'react';
7import { classWithModifiers } from 'utils/css';
8
9interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
10 blockName: string;
11 errors: FormErrors;
12 name: string;
13}
14
15@observer
16export class ValidatingInput extends React.Component<Props> {
17 render() {
18 const {
19 blockName,
20 errors,
21 name,
22 ...otherProps
23 } = this.props;
24
25 const messages = errors.get(name) || [];
26 const jsx = messages.map((message, index) => <div key={index} className={`${blockName}__error`}>{message}</div>);
27
28 return (
29 <>
30 <input
31 className={classWithModifiers(`${blockName}__input`, messages.length > 0 ? ['has-error'] : [])}
32 name={name}
33 {...otherProps}
34 />
35 {jsx}
36 </>
37 );
38 }
39}