Add onMessage support

Minishlink · Minishlink · commit 954c6472b773 · 2017-10-01T22:04:49.000+02:00
diff --git a/docs/.storybook/addons.js b/docs/.storybook/addons.js
@@ -1 +1,2 @@
 import '@storybook/addon-options/register';
+import '@storybook/addon-actions/register';
diff --git a/docs/.storybook/config.js b/docs/.storybook/config.js
@@ -6,8 +6,8 @@ setOptions({
   url: 'https://react-native-web-community.github.io/react-native-web-webview',
   goFullScreen: false,
   showLeftPanel: true,
-  showDownPanel: false,
-  downPanelInRight: false
+  showDownPanel: true,
+  downPanelInRight: false,
 });
 
 function loadStories() {
diff --git a/docs/.storybook/webpack.config.js b/docs/.storybook/webpack.config.js
@@ -9,20 +9,28 @@ module.exports = (storybookBaseConfig, configType) => {
     exclude: /node_modules/,
     use: {
       loader: 'babel-loader',
-      options: { cacheDirectory: true }
-    }
+      options: { cacheDirectory: true },
+    },
+  });
+
+  storybookBaseConfig.module.rules.push({
+    test: /\.html$/,
+    use: {
+      loader: 'file-loader',
+      options: { name: '[name].[ext]' },
+    },
   });
 
   storybookBaseConfig.plugins.push(
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
-      'process.env.__REACT_NATIVE_DEBUG_ENABLED__': DEV
+      'process.env.__REACT_NATIVE_DEBUG_ENABLED__': DEV,
     })
   );
 
   storybookBaseConfig.resolve.alias = {
     'react-native': 'react-native-web',
-    'WebView': path.join(__dirname, '../../src/')
+    WebView: path.join(__dirname, '../../src/'),
   };
 
   return storybookBaseConfig;
diff --git a/docs/package.json b/docs/package.json
@@ -7,5 +7,8 @@
   "dependencies": {
     "@storybook/addon-options": "^3.2.10",
     "@storybook/react": "^3.1.9"
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "^3.2.11"
   }
 }
diff --git a/docs/stories/index.js b/docs/stories/index.js
@@ -6,4 +6,6 @@ import { storiesOf } from '@storybook/react';
 
 storiesOf('HTML source', module).add('basic', html.basic);
 
-storiesOf('URI source', module).add('basic', uri.basic);
+storiesOf('URI source', module)
+  .add('basic', uri.basic)
+  .add('onMessage', uri.onMessage);
diff --git a/docs/stories/onMessage.html b/docs/stories/onMessage.html
@@ -0,0 +1,34 @@
+<html>
+<body>
+<h1>Hello world!</h1>
+<button id="button">Send message</button>
+<script type="text/javascript">
+  // React Native
+  function onBridgeReady(cb) {
+    if (window.postMessage.length !== 1) {
+      setTimeout(function() {
+        onBridgeReady(cb)
+      }, 100);
+    } else {
+      cb();
+    }
+  }
+
+  var payload = JSON.stringify({
+    name: 'WebView',
+  });
+
+  document.getElementById('button').addEventListener('click', function() {
+    if (window.parent) {
+      // Web iframe
+      window.parent.postMessage(payload, window.parent.origin);
+    } else {
+      // React Native
+      onBridgeReady(function() {
+        window.postMessage(payload);
+      });
+    }
+  });
+</script>
+</body>
+</html>
diff --git a/docs/stories/uri.js b/docs/stories/uri.js
@@ -1,4 +1,9 @@
 import React from 'react';
 import WebView from 'WebView';
+import { action } from '@storybook/addon-actions';
 
 export const basic = () => <WebView source={{ uri: 'https://www.youtube.com/embed/dQw4w9WgXcQ' }} />;
+
+export const onMessage = () => (
+  <WebView source={{ uri: require('./onMessage.html') }} onMessage={action('onMessage')} />
+);
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.2",
     "babel-preset-react-native": "^4.0.0",
+    "file-loader": "^1.1.4",
     "prettier": "^1.7.3",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
diff --git a/src/index.js b/src/index.js
@@ -1,18 +1,27 @@
 import React, { Component } from 'react';
 
 export default class extends Component {
+  constructor(props) {
+    super(props);
+
+    if (props.onMessage) {
+      window.addEventListener('message', this.onMessage, true);
+    }
+  }
+
+  onMessage = nativeEvent => nativeEvent.isTrusted && this.props.onMessage({ nativeEvent });
+
   render() {
     return (
       <iframe
         src={this.props.source.uri}
         srcDoc={this.props.source.html}
         style={{ width: '100%', height: '100%', border: 0 }}
-        allowfullscreen
-        allowpaymentrequest
+        allowFullScreen
+        allowpaymentrequest="true"
         frameBorder="0"
         seamless
       />
     );
   }
 }
-
diff --git a/yarn.lock b/yarn.lock
@@ -31,7 +31,7 @@ ajv@^4.9.1:
     co "^4.6.0"
     json-stable-stringify "^1.0.1"
 
-ajv@^5.1.5:
+ajv@^5.0.0, ajv@^5.1.5:
   version "5.2.3"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.2.3.tgz#c06f598778c44c6b161abafe3466b81ad1814ed2"
   dependencies:
@@ -1186,6 +1186,13 @@ fbjs@^0.8.16, fbjs@^0.8.9:
     setimmediate "^1.0.5"
     ua-parser-js "^0.7.9"
 
+file-loader@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-1.1.4.tgz#5ca9384adfafe008077c3439a435b2781a889ef5"
+  dependencies:
+    loader-utils "^1.0.2"
+    schema-utils "^0.3.0"
+
 filename-regex@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
@@ -2338,6 +2345,12 @@ safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@~5.1.0,
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
 
+schema-utils@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf"
+  dependencies:
+    ajv "^5.0.0"
+
 "semver@2 || 3 || 4 || 5", semver@^5.3.0:
   version "5.4.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`	`1`	`import '@storybook/addon-options/register';`
	`2`	`+import '@storybook/addon-actions/register';`
Original file line number	Diff line number	Diff line change
`@@ -7,5 +7,8 @@`
`7`	`7`	`"dependencies": {`
`8`	`8`	`"@storybook/addon-options": "^3.2.10",`
`9`	`9`	`"@storybook/react": "^3.1.9"`
	`10`	`+ },`
	`11`	`+ "devDependencies": {`
	`12`	`+ "@storybook/addon-actions": "^3.2.11"`
`10`	`13`	`}`
`11`	`14`	`}`