Extract float-input component

Feature #13862

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/components/float-input/float-input.tsx b/src/components/float-input/float-input.tsx
new file mode 100644 (file)
index 0000000..b032319
--- /dev/null
+++ b/src/components/float-input/float-input.tsx
@@ -0,0 +1,29 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { Input } from '@material-ui/core';
+import { InputProps } from '@material-ui/core/Input';
+
+export class FloatInput extends React.Component<InputProps> {
+    state = {
+        endsWithDecimalSeparator: false,
+    };
+
+    handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const { onChange = () => { return; } } = this.props;
+        const [, fraction] = event.target.value.split('.');
+        this.setState({ endsWithDecimalSeparator: fraction === '' });
+        onChange(event);
+    }
+
+    render() {
+        const props = {
+            ...this.props,
+            value: this.props.value + (this.state.endsWithDecimalSeparator ? '.' : ''),
+            onChange: this.handleChange,
+        };
+        return <Input {...props} />;
+    }
+}