@grapecity/activereports-react
Version:
ActiveReportsJS components for React
228 lines (227 loc) • 9.6 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 '@grapecity/activereports/reportviewer';
/// Wrapper component for ARJS Viewer
export class Viewer extends Component {
constructor() {
super(...arguments);
this._host = React.createRef();
}
componentDidMount() {
if (!this._viewer) {
this._viewer = new viewerNs.Viewer(this._host.current, {
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,
});
}
const viewer = this._viewer;
this.applyProps({}, this.props, 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] }));
viewer.open(report, { ReportParams: params });
}
viewer.documentLoaded.register(e => { var _a, _b; return (_b = (_a = this.props).documentLoaded) === null || _b === void 0 ? void 0 : _b.call(_a, e); });
viewer.reportLoaded.register(e => { var _a, _b; return (_b = (_a = this.props).reportLoaded) === null || _b === void 0 ? void 0 : _b.call(_a, e); });
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; };
}
areDeepEqual(p1, p2) {
return JSON.stringify(p1) === JSON.stringify(p2);
}
componentDidUpdate(prevProps) {
if (this._viewer == null)
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");
}
}
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);
}
/**
* 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%" } });
}
}