import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
class ReactAmountField extends PureComponent {
constructor(props) {
super(props);
this.state = {
unflushedValue: '',
};
if (this.props.value === 0) {
this.state.unflushedValue = 0;
} else if (this.props.value && this.props.value !== '') {
this.state.unflushedValue = this.props.value / 100;
}
}
proxyEvent(target) {
return (event) => {
Eif (target) {
const eventValue = event.target.value;
if (eventValue && eventValue !== '') {
this.setState({ unflushedValue: eventValue.toString() });
Eif (!eventValue.toString().endsWith('.')) {
const oldValue = eventValue.toString().replace(/[^\d.,]/g, '').replace(',', '.');
const newEvent = event;
newEvent.target.value = parseInt(oldValue * 100, 10).toString();
target(newEvent);
}
} else {
this.setState({ unflushedValue: '' });
target(event);
}
}
};
}
render() {
const props = { ...this.props };
props.value = this.state.unflushedValue;
props.onChange = this.proxyEvent(this.props.onChange);
props.onBlur = this.proxyEvent(this.props.onBlur);
props.onDrop = this.proxyEvent(this.props.onDrop);
delete props.children;
return <div>{React.cloneElement(this.props.children, { ...props })}</div>;
}
}
ReactAmountField.propTypes = {
value: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
children: PropTypes.node,
onBlur: PropTypes.func,
onChange: PropTypes.func,
onDrop: PropTypes.func,
};
export default ReactAmountField;
|