Specifying Typescript specific prop types

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 (
     <div className="report-container">
       <div className="report" ref={reportRef} />
-      <button onClick={getMyConfiguraionFromServer}>Get config from AJAX call</button>
+      <button onClick={getMyConfigurationFromServer}>Get config from AJAX call</button>
     </div>
   );
 };

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",

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<Embed | null>(null);
 
   const setEmbed = (embedDivRef: any, embedConfig: Config): void => {
@@ -54,7 +56,7 @@ function _useReport(
 function useReport(): UseReport {
   const [report, _setEmbedInstance] = useState<Embed | null>(null);
 
-  const embed = (ref: any, config: Config): void => {
+  const embed = (ref: any, config: ConfigProps): void => {
     const embedConfig = createEmbedConfigBasedOnEmbedType(config);
     const errors = validateConfig(embedConfig);
     if (!errors || errors.length === 0) {
@@ -75,7 +77,7 @@ function useBootstrap(): UseBootstrap {
   const [isBotstrapped, setIsBootstrapped] = useState<Boolean>(false);
   const [report, _setEmbedInstance] = useState<Embed | null>(null);
 
-  const embed = (ref: any, config: Config): void => {
+  const embed = (ref: any, config: ConfigProps): void => {
     if(isBotstrapped) {
       const embedConfig = createEmbedConfigBasedOnEmbedType(config);
       const errors = validateConfig(embedConfig);
@@ -92,7 +94,7 @@ function useBootstrap(): UseBootstrap {
     }
   };
 
-  const bootstrap = (ref: any, config: Config) => {
+  const bootstrap = (ref: any, config: ConfigProps) => {
     const bootstrapConfig = createEmbedConfigBasedOnEmbedType(config);
     if (validateBootrapConfig(bootstrapConfig)) {
       window.powerbi.bootstrap(ref.current, bootstrapConfig);

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;