dynamic-output-variable.tsx

Overview

dynamic-output-variable.tsx is a React functional component file designed to render a dynamic form interface for managing output variables in a user-friendly way. It leverages Ant Design (antd) components and icons, combined with internationalization support (react-i18next) and a custom collapsible section component FormCollapse, to allow users to add, remove, and configure multiple output variables dynamically.

Each output variable consists of two parts:

• A name (input field)

• A type (select dropdown with predefined options)

This component is typically used in scenarios such as workflow builders, form generators, or any UI where users need to define multiple output variables with specific types.

Detailed Explanation

Imports

• Icons: MinusCircleOutlined and PlusOutlined from @ant-design/icons for remove and add actions respectively.

• UI Components: Button, Form, Input, and Select from antd for building the form UI.

• Translation: useTranslation from react-i18next for internationalization support.

• Custom Component: FormCollapse from a relative path, used to wrap the dynamic variable list inside a collapsible UI section.

Types and Constants

type DynamicOutputVariableProps = {
  name?: string;
};

• DynamicOutputVariableProps: Defines the component’s props interface. It accepts an optional name string that sets the base name for the form list (default is 'output').

const options = [
  'String',
  'Number',
  'Boolean',
  'Array[String]',
  'Array[Number]',
  'Object',
].map((x) => ({ label: x, value: x }));

• options: An array of type options for the output variables, transformed into objects with label and value keys for antd's Select component.

Component: DynamicOutputVariable

export const DynamicOutputVariable = ({
  name = 'output',
}: DynamicOutputVariableProps) => {
  const { t } = useTranslation();

  return (
    <FormCollapse title={t('flow.output')}>
      <Form.List name={name}>
        {(fields, { add, remove }) => (
          <>
            {fields.map(({ key, name, ...restField }) => (
              <div key={key} className="flex items-center gap-2 pb-4">
                <Form.Item {...restField} name={[name, 'first']} className="m-0 flex-1">
                  <Input />
                </Form.Item>
                <Form.Item {...restField} name={[name, 'last']} className="m-0 flex-1">
                  <Select placeholder={t('common.pleaseSelect')} options={options} />
                </Form.Item>
                <MinusCircleOutlined onClick={() => remove(name)} />
              </div>
            ))}
            <Form.Item>
              <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                {t('flow.addVariable')}
              </Button>
            </Form.Item>
          </>
        )}
      </Form.List>
    </FormCollapse>
  );
};

Parameters

• name (optional): The base name for the form list, used as the key in the form data structure. Defaults to 'output'.

Return Value

• Returns JSX rendering a collapsible section with a list of dynamic output variables. Each variable has an input for the variable name and a select dropdown for the variable type. Users can add new variables or remove existing ones dynamically.

Usage Example

import { Form } from 'antd';
import { DynamicOutputVariable } from './dynamic-output-variable';

const MyFormComponent = () => (
  <Form>
    <DynamicOutputVariable name="myOutputVars" />
  </Form>
);

This will render a form section titled according to the translation key 'flow.output', allowing dynamic addition/removal of output variables stored under the form path myOutputVars.

Implementation Details and Algorithms

• Dynamic Fields with Ant Design's Form.List: Form.List is used to manage an array of form items. It automatically handles adding/removing items and keeps form state consistent.

• Internationalization: All user-facing strings like titles, placeholders, and button text are fetched through the t function from react-i18next to support multiple languages.

• Layout: Each variable entry is laid out horizontally using Tailwind CSS utility classes (flex, items-center, gap-2, pb-4, flex-1) for spacing and alignment.

• Icons for Actions: MinusCircleOutlined acts as a remove button for each variable, while PlusOutlined is used inside a dashed button to add new variables.

Interaction with Other Parts of the System

• FormCollapse Component: This component is wrapped inside FormCollapse, a custom collapsible container that likely provides UI functionality to expand/collapse the output variables section. This helps keep the UI clean and organized when many form sections exist.

• Form Context: DynamicOutputVariable expects to be used within an antd <Form> component, as it relies on Form.List to access and manipulate form data.

• Translation System: Integrates with the app’s i18n setup via useTranslation() from react-i18next.

• Parent Components: This component is designed to be embedded in larger forms or workflows that require users to define multiple output variables dynamically.

Component Structure Diagram

componentDiagram
    component DynamicOutputVariable {
        +props: { name?: string }
        FormCollapse "Collapsible section"
        Form.List "Manages dynamic array of variables"
        Fields (name input + type select)
        PlusOutlined Button "Add variable"
        MinusCircleOutlined Icon "Remove variable"
    }

    DynamicOutputVariable --> FormCollapse
    DynamicOutputVariable --> Form.List
    Form.List --> Fields
    Fields --> Input
    Fields --> Select
    Fields --> MinusCircleOutlined
    DynamicOutputVariable --> Button : Add new field

Summary

• Purpose: Enable dynamic creation and management of output variables with names and types.

• Key Features: Dynamic add/remove, internationalization, collapsible UI section.

• Tech Stack: React, TypeScript, Ant Design, react-i18next, Tailwind CSS.

• Use Case: Workflow/form builders where users define multiple output variables.

This component is a reusable building block in UI forms for dynamic variable configuration and integrates cleanly with form state management and i18n infrastructure.