Remove failed prototype for stretchy input

fiberplane · Sep 16, 2024 · 6a06164 · 6a06164
1 parent 5461661
commit 6a06164
Showing 1 changed file with 1 addition and 107 deletions.
diff --git a/studio/src/pages/RequestorPage/KeyValueForm/KeyValueForm.tsx b/studio/src/pages/RequestorPage/KeyValueForm/KeyValueForm.tsx
@@ -2,7 +2,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { cn, noop } from "@/utils";
 import { TrashIcon } from "@radix-ui/react-icons";
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useState } from "react";
 import {
   createChangeEnabled,
   createChangeKey,
@@ -126,109 +126,3 @@ export const KeyValueForm = (props: Props) => {
     </div>
   );
 };
-
-interface DynamicInputProps {
-  value: string;
-  onChange: (value: string) => void;
-  placeholder?: string;
-  className?: string;
-}
-
-const MAGIC_INPUT_HEIGHT = "1.5em";
-
-/**
- * A stretchy input, modeled after the ones in HTTPie
- */
-const DynamicInput: React.FC<DynamicInputProps> = ({
-  value,
-  onChange,
-  placeholder,
-  className,
-}) => {
-  const [isFocused, setIsFocused] = useState(false);
-  const inputRef = useRef<HTMLDivElement>(null);
-  const measureRef = useRef<HTMLDivElement>(null);
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
-  useEffect(() => {
-    if (inputRef.current && measureRef.current) {
-      if (inputRef.current.innerText !== value) {
-        const selection = window.getSelection();
-        const range = selection?.getRangeAt(0);
-        const startOffset = range?.startOffset;
-
-        inputRef.current.innerText = value;
-        measureRef.current.innerText = value;
-
-        if (selection && range && startOffset !== undefined) {
-          const newRange = document.createRange();
-          newRange.setStart(
-            inputRef.current.firstChild || inputRef.current,
-            Math.min(startOffset, value.length),
-          );
-          newRange.collapse(true);
-          selection.removeAllRanges();
-          selection.addRange(newRange);
-        }
-      }
-      adjustHeight();
-    }
-  }, [value, isFocused]);
-
-  const adjustHeight = () => {
-    if (inputRef.current && measureRef.current) {
-      measureRef.current.style.width = `${inputRef.current.offsetWidth}px`;
-      const height = measureRef.current.offsetHeight;
-      inputRef.current.style.height = `${height}px`;
-    }
-  };
-
-  const handleInput = () => {
-    if (inputRef.current) {
-      const newValue = inputRef.current.innerText;
-      if (newValue !== value) {
-        onChange(newValue);
-      }
-      if (measureRef.current) {
-        measureRef.current.innerText = newValue;
-      }
-      adjustHeight();
-    }
-  };
-
-  return (
-    <div className="relative">
-      <div
-        ref={measureRef}
-        aria-hidden="true"
-        className="absolute top-0 left-0 py-0 px-2 invisible whitespace-pre-wrap break-words"
-        style={{
-          minHeight: MAGIC_INPUT_HEIGHT,
-          maxHeight: isFocused ? "none" : MAGIC_INPUT_HEIGHT,
-        }}
-      />
-      <div
-        ref={inputRef}
-        contentEditable
-        onFocus={() => setIsFocused(true)}
-        onBlur={() => setIsFocused(false)}
-        onInput={handleInput}
-        className={cn(
-          `min-h-[${MAGIC_INPUT_HEIGHT}] py-0 px-2 border rounded`,
-          "focus-visible:outline-none",
-          "fpx-placeholder",
-          !isFocused && "overflow-hidden",
-          !isFocused &&
-            `max-h-[${MAGIC_INPUT_HEIGHT}] text-ellipsis whitespace-nowrap`,
-          {
-            "border border-blue-500 ring-2 ring-blue-300": isFocused,
-            "border border-gray-600": !isFocused,
-            "text-ellipsis whitespace-nowrap": !isFocused,
-          },
-          className,
-        )}
-        data-placeholder={placeholder}
-      />
-    </div>
-  );
-};