devexpress-reporting-react
Version:
DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.
31 lines (30 loc) • 3.75 kB
JavaScript
import React from 'react';
import Template from '../../../../core/Template';
import LazyTemplate from '../../../../core/LazyTemplate';
import useDxAccordion from '../../../../../hooks/dxAccordion';
import useDxButtonWithTemplate from '../../../../../hooks/dxButtonWithTemplate';
const GroupHeader = ({ data }) => (
//<div disabled={data.templateName !== 'dx-emptyHeader'}>
React.createElement("div", null,
React.createElement(Template, { className: `dx-collapsing-image dxrd-display-inline-block ${!data.collapsed ? 'dx-image-expanded' : ''}`, template: "dxrd-svg-collapsed" }),
React.createElement("div", { className: "dx-group-header-font", title: data.displayName, "data-bind": data.textToSearch ? `searchHighlighting: { text: displayName, textToSearch: ${data.textToSearch} }` : undefined }, !data.textToSearch ? data.displayName : undefined)));
const EditorLabel = ({ data }) => {
const buttonWithTemplateRef = React.useRef();
useDxButtonWithTemplate(buttonWithTemplateRef, { onClick: data.editorDescriptionAddon?.data.onClick, icon: 'dxrd-svg-tabs-description_info' });
return (React.createElement(React.Fragment, null,
React.createElement("label", { className: `propertygrid-editor-displayName ${data.isRequired ? ' dx-field-label-required' : ''}`, title: data.labelAttributes.title, htmlFor: data.labelAttributes.for ?? undefined, "data-dx-for": data.labelAttributes['data-dx-for'] ?? undefined, style: { fontWeight: data.isPropertyModified ? 'Bold' : '' }, "data-bind": data.textToSearch ? `searchHighlighting: { text: displayName, textToSearch: ${data.textToSearch} }` : undefined }, !data.textToSearch ? data.displayName : undefined),
data.editorDescriptionAddon && React.createElement("div", { className: "propertygrid-editor-description", ref: buttonWithTemplateRef })));
};
const EditorBase = ({ data }) => {
const accordionRef = React.useRef();
useDxAccordion(accordionRef, data);
const isResolved = (newVal) => data.setIsRendered(newVal);
return (React.createElement("div", { className: "dx-editor", hidden: !data.visible },
React.createElement("div", { className: "dx-group", ref: accordionRef },
React.createElement("div", { className: "dx-editor-header" },
React.createElement("div", { className: `dx-field ${data.isComplexEditor ? 'dxrd-complex-editor dxrd-accessibility-accordion-trigger dx-accessibility-focus-border-accented' : ''}`, role: "treeitem", id: data.isComplexEditor ? data.headerId : undefined, "aria-owns": data.isComplexEditor ? data.contentId : undefined, "aria-expanded": data.isComplexEditor ? (data.alwaysShow || !data.collapsed ? 'true' : 'false') : undefined },
React.createElement("div", { className: `dx-field-label dx-accordion-header dxd-text-primary ${data.templateName === 'dx-emptyHeader' ? 'dx-accordion-empty' : ''}`, style: { paddingLeft: data.padding['padding-left'] + 'px' } }, data.isComplexEditor ? React.createElement(GroupHeader, { data: data }) : React.createElement(EditorLabel, { data: data })),
React.createElement("div", { className: `dx-field-value ${data.isPropertyHighlighted ? 'dxd-border-accented' : ''}` }, data.templateName !== 'dx-emptyHeader' && React.createElement(LazyTemplate, { isResolved: isResolved, template: data.templateName, data: data })))),
data.isComplexEditor && (React.createElement("div", { className: "dx-editor-content dx-accordion-content", role: "group", "aria-labelledby": data.headerId, id: data.contentId, "aria-hidden": !data.alwaysShow && data.collapsed ? 'true' : 'false' }, data.editorCreated && React.createElement(Template, { template: data.contentTemplateName, data: data }))))));
};
export default EditorBase;