Merge pull request #19 from anvilco/pl/update-anvil-embed-frame

Add style prop and add postMessage helper

Author: patapat

packages/anvil-embed-frame/package.json

@@ -11,7 +11,8 @@
     "build:changelog": "yarn auto-changelog",
     "pack": "yarn pack",
     "version": "yarn build:changelog && git add CHANGELOG.md",
-    "test": "yarn mocha --config ./test/mocha.js"
+    "test": "yarn mocha --config ./test/mocha.js",
+    "watch": "nodemon --watch src --exec 'yarn build'"
   },
   "repository": {
     "type": "git",

packages/anvil-embed-frame/src/index.js

@@ -7,6 +7,7 @@ import PropTypes from 'prop-types'
  * @prop {Function} onEvent
  * @prop {String} anvilURL
  * @prop {String} scroll
+ * @prop {object} style
  */
 
 /**
@@ -28,6 +29,10 @@ class AnvilEmbedFrame extends React.Component {
     window.removeEventListener('message', this.handleEvent)
   }
 
+  postMessage = (message) => {
+    this.iframeRef.current.contentWindow.postMessage(message, '*')
+  }
+
   /**
    * @param {Object} options
    * @param {String} options.origin
@@ -42,14 +47,15 @@ class AnvilEmbedFrame extends React.Component {
   }
 
   render () {
-    const { iframeURL, onEvent, anvilURL, scroll, ...others } = this.props
+    const { iframeURL, onEvent, anvilURL, scroll, style, ...others } = this.props
     return (
       <iframe
         id="anvil-embed-frame"
         name="AnvilEmbedFrame"
         {...others} // props above may be overriden
         src={iframeURL}
         ref={this.iframeRef}
+        style={style}
       >
         <p id="anvil-iframe-warning">Your browser does not support iframes.</p>
       </iframe>
@@ -68,6 +74,7 @@ AnvilEmbedFrame.propTypes = {
   onEvent: PropTypes.func,
   anvilURL: PropTypes.string,
   scroll: PropTypes.oneOf(['auto', 'smooth']),
+  style: PropTypes.object,
 }
 
 export default AnvilEmbedFrame

packages/anvil-embed-frame/test/src/index.test.js

@@ -44,4 +44,20 @@ describe('AnvilEmbedFrame', function () {
       expect($.handleEvent).to.have.been.calledWith(data)
     })
   })
+
+  it('calls postMessage successfully', () => {
+    const wrapper = $.render
+    const iframe = wrapper.find('iframe')
+    const postMessage = sinon.spy()
+    const iframeMock = {
+      contentWindow: {
+        postMessage,
+      },
+    }
+
+    iframe.getElement().ref.current = iframeMock
+
+    wrapper.instance().postMessage({ action: 'test' })
+    expect(postMessage.called).to.be.equal(true)
+  })
 })

packages/anvil-embed-frame/types/index.d.ts

@@ -13,6 +13,7 @@ export type Props = {
  * @prop {String} anvilURL
  * @prop {boolean} enableDefaultStyles
  * @prop {String} scroll
+ * @prop {object} style
  */
 /**
  * @extends React.Component<Props>
@@ -48,8 +49,9 @@ declare namespace AnvilEmbedFrame {
     const enableDefaultStyles_1: PropTypes.Requireable<boolean>;
     export { enableDefaultStyles_1 as enableDefaultStyles };
     export const scroll: PropTypes.Requireable<string>;
+    export const style: PropTypes.Requireable<object>;
   }
 }
 import Reacat from "react";
 import PropTypes from "prop-types";
-//# sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=index.d.ts.map