90 lines
1.9 KiB
JavaScript
90 lines
1.9 KiB
JavaScript
import bindAll from 'lodash-es/bindAll';
|
|
import { Component, linkEvent } from 'inferno';
|
|
|
|
export class DOMForm extends Component {
|
|
constructor () {
|
|
super();
|
|
|
|
this.state = {
|
|
hasBeenValidated: false,
|
|
};
|
|
|
|
bindAll(this, [
|
|
'handleChange',
|
|
'handleSubmit',
|
|
]);
|
|
}
|
|
|
|
handleChange (props, event) {
|
|
const formElement = event.target.closest('form');
|
|
const rawFormData = new FormData(formElement);
|
|
|
|
if (props.onChange !== undefined) {
|
|
const modified = props.onChange(rawFormData);
|
|
|
|
if (modified !== undefined) {
|
|
// Update form
|
|
modified.forEach((value, key) => {
|
|
const element = formElement.elements[key];
|
|
element.value = value;
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
handleSubmit (props, event) {
|
|
// Don't want to actually reload the page!
|
|
event.preventDefault();
|
|
|
|
const form = event.target.closest('form');
|
|
|
|
this.setState({
|
|
hasBeenValidated: true,
|
|
});
|
|
|
|
// Parsers are formatters or maskers
|
|
const parsers = {};
|
|
const data = new FormData(form);
|
|
|
|
data.forEach((value, name) => {
|
|
const parserName = form.elements[name].dataset.parse;
|
|
|
|
if (parserName !== undefined && parsers[parserName] !== undefined) {
|
|
const parser = parsers[parserName];
|
|
const parsedValue = parser(data.get(name));
|
|
data.set(name, parsedValue);
|
|
}
|
|
});
|
|
|
|
// Don't attempt to submit an invalid form
|
|
if (!event.target.checkValidity()) {
|
|
return;
|
|
}
|
|
|
|
if (props.onSubmit) {
|
|
props.onSubmit(data);
|
|
}
|
|
}
|
|
|
|
render (props, state, context) {
|
|
const passProps = {...props};
|
|
const children = passProps.children;
|
|
delete passProps.onChange;
|
|
delete passProps.onSubmit;
|
|
|
|
const cssClass = state.hasBeenValidated ? 'was-validated' : 'needs-validation';
|
|
|
|
return (
|
|
<form
|
|
class={cssClass}
|
|
noValidate
|
|
onInput={linkEvent(props, this.handleChange)}
|
|
onSubmit={linkEvent(props, this.handleSubmit)}
|
|
{...passProps}
|
|
>
|
|
{children}
|
|
</form>
|
|
);
|
|
}
|
|
}
|