Converted context and textInput

chrisjpatty · May 9, 2022 · 1b0d2de · 1b0d2de
1 parent 690f94b
commit 1b0d2de
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 21 deletions.
diff --git a/src/components/TextInput/TextInput.js → src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.js → 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
diff --git a/src/context.ts 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)