devexpress-reporting-react
Version:
DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.
18 lines (17 loc) • 1.36 kB
JavaScript
import React from 'react';
import Template from '../../../core/Template';
import DxScrollView from 'devextreme-react/scroll-view';
import useDxMutationObserver from '../../../../hooks/dxMutationObserver';
import useDxKeyDownActions from '../../../../hooks/dxKeyDownActions';
const ToolbarContent = ({ data }) => {
const onScrollViewInitialized = args => args.component.option('useKeyboard', false);
const toolbarRef = React.useRef();
useDxMutationObserver(toolbarRef, data.keyboardHelper);
useDxKeyDownActions(data.actionLists);
return (React.createElement(DxScrollView, { className: "dxrd-toolbar-wrapper dxrdp-toolbar-scrollable dx-shadow-top dxd-back-secondary-invariant", showScrollbar: "onHover", direction: "horizontal", useNative: false, scrollByThumb: true, onInitialized: onScrollViewInitialized },
React.createElement("div", { className: "dxrd-toolbar", role: "toolbar", ref: toolbarRef },
React.createElement("div", { id: "dxrd-preview-toolbar-live-region", className: "dxrd-visually-hidden", "aria-live": "polite", "aria-atomic": "true" }),
React.createElement("div", { className: "dx-accessibility-container-background dxd-back-accented" }),
React.createElement(Template, { template: "dxrd-toolbar-tmplt", data: data.actionLists.toolbarItems }))));
};
export default ToolbarContent;