diff --git a/src/Demo.js b/src/Demo.js index acb1154..2e7aded 100644 --- a/src/Demo.js +++ b/src/Demo.js @@ -1,11 +1,12 @@ import React from "react"; import IframeComm from "react-iframe-comm"; // loads build file -const Demo = ({}) => { +const Demo = ({ }) => { // the html attributes to create the iframe with // make sure you use camelCase attribute names const attributes = { src: "https://pbojinov.github.io/iframe-communication/iframe.html", + // name: 'Demo', width: "100%", height: "175" }; diff --git a/src/IframeComm.js b/src/IframeComm.js index 1c693e3..a499185 100644 --- a/src/IframeComm.js +++ b/src/IframeComm.js @@ -1,5 +1,6 @@ import React, { Component } from "react"; import PropTypes from 'prop-types'; +import { atLeastOneRequired } from './custom.proptypes' class IframeComm extends Component { constructor() { @@ -93,6 +94,11 @@ IframeComm.defaultProps = { postMessageData: "" }; +const atLeastOne = atLeastOneRequired({ + name: PropTypes.string, + src: PropTypes.string +}) + IframeComm.propTypes = { /* Iframe Attributes @@ -108,12 +114,12 @@ IframeComm.propTypes = { ]), frameBorder: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - name: PropTypes.string, + name: atLeastOne, scrolling: PropTypes.string, // https://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/ sandbox: PropTypes.string, srcDoc: PropTypes.string, - src: PropTypes.string.isRequired, + src: atLeastOne, width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]) }), diff --git a/src/custom.proptypes.js b/src/custom.proptypes.js new file mode 100644 index 0000000..1c5ffd2 --- /dev/null +++ b/src/custom.proptypes.js @@ -0,0 +1,19 @@ +export function atLeastOneRequired(checkProps) { + return function(props, propName, compName) { + const requiredPropNames = Object.keys(checkProps); + + const found = requiredPropNames.find((requiredProp) => props[requiredProp]); + // console.log(requiredPropNames); + try { + if (!found) { + throw new Error( + `One of ${requiredPropNames.join(',')} is required by '${compName}' component.`, + ); + } + PropTypes.checkPropTypes(checkProps, props, propName, compName); + } catch (e) { + return e; + } + return null; + }; + } \ No newline at end of file