Merge branch 'IFramePanel' of https://github.com/spdavid/sp-dev-fx-controls-react into spdavid-IFramePanel

Author: estruyf

docs/documentation/docs/assets/IFramePanel.png

@@ -0,0 +1,52 @@
+# IFramePanel control
+
+This control renders a Panel with an iframe as a content.
+ 
+Here is an example of the control in action:
+
+![IFrameDialog control](../assets/IFramePanel.png)
+
+## How to use this control in your solutions
+
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../#getting-started) page for more information about installing the dependency.
+- Import the following modules to your component:
+
+```TypeScript
+import { IFramePanel } from "@pnp/spfx-controls-react/lib/IFramePanel";
+```
+
+- The `IFramePanel` uses the [Office Fabric UI implemenation of the panel](https://developer.microsoft.com/en-us/fabric#/components/panel). The properties of this control inherit the panel properties.
+
+- Use the `IFramePanel` control in your code as follows (`this._onIframeLoaded` and `this._onDismiss` 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
+  <IFramePanel
+      url={this.state.iFrameUrl}
+      type={PanelType.medium}
+      headerText="Panel Title"
+      closeButtonAriaLabel="Close"
+      isOpen={this.state.iFramePanelOpened}
+      onDismiss={this._onDismiss.bind(this)}
+      iframeOnLoad={this._onIframeLoaded.bind(this)}
+      />
+```
+
+## Implementation
+
+The IFramePanel component extends the properties from the [Fabric UI IPanelProps](https://developer.microsoft.com/en-us/fabric#/components/panel)
+ along with the additional following properties:
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| url | string | yes | iframe Url |
+| heigth | string | yes | iframe's height, if empty it will be dynamically set to the full height available in the panel's content area |
+| iframeOnload | iframeOnLoad?: (iframe: any) => {} | no | iframe's onload event handler |
+| name | string | no | Specifies the name of an iframe |
+| allowFullScreen | boolean | no | Specifies if iframe content can be displayed in a full screen |
+| allowTransparency | boolean | no | Specifies if transparency is allowed in iframe |
+| sandbox | string | no | Enables an extra set of restrictions for the content in an iframe |
+| scrolling | string | no | Specifies whether or not to display scrollbars in an iframe |
+| seamless | string | no | When present, it specifies that the iframe should look like it is a part of the containing document (no borders or scrollbars) |
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/IFramePanel)

docs/documentation/docs/controls/IFramePanel.md

@@ -25,6 +25,7 @@ nav:
     - TaxonomyPicker: 'controls/TaxonomyPicker.md'
     - PeoplePicker: 'controls/PeoplePicker.md'
     - IFrameDialog: 'controls/IFrameDialog.md'
+    - IFramePanel: 'controls/IFramePanel.md'
   - 'Field Controls':
     - 'Getting started': 'controls/fields/main.md'
     - FieldRendererHelper: 'controls/fields/FieldRendererHelper.md'

docs/documentation/mkdocs.yml

@@ -0,0 +1 @@
+export * from './controls/iFramePanel/index';

src/IFramePanel.ts

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { Guid } from "@microsoft/sp-core-library";
+import styles from './IFramePanelContent.module.scss';
+import { Panel, IPanelProps } from 'office-ui-fabric-react/lib/Panel';
+import omit = require('lodash/omit');
+import { IFramePanelContent } from './IFramePanelContent';
+
+export interface IIFramePanelProps extends IPanelProps {
+  /**
+    * iframe Url
+    */
+  url: string;
+  /**
+  * iframe height, if null then hight is calculated
+  */
+  height?: string;
+  /**
+   * Specifies if iframe content can be displayed in a full screen.
+   * Usage: <IFrameDialog allowFullScreen />
+   */
+  allowFullScreen?: boolean;
+  /**
+   * iframe's onload event handler
+   */
+  iframeOnLoad?: (iframe: any) => void;
+  /**
+   * Specifies if transparency is allowed in iframe
+   */
+  allowTransparency?: boolean;
+  /**
+   * Specifies the name of an <iframe>
+   */
+  name?: string;
+  /**
+   * Enables an extra set of restrictions for the content in an <iframe>
+   */
+  sandbox?: string;
+  /**
+   * Specifies whether or not to display scrollbars in an <iframe>
+   */
+  scrolling?: string;
+  /**
+   * When present, it specifies that the <iframe> should look like it is a part of the containing document (no borders or scrollbars)
+   */
+  seamless?: boolean;
+}
+
+export interface IIFramePanelState {
+}
+
+export class IFramePanel extends React.Component<IIFramePanelProps, IIFramePanelState> {
+  constructor(props: IIFramePanelProps) {
+    super(props);
+
+    this.state = {
+    };
+  }
+
+  public render(): React.ReactElement<IIFramePanelProps> {
+
+    const {
+      height,
+      allowFullScreen,
+      iframeOnLoad,
+      allowTransparency,
+      name,
+      sandbox,
+      scrolling,
+      seamless
+    } = this.props;
+    return (
+      <Panel
+        {...omit(this.props, 'className')}
+      >
+        <IFramePanelContent src={this.props.url}
+          iframeOnLoad={iframeOnLoad}
+          close={this.props.onDismiss}
+          height={height}
+          allowFullScreen={allowFullScreen}
+          allowTransparency={allowTransparency}
+          name={name}
+          sandbox={sandbox}
+          scrolling={scrolling}
+          seamless={seamless}
+        />
+      </Panel>
+    );
+  }
+}

src/controls/iFramePanel/IFramePanel.tsx

@@ -0,0 +1,12 @@
+
+.iFrameDialog {
+  border: none;
+
+  .spinnerContainer {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      margin-left: -14px;
+      margin-top: -14px;
+  }
+}

src/controls/iFramePanel/IFramePanelContent.module.scss

@@ -0,0 +1,98 @@
+import * as React from "react";
+import styles from './IFramePanelContent.module.scss';
+import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
+import omit = require('lodash/omit');
+
+export interface IIFramePanelContentProps extends React.IframeHTMLAttributes<HTMLIFrameElement> {
+  close: () => void;
+  iframeOnLoad?: (iframe: any) => void;
+}
+
+export interface IIFramePanelContentState {
+  isContentVisible?: boolean;
+}
+
+/**
+ * IFrame Panel content
+ */
+export class IFramePanelContent extends React.Component<IIFramePanelContentProps, IIFramePanelContentState> {
+  private _iframe: any;
+
+  constructor(props: IIFramePanelContentProps) {
+    super(props);
+
+    this.state = {
+      isContentVisible: false
+    };
+    window.onresize = this.resizeIframe;
+  }
+
+  private resizeIframe = () => {
+    if (!this.props.height) {
+      if (this._iframe) {
+        let mainDiv = this._iframe.parentElement.parentElement.parentElement.parentElement as HTMLDivElement;
+        let commandsDiv = mainDiv.getElementsByClassName("ms-Panel-commands")[0] as HTMLDivElement;
+        let headerDiv = mainDiv.getElementsByClassName("ms-Panel-header")[0] as HTMLDivElement;
+        let footerDiv = mainDiv.getElementsByClassName("ms-Panel-footer")[0] as HTMLDivElement;
+
+        let height = this.getTrueHeight(mainDiv);
+        height = height - this.getTrueHeight(commandsDiv);
+        height = height - this.getTrueHeight(headerDiv);
+        height = height - this.getTrueHeight(footerDiv);
+        height = height - 20;  // padding on content div
+
+
+        this._iframe.height = height.toString() + 'px';
+      }
+    }
+  }
+
+  private getTrueHeight(element): number {
+    if (element) {
+      let style = element.currentStyle || window.getComputedStyle(element);
+      let marginTop = parseInt((style.marginTop as string).replace("px", ""));
+      let marginBottom = parseInt((style.marginTop as string).replace("px", ""));
+      if (isNaN(marginTop)) {
+        marginTop = 0;
+      }
+      if (isNaN(marginBottom)) {
+        marginBottom = 0;
+      }
+      return element.offsetHeight + marginTop + marginBottom;
+    }
+    else {
+      return 0;
+    }
+  }
+
+  public render(): JSX.Element {
+    return (<div className={styles.iFrameDialog}>
+      <iframe ref={(iframe) => { this._iframe = iframe; }} frameBorder={0} onLoad={this._iframeOnLoad} style={{ width: '100%', height: this.props.height, visibility: this.state.isContentVisible ? 'visible' : 'hidden' }} {...omit(this.props, 'height')} />
+      {!this.state.isContentVisible &&
+        <div className={styles.spinnerContainer}>
+          <Spinner size={SpinnerSize.large} />
+        </div>}
+    </div>);
+  }
+
+  private _iframeOnLoad = () => {
+    try { // for cross origin requests we can have issues with accessing frameElement
+      this._iframe.contentWindow.frameElement.cancelPopUp = this.props.close;
+    }
+    catch (err) {
+      if (err.name !== 'SecurityError') {
+        throw err;
+      }
+    }
+
+    this.resizeIframe();
+
+    if (this.props.iframeOnLoad) {
+      this.props.iframeOnLoad(this._iframe);
+    }
+
+    this.setState({
+      isContentVisible: true
+    });
+  }
+}

src/controls/iFramePanel/IFramePanelContent.tsx

@@ -0,0 +1,3 @@
+export * from './IFramePanelContent.module.scss';
+export * from './IFramePanelContent';
+export * from './IFramePanel';

src/controls/iFramePanel/index.ts

@@ -9,6 +9,7 @@ export * from './ListItemPicker';
 export * from './ChartControl';
 
 export * from './IFrameDialog';
+export * from './IFramePanel';
 export * from './Common';
 export * from './Utilities';
 export * from './IFrameDialog';

src/index.ts

@@ -14,6 +14,8 @@ import { WebPartTitle } from '../../../WebPartTitle';
 import { TaxonomyPicker, IPickerTerms } from '../../../TaxonomyPicker';
 import { ListPicker } from '../../../ListPicker';
 import { IFrameDialog } from '../../../IFrameDialog';
+import { IFramePanel } from '../../../IFramePanel';
+import { PanelType } from 'office-ui-fabric-react/lib/Panel';
 import { Environment, EnvironmentType, DisplayMode } from '@microsoft/sp-core-library';
 import { SecurityTrimmedControl, PermissionLevel } from '../../../SecurityTrimmedControl';
 import { SPPermission } from '@microsoft/sp-page-context';
@@ -34,6 +36,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
       imgSize: ImageSize.small,
       items: [],
       iFrameDialogOpened: false,
+      iFramePanelOpened: false,
       initialValues: [],
       authorEmails: [],
       selectedList: null
@@ -181,6 +184,8 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
       }
     ];
 
+
+
     // Specify the fields that need to be viewed in the listview
     const viewFields: IViewField[] = [
       {
@@ -486,6 +491,21 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
                   width={'570px'}
                   height={'315px'} />
               </div>
+              <div className="ms-font-m">iframe Panel tester:
+                <PrimaryButton
+                  text="Open iframe Panel"
+                  onClick={() => { this.setState({ iFramePanelOpened: true }); }} />
+                <IFramePanel
+                 url={iframeUrl}
+                 type={PanelType.medium}
+                //  height="300px"
+                 headerText="iframe panel title"
+                 closeButtonAriaLabel="Close"
+                 isOpen={this.state.iFramePanelOpened}
+                 onDismiss={() => { this.setState({ iFramePanelOpened: false }); }}
+                 iframeOnLoad={(iframe: any) => { console.log('iframe loaded'); }}
+                  />
+              </div>
             </div>
           </div>
         </div>