devexpress-reporting-react
Version:
DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.
29 lines (28 loc) • 2.21 kB
JavaScript
import React from 'react';
import Template from '../../core/Template';
import useDxAction from '../../../hooks/dxAction';
import useDxResizable from '../../../hooks/dxResizable';
import useDxMutationObserver from '../../../hooks/dxMutationObserver';
const TabPanel = ({ data }) => {
if (!data)
return null;
const rightPanel = React.useRef();
const [resizableOptions, setResizableOptions] = React.useState(null);
useDxResizable(rightPanel, resizableOptions);
const rightPanelWrapper = React.useRef();
useDxMutationObserver(rightPanelWrapper, data.keyboardHelper);
React.useEffect(() => {
setResizableOptions(data.getResizableOptions(rightPanel.current, 50, 396));
}, [setResizableOptions]);
return (React.createElement("div", { className: `dx-shadow dx-shadow-right dxd-border-secondary dxrd-tab-panel-wrapper ${data.class}`, style: { width: data.width + 'px' }, ref: rightPanelWrapper },
React.createElement("div", { className: `dxrd-right-tabs dxd-side-panel-tabs-back-color dxd-back-contrast ${data.tabsElement.class}` }, data.tabs.map(tab => React.createElement(TabPanelItem, { key: tab.template, tab: tab }))),
React.createElement("div", { className: `dxrd-right-panel dxd-property-grid-group-header-back-color dxd-back-primary2 ${data.contentElement.class}`, style: { width: data.contentElement.width + 'px' }, ref: rightPanel }, data.tabs.map(tab => (React.createElement(Template, { key: tab.template, template: tab.template, data: tab }))))));
};
const TabPanelItem = ({ tab }) => {
const btnRef = React.useRef(null);
useDxAction(btnRef, tab.click, tab);
return (React.createElement("div", { ref: btnRef, role: "button", className: `dxrd-tab-item dx-accessibility-rightpanel-button dxd-side-panel-tab-back-color dxd-back-highlighted dx-accessibility-focus-border-accented ${tab.css.class}`, title: tab.text, "aria-label": tab.text, "aria-expanded": !tab.collapsed && tab.active ? 'true' : 'false', hidden: !tab.visible },
React.createElement("div", { className: `dxrd-image-padding ${tab.image.class}` },
React.createElement(Template, { template: tab.image.templateName }))));
};
export default TabPanel;