devexpress-reporting-react/dx-report-viewer/components/reporting/ExportOptions/ExportOptions.js

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

import React from 'react';
import ScrollView from 'devextreme-react/scroll-view';
import Template from '../../core/Template';
import useDxMutationObserver from '../../../hooks/dxMutationObserver';
import EditorDescriptionPopover from '../../analytics/Properties/EditorDescriptionPopover';
import { getLocalization } from '@devexpress/analytics-core/property-grid/localization/localization_utils';
const ExportOptions = ({ data }) => {
    const headerText = getLocalization('Export Options', 'DevExpress.XtraReports.UI.XtraReport.ExportOptions');
    const onScrollViewInitialized = (args) => args.component.option('useKeyboard', false);
    const mutationObserverRef = React.useRef();
    useDxMutationObserver(mutationObserverRef, data.keyboardHelper);
    return (React.createElement("div", { className: "dxrd-preview-export-options-wrapper dxrd-preview-property-wrapper", hidden: !(data.active && data.visible) },
        React.createElement("div", { className: "dxrd-right-panel-header dxd-text-primary" },
            React.createElement("span", null, headerText)),
        React.createElement(ScrollView, { className: "dxrd-right-panel-body", showScrollbar: "onHover", useNative: false, scrollByThumb: true, onInitialized: onScrollViewInitialized },
            React.createElement("div", { className: "dx-fieldset", ref: mutationObserverRef },
                React.createElement("div", { className: "dxrd-right-panel-content dxrd-export-options-content", role: "tree" },
                    React.createElement(Template, { template: "dx-propertieseditor", data: data.propertyGrid })),
                React.createElement(EditorDescriptionPopover, { data: data.propertyGrid.popover })))));
};
export default ExportOptions;