Spaces:
Running
Running
File size: 1,992 Bytes
6bcb42f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
import bindAll from 'lodash.bindall';
import PropTypes from 'prop-types';
import React from 'react';
/**
* Higher Order Component to manage inputs that submit on blur and <enter>
* @param {React.Component} Input text input that consumes onChange, onBlur, onKeyPress
* @returns {React.Component} Buffered input that calls onSubmit on blur and <enter>
*/
export default function (Input) {
class BufferedInput extends React.Component {
constructor (props) {
super(props);
bindAll(this, [
'handleChange',
'handleKeyPress',
'handleFlush'
]);
this.state = {
value: null
};
}
handleKeyPress (e) {
if (e.key === 'Enter') {
this.handleFlush();
e.target.blur();
}
}
handleFlush () {
const isNumeric = typeof this.props.value === 'number';
const validatesNumeric = isNumeric ? !isNaN(this.state.value) : true;
if (this.state.value !== null && validatesNumeric) {
this.props.onSubmit(isNumeric ? Number(this.state.value) : this.state.value);
}
this.setState({value: null});
}
handleChange (e) {
this.setState({value: e.target.value});
}
render () {
const bufferedValue = this.state.value === null ? this.props.value : this.state.value;
return (
<Input
{...this.props}
value={bufferedValue}
onBlur={this.handleFlush}
onChange={this.handleChange}
onKeyPress={this.handleKeyPress}
/>
);
}
}
BufferedInput.propTypes = {
onSubmit: PropTypes.func.isRequired,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
};
return BufferedInput;
}
|