116 lines
4.8 KiB
JavaScript
116 lines
4.8 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import { Handle, Position, useUpdateNodeInternals } from 'reactflow'
|
|
import { useEffect, useRef, useState, useContext } from 'react'
|
|
|
|
// material-ui
|
|
import { useTheme, styled } from '@mui/material/styles'
|
|
import { Box, Typography, Tooltip } from '@mui/material'
|
|
import { tooltipClasses } from '@mui/material/Tooltip'
|
|
import { Dropdown } from 'ui-component/dropdown/Dropdown'
|
|
import { Input } from 'ui-component/input/Input'
|
|
import { File } from 'ui-component/file/File'
|
|
import { flowContext } from 'store/context/ReactFlowContext'
|
|
import { isValidConnection } from 'utils/genericHelper'
|
|
|
|
const CustomWidthTooltip = styled(({ className, ...props }) => <Tooltip {...props} classes={{ popper: className }} />)({
|
|
[`& .${tooltipClasses.tooltip}`]: {
|
|
maxWidth: 500
|
|
}
|
|
})
|
|
|
|
// ===========================|| NodeInputHandler ||=========================== //
|
|
|
|
const NodeInputHandler = ({ inputAnchor, inputParam, data, disabled = false }) => {
|
|
const theme = useTheme()
|
|
const ref = useRef(null)
|
|
const updateNodeInternals = useUpdateNodeInternals()
|
|
const [position, setPosition] = useState(0)
|
|
const { reactFlowInstance } = useContext(flowContext)
|
|
|
|
useEffect(() => {
|
|
if (ref.current && ref.current.offsetTop && ref.current.clientHeight) {
|
|
setPosition(ref.current.offsetTop + ref.current.clientHeight / 2)
|
|
updateNodeInternals(data.id)
|
|
}
|
|
}, [data.id, ref, updateNodeInternals])
|
|
|
|
useEffect(() => {
|
|
updateNodeInternals(data.id)
|
|
}, [data.id, position, updateNodeInternals])
|
|
|
|
return (
|
|
<div ref={ref}>
|
|
{inputAnchor && (
|
|
<>
|
|
<CustomWidthTooltip placement='left' title={inputAnchor.type}>
|
|
<Handle
|
|
type='target'
|
|
position={Position.Left}
|
|
key={inputAnchor.id}
|
|
id={inputAnchor.id}
|
|
isValidConnection={(connection) => isValidConnection(connection, reactFlowInstance)}
|
|
style={{
|
|
height: 10,
|
|
width: 10,
|
|
backgroundColor: data.selected ? theme.palette.primary.main : theme.palette.text.secondary,
|
|
top: position
|
|
}}
|
|
/>
|
|
</CustomWidthTooltip>
|
|
<Box sx={{ p: 2 }}>
|
|
<Typography>
|
|
{inputAnchor.label}
|
|
{!inputAnchor.optional && <span style={{ color: 'red' }}> *</span>}
|
|
</Typography>
|
|
</Box>
|
|
</>
|
|
)}
|
|
|
|
{inputParam && (
|
|
<>
|
|
<Box sx={{ p: 2 }}>
|
|
<Typography>
|
|
{inputParam.label}
|
|
{!inputParam.optional && <span style={{ color: 'red' }}> *</span>}
|
|
</Typography>
|
|
{inputParam.type === 'file' && (
|
|
<File
|
|
disabled={disabled}
|
|
fileType={inputParam.fileType || '*'}
|
|
onChange={(newValue) => (data.inputs[inputParam.name] = newValue)}
|
|
value={data.inputs[inputParam.name] ?? inputParam.default ?? 'Choose a file to upload'}
|
|
/>
|
|
)}
|
|
{(inputParam.type === 'string' || inputParam.type === 'password' || inputParam.type === 'number') && (
|
|
<Input
|
|
disabled={disabled}
|
|
inputParam={inputParam}
|
|
onChange={(newValue) => (data.inputs[inputParam.name] = newValue)}
|
|
value={data.inputs[inputParam.name] ?? inputParam.default ?? ''}
|
|
/>
|
|
)}
|
|
{inputParam.type === 'options' && (
|
|
<Dropdown
|
|
disabled={disabled}
|
|
name={inputParam.name}
|
|
options={inputParam.options}
|
|
onSelect={(newValue) => (data.inputs[inputParam.name] = newValue)}
|
|
value={data.inputs[inputParam.name] ?? inputParam.default ?? 'chose an option'}
|
|
/>
|
|
)}
|
|
</Box>
|
|
</>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
NodeInputHandler.propTypes = {
|
|
inputAnchor: PropTypes.object,
|
|
inputParam: PropTypes.object,
|
|
data: PropTypes.object,
|
|
disabled: PropTypes.bool
|
|
}
|
|
|
|
export default NodeInputHandler
|