From 1b0d2dec58aba2a2be434a43f32b742499b6d288 Mon Sep 17 00:00:00 2001
From: Christopher Patty <christopher.patty@aggiemail.usu.edu>
Date: Sun, 8 May 2022 19:20:09 -0600
Subject: [PATCH] Converted context and textInput

---
 .../TextInput/{TextInput.js => TextInput.tsx} | 23 +++++++++++--------
 src/context.js                                | 11 ---------
 src/context.ts                                | 11 +++++++++
 3 files changed, 24 insertions(+), 21 deletions(-)
 rename src/components/TextInput/{TextInput.js => TextInput.tsx} (79%)
 delete mode 100644 src/context.js
 create mode 100644 src/context.ts

diff --git a/src/components/TextInput/TextInput.js b/src/components/TextInput/TextInput.tsx
similarity index 79%
rename from src/components/TextInput/TextInput.js
rename to src/components/TextInput/TextInput.tsx
index 2bcff083..39c835e1 100644
--- a/src/components/TextInput/TextInput.js
+++ b/src/components/TextInput/TextInput.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import styles from "./TextInput.css";
-import { RecalculateStageRectContext } from '../../context'
+import { RecalculateStageRectContext } from "../../context";
 
 const TextInput = ({
   placeholder,
@@ -10,8 +10,8 @@ const TextInput = ({
   step,
   type
 }) => {
-  const numberInput = React.useRef()
-  const recalculateStageRect = React.useContext(RecalculateStageRectContext)
+  const numberInput = React.useRef<HTMLInputElement>(null);
+  const recalculateStageRect = React.useContext(RecalculateStageRectContext);
 
   const handleDragEnd = () => {
     document.removeEventListener("mousemove", handleMouseMove);
@@ -25,7 +25,7 @@ const TextInput = ({
 
   const handlePossibleResize = e => {
     e.stopPropagation();
-    recalculateStageRect();
+    recalculateStageRect?.();
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleDragEnd);
   };
@@ -36,27 +36,31 @@ const TextInput = ({
         <input
           data-flume-component="text-input-number"
           onKeyDown={e => {
-            if(e.keyCode === 69){
-              e.preventDefault()
+            if (e.keyCode === 69) {
+              e.preventDefault();
               return false;
             }
           }}
           onChange={e => {
             const inputValue = e.target.value.replace(/e/g, "");
             if (!!inputValue) {
-              const value = parseFloat(inputValue, 10);
+              const value = parseFloat(inputValue);
               if (Number.isNaN(value)) {
                 onChange(0);
               } else {
                 onChange(value);
-                numberInput.current.value = value;
+                if (numberInput.current) {
+                  numberInput.current.value = value.toString();
+                }
               }
             }
           }}
           onBlur={e => {
             if (!e.target.value) {
               onChange(0);
-              numberInput.current.value = 0;
+              if (numberInput.current) {
+                numberInput.current.value = "0";
+              }
             }
           }}
           step={step || "1"}
@@ -73,7 +77,6 @@ const TextInput = ({
           data-flume-component="text-input-textarea"
           onChange={e => onChange(e.target.value)}
           onMouseDown={handlePossibleResize}
-          type="text"
           placeholder={placeholder}
           className={styles.input}
           value={data}
diff --git a/src/context.js b/src/context.js
deleted file mode 100644
index dbb1d16f..00000000
--- a/src/context.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-
-export const NodeTypesContext = React.createContext()
-export const PortTypesContext = React.createContext()
-export const NodeDispatchContext = React.createContext()
-export const ConnectionRecalculateContext = React.createContext()
-export const ContextContext = React.createContext()
-export const StageContext = React.createContext()
-export const CacheContext = React.createContext()
-export const RecalculateStageRectContext = React.createContext()
-export const EditorIdContext = React.createContext()
diff --git a/src/context.ts b/src/context.ts
new file mode 100644
index 00000000..aa0352a7
--- /dev/null
+++ b/src/context.ts
@@ -0,0 +1,11 @@
+import React from 'react'
+
+export const NodeTypesContext = React.createContext(null)
+export const PortTypesContext = React.createContext(null)
+export const NodeDispatchContext = React.createContext(null)
+export const ConnectionRecalculateContext = React.createContext(null)
+export const ContextContext = React.createContext(null)
+export const StageContext = React.createContext(null)
+export const CacheContext = React.createContext(null)
+export const RecalculateStageRectContext = React.createContext<null | (() => void)>(null)
+export const EditorIdContext = React.createContext(null)