src/components/float-input/float-input.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import { Input } from '@material-ui/core';
   7 import { InputProps } from '@material-ui/core/Input';
   8
   9 export class FloatInput extends React.Component<InputProps> {
  10     state = {
  11         endsWithDecimalSeparator: false,
  12     };
  13
  14     handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  15         const { onChange = () => { return; } } = this.props;
  16         const [, fraction] = event.target.value.split('.');
  17         this.setState({ endsWithDecimalSeparator: fraction === '' });
  18         onChange(event);
  19     }
  20
  21     render() {
  22         const props = {
  23             ...this.props,
  24             value: this.props.value + (this.state.endsWithDecimalSeparator ? '.' : ''),
  25             onChange: this.handleChange,
  26         };
  27         return <Input {...props} />;
  28     }
  29 }