fix typo in attach.js, add onLoad, onUnmount, onMount lifecycle metho…

…ds (#1) * fix typo in attach.js, add onLoad, onUnmount, onMount lifecycle methods * remove additional whitespace
segmentio · May 15, 2017 · afa99f0 · afa99f0
1 parent ed8bbe4
commit afa99f0
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 8 deletions.
diff --git a/src/attach.js b/src/attach.js
@@ -3,7 +3,7 @@ export function attachHeadersListener({
   webRequest,
   hosts,
   iframeHosts,
-  dangerouslyOverrideFrameOptions
+  overrideFrameOptions
 }) {
   if (typeof hosts !== 'string') {
     if (hosts) {
@@ -23,7 +23,7 @@ export function attachHeadersListener({
 
   const types  = ['main_frame']
 
-  if (dangerouslyOverrideFrameOptions) {
+  if (overrideFrameOptions) {
     types.push('sub_frame')
   }
 
@@ -40,12 +40,12 @@ export function attachHeadersListener({
         csp = csp.replace('frame-src', `frame-src ${iframeHosts}`)
         csp = csp.replace('child-src', `child-src ${hosts}`)
 
-        if (dangerouslyOverrideFrameOptions) {
+        if (overrideFrameOptions) {
           csp = csp.replace(/frame-ancestors (.*?);/ig, '')
         }
 
         header.value = csp
-      } else if (isFrameHeader && dangerouslyOverrideFrameOptions) {
+      } else if (isFrameHeader && overrideFrameOptions) {
         header.value = 'ALLOWALL'
       }
 

diff --git a/src/frame.js b/src/frame.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import cx from 'classnames'
 import { css } from 'glamor'
-import { node, object, string, number } from 'prop-types'
+import { node, object, string, number, func } from 'prop-types'
 
 const iframeClass = css({
   border: 'none',
@@ -84,6 +84,7 @@ export class Frame extends Component {
           })}
           style={maskStyle}
           onClick={this.onMaskClick}
+          ref={mask => this.mask = mask}
         />
 
         <div
@@ -103,6 +104,8 @@ export class Frame extends Component {
             })}
             style={iframeStyle}
             src={url}
+            ref={frame => this.frame = frame}
+            onLoad={this.onLoad}
           />
 
           {containerChildren}
@@ -126,7 +129,10 @@ export class Frame extends Component {
     containerClassName: '',
     containerStyle: {},
     iframeClassName: '',
-    iframeStyle: {}
+    iframeStyle: {},
+    onMount: () => {},
+    onUnmount: () => {},
+    onLoad: () => {}
   }
 
   static propTypes = {
@@ -139,14 +145,22 @@ export class Frame extends Component {
     iframeClassName: string,
     iframeStyle: object,
     children: node,
-    containerChildren: node
+    containerChildren: node,
+    onMount: func,
+    onUnmount: func,
+    onLoad: func
   }
 
   componentDidMount() {
-    const { delay } = this.props
+    const { delay, onMount } = this.props
 
     window[FRAME_TOGGLE_FUNCTION] = this.toggleFrame
 
+    onMount({
+      mask: this.mask,
+      frame: this.frame
+    })
+
     this._visibleRenderTimeout = setTimeout(() => {
       this.setState({
         isVisible: true
@@ -155,10 +169,26 @@ export class Frame extends Component {
   }
 
   componentWillUnmount() {
+    const { onUnmount } = this.props
+
+    onUnmount({
+      mask: this.mask,
+      frame: this.frame
+    })
+
     delete window[FRAME_TOGGLE_FUNCTION]
     clearTimeout(this._visibleRenderTimeout)
   }
 
+  onLoad = () => {
+    const { onLoad } = this.props
+
+    onLoad({
+      mask: this.mask,
+      frame: this.frame
+    })
+  }
+
   onMaskClick = () => {
     this.setState({
       isMinimized: true