feat: deprecates attributes according to HTML5 spec, sets new default…

… values

README.md

@@ -16,25 +16,26 @@ import Iframe from 'react-iframe'
         id="myId"
         className="myClassname"
         display="initial"
-        position="relative"
-        allowFullScreen/>
+        position="relative"/>
 ```
-            
+
 ### Properties
 
 **url** **(required)** - *string* the iframe url.
 
 _all other attributes are optional_
 
-**scrolling** - *string* not set if if not provided.
+**src** - *string* if set, overrides _url_.
+
+**scrolling** - *string* not set if if not provided (deprecated in HTML5).
 
 **overflow** - *string* default to "hidden".
 
-**loading** - *string* not added to DOM if not provided
+**loading** - *string* (not added to DOM if not provided).
 
-**frameBorder** - *number* default to "0".
+**frameBorder** - *number* default to "0" (deprecated in HTML5).
 
-**position** - *string* defaults to "absolute".
+**position** - *string* (not added to DOM if not provided).
 
 **id** - *string* if set, adds the id parameter with the given value.
 
@@ -46,11 +47,11 @@ _all other attributes are optional_
 
 **width** - *string* (1px > any number above 0, or 1% to 100%)
 
-**allowFullScreen** - if set, applies the allowFullScreen param
+**allowFullScreen** - if set, applies the allowFullScreen param (deprecated in HTML5). If set, *adds allow="fullscreen"*.
 
 **sandbox** - add optional sandbox values ("allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation")
 
-**allow** - add optional [_allow_](https://dev.chromium.org/Home/chromium-security/deprecating-permissions-in-cross-origin-iframes#TOC-To-continue-to-use-permissions-from-iframes-on-your-website) values ("geolocation microphone camera midi encrypted-media")
+**allow** - add optional [_allow_](https://dev.chromium.org/Home/chromium-security/deprecating-permissions-in-cross-origin-iframes#TOC-To-continue-to-use-permissions-from-iframes-on-your-website) values ("geolocation microphone camera midi encrypted-media & more")
 
 **styles** - add any additional styles here. Will (intentionally) override any of the props 
 above. For instance:
@@ -61,8 +62,7 @@ above. For instance:
             id="myId"
             className="myClassname"
             height="100%"
-            styles={{height: "25px"}}
-            allowFullScreen/>
+            styles={{height: "25px"}}/>
 ```
 
 will set the height to 25px even though it was specified as 100% in the props.

demo/iframe.js

@@ -13,7 +13,6 @@ var __assign =
 		return __assign.apply(this, arguments)
 	}
 import React, { createRef } from "react"
