Changes to import IFrameDialog correctly from the library

Author: AJIXuMuK

docs/documentation/docs/controls/IFrameDialog.md

@@ -15,7 +15,7 @@ Here is an example of the control in action:
 import { IFrameDialog } from "@pnp/spfx-controls-react/lib/IFrameDialog";
 ```
 
-- Use the `IFrameDialog` control in your code as follows:
+- Use the `IFrameDialog` control in your code as follows (`this._onIframeLoaded` and `this._onDialogDismiss` are methods that should be implemented if you want to execute some actions when the iframe content is loaded and dialog should be closed respectively):
 
 ```TypeScript
 <IFrameDialog 

src/common/utilities/FieldRendererHelper.ts

@@ -9,7 +9,6 @@ import { SPField } from '@microsoft/sp-page-context';
 import { IContext } from '../Interfaces';
 import { GeneralHelper } from './GeneralHelper';
 import { FieldLookupRenderer, IFieldLookupClickEventArgs } from '../../controls/fields/fieldLookupRenderer/FieldLookupRenderer';
-import IFrameDialog from '../../controls/iFrameDialog/IFrameDialog';
 import { FieldUrlRenderer } from '../../controls/fields/fieldUrlRenderer/FieldUrlRenderer';
 import { FieldTaxonomyRenderer } from '../../controls/fields/fieldTaxonomyRenderer/FieldTaxonomyRenderer';
 import { IFieldRendererProps } from '../../controls/fields/fieldCommon/IFieldRendererProps';

src/controls/fields/fieldLookupRenderer/FieldLookupRenderer.tsx

@@ -7,7 +7,7 @@ import { IFieldRendererProps } from '../fieldCommon/IFieldRendererProps';
 import * as appInsights from '../../../common/appInsights';
 
 import styles from './FieldLookupRenderer.module.scss';
-import IFrameDialog from '../../iFrameDialog/IFrameDialog';
+import { IFrameDialog } from '../../iFrameDialog/IFrameDialog';
 import { SPHelper } from '../../../Utilities';
 import { IContext } from '../../../Common';
 

