From 58d5a831502d37896de2cc23ed5ff2c7678acdad Mon Sep 17 00:00:00 2001 From: Emir Karabeg Date: Tue, 28 Jan 2025 15:02:49 -0800 Subject: [PATCH] Took out input styling but kept state logic for dropping into input --- .../sub-block/components/short-input.tsx | 87 ++++--------- components/ui/input.tsx | 114 ++---------------- 2 files changed, 38 insertions(+), 163 deletions(-) diff --git a/app/w/components/workflow-block/components/sub-block/components/short-input.tsx b/app/w/components/workflow-block/components/sub-block/components/short-input.tsx index 5a04e35f5e..2f1c12cf35 100644 --- a/app/w/components/workflow-block/components/sub-block/components/short-input.tsx +++ b/app/w/components/workflow-block/components/sub-block/components/short-input.tsx @@ -1,8 +1,10 @@ +// Imports import { Input } from '@/components/ui/input' import { useState, useRef, useEffect } from 'react' import { useSubBlockValue } from '../hooks/use-sub-block-value' import { cn } from '@/lib/utils' +// Component Props Interface interface ShortInputProps { placeholder?: string password?: boolean @@ -18,15 +20,12 @@ export function ShortInput({ password, isConnecting, }: ShortInputProps) { + // Hooks and State const inputRef = useRef(null) const [isFocused, setIsFocused] = useState(false) const [value, setValue] = useSubBlockValue(blockId, subBlockId) - const [connections, setConnections] = useState([]) - - useEffect(() => { - console.log(connections) - }, [connections]) + // Auto-scroll effect for input useEffect(() => { if (inputRef.current && isFocused) { const input = inputRef.current @@ -35,43 +34,29 @@ export function ShortInput({ } }, [value, isFocused]) - // Add regex pattern for connection syntax - const connectionPattern = /<([a-z0-9]+)\.(string|number|boolean|res|any)>/g - - const updateConnections = (inputValue: string) => { - const newConnections = Array.from( - inputValue.matchAll(connectionPattern) - ).map((match) => match[0].slice(1, -1)) // Remove < and > - setConnections(Array.from(new Set(newConnections))) // Use Set to ensure uniqueness - } - - const handleChange = (e: React.ChangeEvent) => { - const newValue = e.target.value - setValue(newValue) - updateConnections(newValue) - } - + // Drag and Drop handlers const handleDrop = (e: React.DragEvent) => { e.preventDefault() try { const data = JSON.parse(e.dataTransfer.getData('application/json')) - if ( + + const isValidConnectionBlock = data.type === 'connectionBlock' && data.connectionData.sourceBlockId === blockId - ) { - const currentValue = value?.toString() ?? '' - const formattedName = data.connectionData.name - .replace(' ', '') - .toLowerCase() - const connectionType = - data.connectionData.outputType === 'any' - ? 'res' - : data.connectionData.outputType - const newConnection = formattedName + '.' + connectionType - const newValue = currentValue + `<${newConnection}>` - setValue(newValue) - updateConnections(newValue) - } + + if (!isValidConnectionBlock) return + + const currentValue = value?.toString() ?? '' + const connectionName = data.connectionData.name + .replace(' ', '') + .toLowerCase() + const outputSuffix = + data.connectionData.outputType === 'any' + ? 'res' + : data.connectionData.outputType + + const newValue = `${currentValue}<${connectionName}.${outputSuffix}>` + setValue(newValue) } catch (error) { console.error('Failed to parse drop data:', error) } @@ -81,46 +66,24 @@ export function ShortInput({ e.preventDefault() // This is needed to allow drops } - const handleKeyDown = (e: React.KeyboardEvent) => { - if (e.key === 'Backspace' && inputRef.current) { - const cursorPosition: any = inputRef.current.selectionStart - const currentValue = value?.toString() ?? '' - - // Check if cursor is right after a connection closing bracket - for (const connection of connections) { - const pattern = `<${connection}>` - const index = currentValue.lastIndexOf(pattern, cursorPosition) - - if (index !== -1 && index + pattern.length === cursorPosition) { - e.preventDefault() - const newValue = - currentValue.slice(0, index) + - currentValue.slice(index + pattern.length) - setValue(newValue) - return - } - } - } - } - + // Value display logic const displayValue = password && !isFocused ? '•'.repeat(value?.toString().length ?? 0) : value?.toString() ?? '' + // Component render return ( setValue(e.target.value)} onFocus={() => setIsFocused(true)} onBlur={() => setIsFocused(false)} onDrop={handleDrop} diff --git a/components/ui/input.tsx b/components/ui/input.tsx index 76ec7f300b..e6fe6c0f3e 100644 --- a/components/ui/input.tsx +++ b/components/ui/input.tsx @@ -2,107 +2,19 @@ import * as React from 'react' import { cn } from '@/lib/utils' -interface InputProps - extends Omit, 'value' | 'onChange'> { - className?: string - value?: string - connections?: string[] - onChange?: (e: React.ChangeEvent) => void -} - -const Input = React.forwardRef( - ( - { className, type, value = '', connections = [], onChange, ...props }, - ref - ) => { - // Create a hidden input for maintaining focus and handling keyboard events - const hiddenInputRef = React.useRef(null) - - const renderContent = () => { - if (!connections?.length) { - return ( - - ) - } - - // Split text by connection patterns - const parts = [] - let lastIndex = 0 - - connections.forEach((connection) => { - const pattern = `<${connection}>` - const index = value.indexOf(pattern, lastIndex) - - if (index !== -1) { - // Add text before connection - if (index > lastIndex) { - parts.push({ - type: 'text', - content: value.slice(lastIndex, index), - }) - } - // Add connection - parts.push({ - type: 'connection', - content: connection, - }) - lastIndex = index + pattern.length - } - }) - - // Add remaining text - if (lastIndex < value.length) { - parts.push({ - type: 'text', - content: value.slice(lastIndex), - }) - } - - return ( -
hiddenInputRef.current?.focus()} - > -
- {parts.map((part, index) => - part.type === 'connection' ? ( - - {part.content} - - ) : ( - {part.content} - ) - )} - -
-
- ) - } - - return renderContent() +const Input = React.forwardRef>( + ({ className, type, ...props }, ref) => { + return ( + + ) } ) Input.displayName = 'Input'