-// @ts-ignore
 import objectAssign from "object-assign"
 var Iframe = function(_a) {
 	var url = _a.url,
@@ -38,7 +37,8 @@ var Iframe = function(_a) {
 		ariaLabel = _a.ariaLabel,
 		ariaLabelledby = _a.ariaLabelledby,
 		name = _a.name,
-		target = _a.target
+		target = _a.target,
+		loading = _a.loading
 	var iFrameRef = createRef()
 	var defaultProps = objectAssign({
 		ref: iFrameRef,
@@ -56,6 +56,7 @@ var Iframe = function(_a) {
 		frameBorder: frameBorder || 0,
 		height: height || "100%",
 		sandbox: sandbox || null,
+		loading: loading || null,
 		styles: styles || null,
 		name: name || null,
 		className: className || null,

src/__tests__/__snapshots__/test.tsx.snap

@@ -2,35 +2,23 @@
 
 exports[`Render default iframe 1`] = `
 <iframe
-  allowFullScreen={false}
-  frameBorder={0}
-  height="100%"
-  scrolling="no"
   src="http://www.foobar.com"
   style={
     Object {
       "display": "block",
-      "height": "100%",
-      "overflow": "hidden",
       "position": "relative",
-      "width": "100%",
     }
   }
-  target="_parent"
-  width="100%"
 />
 `;
 
 exports[`Render iframe with title 1`] = `
 <iframe
   allow="encrypted-media"
-  allowFullScreen={false}
   aria-hidden={true}
   aria-label="someLabel"
   aria-labelledby="someId"
   className="myIframeClass"
-  frameBorder={2}
-  height="100%"
   id="myIframeId"
   loading="eager"
   name="My Iframe name"
@@ -39,14 +27,13 @@ exports[`Render iframe with title 1`] = `
   onMouseOver={[Function]}
   sandbox="allow-scripts"
   scrolling="yes"
-  src="http://www.foobar.com"
+  src="http://www.foo.com"
   style={
     Object {
+      "border": 0,
       "display": "inline-block",
-      "height": "100%",
       "overflow": "auto",
       "position": "relative",
-      "width": "100%",
     }
   }
   styles={
@@ -56,6 +43,31 @@ exports[`Render iframe with title 1`] = `
   }
   target="_self"
   title="A foobared iframe"
-  width="100%"
+/>
+`;
+
+exports[`Render with allow attribute 1`] = `
+<iframe
+  allow="fullscreen autoplay"
+  src="http://www.foobar.com"
+  style={
+    Object {
+      "border": 1,
+      "display": "block",
+    }
+  }
+/>
+`;
+
+exports[`Render with allowFullscreen bool 1`] = `
+<iframe
+  allow="fullscreen"
+  src="http://www.foobar.com"
+  style={
+    Object {
+      "border": 1,
+      "display": "block",
+    }
+  }
 />
 `;

src/__tests__/test.tsx

@@ -4,7 +4,7 @@ import renderer from "react-test-renderer"
 
 test("Render default iframe", () => {
 	const component = renderer.create(
-		<Iframe position="relative" url="http://www.foobar.com"/>
+		<Iframe position="relative" url="http://www.foo.com"  src="http://www.foobar.com"/>
 	)
 	let tree = component.toJSON()
 	expect(tree).toMatchSnapshot()
@@ -15,14 +15,15 @@ test("Render iframe with title", () => {
 		<Iframe position="relative"
 						title="A foobared iframe"
 						url="http://www.foobar.com"
+						src="http://www.foo.com"
 						ariaHidden={true}
 						ariaLabel="someLabel"
 						ariaLabelledby="someId"
 						allow="encrypted-media"
 						sandbox="allow-scripts"
 						allowFullScreen={false}
 						className="myIframeClass"
-						frameBorder={2}
+						frameBorder={0}
 						overflow="auto"
 						loading="eager"
 						onLoad={()=>{console.log("hello")}}
@@ -40,3 +41,24 @@ test("Render iframe with title", () => {
 	expect(tree).toMatchSnapshot()
 })
 
+
+test("Render with allowFullscreen bool", () => {
+	const component = renderer.create(
+		<Iframe allowFullScreen={false}
+				allow="fullscreen"
+				frameBorder={1} url="http://www.foobar.com"/>
+	)
+	let tree = component.toJSON()
+	expect(tree).toMatchSnapshot()
+})
+
+
+test("Render with allow attribute", () => {
+	const component = renderer.create(
+		<Iframe allowFullScreen={true}
+				allow="fullscreen autoplay"
+				frameBorder={1} url="http://www.foobar.com"/>
+	)
+	let tree = component.toJSON()
+	expect(tree).toMatchSnapshot()
+})

src/iframe.tsx

@@ -1,4 +1,4 @@
-import React, { useState, createRef, ComponentType } from "react"
+import React, { ComponentType } from "react"
 import objectAssign from "object-assign"
 
 import { IIframe } from "./types"
@@ -10,38 +10,35 @@ const Iframe: ComponentType<IIframe>
 			 onMouseOver, onMouseOut, scrolling, id,
 			 frameBorder, ariaHidden, sandbox, allow,
 			 className, title, ariaLabel, ariaLabelledby,
-			 name, target, loading
+			 name, target, loading, importance, referrerpolicy,
+			 allowpaymentrequest, src
 		 }: IIframe) => {
 
-	const iFrameRef = createRef()
-
 	const defaultProps = objectAssign({
-		ref: iFrameRef,
-		src: url,
-		target: target || "_parent",
-		allowFullScreen: allowFullScreen || false,
+		src: src || url,
+		target: target || null,
 		style: {
-			position: position || "absolute",
+			position: position || null,
 			display: display || "block",
-			height: height || "100%",
-			width: width || "100%",
-			overflow: overflow || "hidden"
+			overflow: overflow || null
 		},
-		scrolling: scrolling || "no",
-		frameBorder: frameBorder || 0,
-		height: height || "100%",
+		scrolling: scrolling || null,
+		allowpaymentrequest: allowpaymentrequest || null,
+		importance: importance || null,
 		sandbox: sandbox || null,
 		loading: loading || null,
 		styles: styles || null,
 		name: name || null,
 		className: className || null,
+		referrerpolicy: referrerpolicy || null,
 		title: title || null,
 		allow: allow || null,
 		id: id || null,
 		"aria-labelledby": ariaLabelledby || null,
 		"aria-hidden": ariaHidden || null,
 		"aria-label": ariaLabel || null,
-		width: width || "100%",
+		width: width || null,
+		height: height || null,
 		onLoad: onLoad || null,
 		onMouseOver: onMouseOver || null,
 		onMouseOut: onMouseOut || null
@@ -52,6 +49,27 @@ const Iframe: ComponentType<IIframe>
 			props[prop] = defaultProps[prop]
 		}
 	}
+
+	for (let i of Object.keys(props.style)) {
+		if (props.style[i] == null) {
+			delete props.style[i]
+		}
+	}
+
+	if(allowFullScreen){
+		if("allow" in props){
+			const currentAllow = props.allow.replace("fullscreen","")
+			props.allow = `fullscreen ${currentAllow.trim()}`.trim()	
+		} else {
+			props.allow = "fullscreen"
+		}
+	}
+
+	if(frameBorder >= 0){
+		if(!props.style.hasOwnProperty("border")){
+			props.style.border = frameBorder
+		}
+	}
 	return <iframe {...props}/>
 
 }

src/types.d.ts

@@ -1,25 +1,29 @@
 export interface IIframe {
 	url: string,
+	src?: string,
 	allowFullScreen?: boolean,
 	position?: "relative" | "absolute" | "fixed" | "sticky" | "static" | "inherit" | "initial" | "unset",
 	display?: "block" | "none" | "inline",
 	height?: string,
 	width?: string,
 	loading?: "auto" | "eager" | "lazy",
 	target?: string,
+	importance?: "auto" | "high" | "low",
 	overflow?: string,
 	styles?: object,
 	name?: string,
+	allowpaymentrequest?: boolean,
+	referrerpolicy?: "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url",
 	onLoad?: () => void,
 	onMouseOver?: () => void,
 	onMouseOut?: () => void,
 	frameBorder?: number,
-	scrolling?: string,
+	scrolling?: "auto" | "yes" | "no",
 	id?: string,
 	ariaHidden?: boolean,
 	ariaLabel?: string,
 	ariaLabelledby?: string,
-	sandbox?: string,
+	sandbox?: "allow-forms" | "allow-modals" | "allow-orientation-lock" | "allow-pointer-lock" | "allow-popups" | "allow-popups-to-escape-sandbox" | "allow-presentation" | "allow-same-origin" | "allow-scripts" | "allow-storage-access-by-user-activation" | "allow-top-navigation" | "allow-top-navigation-by-user-activation",
 	allow?: string,
 	className?: string,
 	title?: string

types.d.ts

@@ -1,25 +1,29 @@
 export interface IIframe {
 	url: string,
+	src?: string,
 	allowFullScreen?: boolean,
 	position?: "relative" | "absolute" | "fixed" | "sticky" | "static" | "inherit" | "initial" | "unset",
 	display?: "block" | "none" | "inline",
 	height?: string,
 	width?: string,
 	loading?: "auto" | "eager" | "lazy",
 	target?: string,
+	importance?: "auto" | "high" | "low",
 	overflow?: string,
 	styles?: object,
 	name?: string,
+	allowpaymentrequest?: boolean,
+	referrerpolicy?: "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url",
 	onLoad?: () => void,
 	onMouseOver?: () => void,
 	onMouseOut?: () => void,
 	frameBorder?: number,
-	scrolling?: string,
+	scrolling?: "auto" | "yes" | "no",
 	id?: string,
 	ariaHidden?: boolean,
 	ariaLabel?: string,
 	ariaLabelledby?: string,
-	sandbox?: string,
+	sandbox?: "allow-forms" | "allow-modals" | "allow-orientation-lock" | "allow-pointer-lock" | "allow-popups" | "allow-popups-to-escape-sandbox" | "allow-presentation" | "allow-same-origin" | "allow-scripts" | "allow-storage-access-by-user-activation" | "allow-top-navigation" | "allow-top-navigation-by-user-activation",
 	allow?: string,
 	className?: string,
 	title?: string