devexpress-reporting-react 24.1.3 → 24.1.5

package/dx-report-designer/DxReportDesigner.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-type DxReportDesignerPropsType = {
+import { JSReportDesigner } from 'devexpress-reporting/dx-reportdesigner';
+export type DxReportDesignerProps = {
     reportUrl?: string;
     height?: string;
     width?: string;
@@ -7,5 +8,8 @@ type DxReportDesignerPropsType = {
     developmentMode?: boolean;
     children?: React.ReactNode | React.ReactNode[];
 };
-declare const DxReportDesigner: React.FC<DxReportDesignerPropsType>;
+export type DxReportDesignerRef = {
+    instance: () => JSReportDesigner;
+};
+declare const DxReportDesigner: React.ForwardRefExoticComponent<DxReportDesignerProps & React.RefAttributes<DxReportDesignerRef>>;
 export default DxReportDesigner;

package/dx-report-designer/DxReportDesigner.js

@@ -12,21 +12,33 @@ const validChildComponents = {
     'requestOptions': { component: RequestOptions },
     'designerModelSettings': { component: DesignerModelSettings, children: designerModelSettingsValidChildren },
 };
-const DxReportDesigner = (props) => {
+const DxReportDesigner = React.forwardRef(({ reportUrl, ...props }, ref) => {
     const designerRef = React.useRef(null);
+    const [designerBinding, setDesignerBinding] = React.useState(null);
+    React.useImperativeHandle(ref, () => ({
+        instance() {
+            return designerBinding?.sender;
+        }
+    }), [designerBinding]);
     React.useEffect(() => {
-        const options = OptionsManager.getControlOptions(props, DxReportDesigner.propTypes, DxReportDesignerDefaultProps, validChildComponents);
+        if (designerBinding) {
+            designerBinding.sender.OpenReport(reportUrl);
+        }
+    }, [reportUrl]);
+    React.useEffect(() => {
+        const options = OptionsManager.getControlOptions({ ...props, reportUrl }, DxReportDesigner.propTypes, DxReportDesignerDefaultProps, validChildComponents);
         const callbacks = options.callbacks;
         options.callbacks = { designer: {}, preview: {} };
-        const binding = new JSReportDesignerBinding(options, OptionsManager.getEventRaiser(callbacks, () => binding.sender));
+        const binding = new JSReportDesignerBinding(options, OptionsManager.getEventRaiser(callbacks, () => binding?.sender));
         binding.applyBindings(designerRef.current);
+        setDesignerBinding(binding);
         return () => {
             designerRef.current && ko.cleanNode(designerRef.current);
         };
-    }, [props]);
+    }, []);
     return (React.createElement("div", { ref: designerRef, className: props.cssClass, style: { width: props.width || DxReportDesignerDefaultProps.width, height: props.height || DxReportDesignerDefaultProps.height } },
         React.createElement("div", { "data-bind": "dxReportDesigner: $data" })));
-};
+});
 DxReportDesigner.displayName = 'DxReportDesigner';
 DxReportDesigner.propTypes = {
     height: PropTypes.string,

package/dx-report-designer/index.d.ts

@@ -1,4 +1,4 @@
-import DxReportDesigner from './DxReportDesigner';
+import DxReportDesigner, { DxReportDesignerRef, DxReportDesignerProps } from './DxReportDesigner';
 import Callbacks from './options/Callbacks';
 import DataSourceSettings from './options/DataSourceSettings';
 import DesignerModelSettings from './options/DesignerModelSettings';
@@ -7,4 +7,5 @@ import RequestOptions from './options/RequestOptions';
 import WizardSettings from './options/WizardSettings';
 import ParameterEditingSettings from './options/ParameterEditingSettings';
 export { Callbacks, DataSourceSettings, DesignerModelSettings, PreviewSettings, RequestOptions, WizardSettings, ParameterEditingSettings, DxReportDesigner };
+export type { DxReportDesignerRef, DxReportDesignerProps };
 export default DxReportDesigner;

package/dx-report-viewer/DxReportViewer.js

@@ -52,7 +52,8 @@ const DxReportViewer = React.forwardRef(({ reportUrl, ...props }, ref) => {
             disposeViewModelSubscription = viewModel?._viewModelEvents?.on(ViewModelChangedEvent, () => setViewModel({ ...viewModel }));
         };
         const controlOptions = OptionsManager.getControlOptions({ ...props, reportUrl }, DxReportViewer.propTypes, DxReportViewerDefaultProps, validChildComponents);
-        const binding = new JSReportViewerBinding({ ...controlOptions, callbacks: {} }, OptionsManager.getEventRaiser(controlOptions.callbacks, () => binding.sender), false);
+        let binding;
+        binding = new JSReportViewerBinding({ ...controlOptions, callbacks: {} }, OptionsManager.getEventRaiser(controlOptions.callbacks, () => binding?.sender), false);
         binding.applyBindings(viewerRef.current);
         setViewerBinding(binding);
         const model = binding.sender;
@@ -72,7 +73,7 @@ const DxReportViewer = React.forwardRef(({ reportUrl, ...props }, ref) => {
             });
         };
     }, []);
