Pl/anvil embed frame updates

packages/anvil-embed-frame/anvil-embed-frame

@@ -0,0 +1 @@
+/Users/patricklo/work/react-ui/packages/anvil-embed-frame

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

@@ -1,72 +1,55 @@
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 
-/**
- * @typedef Props
- * @prop {String} iframeURL
- * @prop {Function} onEvent
- * @prop {String} anvilURL
- * @prop {String} scroll
- */
-
-/**
- * @extends React.Component<Props>
- */
-class AnvilEmbedFrame extends React.Component {
-  constructor (props) {
-    super(props)
-    this.iframeRef = React.createRef()
-  }
-
-  componentDidMount () {
-    const { scroll } = this.props
-    if (scroll) this.iframeRef.current.scrollIntoView({ behavior: scroll })
-    window.addEventListener('message', this.handleEvent)
-  }
-
-  componentWillUnmount () {
-    window.removeEventListener('message', this.handleEvent)
-  }
-
-  /**
-   * @param {Object} options
-   * @param {String} options.origin
-   * @param {Object} options.data
-   */
-  handleEvent = ({ origin, data }) => {
-    const { anvilURL, onEvent } = this.props
-    if (anvilURL !== origin) return
-    if (typeof data === 'object') {
-      onEvent(data)
+const AnvilEmbedFrame = ( props ) => {
+const {
+  iframeURL,
+  onEvent = () => {},
+  anvilURL = 'https://app.useanvil.com',
+  scroll,
+  style,
+  iframeRef,
+  ...others
+} = props
+const ref = iframeRef || useRef(null)
+
+  useEffect(() => {
+    const handleEvent = ({ origin, data }) => {
+      if (anvilURL !== origin) return
+      if (typeof data === 'object') {
+        onEvent(data)
+      }
     }
-  }
 
-  render () {
-    const { iframeURL, onEvent, anvilURL, scroll, ...others } = this.props
-    return (
-      <iframe
-        id="anvil-embed-frame"
-        name="AnvilEmbedFrame"
-        {...others} // props above may be overriden
-        src={iframeURL}
-        ref={this.iframeRef}
-      >
-        <p id="anvil-iframe-warning">Your browser does not support iframes.</p>
-      </iframe>
-    )
-  }
-}
+    if (scroll) ref.current?.scrollIntoView({ behavior: scroll })
+    window.addEventListener('message', handleEvent)
 
-AnvilEmbedFrame.defaultProps = {
-  onEvent: () => {},
-  anvilURL: 'https://app.useanvil.com',
+    return () => {
+      window.removeEventListener('message', handleEvent)
+    }
+  }, [anvilURL, onEvent, scroll])
+
+  return (
+    <iframe
+      id="anvil-embed-frame"
+      name="AnvilEmbedFrame"
+      {...others} // props above may be overridden
+      src={iframeURL}
+      ref={ref}
+      style={style}
+    >
+      <p id="anvil-iframe-warning">Your browser does not support iframes.</p>
+    </iframe>
+  )
 }
 
 AnvilEmbedFrame.propTypes = {
   iframeURL: PropTypes.string.isRequired,
+  iframeRef: PropTypes.object,
   onLoad: PropTypes.func,
   onEvent: PropTypes.func,
   anvilURL: PropTypes.string,
+  style: PropTypes.object,
   scroll: PropTypes.oneOf(['auto', 'smooth']),
 }
 

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

@@ -1,55 +1,32 @@
+import PropTypes from 'prop-types';
+
 export default AnvilEmbedFrame;
 export type Props = {
   iframeURL: string;
-  onEvent: Function;
+  onEvent: (event: any) => void;
   anvilURL: string;
+  iframeRef: React.RefObject<any>;
   enableDefaultStyles: boolean;
+  style: any;
   scroll: string;
 };
-/**
- * @typedef Props
- * @prop {String} iframeURL
- * @prop {Function} onEvent
- * @prop {String} anvilURL
- * @prop {boolean} enableDefaultStyles
- * @prop {String} scroll
- */
-/**
- * @extends React.Component<Props>
- */
-declare class AnvilEmbedFrame extends React.Component<Props, any, any> {
-  constructor(props: any);
-  iframeRef: React.RefObject<any>;
-  componentDidMount(): void;
-  componentWillUnmount(): void;
-  /**
-   * @param {Object} options
-   * @param {String} options.origin
-   * @param {Object} options.data
-   */
-   handleEvent: ({ origin, data }: {
-    origin: string;
-    data: object;
-   }) => void;
-   render() : JSX.Element;
-}
+
+declare function AnvilEmbedFrame(props: Props): JSX.Element;
+
 declare namespace AnvilEmbedFrame {
   namespace defaultProps {
     function onEvent(): void;
     const anvilURL: string;
     const enableDefaultStyles: boolean;
   }
+
   namespace propTypes {
-    export const iframeURL: PropTypes.Requireable<string>;
-    const onEvent_1: PropTypes.Validator<(...args: any[]) => any>;
-    export { onEvent_1 as onEvent };
-    const anvilURL_1: PropTypes.Requireable<string>;
-    export { anvilURL_1 as anvilURL };
-    const enableDefaultStyles_1: PropTypes.Requireable<boolean>;
-    export { enableDefaultStyles_1 as enableDefaultStyles };
-    export const scroll: PropTypes.Requireable<string>;
+    const iframeURL: PropTypes.Requireable<string>;
+    const onEvent: PropTypes.Requireable<(...args: any[]) => any>;
+    const anvilURL: PropTypes.Requireable<string>;
+    const iframeRef: PropTypes.Requireable<any>;
+    const style: PropTypes.Requireable<any>;
+    const enableDefaultStyles: PropTypes.Requireable<boolean>;
+    const scroll: PropTypes.Requireable<string>;
   }
 }
-import Reacat from "react";
-import PropTypes from "prop-types";
-//# sourceMappingURL=index.d.ts.map