Merge branch 'spdavid-IFramePanel' into dev

Author: estruyf

docs/documentation/docs/assets/IFramePanel.png

@@ -1,6 +1,6 @@
 # IFrameDialog control
 
-This control renders a Dialog with an iframe as a content.
+This control renders a Dialog with an iframe as content.
 
 Here is an example of the control in action:
 
@@ -58,4 +58,4 @@ The IFrameDialog component can be configured with the following properties:
 | 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/FileTypeIcon)
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/IFrameDialog)

docs/documentation/docs/controls/IFrameDialog.md

@@ -0,0 +1,50 @@
+# IFramePanel control
+
+This control renders a Panel with an iframe as 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,45 @@
+import * as React from 'react';
+import { Panel } from 'office-ui-fabric-react/lib/Panel';
+import omit = require('lodash/omit');
+import { IFramePanelContent } from './IFramePanelContent';
+import { IIFramePanelProps, IIFramePanelState } from '.';
+
+export class IFramePanel extends React.Component<IIFramePanelProps, IIFramePanelState> {
+
+  constructor(props: IIFramePanelProps) {
+    super(props);
+
+    this.state = {};
+  }
+
+  /**
+   * Default React render
+   */
+  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,119 @@
+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');
+import { IIFramePanelContentProps, IIFramePanelContentState } from ".";
+
+/**
+ * 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;
+  }
+
+  /**
+   * Resize the iframe element
+   */
+  private resizeIframe = () => {
+    if (!this.props.height) {
+      if (this._iframe) {
+        const mainDiv = this.findParent(this._iframe, "ms-Panel-main");
+        const commandsDiv = mainDiv.querySelector(".ms-Panel-commands") as HTMLDivElement;
+        const headerDiv = mainDiv.querySelector("ms-Panel-header") as HTMLDivElement;
+        const footerDiv = mainDiv.querySelector("ms-Panel-footer") 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';
+      }
+    }
+  }
+
+  /**
+   * Find the parent element
+   *
+   * @param elm
+   * @param className
+   */
+  private findParent(elm: HTMLElement, className: string) {
+    while ((elm = elm.parentElement) && !elm.classList.contains(className));
+    return elm;
+  }
+
+  /**
+   * Get the element its height
+   *
+   * @param elm
+   */
+  private getTrueHeight(elm: HTMLElement): number {
+    if (elm) {
+      const style = elm.style || window.getComputedStyle(elm);
+      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 elm.offsetHeight + marginTop + marginBottom;
+    } else {
+      return 0;
+    }
+  }
+
+  /**
+   * On iframe load event
+   */
+  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
+    });
+  }
+
+  /**
+   * Default React render
+   */
+  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>
+    );
+  }
+}

src/controls/iFramePanel/IFramePanelContent.tsx

@@ -0,0 +1,4 @@
+export interface IIFramePanelContentProps extends React.IframeHTMLAttributes<HTMLIFrameElement> {
+  close: () => void;
+  iframeOnLoad?: (iframe: any) => void;
+}

src/controls/iFramePanel/IFramePanelContentProps.tsx

@@ -0,0 +1,3 @@
+export interface IIFramePanelContentState {
+  isContentVisible?: boolean;
+}