index.tsx

Overview

This file defines a React functional component named MessageForm that provides a dynamic form interface for entering multiple messages. It leverages Ant Design (antd) form components and icons to allow users to add or remove message input areas interactively. The form integrates localization support through a custom translation hook useTranslate. This component is primarily used for inputting, validating, and managing a list of text messages in a user-friendly way.

Detailed Explanation

Imports

• useTranslate: A custom hook imported from @/hooks/common-hooks for providing localized text strings.

• MinusCircleOutlined, PlusOutlined: Icon components from Ant Design used as buttons for removing and adding message fields.

• Button, Form, Input: Ant Design components for building the UI form.

• IOperatorForm: TypeScript interface imported from ../../interface defining the expected props for the MessageForm component.

• styles: CSS module styles imported for styling dynamic delete buttons.

Constants

formItemLayout

const formItemLayout = {
  labelCol: { sm: { span: 6 } },
  wrapperCol: { sm: { span: 18 } },
};

Defines the layout properties for form items with labels, specifying the grid span for label and wrapper columns on small screens.

formItemLayoutWithOutLabel

const formItemLayoutWithOutLabel = {
  wrapperCol: { sm: { span: 18, offset: 6 } },
};

Defines layout properties for form items without labels, adding an offset to align with labeled form items.

Component: MessageForm

const MessageForm = ({ onValuesChange, form }: IOperatorForm) => { ... }

Purpose

MessageForm renders a form that allows users to input multiple messages dynamically, validating each message and providing controls to add or remove message fields.

Props

• onValuesChange: (changedValues: any, allValues: any) => void
  Callback function triggered whenever any form value changes. Receives the changed values and the whole form's current values.

• form: FormInstance
  The Ant Design form instance to control the form's state externally.

Return Value

Returns a React element representing the form UI.

Internal Logic & Usage

• Uses the useTranslate hook with namespace 'flow' to obtain localized text strings (t function).

• Renders a Form with no label layout (formItemLayoutWithOutLabel) and disables browser autocomplete.

• Uses Form.List to manage a dynamic list of message fields under the messages key.

• For each message field:

  • Displays a label "Message" only on the first item.

  • Validates input to ensure it is required, non-empty, and trimmed (no whitespace-only strings).

  • Renders an Input.TextArea with 4 rows and a placeholder text.

  • Shows a remove icon (MinusCircleOutlined) if there is more than one message field.

• Provides a button to add a new message field with a dashed style and PlusOutlined icon.

Usage Example

import React from 'react';
import { Form } from 'antd';
import MessageForm from './index';

const MyComponent = () => {
  const [form] = Form.useForm();

  const handleValuesChange = (changedValues, allValues) => {
    console.log('Form changed:', allValues);
  };

  return (
    <MessageForm form={form} onValuesChange={handleValuesChange} />
  );
};

Implementation Details

• The form leverages Ant Design's Form.List component to handle dynamic fields, which provides methods add and remove to manipulate the list of messages.

• Validation rules ensure that each message input is mandatory and cannot be just whitespace.

• The layout constants ensure consistent alignment of labels and inputs.

• The component is styled with CSS modules, applying a specific style to the remove button.

• Localization via useTranslate ensures all user-facing text is translated according to the application's language settings.

Interaction with Other Parts of the System

• Localization System: Uses useTranslate hook, tying this component to the app's i18n system.

• Form State Handling: Accepts an external form instance, allowing the parent component to control or prefill form data.

• Interface Definition: The IOperatorForm interface defines the expected shape of props, ensuring type safety and consistent usage across the app.

• Styling: Uses CSS modules imported from index.less for scoped styles.

• Icons and UI Components: Relies on Ant Design's UI library for consistent design language and interaction patterns.

Mermaid Diagram: Component Interaction

componentDiagram
    component MessageForm {
        +onValuesChange(changedValues, allValues)
        +form: FormInstance
        +render()
    }

    component FormList {
        +fields: FieldData[]
        +add()
        +remove(name)
    }

    component InputTextArea {
        +rows: number
        +placeholder: string
    }

    component TranslationHook {
        +t(key: string): string
    }

    MessageForm --> FormList : manages messages (dynamic list)
    FormList --> InputTextArea : renders each message input
    MessageForm --> TranslationHook : uses translation function "t"
    MessageForm --> Button : add new message
    FormList --> MinusCircleOutlined : remove message icon

Summary

index.tsx defines a localized, dynamic message input form component using Ant Design. It supports adding/removing multiple message fields with validation and integrates seamlessly with external form state management and the app's translation system. The component is designed to be reusable and easily integrable into larger workflows involving user input and message handling.