react-native-typeform-embed/index.js at master · ubdi/react-native-typeform-embed · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import React, { Component } from "react";
import PropTypes from "prop-types";
import { WebView } from "react-native-webview";

class TypeformEmbed extends Component {
  onLoad = () => {
    const { url, hideHeaders, hideFooter, opacity, buttonText } = this.props;

    const options = {
      mode: "popup",
      hideHeaders,
      hideFooter,
      opacity,
      buttonText
    };

    if (this.typeformElm) {
      const stringifedOptions = JSON.stringify(JSON.stringify(options));
      const embedCode = `
      {
        const onSubmit = () => window.ReactNativeWebView.postMessage("onSubmit")
        const onClose = () => window.ReactNativeWebView.postMessage("onClose")
        const options = Object.assign({}, JSON.parse(${stringifedOptions}), {onSubmit,onClose})
        const ref = typeformEmbed.makePopup('${url}', options)
        ref.open()
      }
      true
      `;
      this.typeformElm.injectJavaScript(embedCode);
    }
  };

  onMessage = event => {
    const { data } = event.nativeEvent;
    if (data === "onSubmit") return this.props.onSubmit();
    if (data === "onClose") return this.props.onClose();
  };

  render() {
    return (
      <WebView
        originWhitelist={["*"]}
        ref={el => (this.typeformElm = el)}
        source={{
          html:
            '<html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://embed.typeform.com/embed.js"></script></head><div id="typeform-embed">Loading...</div></html>'
        }}
        onLoadEnd={this.onLoad}
        onMessage={this.onMessage}
        {...this.props.webView}
      />
    );
  }
}

TypeformEmbed.propTypes = {
  url: PropTypes.string.isRequired,
  style: PropTypes.object,

  // Widget options
  hideHeaders: PropTypes.bool,
  hideFooter: PropTypes.bool,
  opacity: PropTypes.number,
  buttonText: PropTypes.string,
  onSubmit: PropTypes.func
};

// Default values taken from official Typeform docs
// https://developer.typeform.com/embed/modes/
TypeformEmbed.defaultProps = {
  style: {},
  webView: {},

  // Widget options
  hideHeaders: false,
  hideFooter: false,
  opacity: 100,
  buttonText: "Start",
  onSubmit: () => {}
};

export default TypeformEmbed;