devexpress-reporting-react
Version:
DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.
27 lines (26 loc) • 2.2 kB
JavaScript
import React from 'react';
import { Menu } from 'devextreme-react/menu';
import Template from '../../../core/Template';
const MenuItemTemplate = ({ item }) => {
return (React.createElement("div", { title: item.text },
item.format && (React.createElement("div", { className: "dxrd-preview-export-item-text" }, item.text)),
!item.format && (React.createElement("div", null,
React.createElement("div", { className: "dxrd-preview-export-item-image-wrapper" },
React.createElement("div", { className: `dxrd-preview-export-item-image ${item.imageClassName}` },
React.createElement(Template, { template: item.imageTemplateName }))),
React.createElement("div", { className: "dx-menu-item-popout-container" },
React.createElement("div", { className: "dx-menu-item-popout" }))))));
};
const ToolbarExportTo = ({ data }) => {
const [onSubmenuShowing, setOnSubmenuShowing] = React.useState(() => { });
const menuRef = React.useRef();
React.useEffect(() => {
const element = menuRef.current.instance().element();
setOnSubmenuShowing(() => data.widget.onSubmenuShowing(data.getPopupContainer(element), element));
}, []);
return (React.createElement("div", { className: "dxrd-preview-export-toolbar-item dxrd-toolbar-item", hidden: !data.visible },
React.createElement("div", { className: "dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" },
React.createElement(Menu, { ref: menuRef, disabled: data.disabled, items: data.widget.items, cssClass: "dxrdp-export-to-menu dxrd-preview-export-to dxd-button-back-color dxd-state-normal dxd-icon-highlighted", onItemClick: data.click, onSubmenuShowing: onSubmenuShowing, onSubmenuShown: data.widget.onSubmenuShown, onSubmenuHiding: data.widget.onSubmenuHiding, onItemRendered: data.widget.onItemRendered, itemRender: (data) => data && React.createElement(MenuItemTemplate, { item: data }), tabIndex: -1 })),
React.createElement("div", { className: "dxrd-toolbar-item-separator dxd-toolbar-separator-color dxd-border-secondary", hidden: !data.hasSeparator })));
};
export default ToolbarExportTo;