2019-12-07 16:58:52 +05:30
|
|
|
import React from 'react';
|
2016-05-02 12:45:42 +05:30
|
|
|
import classNames from 'classnames';
|
2017-06-13 01:02:59 +05:30
|
|
|
import logger from 'services/logger';
|
2016-05-02 14:50:50 +05:30
|
|
|
|
2019-12-07 16:58:52 +05:30
|
|
|
import FormModel from './FormModel';
|
2019-06-30 19:02:50 +05:30
|
|
|
import styles from './form.scss';
|
2017-08-20 21:15:21 +05:30
|
|
|
|
2019-12-07 16:58:52 +05:30
|
|
|
interface Props {
|
|
|
|
id: string;
|
|
|
|
isLoading: boolean;
|
|
|
|
form?: FormModel;
|
|
|
|
onSubmit: (form: FormModel | FormData) => void | Promise<void>;
|
|
|
|
onInvalid: (errors: { [errorKey: string]: string }) => void;
|
|
|
|
children: React.ReactNode;
|
|
|
|
}
|
|
|
|
interface State {
|
|
|
|
isTouched: boolean;
|
|
|
|
isLoading: boolean;
|
|
|
|
}
|
2017-09-09 20:34:26 +05:30
|
|
|
type InputElement = HTMLInputElement | HTMLTextAreaElement;
|
2017-08-20 21:15:21 +05:30
|
|
|
|
2019-12-07 16:58:52 +05:30
|
|
|
export default class Form extends React.Component<Props, State> {
|
2019-11-27 14:33:32 +05:30
|
|
|
static defaultProps = {
|
|
|
|
id: 'default',
|
|
|
|
isLoading: false,
|
|
|
|
onSubmit() {},
|
|
|
|
onInvalid() {},
|
|
|
|
};
|
2016-05-02 12:45:42 +05:30
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
state = {
|
|
|
|
isTouched: false,
|
|
|
|
isLoading: this.props.isLoading || false,
|
|
|
|
};
|
2017-08-20 21:15:21 +05:30
|
|
|
|
2019-12-07 16:58:52 +05:30
|
|
|
formEl: HTMLFormElement | null;
|
2018-05-08 00:53:26 +05:30
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
mounted = false;
|
2018-05-08 00:53:26 +05:30
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
componentDidMount() {
|
|
|
|
if (this.props.form) {
|
|
|
|
this.props.form.addLoadingListener(this.onLoading);
|
2016-05-28 01:34:17 +05:30
|
|
|
}
|
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
this.mounted = true;
|
|
|
|
}
|
2016-05-28 01:34:17 +05:30
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
componentWillReceiveProps(nextProps: Props) {
|
|
|
|
if (nextProps.id !== this.props.id) {
|
|
|
|
this.setState({
|
|
|
|
isTouched: false,
|
|
|
|
});
|
|
|
|
}
|
2016-05-28 01:34:17 +05:30
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
if (
|
|
|
|
typeof nextProps.isLoading !== 'undefined' &&
|
|
|
|
nextProps.isLoading !== this.state.isLoading
|
|
|
|
) {
|
|
|
|
this.setState({
|
|
|
|
isLoading: nextProps.isLoading,
|
|
|
|
});
|
2016-05-28 01:34:17 +05:30
|
|
|
}
|
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
const nextForm = nextProps.form;
|
2018-05-08 00:53:26 +05:30
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
if (nextForm && this.props.form && nextForm !== this.props.form) {
|
|
|
|
this.props.form.removeLoadingListener(this.onLoading);
|
|
|
|
nextForm.addLoadingListener(this.onLoading);
|
2016-05-02 12:45:42 +05:30
|
|
|
}
|
2019-11-27 14:33:32 +05:30
|
|
|
}
|
2016-05-02 12:45:42 +05:30
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
componentWillUnmount() {
|
|
|
|
if (this.props.form) {
|
|
|
|
this.props.form.removeLoadingListener(this.onLoading);
|
2016-05-02 12:45:42 +05:30
|
|
|
}
|
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
this.mounted = false;
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const { isLoading } = this.state;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<form
|
|
|
|
className={classNames(styles.form, {
|
|
|
|
[styles.isFormLoading]: isLoading,
|
|
|
|
[styles.formTouched]: this.state.isTouched,
|
|
|
|
})}
|
|
|
|
onSubmit={this.onFormSubmit}
|
2019-12-07 16:58:52 +05:30
|
|
|
ref={(el: HTMLFormElement | null) => (this.formEl = el)}
|
2019-11-27 14:33:32 +05:30
|
|
|
noValidate
|
|
|
|
>
|
|
|
|
{this.props.children}
|
|
|
|
</form>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
submit() {
|
|
|
|
if (!this.state.isTouched) {
|
|
|
|
this.setState({
|
|
|
|
isTouched: true,
|
|
|
|
});
|
|
|
|
}
|
2016-05-02 12:45:42 +05:30
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
const form = this.formEl;
|
2017-10-28 19:33:38 +05:30
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
if (!form) {
|
|
|
|
return;
|
|
|
|
}
|
2017-10-28 19:33:38 +05:30
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
if (form.checkValidity()) {
|
|
|
|
const result = this.props.onSubmit(
|
|
|
|
this.props.form ? this.props.form : new FormData(form),
|
|
|
|
);
|
2016-05-02 14:50:50 +05:30
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
if (result && result.then) {
|
|
|
|
this.setState({ isLoading: true });
|
2017-06-13 01:02:59 +05:30
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
result
|
|
|
|
.catch((errors: { [key: string]: string }) => {
|
|
|
|
this.setErrors(errors);
|
|
|
|
})
|
|
|
|
.finally(() => this.mounted && this.setState({ isLoading: false }));
|
|
|
|
}
|
|
|
|
} else {
|
2019-12-07 16:58:52 +05:30
|
|
|
const invalidEls: NodeListOf<InputElement> = form.querySelectorAll(
|
2019-11-27 14:33:32 +05:30
|
|
|
':invalid',
|
2019-12-07 16:58:52 +05:30
|
|
|
);
|
2019-11-27 14:33:32 +05:30
|
|
|
const errors = {};
|
|
|
|
invalidEls[0].focus(); // focus on first error
|
|
|
|
|
2019-12-07 16:58:52 +05:30
|
|
|
Array.from(invalidEls).reduce((acc, el: InputElement) => {
|
2019-11-27 14:33:32 +05:30
|
|
|
if (!el.name) {
|
|
|
|
logger.warn('Found an element without name', { el });
|
|
|
|
|
2019-12-07 16:58:52 +05:30
|
|
|
return acc;
|
2019-11-27 14:33:32 +05:30
|
|
|
}
|
2016-05-02 14:50:50 +05:30
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
let errorMessage = el.validationMessage;
|
2017-09-09 19:52:19 +05:30
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
if (el.validity.valueMissing) {
|
|
|
|
errorMessage = `error.${el.name}_required`;
|
|
|
|
} else if (el.validity.typeMismatch) {
|
|
|
|
errorMessage = `error.${el.name}_invalid`;
|
|
|
|
}
|
2016-05-02 14:50:50 +05:30
|
|
|
|
2019-12-07 16:58:52 +05:30
|
|
|
acc[el.name] = errorMessage;
|
2016-05-02 12:45:42 +05:30
|
|
|
|
2019-12-07 16:58:52 +05:30
|
|
|
return acc;
|
2019-11-27 14:33:32 +05:30
|
|
|
}, errors);
|
2016-05-02 12:45:42 +05:30
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
this.setErrors(errors);
|
2017-08-20 21:15:21 +05:30
|
|
|
}
|
2019-11-27 14:33:32 +05:30
|
|
|
}
|
2017-08-20 21:15:21 +05:30
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
setErrors(errors: { [key: string]: string }) {
|
|
|
|
this.props.form && this.props.form.setErrors(errors);
|
|
|
|
this.props.onInvalid(errors);
|
|
|
|
}
|
2017-08-20 21:15:21 +05:30
|
|
|
|
2019-12-07 16:58:52 +05:30
|
|
|
onFormSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
2019-11-27 14:33:32 +05:30
|
|
|
event.preventDefault();
|
2017-08-20 21:15:21 +05:30
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
this.submit();
|
|
|
|
};
|
2016-05-28 01:34:17 +05:30
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
onLoading = (isLoading: boolean) => this.setState({ isLoading });
|
2016-05-02 12:45:42 +05:30
|
|
|
}
|