Function Input

packages/ui/src/ui-component/input/Input.jsx:9–198

({ inputParam, value, nodes, edges, nodeId, onChange, onBlur, disabled = false })

import { getAvailableNodesForVariable } from '@/utils/genericHelper'

export const Input = ({ inputParam, value, nodes, edges, nodeId, onChange, onBlur, disabled = false }) => {
    const theme = useTheme()
    const [myValue, setMyValue] = useState(value ?? '')
    const [anchorEl, setAnchorEl] = useState(null)
    const [availableNodesForVariable, setAvailableNodesForVariable] = useState([])
    const [isPasswordVisible, setIsPasswordVisible] = useState(false)
    const ref = useRef(null)
    const inputElementRef = useRef(null)
    const selectionRangeRef = useRef({ start: null, end: null })

    const openPopOver = Boolean(anchorEl)
    const hasPasswordToggle = (inputParam?.type === 'password' || inputParam?.type === 'url') && !!inputParam?.enablePasswordToggle

    const handleClosePopOver = () => {
        setAnchorEl(null)
    }

    const setNewVal = (val) => {
        const newVal = myValue + val.substring(2)
        onChange(newVal)
        setMyValue(newVal)
    }

    const getInputType = (type) => {
        switch (type) {
            case 'string':
                return 'text'
            case 'password':
            case 'url':
                return 'password'
            case 'number':
                return 'number'
            case 'email':
                return 'email'
            default:
                return 'text'
        }
    }

    const handleTogglePasswordVisibility = () => {
        const inputElement = inputElementRef.current
        if (inputElement) {
            selectionRangeRef.current = {
                start: inputElement.selectionStart,
                end: inputElement.selectionEnd
            }
        }
        setIsPasswordVisible((prev) => !prev)
    }

    useEffect(() => {
        if (!hasPasswordToggle) return
        const { start, end } = selectionRangeRef.current
        if (start === null || end === null || !inputElementRef.current) return
        requestAnimationFrame(() => {
            inputElementRef.current?.focus()
            inputElementRef.current?.setSelectionRange(start, end)
        })