paramater-modal.tsx

Overview

paramater-modal.tsx defines a React functional component ModalForm which presents a modal dialog form for configuring or editing a "BeginQuery" entity within a flow or process management system. This form allows users to input and set properties such as type, key, name, and optional parameters of a query, with dynamic form fields displayed based on the selected query type.

The component leverages Ant Design (antd) UI components to build the form and modal, supports internationalization via react-i18next, and contains custom validation rules to prevent duplicate keys. It also integrates with external constants, interfaces, and hooks from the broader application ecosystem.

Detailed Explanation

`ModalForm` Component

Purpose

ModalForm renders a modal dialog containing a form for editing or creating a BeginQuery object. It supports dynamic form fields, validation, and localized UI text.

Props

interface ModalFormProps extends IModalProps<BeginQuery> {
  initialValue: BeginQuery;
  otherThanCurrentQuery: BeginQuery[];
}

visible (boolean): Controls whether the modal is shown.
initialValue (BeginQuery): The initial values to populate the form with when the modal opens.
hideModal (() => void): Callback function to close/hide the modal.
otherThanCurrentQuery (BeginQuery[]): List of other existing queries used to validate uniqueness of the key input.

Usage Example

<ModalForm
  visible={isModalVisible}
  initialValue={currentQuery}
  hideModal={() => setModalVisible(false)}
  otherThanCurrentQuery={queries.filter(q => q.id !== currentQuery.id)}
/>

Internal State and Hooks

Uses Ant Design's Form instance via Form.useForm() to control and validate form fields.
useTranslation() for internationalized text rendering.
useMemo() to generate the select options for the "Type" field only when dependencies change.
useResetFormOnCloseModal custom hook to reset form fields when modal closes.
useEffect() to update form fields when initialValue changes.

Options Generation Logic

The options array for the "Type" select is generated by iterating over BeginQueryType enum values, associating each with a corresponding icon from BeginQueryTypeIconMap, and rendering a label with icon and type text.

Form Fields

Field Name	Type	Label	Validation	Special Behavior
`type`	Select	Type	Required	Default to `BeginQueryType.Line`
`key`	Input	Key	Required, unique among other keys	Custom validator prevents duplicates
`name`	Input	Name	Required
`optional`	Switch	Optional	None	Defaults to false
conditional field -				If `type === BeginQueryType.Options`, renders `BeginDynamicOptions` component

Methods

onOk: Triggers form submission when modal "Ok" button is clicked.

Return Value

Returns JSX rendering the modal with the form and its fields.

Implementation Details

Dynamic Options Rendering: The select options for query types dynamically include icons and adjust icon size based on the type.
Custom Validation: The key field includes a custom asynchronous validator that checks whether the entered key is unique among other queries (otherThanCurrentQuery).
Conditional Rendering: The form conditionally renders an additional component (BeginDynamicOptions) when the selected type matches BeginQueryType.Options, enabling dynamic options configuration.
Form Reset on Close: The useResetFormOnCloseModal hook ensures that the form state resets whenever the modal closes, preventing stale data persistence.
Internationalization: Utilizes react-i18next for translating the modal title and potentially other text (though only the modal title is explicitly translated here).

Interaction with Other System Components

Hooks: Uses useResetFormOnCloseModal from the application's hooks for form lifecycle management.
Interfaces: Relies on IModalProps and BeginQuery interface to type props and data.
Constants: Uses BeginQueryType enum and BeginQueryTypeIconMap for type options and icons.
Child Components: Includes BeginDynamicOptions to handle additional form inputs specific to queries of type Options.
UI Library: Uses Ant Design components (Modal, Form, Input, Select, Switch) for UI elements.
Localization: Integrates with react-i18next for multilingual support.

Visual Diagram

componentDiagram
    component ModalForm {
      +visible: boolean
      +initialValue: BeginQuery
      +hideModal(): void
      +otherThanCurrentQuery: BeginQuery[]
    }
    component Form {
      +useForm()
      +submit()
      +setFieldsValue()
    }
    component Modal {
      +title
      +open
      +onOk
      +onCancel
      +centered
    }
    component BeginDynamicOptions

    ModalForm --> Modal : renders
    ModalForm --> Form : uses form instance
    Form --> Modal : nested in Modal
    ModalForm --> BeginDynamicOptions : conditional render
    ModalForm --> useResetFormOnCloseModal : hook
    ModalForm --> useTranslation : hook

Summary

paramater-modal.tsx provides a reusable, configurable modal form component for managing BeginQuery objects. It features dynamic form content, validation logic to prevent duplicate keys, and UI elements consistent with the broader application style. The component integrates tightly with application constants, interfaces, hooks, and translation utilities, making it a key part of the user interface for flow or query configuration workflows.

End of Documentation for `paramater-modal.tsx`