| } | } | ||||
| }, [value, onChange]) | }, [value, onChange]) | ||||
| const [isFocus, setIsFocus] = useState(false) | |||||
| const [inputsIsFocus, setInputsIsFocus] = useState<Record<string, boolean>>({}) | |||||
| const handleInputFocus = useCallback((variable: string) => { | |||||
| return (value: boolean) => { | |||||
| setInputsIsFocus((prev) => { | |||||
| return { | |||||
| ...prev, | |||||
| [variable]: value, | |||||
| } | |||||
| }) | |||||
| } | |||||
| }, []) | |||||
| const handleOpen = useCallback((index: number) => { | const handleOpen = useCallback((index: number) => { | ||||
| return () => onOpen(index) | return () => onOpen(index) | ||||
| }, [onOpen]) | }, [onOpen]) | ||||
| </div> | </div> | ||||
| {isString | {isString | ||||
| ? (<Input | ? (<Input | ||||
| className={cn(isFocus ? 'shadow-xs bg-gray-50 border-gray-300' : 'bg-gray-100 border-gray-100', 'rounded-lg px-3 py-[6px] border')} | |||||
| className={cn(inputsIsFocus[variable] ? 'shadow-xs bg-gray-50 border-gray-300' : 'bg-gray-100 border-gray-100', 'rounded-lg px-3 py-[6px] border')} | |||||
| value={varInput?.value as string || ''} | value={varInput?.value as string || ''} | ||||
| onChange={handleMixedTypeChange(variable)} | onChange={handleMixedTypeChange(variable)} | ||||
| readOnly={readOnly} | readOnly={readOnly} | ||||
| nodesOutputVars={availableVars} | nodesOutputVars={availableVars} | ||||
| availableNodes={availableNodes} | availableNodes={availableNodes} | ||||
| onFocusChange={setIsFocus} | |||||
| onFocusChange={handleInputFocus(variable)} | |||||
| placeholder={t('workflow.nodes.http.insertVarPlaceholder')!} | placeholder={t('workflow.nodes.http.insertVarPlaceholder')!} | ||||
| placeholderClassName='!leading-[21px]' | placeholderClassName='!leading-[21px]' | ||||
| />) | />) |