src/controls/iFrameDialog/IFrameDialog.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { Dialog, IDialogProps } from 'office-ui-fabric-react';
-import IFrameDialogContent from './IFrameDialogContent';
+import { IFrameDialogContent } from './IFrameDialogContent';
 import * as appInsights from '../../common/appInsights';
 
 export interface IFrameDialogProps extends IDialogProps {
@@ -12,7 +12,7 @@ export interface IFrameDialogProps extends IDialogProps {
   /**
    * iframe's onload event handler
    */
-  iframeOnLoad?: (iframe: any) => {};
+  iframeOnLoad?: (iframe: any) => void;
   /**
    * iframe width
    */
@@ -29,7 +29,7 @@ export interface IFrameDialogState {
 /**
  * Dialog component to display content in iframe
  */
-export default class IFrameDialog extends React.Component<IFrameDialogProps, IFrameDialogState> {
+export class IFrameDialog extends React.Component<IFrameDialogProps, IFrameDialogState> {
 
   public constructor(props: IFrameDialogProps, state: IFrameDialogState) {
     super(props, state);

src/controls/iFrameDialog/IFrameDialogContent.tsx

@@ -6,15 +6,15 @@ import styles from './IFrameDialogContent.module.scss';
 export interface IIFrameDialogContentProps {
     url: string;
     close: () => void;
-    iframeOnLoad?: (iframe: any) => {};
+    iframeOnLoad?: (iframe: any) => void;
     width: string;
     height: string;
 }
 
 /**
  * IFrame Dialog content
  */
-export default class IFrameDialogContent extends React.Component<IIFrameDialogContentProps, {}> {
+export class IFrameDialogContent extends React.Component<IIFrameDialogContentProps, {}> {
     private _iframe: any;
 
     constructor(props: IIFrameDialogContentProps) {

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -4,11 +4,15 @@ import { IControlsTestProps, IControlsTestState } from './IControlsTestProps';
 import { escape } from '@microsoft/sp-lodash-subset';
 import { FileTypeIcon, IconType, ApplicationType, ImageSize } from '../../../FileTypeIcon';
 import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/components/Dropdown';
+import { PrimaryButton } from 'office-ui-fabric-react/lib/components/Button';
+import { DialogType } from 'office-ui-fabric-react/lib/components/Dialog';
 import { Placeholder } from '../../../Placeholder';
 import { ListView, IViewField, SelectionMode, GroupOrder, IGrouping } from '../../../ListView';
 import { SPHttpClient } from '@microsoft/sp-http';
 import { SiteBreadcrumb } from '../../../SiteBreadcrumb';
 import { WebPartTitle } from '../../../WebPartTitle';
+import { IFrameDialog } from '../../../IFrameDialog';
+import { Environment, EnvironmentType } from '@microsoft/sp-core-library';
 
 /**
  * Component that can be used to test out the React controls from this project
@@ -19,7 +23,8 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
 
     this.state = {
       imgSize: ImageSize.small,
-      items: []
+      items: [],
+      iFrameDialogOpened: false
     };
 
     this._onIconSizeChange = this._onIconSizeChange.bind(this);
@@ -120,13 +125,21 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
 
     // Specify the fields on which you want to group your items
     // Grouping is takes the field order into account from the array
-    const groupByFields: IGrouping[] = [{name: "ListItemAllFields.City", order: GroupOrder.ascending }, {name: "ListItemAllFields.Country.Label", order: GroupOrder.descending}];
+    const groupByFields: IGrouping[] = [{ name: "ListItemAllFields.City", order: GroupOrder.ascending }, { name: "ListItemAllFields.Country.Label", order: GroupOrder.descending }];
+
+    let iframeUrl: string = '/temp/workbench.html';
+    if (Environment.type === EnvironmentType.SharePoint) {
+      iframeUrl = '/_layouts/15/sharepoint.aspx';
+    }
+    else if (Environment.type === EnvironmentType.ClassicSharePoint) {
+      iframeUrl = this.context.pageContext.web.serverRelativeUrl;
+    }
 
     return (
       <div className={styles.controlsTest}>
         <WebPartTitle displayMode={this.props.displayMode}
-                      title={this.props.title}
-                      updateProperty={this.props.updateProperty} />
+          title={this.props.title}
+          updateProperty={this.props.updateProperty} />
 
         <div className={styles.container}>
           <div className={`ms-Grid-row ms-bgColor-neutralLight ms-fontColor-neutralDark ${styles.row}`}>
@@ -157,6 +170,25 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
                 <FileTypeIcon type={IconType.image} size={this.state.imgSize} application={ApplicationType.Excel} />
                 <FileTypeIcon type={IconType.image} size={this.state.imgSize} />
               </div>
+              <div className="ms-font-m">iframe dialog tester:
+                <PrimaryButton
+                  text="Open iframe Dialog"
+                  onClick={() => { this.setState({ iFrameDialogOpened: true }); }} />
+                <IFrameDialog
+                  url={iframeUrl}
+                  iframeOnLoad={(iframe: any) => { console.log('iframe loaded'); }}
+                  hidden={!this.state.iFrameDialogOpened}
+                  onDismiss={() => { this.setState({ iFrameDialogOpened: false }); }}
+                  modalProps={{
+                    isBlocking: true
+                  }}
+                  dialogContentProps={{
+                    type: DialogType.close,
+                    showCloseButton: true
+                  }}
+                  width={'570px'}
+                  height={'315px'} />
+              </div>
             </div>
           </div>
         </div>

src/webparts/controlsTest/components/IControlsTestProps.ts

@@ -13,4 +13,5 @@ export interface IControlsTestProps {
 export interface IControlsTestState {
   imgSize: ImageSize;
   items: any[];
+  iFrameDialogOpened?: boolean;
 }