NumberInputWidget

Source

index.js
import React from 'react';
import PropTypes from 'prop-types';

export default class NumberInputWidget extends React.Component {
constructor(props) {
super(props);
this.state = {
editing: false,
valueRep: props.value,
};

// Bind callback
this.valueChange = this.valueChange.bind(this);
this.endEditing = this.endEditing.bind(this);
}

getValue() {
const propVal = parseFloat(this.newVal);
if (!Number.isNaN(propVal)) {
return propVal;
}
return undefined;
}

valueChange(e) {
this.newVal = e.target.value;
this.setState({ editing: true, valueRep: this.newVal });

const propVal = parseFloat(this.newVal);
if (!Number.isNaN(propVal) && this.props.onChange) {
if (this.props.name) {
this.props.onChange(propVal, this.props.name);
} else {
this.props.onChange(propVal);
}
}
}

endEditing() {
this.setState({ editing: false });
}

render() {
return (
<input
className={this.props.className}
type="number"
min={this.props.min}
max={this.props.max}
step={this.props.step}
value={this.state.editing ? this.state.valueRep : this.props.value}
onChange={this.valueChange}
onBlur={this.endEditing}
/>
);
}
}

NumberInputWidget.propTypes = {
className: PropTypes.string,
max: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
min: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
name: PropTypes.string,
onChange: PropTypes.func,
step: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
};

NumberInputWidget.defaultProps = {
className: '',
step: 1,
value: 0,

max: undefined,
min: undefined,
name: undefined,
onChange: undefined,
};