91 replace input with mui textfield

src/index.ts

@@ -1,7 +1,6 @@
 export * from "./redux";
 export * from "./misc";
 export * from "./connection";
-export * from "./ui/components";
 export * from "./ui/widgets";
 export * from "./ui/hooks";
 export * from "./types";

src/ui/widgets/EmbeddedDisplay/bobParser.ts

@@ -380,7 +380,8 @@ export function parseBob(
     rotation: ["rotation", bobParseNumber],
     styleOpt: ["style", bobParseNumber],
     lineColor: ["line_color", opiParseColor],
-    rotationStep: ["rotation_step", bobParseNumber]
+    rotationStep: ["rotation_step", bobParseNumber],
+    multiLine: ["multi_line", opiParseBoolean]
   };
 
   const complexParsers = {

src/ui/widgets/Input/__snapshots__/input.test.tsx.snap

@@ -0,0 +1,35 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<Input /> > renders an input 1`] = `
+<DocumentFragment>
+  <div
+    class="MuiFormControl-root MuiTextField-root css-1x2hah6-MuiFormControl-root-MuiTextField-root"
+  >
+    <div
+      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl css-quhxjy-MuiInputBase-root-MuiOutlinedInput-root"
+    >
+      <input
+        aria-invalid="false"
+        class="MuiInputBase-input MuiOutlinedInput-input css-16wblaj-MuiInputBase-input-MuiOutlinedInput-input"
+        id=":r0:"
+        type="text"
+        value="hello"
+      />
+      <fieldset
+        aria-hidden="true"
+        class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
+      >
+        <legend
+          class="css-w4cd9x"
+        >
+          <span
+            class="notranslate"
+          >
+            ​
+          </span>
+        </legend>
+      </fieldset>
+    </div>
+  </div>
+</DocumentFragment>
+`;

src/ui/widgets/Input/input.test.tsx

@@ -5,7 +5,6 @@ import { DAlarm } from "../../../types/dtypes";
 import { dstring } from "../../../testResources";
 
 let input: JSX.Element;
-
 beforeEach((): void => {
   input = (
     <SmartInputComponent
@@ -19,10 +18,7 @@ beforeEach((): void => {
 });
 describe("<Input />", (): void => {
   it("renders an input", (): void => {
-    const { getByDisplayValue } = render(input);
-    const renderedInput = getByDisplayValue("hello");
-    expect(renderedInput).toBeInTheDocument();
-    expect(renderedInput).toHaveStyle("color: var(--warning)");
-    expect(renderedInput.className).toContain("readonly");
+    const { asFragment } = render(input);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

src/ui/widgets/Input/input.tsx

@@ -1,102 +1,167 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 
-import classes from "./input.module.css";
 import { writePv } from "../../hooks/useSubscription";
-import { commonCss, Widget } from "../widget";
+import { Widget } from "../widget";
 import { PVInputComponent, PVWidgetPropType } from "../widgetProps";
 import { registerWidget } from "../register";
 import {
   InferWidgetProps,
   FontPropOpt,
   ChoicePropOpt,
   ColorPropOpt,
-  BoolPropOpt
+  BoolPropOpt,
+  BorderPropOpt,
+  StringPropOpt
 } from "../propTypes";
-import { Font } from "../../../types/font";
-import { Color } from "../../../types/color";
 import { AlarmQuality, DType } from "../../../types/dtypes";
-import { InputComponent } from "../../components/input/input";
+import { TextField as MuiTextField, styled } from "@mui/material";
+import { diamondTheme } from "../../../diamondTheme";
 
-export interface InputProps {
-  pvName: string;
-  value: string;
-  readonly: boolean;
-  foregroundColor?: Color;
-  backgroundColor?: Color;
-  transparent: boolean;
-  alarm: AlarmQuality;
-  alarmSensitive: boolean;
-  onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  onBlur: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  onClick: (event: React.MouseEvent<HTMLInputElement>) => void;
-  font?: Font;
-  textAlign?: "left" | "center" | "right";
-}
+const InputComponentProps = {
+  pvName: StringPropOpt,
+  font: FontPropOpt,
+  foregroundColor: ColorPropOpt,
+  backgroundColor: ColorPropOpt,
+  transparent: BoolPropOpt,
+  alarmSensitive: BoolPropOpt,
+  enabled: BoolPropOpt,
+  textAlign: ChoicePropOpt(["left", "center", "right"]),
+  textAlignV: ChoicePropOpt(["top", "center", "bottom"]),
+  border: BorderPropOpt,
+  multiLine: BoolPropOpt
+};
 
-export const SmartInputComponent = (
-  props: PVInputComponent & {
-    font?: Font;
-    foregroundColor?: Color;
-    backgroundColor?: Color;
-    transparent?: boolean;
-    alarmSensitive?: boolean;
-    textAlign?: "left" | "center" | "right";
+const TextField = styled(MuiTextField)({
+  "&.MuiFormControl-root": {
+    height: "100%",
+    width: "100%",
+    display: "block"
+  },
+  "& .MuiInputBase-root": {
+    height: "100%",
+    width: "100%"
+  },
+  "& .MuiOutlinedInput-root": {
+    "&:hover fieldset": {
+      borderWidth: "1px",
+      borderColor: "#1976D2"
+    },
+    "&.Mui-focused fieldset": {
+      borderWidth: "2px",
+      borderColor: "#1976D2"
+    },
+    "&.Mui-disabled": {
+      cursor: "not-allowed",
+      pointerEvents: "all !important"
+    }
   }
+});
+
+export const SmartInputComponent = (
+  props: PVInputComponent & InferWidgetProps<typeof InputComponentProps>
 ): JSX.Element => {
+  const {
+    enabled = true,
+    transparent = false,
+    textAlign = "left",
+    textAlignV = "center",
+    value = null,
+    multiLine = false
+  } = props;
+
+  const font = props.font?.css() ?? diamondTheme.typography;
+
   const alarmQuality = props.value?.getAlarm().quality ?? AlarmQuality.VALID;
-  let allClasses = classes.Input;
-  const style = commonCss(props);
-  if (props.textAlign) {
-    style.textAlign = props.textAlign;
-  }
-  style.color = props.foregroundColor?.toString();
-  style.backgroundColor = props.backgroundColor?.toString();
-  // Transparent prop overrides backgroundColor.
-  if (props.transparent) {
-    style["backgroundColor"] = "transparent";
-  }
-  if (props.readonly) {
-    allClasses += ` ${classes.readonly}`;
+  const foregroundColor = props.alarmSensitive
+    ? function () {
+        switch (alarmQuality) {
+          case AlarmQuality.UNDEFINED:
+          case AlarmQuality.INVALID:
+          case AlarmQuality.CHANGING:
+            return "var(--invalid)";
+          case AlarmQuality.WARNING:
+            return "var(--alarm)";
+          case AlarmQuality.ALARM:
+            return "var(--alarm)";
+          case AlarmQuality.VALID:
+            return (
+              props.foregroundColor?.toString() ??
+              diamondTheme.palette.primary.contrastText
+            );
+        }
+      }
+    : (props.foregroundColor?.toString() ??
+      diamondTheme.palette.primary.contrastText);
+
+  let alignmentV = "center";
+  if (textAlignV === "top") {
+    alignmentV = "start";
+  } else if (textAlignV === "bottom") {
+    alignmentV = "end";
   }
-  if (props.alarmSensitive) {
-    switch (alarmQuality) {
-      case AlarmQuality.UNDEFINED:
-      case AlarmQuality.INVALID:
-      case AlarmQuality.CHANGING:
-        style.color = "var(--invalid)";
-        break;
-      case AlarmQuality.WARNING:
-        style.color = "var(--alarm)";
-        break;
-      case AlarmQuality.ALARM:
-        style.color = "var(--alarm)";
-        break;
+
+  const backgroundColor = transparent
+    ? "transparent"
+    : (props.backgroundColor?.toString() ?? "#80FFFF");
+
+  const [inputValue, setInputValue] = useState(value?.getStringValue() ?? "");
+
+  useEffect(() => {
+    if (value) {
+      setInputValue(value.getStringValue() ?? "");
     }
-  }
-  function onEnter(value: string): void {
-    writePv(props.pvName, new DType({ stringValue: value }));
-  }
+  }, [value]);
+
+  const onKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (multiLine) {
+      if (event.key === "Enter" && event.ctrlKey) {
+        writePv(props.pvName, new DType({ stringValue: inputValue }));
+        event.currentTarget.blur();
+      }
+    } else {
+      if (event.key === "Enter") {
+        writePv(props.pvName, new DType({ stringValue: inputValue }));
+        event.currentTarget.blur();
+      }
+    }
+  };
 
   return (
-    <InputComponent
-      value={DType.coerceString(props.value)}
-      readonly={props.readonly}
-      onEnter={onEnter}
-      style={style}
-      className={allClasses}
+    <TextField
+      disabled={!enabled}
+      value={inputValue}
+      multiline={multiLine}
+      variant="outlined"
+      type="text"
+      slotProps={{
+        input: {
+          onKeyDown: onKeyPress
+        }
+      }}
+      onChange={event => setInputValue(event.target.value)}
+      sx={{
+        "& .MuiInputBase-input": {
+          textAlign: textAlign,
+          padding: "4px",
+          fontFamily: font
+        },
+        "& .MuiInputBase-root": {
+          alignItems: alignmentV,
+          color: foregroundColor,
+          backgroundColor: backgroundColor
+        },
+        "& fieldset": {
+          borderWidth: props.border?.width ?? "0px",
+          borderColor: props.border?.color.toString() ?? "#0000003B"
+        }
+      }}
     />
   );
 };
 
 const InputWidgetProps = {
-  ...PVWidgetPropType,
-  font: FontPropOpt,
-  foregroundColor: ColorPropOpt,
-  backgroundColor: ColorPropOpt,
-  transparent: BoolPropOpt,
-  alarmSensitive: BoolPropOpt,
-  textAlign: ChoicePropOpt(["left", "center", "right"])
+  ...InputComponentProps,
+  ...PVWidgetPropType
 };
 
 export const Input = (

src/ui/widgets/SlideControl/slideControl.test.tsx

@@ -9,7 +9,7 @@ test("slideControl", () => {
       value={ddouble(5)}
       connected={true}
       readonly={false}
-      pvName="dummy"
+      pvName="pv"
       max={10}
       min={0}
     ></SlideControlComponent>