@mescius/activereportsjs-react
Version:
ActiveReportsJS components for React
286 lines (285 loc) • 11 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import * as React from 'react';
import { Component } from 'react';
import * as viewerNs from '@mescius/activereportsjs/reportviewer';
/// Wrapper component for ARJS Viewer
export class Viewer extends Component {
constructor() {
super(...arguments);
this._host = React.createRef();
}
componentDidMount() {
this.ensureViewerInitialized();
if (!this._viewer)
return;
this.applyProps({}, this.props, this._viewer);
const { report: { Uri: report = '', Params: reportParams = {} } = {} } = this.props;
if (report !== undefined && report !== '') {
const params = [];
Object.keys(reportParams).forEach((key) => params.push({ Name: key, Value: reportParams[key] }));
this._viewer.open(report, { ReportParams: params });
}
}
areDeepEqual(p1, p2) {
return JSON.stringify(p1) === JSON.stringify(p2);
}
componentDidUpdate(prevProps) {
const viewerCreated = this.ensureViewerInitialized();
if (this._viewer == null)
return;
if (viewerCreated) {
this.applyProps({}, this.props, this._viewer);
const { report: { Uri: report = '', Params: reportParams = {} } = {} } = this.props;
if (report !== undefined && report !== '') {
const params = [];
Object.keys(reportParams).forEach((key) => params.push({ Name: key, Value: reportParams[key] }));
this._viewer.open(report, { ReportParams: params });
}
return;
}
this.applyProps(prevProps, this.props, this._viewer);
if (!this.areDeepEqual(prevProps.report, this.props.report)) {
console.warn('Changing initial report is ignored');
}
if (prevProps.language !== this.props.language) {
console.warn('Changing language is ignored');
}
}
componentWillUnmount() {
var _a;
(_a = this._viewer) === null || _a === void 0 ? void 0 : _a.dispose();
}
applyProps(prevProps, props, viewer) {
const { availableExports, mouseMode, renderMode, viewMode, zoom, sidebarVisible, toolbarVisible, fullscreen, showParametersOnOpen, theme } = props;
if (availableExports !== undefined && availableExports !== prevProps.availableExports)
viewer.availableExports = availableExports;
if (mouseMode !== undefined && mouseMode !== prevProps.mouseMode)
viewer.mouseMode = mouseMode;
if (renderMode !== undefined && renderMode !== prevProps.renderMode)
viewer.renderMode = renderMode;
if (viewMode !== undefined && viewMode !== prevProps.viewMode)
viewer.viewMode = viewMode;
if (zoom !== undefined && zoom !== prevProps.zoom)
viewer.zoom = zoom;
if (showParametersOnOpen !== undefined && showParametersOnOpen !== prevProps.showParametersOnOpen)
viewer.showParametersOnOpen = showParametersOnOpen;
if (theme !== undefined && theme !== prevProps.theme)
viewer.theme = theme;
if (sidebarVisible !== undefined && sidebarVisible !== prevProps.sidebarVisible)
viewer.toggleSidebar(!!sidebarVisible);
if (toolbarVisible !== undefined && toolbarVisible !== prevProps.toolbarVisible)
viewer.toggleToolbar(!!toolbarVisible);
if (fullscreen !== undefined && fullscreen !== prevProps.fullscreen)
viewer.toggleFullScreen(!!fullscreen);
}
ensureViewerInitialized() {
var _a;
const host = this._host.current;
if (!host)
return false;
const hasShadowChildren = !!host.shadowRoot && host.shadowRoot.childElementCount > 0;
const hostEmpty = host.childElementCount === 0 && !hasShadowChildren;
const shouldCreate = !this._viewer || hostEmpty;
if (!shouldCreate) {
return false;
}
(_a = this._viewer) === null || _a === void 0 ? void 0 : _a.dispose();
this._viewer = new viewerNs.Viewer(host, {
language: this.props.language,
themeConfig: this.props.themeConfig,
ExportsSettings: this.props.exportsSettings,
PanelsLayout: this.props.panelsLayout,
ParameterPanelLocation: this.props.parameterPanelLocation,
memoizeData: this.props.memoizeData,
ToolbarLayout: this.props.toolbarLayout,
animations: this.props.animations,
});
this._viewer.documentLoaded.register((e) => { var _a, _b; return (_b = (_a = this.props).documentLoaded) === null || _b === void 0 ? void 0 : _b.call(_a, e); });
this._viewer.reportLoaded.register((e) => { var _a, _b; return (_b = (_a = this.props).reportLoaded) === null || _b === void 0 ? void 0 : _b.call(_a, e); });
this._viewer.errorHandler = (err) => { var _a, _b, _c; return (_c = (_b = (_a = this.props).errorHandler) === null || _b === void 0 ? void 0 : _b.call(_a, err)) !== null && _c !== void 0 ? _c : false; };
return true;
}
/**
* Resets current viewer document
*/
// public async resetDocument(): Promise<void> { return this._viewer.resetDocument(); }
/**
* Opens report from file or as definition (json string)).
*
* ```javascript
* var viewer = new ActiveReports.Viewer(#viewerPlace);
* viewer.open('report.json');
* ```
*
* @param report The report template. Can be report URI, or report definition, or instance of PageReport class.
* @param settings Additional settings for report (name, parameters).
*/
open(report, settings) {
if (this._viewer == null)
throw new Error('Viewer is not initialized yet');
return this._viewer.open(report, settings);
}
/**
* Exports currently displayed report to specified output format. Returns object which contains result data as blob object | string and download function. So you could either use this blob object or download file immediately. Please note that you can specify settings in PDF export as plain list (like **{title: 'Title', author: 'Author Name', ownerPassword: '1'}** etc...
*
* ```javascript
* var options = {filename:"Invoice List"};
* var cancelCallback = function(){
* return false; // continue export. Return true to cancel export process
* }
* viewer.export('pdf', options, {cancel: cancelCallback }).then(result => doSmthWithBlob(result.data));
* //or you can download file
* viewer.export('pdf', options, {cancel: cancelCallback }).then(result => result.download('Invoice List'));
* ```
*
* @param format Export format identifier. One of 'pdf', 'xlsx', 'html', 'tabular-data'.
* @param settings Format specific export settings.
* @param params Additional export customization.
*/
export(format, settings, params) {
return __awaiter(this, void 0, void 0, function* () {
if (this._viewer == null)
throw new Error('Viewer is not initialized yet');
return this._viewer.export(format, settings, params);
});
}
/**
* Prints currently displayed report.
*
* ```javascript
* viewer.print();
* ```
*/
print() {
this._viewer.print();
}
/** Gets the viewer component instance. */
get Viewer() {
return this._viewer;
}
/**
* Gets current page number (1-based). Returns 0 if no document loaded.
*
* ```javascript
* var pageNumber = viewer.currentPage;
* ```
* */
get currentPage() {
return this._viewer ? this._viewer.currentPage : -1;
}
/**
* Gets the total number of pages available in report.
*
* ```javascript
* var totalPages = viewer.pageCount;
* ```
* */
get pageCount() {
return this._viewer ? this._viewer.pageCount : -1;
}
/** Provides access to the "history" API. */
get history() {
return this._viewer ? this._viewer.history : null;
}
/** Gets the toolbar API */
get toolbar() {
return this._viewer ? this._viewer.toolbar : null;
}
/**
* Navigates to the first page.
*
* ```javascript
* viewer.goToFirstPage();
* ```
* */
goToFirstPage() {
this._viewer.goToFirstPage();
}
/**
* Navigates to the previous page.
*
* ```javascript
* viewer.goToPrevPage();
* ```
* */
goToPrevPage() {
this._viewer.goToPrevPage();
}
/**
* Navigates to the next page.
*
* ```javascript
* viewer.goToNextPage();
* ```
* */
goToNextPage() {
this._viewer.goToNextPage();
}
/**
* Navigates to the last page.
*
* ```javascript
* viewer.goToLastPage();
* ```
* */
goToLastPage() {
this._viewer.goToLastPage();
}
/**
* Navigates to the specified page (starting from 1).
*
* ```javascript
* viewer.goToPage(3); //will navigate to 3d page
* ```
* */
goToPage(pageNumber) {
this._viewer.goToPage(pageNumber);
}
/**
* Performs backToParent action which will return user to parent report.
*
* ```javascript
* viewer.backToParent();
* ```
*/
backToParent() {
this._viewer.backToParent();
}
/**
* Performs refresh operation in report (re-render report).
*
* ```javascript
* viewer.refresh();
* ```
* */
refresh() {
this._viewer.refresh();
}
/** Gets **true** if backToParent command is applicable to current document. */
canBackToParent() {
return this._viewer.canBackToParent();
}
/**
* Performs search operation in currently rendered report. Allows you to create your own custom search pane.
*/
search(options, resultFn, progressFn, cancel) {
return this._viewer.search(options, resultFn, progressFn, cancel);
}
/**
* Highlights the search result returned by a search method.
*/
highlight(result) {
return this._viewer.highlight(result);
}
render() {
return React.createElement("div", { ref: this._host, style: { height: '100%' } });
}
}