Refactor OneAxisTranslationControl

ui/src/components/MotorInput/BaseMotorInput.jsx

@@ -0,0 +1,91 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
+import React, { useEffect, useState } from 'react';
+import { Form } from 'react-bootstrap';
+import { HW_STATE } from '../../constants';
+
+function BaseMotorInput(props) {
+  const {
+    className,
+    style,
+    value,
+    state,
+    precision,
+    step,
+    min,
+    max,
+    disabled,
+    testId,
+    onChange,
+  } = props;
+
+  const [inputValue, setInputValue] = useState(value.toFixed(precision));
+  const [isEdited, setEdited] = useState(false);
+
+  useEffect(() => {
+    setInputValue(value.toFixed(precision));
+    setEdited(false);
+  }, [value, precision]);
+
+  function handleKey(evt) {
+    switch (evt.key) {
+      case 'ArrowUp': {
+        evt.preventDefault();
+        onChange(value + step);
+        break;
+      }
+      case 'ArrowDown': {
+        evt.preventDefault();
+        onChange(value - step);
+        break;
+      }
+      default:
+    }
+  }
+
+  function handleSubmit(evt) {
+    evt.preventDefault();
+
+    const newValue = Number.parseFloat(inputValue);
+
+    if (!Number.isNaN(newValue)) {
+      onChange(newValue);
+      setEdited(false);
+    }
+  }
+
+  const isReady = state === HW_STATE.READY;
+  const isBusy = state === HW_STATE.BUSY;
+  const isWarning = state === HW_STATE.WARNING;
+  const isFault =
+    state === HW_STATE.UNKNOWN ||
+    state === HW_STATE.FAULT ||
+    state === HW_STATE.OFF;
+
+  return (
+    <form noValidate onSubmit={handleSubmit}>
+      <Form.Control
+        className={className}
+        style={style}
+        type="number"
+        value={inputValue}
+        step={step}
+        max={max}
+        min={min}
+        disabled={disabled || !isReady}
+        data-testId={testId}
+        data-dirty={isEdited || undefined}
+        data-busy={isBusy || undefined}
+        data-warning={isWarning || undefined}
+        data-fault={isFault || undefined}
+        onKeyDown={handleKey}
+        onChange={(evt) => {
+          setInputValue(evt.target.value);
+          setEdited(true);
+        }}
+      />
+      <input type="submit" hidden /> {/* allow submit on Enter */}
+    </form>
+  );
+}
+
+export default BaseMotorInput;

ui/src/components/MotorInput/MotorInput.jsx

@@ -1,10 +1,11 @@
 /* eslint-disable jsx-a11y/control-has-associated-label */
 
-import React, { useEffect, useState } from 'react';
-import { Button, Form } from 'react-bootstrap';
+import React from 'react';
+import { Button } from 'react-bootstrap';
 import { HW_STATE } from '../../constants';
 import styles from './MotorInput.module.css';
 import './motor.css';
+import BaseMotorInput from './BaseMotorInput';
 
 function MotorInput(props) {
   const {
@@ -14,105 +15,51 @@ function MotorInput(props) {
     step,
     state,
     suffix,
-    decimalPoints,
+    precision,
     disabled,
     save,
     stop,
     saveStep,
   } = props;
 
-  const [inputValue, setInputValue] = useState(value.toFixed(decimalPoints));
-  const [isEdited, setEdited] = useState(false);
-
-  useEffect(() => {
-    setInputValue(value.toFixed(decimalPoints));
-    setEdited(false);
-  }, [value, decimalPoints]);
-
-  function handleKey(evt) {
-    switch (evt.key) {
-      case 'ArrowUp': {
-        evt.preventDefault();
-        save(motorName, value + step);
-        break;
-      }
-      case 'ArrowDown': {
-        evt.preventDefault();
-        save(motorName, value - step);
-        break;
-      }
-      default:
-    }
-  }
-
-  function handleSubmit(evt) {
-    evt.preventDefault();
-
-    const newValue = Number.parseFloat(inputValue);
-
-    if (!Number.isNaN(newValue)) {
-      save(motorName, newValue);
-      setEdited(false);
-    }
-  }
-
   return (
     <div className="motor-input-container">
       <p className="motor-name">{label}</p>
       <div className={styles.wrapper}>
-        <form noValidate onSubmit={handleSubmit}>
-          <div
-            className="rw-widget rw-numberpicker rw-widget-no-right-border"
-            style={{ width: '90px', display: 'inline-block' }}
-          >
-            <span className="rw-select">
-              <button
-                type="button"
-                className="rw-btn"
-                disabled={state !== HW_STATE.READY || disabled}
-                onClick={() => {
-                  save(motorName, value + step);
-                }}
-              >
-                <i aria-hidden="true" className="rw-i fas fa-caret-up" />
-              </button>
-              <button
-                type="button"
-                className="rw-btn"
-                disabled={state !== HW_STATE.READY || disabled}
-                onClick={() => {
-                  save(motorName, value - step);
-                }}
-              >
-                <i aria-hidden="true" className="rw-i fas fa-caret-down" />
-              </button>
-            </span>
-            <Form.Control
-              className={`${styles.valueInput} rw-input`}
-              name="value"
-              type="number"
-              step={step}
+        <div
+          className="rw-widget rw-numberpicker rw-widget-no-right-border"
+          style={{ width: '90px', display: 'inline-block' }}
+        >
+          <span className="rw-select">
+            <button
+              type="button"
+              className="rw-btn"
+              disabled={state !== HW_STATE.READY || disabled}
+              onClick={() => save(motorName, value + step)}
+            >
+              <i aria-hidden="true" className="rw-i fas fa-caret-up" />
+            </button>
+            <button
+              type="button"
+              className="rw-btn"
               disabled={state !== HW_STATE.READY || disabled}
-              data-dirty={isEdited || undefined}
-              data-busy={state === HW_STATE.BUSY || undefined}
-              data-warning={state === HW_STATE.WARNING || undefined}
-              data-fault={
-                state === HW_STATE.UNKNOWN ||
-                state === HW_STATE.FAULT ||
-                state === HW_STATE.OFF ||
-                undefined
-              }
-              value={inputValue}
-              onChange={(evt) => {
-                setInputValue(evt.target.value);
-                setEdited(true);
-              }}
-              onKeyDown={handleKey}
-              data-testId={`MotorInput_value_${motorName}`}
-            />
-            <input type="submit" hidden /> {/* allow submit on Enter */}
-          </div>
-        </form>
+              onClick={() => save(motorName, value - step)}
+            >
+              <i aria-hidden="true" className="rw-i fas fa-caret-down" />
+            </button>
+          </span>
+
+          <BaseMotorInput
+            className={`${styles.valueInput} rw-input`}
+            value={value}
+            state={state}
+            precision={precision}
+            step={step}
+            testId={`MotorInput_value_${motorName}`}
+            disabled={disabled}
+            onChange={(val) => save(motorName, val)}
+          />
+        </div>
         {saveStep &&
           (state === HW_STATE.READY ? (
             <>
@@ -131,9 +78,7 @@ function MotorInput(props) {
             <Button
               className="btn-xs motor-abort rw-widget-no-left-border"
               variant="danger"
-              onClick={() => {
-                stop(motorName);
-              }}
+              onClick={() => stop(motorName)}
             >
               <i className="fas fa-times" />
             </Button>