-    return (React.createElement(TemplateEngineProvider, { templateEngine: props.templateEngine },
+    return (React.createElement(TemplateEngineProvider, { templateEngine: props.templateEngine ?? new TemplateEngine() },
         React.createElement(AccessibilitySettingsProvider, { value: { accessibilityCompliant: !!viewModel?.accessibilityCompliant } },
             React.createElement("div", { ref: viewerRef, className: props.cssClass, style: { width: props.width || DxReportViewerDefaultProps.width, height: props.height || DxReportViewerDefaultProps.height } },
                 React.createElement("div", { className: "dx-designer" }, !!viewModel && React.createElement(Template, { template: "dx-designer", data: viewModel }))))));

package/dx-report-viewer/components/analytics/Widgets/Treelist/Treelist.js

@@ -1,17 +1,23 @@
 import React from 'react';
 import TreelistGroup from './TreelistGroup';
 import { initTreeListBinding } from '@devexpress/analytics-core/widgets/treelist/_binding';
+import { ViewModelChangedEvent } from '@devexpress/analytics-core/serializer/native/viewModels/viewModelGenerator';
 const Treelist = ({ options, ...delegatedProps }) => {
     const htmlRef = React.useRef();
     const [viewModel, setViewModel] = React.useState();
     React.useEffect(() => {
         if (!htmlRef.current)
             return () => { };
-        return initTreeListBinding({
+        const disposables = [];
+        disposables.push(initTreeListBinding({
             values: options,
             element: htmlRef.current,
-            createChildContext: (vm) => setViewModel(vm),
-        });
+            createChildContext: (vm) => {
+                disposables.push(vm?._viewModelEvents?.on(ViewModelChangedEvent, () => setViewModel({ ...vm })));
+                setViewModel({ ...vm });
+            },
+        }));
+        return () => disposables.forEach(disposable => disposable && disposable());
     }, [options, htmlRef.current]);
     return React.createElement("div", { ref: htmlRef, ...delegatedProps }, viewModel ? React.createElement(TreelistGroup, { data: viewModel }) : null);
 };

package/dx-report-viewer/components/core/TemplateEngineProvider/TemplateEngineProvider.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { TemplateEngine } from '../../../core/template-engine';
 export const TemplateEngineContext = React.createContext(null);
-const TemplateEngineProvider = ({ templateEngine, children }) => (React.createElement(TemplateEngineContext.Provider, { value: templateEngine ?? new TemplateEngine() }, children));
+const TemplateEngineProvider = ({ templateEngine, children }) => (React.createElement(TemplateEngineContext.Provider, { value: templateEngine }, children));
 export default TemplateEngineProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devexpress-reporting-react",
-  "version": "24.1.3",
+  "version": "24.1.5",
   "homepage": "https://www.devexpress.com/",
   "bugs": "https://www.devexpress.com/support/",
   "author": "Developer Express Inc.",
@@ -16,19 +16,19 @@
   "main": "./index.js",
   "dependencies": {
     "prop-types": "^15.8.1",
-    "devexpress-reporting": "24.1.3"
+    "devexpress-reporting": "24.1.5"
   },
   "peerDependencies": {
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.28",
-    "devextreme-react": "24.1.3",
+    "devextreme-react": "24.1.5",
     "react": "^18.0.28",
     "react-dom": "^18.0.28"
   },
   "devDependencies": {
     "shx": "^0.3.4",
     "typescript": "~5.0.4",
-    "@devexpress/analytics-core": "24.1.3"
+    "@devexpress/analytics-core": "24.1.5"
   },
   "scripts": {
     "prebuild": "npx shx rm -rf dist && npx shx mkdir dist && npx shx cp README.md dist/ && npx shx cp package.json dist/",