ragflow-pagination.tsx

Overview

ragflow-pagination.tsx defines a reusable React functional component RAGFlowPagination that provides a complete pagination UI control. It enables users to navigate through pages of data, jump between pages, and optionally adjust the page size (number of items per page). The component is designed to be flexible, customizable, and internationalized, making it suitable for use in a data-driven interface where paginated content is displayed.

Exports

`RAGFlowPaginationType` (Type)

This TypeScript type defines the props accepted by the RAGFlowPagination component:

Prop	Type	Optional	Description
`showQuickJumper`	`boolean`	Yes	(Unused in current implementation) Intended for a quick jump to page input.
`onChange`	(page: number, pageSize: number) => void	Yes	Callback invoked when the current page or page size changes. Receives new page and pageSize.
`total`	`number`	Yes	Total number of items across all pages. Defaults to 0.
`current`	`number`	Yes	The currently selected page. Defaults to 1.
`pageSize`	`number`	Yes	Number of items per page. Defaults to 10.
`showSizeChanger`	`boolean`	Yes	Whether to show a dropdown for changing page size. Defaults to `true`.

`RAGFlowPagination` (Function Component)

Description

Renders a pagination control with previous/next buttons, page number buttons (with ellipsis for gaps), and optionally a page size selector dropdown.

Props

Uses RAGFlowPaginationType (see above).

Defaults:

current = 1
pageSize = 10
total = 0
showSizeChanger = true

State

currentPage (number): Tracks the currently active page inside the component.
currentPageSize (string): Tracks the currently selected page size as a string for the select control.

Key Functionalities

Calculates total pages based on total and pageSize.
Generates an array of page numbers to display with ellipsis when pages exceed 5.
Handles user actions:
- Previous page navigation
- Next page navigation
- Direct page selection
- Page size change
Calls the onChange callback prop whenever page or page size changes.
Keeps internal state in sync with prop changes using useEffect.
Uses i18next for localization of labels.
Uses custom UI components (Pagination, PaginationItem, PaginationLink, RAGFlowSelect) for consistent styling and interaction.

Parameters

RAGFlowPagination(props: RAGFlowPaginationType): JSX.Element

props - Component props as defined by RAGFlowPaginationType.

Returns

A React JSX element rendering the pagination UI.

Usage Example

<RAGFlowPagination
  current={2}
  pageSize={20}
  total={100}
  onChange={(page, size) => {
    console.log(`Page changed to ${page} with size ${size}`);
    // Fetch new data based on page and size
  }}
  showSizeChanger={true}
/>

Implementation Details

Pagination Logic and Displayed Pages

The component computes the total number of pages as Math.ceil(total / pageSize).
It generates a list of page numbers [1, 2, ..., totalPages].
If total pages ≤ 5, all pages are displayed.
If total pages > 5, a "window" of 5 pages centered on the current page is shown:
- Always show first and last pages.
- Show ellipsis (-1 used as a sentinel) if there are hidden pages between the first/last and the window.
This avoids clutter and provides a familiar UX pattern.

State Synchronization

The component maintains its own internal state (currentPage, currentPageSize) for controlled UI behavior.
When current or pageSize props change externally, useEffect hooks update the internal state accordingly to stay in sync.

Event Handlers

handlePreviousPageChange: Moves to the previous page if possible.
handleNextPageChange: Moves to the next page if possible.
handlePageChange(page): Moves to a specific page.
handlePageSizeChange(size): Changes the page size and notifies parent.

Each handler calls the onChange callback with updated values to allow the parent component to react (e.g., fetching new data).

UI Components Usage

Pagination and related components (PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis) are imported from a shared UI library.
RAGFlowSelect is a custom select dropdown used to pick page size options.
Utility cn for conditional class names.
t for i18n translation.

Interaction with Other Parts of the System

Depends on shared UI components from @/components/ui/pagination and @/components/ui/select.
Uses translation function t from i18next to localize UI texts.
Expects onChange callback from parent components to handle data fetching or other side effects when pagination state changes.
This component is likely used in data listing pages or dashboards where paginated results must be displayed.

Mermaid Diagram

classDiagram
    class RAGFlowPagination {
        - currentPage: number
        - currentPageSize: string
        - sizeChangerOptions: RAGFlowSelectOptionType[]
        - pages: number[]
        - displayedPages: number[]
        + RAGFlowPagination(props: RAGFlowPaginationType)
        + changePage(page: number): void
        + handlePreviousPageChange(): void
        + handlePageChange(page: number): () => void
        + handleNextPageChange(): void
        + handlePageSizeChange(size: string): void
    }
    RAGFlowPagination ..> Pagination
    RAGFlowPagination ..> PaginationContent
    RAGFlowPagination ..> PaginationItem
    RAGFlowPagination ..> PaginationLink
    RAGFlowPagination ..> PaginationPrevious
    RAGFlowPagination ..> PaginationNext
    RAGFlowPagination ..> PaginationEllipsis
    RAGFlowPagination ..> RAGFlowSelect

Summary

The RAGFlowPagination component in ragflow-pagination.tsx is a sophisticated, localized React pagination control that supports page navigation, ellipsis for skipped pages, and optional page size selection. It maintains internal state synchronized with props and informs parent components of changes via callbacks, facilitating effective pagination in data-driven applications. The component integrates with shared UI elements and localization utilities for consistent styling and internationalized user experience.