@grapecity/activereports-react
Version:
ActiveReportsJS components for React
272 lines (271 loc) • 9.61 kB
TypeScript
import { Component } from 'react';
import * as viewerNs from '@grapecity/activereports/reportviewer';
import { DocumentLoadEventArgs, ReportLoadEventArgs, LoadResult, SearchResult, SearchStatus, SearchOptions, CancellationToken, ExportResult, FontDescriptor } from '@grapecity/activereports/reportviewer';
import { Rdl, rdlxParams } from '@grapecity/activereports/core';
export type { DocumentLoadEventArgs, ReportLoadEventArgs, LoadResult, SearchResult, SearchStatus };
type ParameterVariant = rdlxParams.ParameterVariant;
export type { ParameterVariant };
export type { ExportResult, FontDescriptor };
export type { SearchOptions, CancellationToken };
/** Settings for component initialization */
export type OpenReportInfo = {
/** Report URI to be loaded into viewer. */
Uri?: string;
/** Report parameters */
Params?: {
[name: string]: rdlxParams.ParameterVariant[];
};
};
export type Props = {
/**
* Set exports which should be displayed in export panel when export plugins attached to viewer.
*
* ```javascript
* viewer.availableExports = [''] //disable all loaded export modules
* viewer.availableExports = ['pdf'] //filters out any export formats other than PDF
* viewer.availableExports = [] //enable all loaded export modules
* ```
*/
availableExports?: string[];
/**
* Gets or sets mouse mode in viewer. Available values are: **Pan | Selection**.
*
* ```javascript
* viewer.mouseMode = "pan";
* ```
*/
mouseMode?: viewerNs.ViewerMouseMode;
/**
* Gets or sets viewer render mode. Available values are: **Galley** | **Paginated**
*
* ```javascript
* <Viewer renderMode = 'Galley'.../>
* ```
*/
renderMode?: viewerNs.ViewerRenderMode;
/**
* Gets or sets viewer viewMode.
*
* ```javascript
* <Viewer viewMode = 'continuous'... />
* ```
*/
viewMode?: viewerNs.ViewerViewMode | viewerNs.ViewMode;
/**
* Gets or sets current zoom value. Zoom value could be specified as factor. Valid values:
* - **from 0 up to 3** where 0.5 indicate 50% and 3 = 300%;
* - const values **'FitToWidth' | 'FitPage'** (case insensitive)
*
* ```javascript
* var currentZoom = viewer.zoom; //by default 1 (100%)
* //now set mode to Fit to Width
* viewer.zoom = 'FitToWidth';
* //now verify value
* var newValue = viewer.zoom;
* //newValue will be equal to FitToWidth
* ```
*/
zoom?: viewerNs.ViewerZoomMode;
/** Change viewer mode to fullscreen. */
fullscreen?: boolean;
/** Toggle toolbar visibility (hide or show it). */
toolbarVisible?: boolean;
/** Toggle sidebar panel(hide or show it). In case if no parameter passed works as toggle. */
sidebarVisible?: boolean;
/** Layout of panels bar. Cannot be changed on the fly. */
panelsLayout?: viewerNs.PanelsLocation;
/** Parameters panel location. */
parameterPanelLocation?: viewerNs.ParameterPanelLocation;
/** Parameters panel behaviour. */
showParametersOnOpen?: viewerNs.ShowParametersOnOpen;
/** Enables report data memoization if set to "true". */
memoizeData?: boolean;
/** Initial toolbar layout. Cannot be changed on the fly. */
toolbarLayout?: viewerNs.ToolbarLayout;
/** UI Language. Import localization package first. Cannot be changed on the fly. */
language?: string;
/** UI theme */
theme?: viewerNs.UITheme;
/** Initial UI themes settings */
themeConfig?: viewerNs.UIThemeConfig;
/** Export settings. Cannot be changed on the fly. */
exportsSettings?: Record<string, viewerNs.ExportSettings>;
/** Sets the report to open on component load.
*
* ```javascript
* <Viewer report={{ Uri: "data-handlers/products" }} />
* ```
*/
report?: OpenReportInfo;
/**
* Sets the handler for documentLoaded event which occurs once document is fully rendered in viewer. Also works on refresh.
*/
documentLoaded?: (args: DocumentLoadEventArgs) => void;
/**
* Sets the handler for reportLoaded event which occurs once report is loaded in viewer. Doesn't account for drill through reports.
*/
reportLoaded?: (args: ReportLoadEventArgs) => void;
/**
* Sets error handler for viewer. Allow user to override existing and not to show error pane if user wants to customize error output.
*
* ```javascript
* type ErrorMessage = {
* severity: "error" | "warn" | "info" | "debug";
* message: string,
* details: string);
*
* function handler(error: ErrorMessage){
* console.log(error.message);
* return true; // return true if you don't want to show this error in viewer's error pane
* }
*
*
* <Viewer errorHandler={handler}...
* ```
*/
errorHandler?: viewerNs.Viewer['errorHandler'];
};
export type IReport = Rdl.Report | string;
export declare class Viewer extends Component<Props, {}> {
private _host;
private _viewer;
componentDidMount(): void;
private areDeepEqual;
componentDidUpdate(prevProps: Props): void;
private applyProps;
/**
* Resets current viewer document
*/
/**
* 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: IReport, settings?: Partial<viewerNs.ReportSettings>): Promise<LoadResult>;
/**
* 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: string, settings: Record<string, string | boolean | number>, params?: {
cancel?: () => boolean;
}): Promise<ExportResult>;
/**
* Prints currently displayed report.
*
* ```javascript
* viewer.print();
* ```
*/
print(): void;
/** Gets the viewer component instance. */
get Viewer(): viewerNs.Viewer;
/**
* Gets current page number (1-based). Returns 0 if no document loaded.
*
* ```javascript
* var pageNumber = viewer.currentPage;
* ```
* */
get currentPage(): number;
/**
* Gets the total number of pages available in report.
*
* ```javascript
* var totalPages = viewer.pageCount;
* ```
* */
get pageCount(): number;
/** Provides access to the "history" API. */
get history(): viewerNs.HistoryApi | null;
/** Gets the toolbar API */
get toolbar(): viewerNs.Toolbar | null;
/**
* Navigates to the first page.
*
* ```javascript
* viewer.goToFirstPage();
* ```
* */
goToFirstPage(): void;
/**
* Navigates to the previous page.
*
* ```javascript
* viewer.goToPrevPage();
* ```
* */
goToPrevPage(): void;
/**
* Navigates to the next page.
*
* ```javascript
* viewer.goToNextPage();
* ```
* */
goToNextPage(): void;
/**
* Navigates to the last page.
*
* ```javascript
* viewer.goToLastPage();
* ```
* */
goToLastPage(): void;
/**
* Navigates to the specified page (starting from 1).
*
* ```javascript
* viewer.goToPage(3); //will navigate to 3d page
* ```
* */
goToPage(pageNumber: number): void;
/**
* Performs backToParent action which will return user to parent report.
*
* ```javascript
* viewer.backToParent();
* ```
*/
backToParent(): void;
/**
* Performs refresh operation in report (re-render report).
*
* ```javascript
* viewer.refresh();
* ```
* */
refresh(): void;
/** Gets **true** if backToParent command is applicable to current document. */
canBackToParent(): boolean;
/**
* Performs search operation in currently rendered report. Allows you to create your own custom search pane.
*/
search(options: SearchOptions, resultFn: (result: SearchResult) => void, progressFn?: (progress: {
pageIndex: number;
pageCount: number | null;
}) => void, cancel?: CancellationToken): Promise<SearchStatus>;
/**
* Highlights the search result returned by a search method.
*/
highlight(result: SearchResult | null): Promise<void>;
render(): JSX.Element;
}