index.tsx

Overview

This file defines a React functional component, TuShareForm, which implements a user input form tailored for interacting with the TuShare API — a financial data interface. The form allows users to provide necessary parameters such as API token, data source, date ranges, and keywords to fetch data from TuShare.

Additionally, the file defines a reusable DateTimePicker component wrapping Ant Design's DatePicker with time support, customized to handle date-time values as strings formatted for backend compatibility.

Key features:

• Internationalized form labels and options via a translation hook.

• Dynamic input controls, including token input, source selection, date-time pickers, and keyword input.

• Integration of a dynamic variable input component to extend form capabilities.

• Form state management via Ant Design's Form component and React hooks.

Classes, Functions, and Components

DateTimePicker

A React component wrapping Ant Design's DatePicker with time selection enabled. It handles conversion between internal date-time string values and the dayjs object expected by the UI component.

Props

Behavior

• Converts the incoming value (assumed timestamp) to a dayjs object for display.

• On date selection change, formats the date-time as 'YYYY-MM-DD HH:mm:ss' string and calls onChange with it.

• If no date is selected, calls onChange with undefined.

Usage Example

<DateTimePicker
  value={someTimestamp}
  onChange={(val) => console.log('Selected date-time:', val)}
/>

TuShareForm

Main export component representing the form used to collect TuShare API query parameters.

Props (from IOperatorForm interface)

Form Fields

• token: Input field for TuShare API token (with a tooltip to guide users to obtain the token).

• src: Select dropdown to choose the data source, options localized via translation.

• start_date: DateTimePicker for the start date of data query.

• end_date: DateTimePicker for the end date of data query.

• keyword: Input field for optional keyword search.

Dynamic inputs are also supported via the DynamicInputVariable component rendered at the top.

Implementation Details

• Uses useTranslate('flow') hook to fetch localized strings for labels and options.

• tuShareSrcOptions is memoized and localized for performance.

• The form uses vertical layout and disables autocomplete.

• onValuesChange is passed down to the form to enable parent components to react to user input.

Usage Example

<TuShareForm
  form={formInstance}
  onValuesChange={(changed, all) => console.log(all)}
  node={currentNodeData}
/>

Important Implementation Details and Algorithms

• Date-Time Handling:
  The DateTimePicker converts Unix timestamps (number) to dayjs objects for internal use and formats selected dates back to 'YYYY-MM-DD HH:mm:ss' strings for backend compatibility. This two-way conversion ensures correct display and data integrity.

• Localization:
  The useTranslate hook is used to internationalize form labels and options, supporting multi-language UI.

• Dynamic Inputs:
  The form integrates a DynamicInputVariable component, presumably allowing users to inject variables dynamically into the form (the component itself is imported from elsewhere), enhancing flexibility.

• Performance Optimization:
  Memoization (useMemo) and callback memoization (useCallback) are utilized to avoid unnecessary re-renders, especially for the localized options and event handlers.

Interaction with Other Parts of the System

• Hooks:

  • useTranslate for localization - likely a global or shared hook for i18n.

• Components:

  • DynamicInputVariable - a custom component for dynamic variable inputs, imported from a relative path.

  • Ant Design components (Form, Input, Select, DatePicker) for UI and form management.

• Data & Interfaces:

  • IOperatorForm interface defines the props contract for the form component.

  • TuShareSrcOptions provides the list of available data source options for the src selection field.

• Date Library:

  • dayjs is used for date manipulation and formatting.

• Backend/Service:

  • The form is designed to collect parameters needed for querying the TuShare API, with the token field hinting at authentication requirements.

Mermaid Component Diagram

componentDiagram
    component TuShareForm {
        +onValuesChange
        +form
        +node
        -tuShareSrcOptions
        +render()
    }
    component DateTimePicker {
        +onChange
        +value
        -handleChange()
        +render()
    }
    component DynamicInputVariable
    component AntdForm
    component AntdInput
    component AntdSelect
    component AntdDatePicker

    TuShareForm --> AntdForm : uses
    TuShareForm --> DynamicInputVariable : uses
    TuShareForm --> AntdInput : uses
    TuShareForm --> AntdSelect : uses
    TuShareForm --> DateTimePicker : uses (for start_date, end_date)
    DateTimePicker --> AntdDatePicker : wraps

Summary

This file primarily provides a structured form component for configuring TuShare API queries, emphasizing user-friendly date-time input, localization, and dynamic variable injection. It leverages Ant Design components for consistent UI and integrates tightly with the system's translation and data source option management. The modular DateTimePicker component encapsulates date-time formatting logic to ensure clean separation of concerns and reusability.