Function ArrayRenderer

packages/ui/src/ui-component/array/ArrayRenderer.jsx:13–275

({ inputParam, data, disabled, isDocStore = false })

import { flowContext } from '@/store/context/ReactFlowContext'

export const ArrayRenderer = ({ inputParam, data, disabled, isDocStore = false }) => {
    const [arrayItems, setArrayItems] = useState([]) // these are the actual values. Ex: [{name: 'John', age: 30}, {name: 'Jane', age: 25}]
    const [itemParameters, setItemParameters] = useState([]) // these are the input parameters for each array item. Ex: [{label: 'Name', type: 'string', display: true}, {label: 'age', type: 'number', display: false}]
    const theme = useTheme()
    const customization = useSelector((state) => state.customization)
    const flowContextValue = useContext(flowContext)
    const { reactFlowInstance } = flowContextValue || {}

    // Handler for when input values change within array items
    const handleItemInputChange = ({ inputParam: changedParam, newValue }, itemIndex) => {
        // Create deep copy to avoid mutating state directly
        let clonedData = cloneDeep(data)

        // Update the specific array item that changed
        const updatedArrayItems = [...arrayItems]
        const updatedItem = { ...updatedArrayItems[itemIndex] }

        // Reset the value of fields which has show/hide rules, so the old values don't persist
        for (let i = 0; i < inputParam.array.length; i += 1) {
            const fieldDef = inputParam.array[i]
            if (fieldDef.show || fieldDef.hide) {
                updatedItem[fieldDef.name] = fieldDef.default || ''
            }
        }

        // Set the new value for the changed field
        updatedItem[changedParam.name] = newValue
        updatedArrayItems[itemIndex] = updatedItem

        // Update local state and parent data
        setArrayItems(updatedArrayItems)
        data.inputs[inputParam.name] = updatedArrayItems
        clonedData.inputs[inputParam.name] = updatedArrayItems

        // Recalculate display parameters based on new values
        const newItemParams = showHideInputs(clonedData, 'inputParams', cloneDeep(inputParam.array), itemIndex)

        if (newItemParams.length) {
            const updatedItemParams = [...itemParameters]
            updatedItemParams[itemIndex] = newItemParams
            setItemParameters(updatedItemParams)
        }
    }

    // Initialize array items and parameters when component mounts or data changes
    useEffect(() => {
        const initialArrayItems = data.inputs[inputParam.name] || []
        setArrayItems(initialArrayItems)

        // Calculate initial display parameters for each array item
        const initialItemParameters = []
        for (let i = 0; i < initialArrayItems.length; i += 1) {
            const itemParams = showHideInputs(data, 'inputParams', cloneDeep(inputParam.array), i)
            if (itemParams.length) {
                initialItemParameters.push(itemParams)
            }
        }