devexpress-reporting-react
Version:
DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.
17 lines (16 loc) • 1.3 kB
JavaScript
import React from 'react';
import Template from '../../core/Template';
const Designer = ({ data }) => {
const rootElt = React.useRef();
const [surfaceClassName, setSurfaceClassName] = React.useState('');
React.useEffect(() => {
if (rootElt.current && data.surfaceClass) {
setSurfaceClassName(data.surfaceClass(rootElt.current));
}
}, [data, rootElt.current, setSurfaceClassName]);
return (React.createElement("div", { ref: rootElt, tabIndex: -1, className: `dx-designer-viewport ${surfaceClassName} ${data.accessibilityCompliant ? 'dx-accessibility' : ''}` },
React.createElement("div", { className: `dxrd-designer-wrapper dx-editors dxd-surface-back-color dxd-scrollbar-color ${data.rtl ? 'dx-rtl' : 'dx-ltr'} ${data.rootStyle}`, hidden: data.designMode && data.designMode() }, data.parts?.map(part => React.createElement(Template, { key: part.id, template: part.templateName, data: part.viewModel || part.model }))),
React.createElement("div", null, data.addOns?.map(addon => React.createElement(Template, { key: addon.id, template: addon.templateName, data: addon.model }))),
React.createElement("div", { id: "dxrd-designer-last-focus-item-blank", className: "dxrd-visually-hidden", tabIndex: -1 })));
};
export default Designer;