devexpress-reporting-react/dx-report-viewer/components/reporting/Toolbar/Pager/Pager.js

DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.

import React from 'react';
import SelectBox from 'devextreme-react/select-box';
const ToolbarPager = ({ data }) => {
    const [dropDownOptions, setDropDownOptions] = React.useState();
    const htmlRef = React.useRef(null);
    React.useEffect(() => {
        setDropDownOptions({
            container: data.getPopupContainer(htmlRef.current),
            ...data.widget.dropDownOptions,
        });
    }, [data.widget.dropDownOptions]);
    return (React.createElement("div", { ref: htmlRef, className: "dxrd-preview-pager dxrd-toolbar-item", hidden: !data.visible },
        React.createElement("div", { className: "dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" },
            React.createElement(SelectBox, { className: "dxrd-preview-pager-selectbox", dataSource: data.widget.dataSource, onValueChanged: data.widget.onValueChanged, value: data.widget.value, displayExpr: data.widget.displayExpr, useItemTextAsTitle: true, itemTemplate: data.widget.itemTemplate, searchMode: data.widget.searchMode, searchEnabled: data.widget.searchEnabled, searchTimeout: data.widget.searchTimeout, disabled: data.disabled, dropDownOptions: dropDownOptions, tabIndex: -1, inputAttr: data.widget.inputAttr })),
        React.createElement("div", { className: "dxrd-toolbar-item-separator dxd-toolbar-separator-color dxd-border-secondary", hidden: !data.hasSeparator })));
};
export default ToolbarPager;