diff --git a/README.md b/README.md index aad281d..75ab784 100644 --- a/README.md +++ b/README.md @@ -190,7 +190,7 @@ const MyReport = ({ accessToken, embedUrl, embedId }) => { embedUrl: embedUrl, embedId: embedId, reportMode: "View", // "Edit" - permissions: "View", // "All" (when using "Edit" mode) + permissions: "Read", // "All" (when using "Edit" mode) extraSettings: { filterPaneEnabled: false, navContentPaneEnabled: false, @@ -305,7 +305,7 @@ const simulateAjaxCall = new Promise(function(resolve, reject) { embedUrl: "embedUrl", embedId: "embedId", reportMode: "View", // "Edit" - permissions: "View", // "All" (when using "Edit" mode) + permissions: "Read", // "All" (when using "Edit" mode) }); }); @@ -339,7 +339,7 @@ const MyReport = ({ accessToken, embedUrl, embedId }) => { return (
- +
); }; diff --git a/package.json b/package.json index 05b698a..d92807e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "powerbi-report-component", - "version": "2.6.0", + "version": "2.6.1", "description": "It's a minimalistic react component to embed a Microsoft PowerBI report, dashboard or tile into your react application.", "main": "lib/index.js", "types": "lib/index.d.ts", diff --git a/src/lib/hooks/useReport.ts b/src/lib/hooks/useReport.ts index 8a09e29..94a529f 100644 --- a/src/lib/hooks/useReport.ts +++ b/src/lib/hooks/useReport.ts @@ -5,18 +5,20 @@ import { createEmbedConfigBasedOnEmbedType, validateBootrapConfig } from '../utils/config'; -import { Config } from '../types'; +import { Config, ConfigProps } from '../types'; import { Embed } from 'embed'; -declare type UseReport = [any, (ref: any, config: Config) => void]; +declare type _UseReport = [any, (ref: any, config: Config) => void]; -declare type UseBootstrap = [any, (ref: any, config: Config) => void, (ref: any, config: Config) => void]; +declare type UseReport = [any, (ref: any, config: ConfigProps) => void]; + +declare type UseBootstrap = [any, (ref: any, config: ConfigProps) => void, (ref: any, config: ConfigProps) => void]; // powerbi object is global // used inside Embed.jsx has more logic tied to props of Embed. function _useReport( performOnEmbed: (report: any, reportRef?: any) => void -): UseReport { +): _UseReport { const [report, _setEmbedInstance] = useState(null); const setEmbed = (embedDivRef: any, embedConfig: Config): void => { @@ -54,8 +56,8 @@ function _useReport( function useReport(): UseReport { const [report, _setEmbedInstance] = useState(null); - const embed = (ref: any, config: Config): void => { - const embedConfig = createEmbedConfigBasedOnEmbedType(config); + const embed = (ref: any, config: ConfigProps): void => { + const embedConfig: Config = createEmbedConfigBasedOnEmbedType(config); const errors = validateConfig(embedConfig); if (!errors || errors.length === 0) { const _embed = window.powerbi.embed(ref.current, embedConfig as any); @@ -72,12 +74,12 @@ function useReport(): UseReport { function useBootstrap(): UseBootstrap { - const [isBotstrapped, setIsBootstrapped] = useState(false); + const [isBootstrapped, setIsBootstrapped] = useState(false); const [report, _setEmbedInstance] = useState(null); - const embed = (ref: any, config: Config): void => { - if(isBotstrapped) { - const embedConfig = createEmbedConfigBasedOnEmbedType(config); + const embed = (ref: any, config: ConfigProps): void => { + if(isBootstrapped) { + const embedConfig: Config = createEmbedConfigBasedOnEmbedType(config); const errors = validateConfig(embedConfig); if (!errors || errors.length === 0) { const _embed = window.powerbi.embed(ref.current, embedConfig as any); @@ -92,8 +94,8 @@ function useBootstrap(): UseBootstrap { } }; - const bootstrap = (ref: any, config: Config) => { - const bootstrapConfig = createEmbedConfigBasedOnEmbedType(config); + const bootstrap = (ref: any, config: ConfigProps) => { + const bootstrapConfig: Config = createEmbedConfigBasedOnEmbedType(config); if (validateBootrapConfig(bootstrapConfig)) { window.powerbi.bootstrap(ref.current, bootstrapConfig); setIsBootstrapped(true); diff --git a/src/lib/types.ts b/src/lib/types.ts index 1ff557f..9a420e1 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -1,6 +1,6 @@ export type ReportModes = 'View' | 'Edit' | 'Create'; -export type EmbedType = 'report' | 'dashboard' | 'tile'; +export type EmbedType = 'report' | 'dashboard' | 'tile' | 'visual'; export type TokenType = 'Aad' | 'Embed'; @@ -19,41 +19,33 @@ export interface IError { errorCode?: string; } -export interface TileProps { +interface CommonProps { + embedType: EmbedType; tokenType: TokenType; accessToken: string; embedUrl: string; - embedId: string; - dashboardId: string; + embedId?: string; style?: any; onLoad?: Function; +} + +export interface TileProps extends CommonProps { + dashboardId: string; onClick?: Function; } -export interface DashboardProps { - tokenType: TokenType; - accessToken: string; - embedUrl: string; - embedId: string; +export interface DashboardProps extends CommonProps { pageView: PageView; - style?: any; - onLoad?: Function; onTileClicked?: Function; } -export interface ReportProps { - tokenType: TokenType; - accessToken: string; - embedUrl: string; - embedId: string; +export interface ReportProps extends CommonProps { groupId?: string; permissions: Permissions; reportMode: ReportModes; pageName?: string; extraSettings?: any; - style?: any; datasetId?: string; - onLoad?: Function; onRender?: Function; onError?: Function; onButtonClicked?: Function; @@ -63,15 +55,9 @@ export interface ReportProps { onSave?: Function; } -export interface ReportVisualProps { - tokenType: TokenType; - accessToken: string; - embedUrl: string; - embedId: string; +export interface ReportVisualProps extends CommonProps { pageName: string; visualName: string; - style?: any; - onLoad?: Function; onRender?: Function; onSelectData?: Function; } @@ -93,6 +79,8 @@ export interface Config { dashboardId: string; } +export type ConfigProps = ReportProps | DashboardProps | TileProps | ReportVisualProps; + export interface Embed { config: Config; performOnEmbed: (report: any, reportRef?: any) => void; diff --git a/src/lib/utils/config.ts b/src/lib/utils/config.ts index bbb5eb1..f329096 100644 --- a/src/lib/utils/config.ts +++ b/src/lib/utils/config.ts @@ -8,6 +8,7 @@ import { IError, Config, ReportVisualProps, + ConfigProps } from '../types'; const createReportConfig = (props: ReportProps): Config => { @@ -126,7 +127,7 @@ const createReportVisualConfig = (props: ReportVisualProps): Config => { }); }; -const validateTypeConfig = (config: any): IError[] => { +const validateTypeConfig = (config: Config): IError[] => { switch (config.type) { case 'report': return pbi.models.validateReportLoad(config); @@ -148,28 +149,28 @@ const validateCreateReportConfig = (config: any): IError[] => { return pbi.models.validateCreateReport(config); }; -const validateConfig = (config: any): IError[] => { +const validateConfig = (config: Config): IError[] => { const isCreateMode = config.reportMode === 'Create'; return isCreateMode ? validateCreateReportConfig(config) : validateTypeConfig(config); }; -const validateBootrapConfig = (config: any): boolean => { +const validateBootrapConfig = (config: Config): boolean => { return !!config.type && !!config.tokenType; }; -const createEmbedConfigBasedOnEmbedType = (config: any): Config => { +const createEmbedConfigBasedOnEmbedType = (config: ConfigProps): Config => { const { embedType } = config; switch (embedType) { case 'report': - return createReportConfig(config); + return createReportConfig(config as ReportProps); case 'dashboard': - return createDashboardConfig(config); + return createDashboardConfig(config as DashboardProps); case 'tile': - return createTileConfig(config); + return createTileConfig(config as TileProps); case 'visual': - return createReportVisualConfig(config); + return createReportVisualConfig(config as ReportVisualProps); default: throw Error('Wrong embed type!'); }