devexpress-reporting-react
Version:
DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.
24 lines (23 loc) • 1.67 kB
JavaScript
import React from 'react';
import { ScrollView } from 'devextreme-react/scroll-view';
import Treelist from '../../analytics/Widgets/Treelist';
import { getLocalization } from '@devexpress/analytics-core/property-grid/localization/_localization';
import useDxMutationObserver from '../../../hooks/dxMutationObserver';
const DocumentMap = ({ data }) => {
const headerText = getLocalization('Document Map', 'ASPxReportsStringId.DocumentViewer_RibbonCommandText_DocumentMap');
const scrollViewRef = React.useRef();
const htmlRef = React.useRef();
const [viewModel, setViewModel] = React.useState();
React.useEffect(() => {
htmlRef.current = scrollViewRef.current?.instance().element();
setViewModel(data.model?.getViewModel());
}, [scrollViewRef.current]);
useDxMutationObserver(htmlRef, data.keyboardHelper);
return (React.createElement("div", { className: "dxrd-preview-document-map dxrd-height-100 dxrd-overflow-hidden", hidden: !(data.active && data.visible) },
React.createElement("div", { className: "dxrd-right-panel-header dxd-text-primary" },
React.createElement("div", { className: "dxrd-display-inline-block" }, headerText)),
!!viewModel && (React.createElement("div", null,
React.createElement(ScrollView, { className: "dxrd-right-panel-body", showScrollbar: 'onHover', useNative: false, scrollByThumb: true, onInitialized: viewModel.onInitialized, ref: scrollViewRef },
React.createElement(Treelist, { role: "tree", id: "documentMapTree", className: "dxrd-width-100 dxrd-height-100", options: viewModel.treeListOptions }))))));
};
export default DocumentMap;