Update node input component

This commit is contained in:
Ilango 2024-01-12 13:44:24 +05:30
parent 1544f61407
commit 951fda75c8
1 changed files with 56 additions and 24 deletions

View File

@ -1,6 +1,6 @@
import { useState, useEffect, useRef } from 'react' import { useState, useEffect, useRef } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { FormControl, OutlinedInput, Popover } from '@mui/material' import { FormControl, OutlinedInput, InputBase, Popover } from '@mui/material'
import SelectVariable from 'ui-component/json/SelectVariable' import SelectVariable from 'ui-component/json/SelectVariable'
import { getAvailableNodesForVariable } from 'utils/genericHelper' import { getAvailableNodesForVariable } from 'utils/genericHelper'
@ -50,29 +50,61 @@ export const Input = ({ inputParam, value, nodes, edges, nodeId, onChange, disab
return ( return (
<> <>
<FormControl sx={{ mt: 1, width: '100%' }} size='small'> {inputParam.name === 'note' ? (
<OutlinedInput <FormControl sx={{ width: '100%', height: 'auto' }} size='small'>
id={inputParam.name} <InputBase
size='small' id={inputParam.name}
disabled={disabled} size='small'
type={getInputType(inputParam.type)} disabled={disabled}
placeholder={inputParam.placeholder} type={getInputType(inputParam.type)}
multiline={!!inputParam.rows} placeholder={inputParam.placeholder}
rows={inputParam.rows ?? 1} multiline={!!inputParam.rows}
value={myValue} minRows={inputParam.rows ?? 1}
name={inputParam.name} value={myValue}
onChange={(e) => { name={inputParam.name}
setMyValue(e.target.value) onChange={(e) => {
onChange(e.target.value) setMyValue(e.target.value)
}} onChange(e.target.value)
inputProps={{ }}
step: inputParam.step ?? 1, inputProps={{
style: { step: inputParam.step ?? 1,
height: inputParam.rows ? '90px' : 'inherit' style: {
} border: 'none',
}} background: 'none'
/> }
</FormControl> }}
sx={{
border: 'none',
background: 'none',
padding: '10px 14px'
}}
/>
</FormControl>
) : (
<FormControl sx={{ mt: 1, width: '100%' }} size='small'>
<OutlinedInput
id={inputParam.name}
size='small'
disabled={disabled}
type={getInputType(inputParam.type)}
placeholder={inputParam.placeholder}
multiline={!!inputParam.rows}
rows={inputParam.rows ?? 1}
value={myValue}
name={inputParam.name}
onChange={(e) => {
setMyValue(e.target.value)
onChange(e.target.value)
}}
inputProps={{
step: inputParam.step ?? 1,
style: {
height: inputParam.rows ? '90px' : 'inherit'
}
}}
/>
</FormControl>
)}
<div ref={ref}></div> <div ref={ref}></div>
{inputParam?.acceptVariable && ( {inputParam?.acceptVariable && (
<Popover <Popover