@eventespresso/react-exit-modal-typeform - npm Package Compare versions

Comparing version 1.0.4 to 2.0.1-alpha.0

package.json

 {
   "name": "@eventespresso/react-exit-modal-typeform",
-  "version": "1.0.4",
+  "version": "2.0.1-alpha.0",
   "description": "React component that allows the triggering of an typeform form via modal",
@@ -27,22 +27,22 @@ "author": "EventEspresso",
   "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-react-jsx": "^6.24.1",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
-    "css-loader": "^0.28.9",
-    "style-loader": "^0.20.1"
+    "@babel/core": "^7.2.2",
+    "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
+    "@babel/plugin-transform-react-jsx": "^7.2.0",
+    "@babel/runtime": "^7.2.0",
+    "@babel/runtime-corejs2": "^7.3.1",
+    "css-loader": "^2.1.1",
+    "style-loader": "^0.23.1"
   },
   "dependencies": {
     "@typeform/embed": "^0.5.6",
-    "classnames": "^2.2.5",
-    "prop-types": "^15.6.1",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-modal": "^3.3.1"
+    "classnames": "^2.2.6",
+    "prop-types": "^15.7.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-modal": "^3.8.1"
   },
   "babel": {
     "presets": "@wordpress/default"
-  }
+  },
+  "gitHead": "9fb280bfcfc69efde7495eb1dcfac2474a734a2b"
 }

README.md

@@ -15,3 +15,3 @@ # React Exit Modal for Typeform
 ```bash
-npm install @eventespresso/react-exit-modal-typeform
+npm install @eventespresso/react-exit-modal-typeform --save
 ``` 
@@ -18,0 +18,0 @@

src/index.js

@@ -0,146 +1,185 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import { createElement } from "@wordpress/element";
 /**
  * External Dependencies
  */
+
 import React from 'react';
 import ReactModal from 'react-modal';
 import PropTypes from 'prop-types';
-
 /**
  * Internal dependencies
  */
+
 import { ExitModalOptions, TypeFormEmbed } from './modal/index';
+export var CLOSE_MODAL_EVENT = 'closeModalEvent';
 
-export const CLOSE_MODAL_EVENT = 'closeModalEvent';
+var ExitModal =
+/*#__PURE__*/
+function (_React$Component) {
+  _inherits(ExitModal, _React$Component);
 
-export default class ExitModal extends React.Component {
-    constructor () {
-        super();
-        this.state = {
-            showModal: true,
-            initialView: true,
-        };
-    }
+  function ExitModal() {
+    var _this;
 
-    componentWillUpdate(nextProps,nextState) {
-        if (nextProps.showModal !== this.state.showModal) {
-            this.setState({showModal: nextProps.showModal});
-            this.setState({initialView: nextProps.initialView});
-        }
-    }
+    _classCallCheck(this, ExitModal);
 
-    componentDidMount() {
-        this.closeModalEvent = new Event(CLOSE_MODAL_EVENT, {modalOpen: this.state.showModal});
-    }
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(ExitModal).call(this));
+    _this.state = {
+      showModal: true,
+      initialView: true
+    };
+    return _this;
+  }
 
-    componentWillUnmount() {
-        this.closeModalEvent = null;
+  _createClass(ExitModal, [{
+    key: "componentWillUpdate",
+    value: function componentWillUpdate(nextProps, nextState) {
+      if (nextProps.showModal !== this.state.showModal) {
+        this.setState({
+          showModal: nextProps.showModal
+        });
+        this.setState({
+          initialView: nextProps.initialView
+        });
+      }
     }
-
-    handleCloseModal() {
-        this.setState({showModal: false});
-        //so external scripts listening on the react element can react.
-        this.el.dispatchEvent(this.closeModalEvent);
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.closeModalEvent = new Event(CLOSE_MODAL_EVENT, {
+        modalOpen: this.state.showModal
+      });
     }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.closeModalEvent = null;
+    }
+  }, {
+    key: "handleCloseModal",
+    value: function handleCloseModal() {
+      this.setState({
+        showModal: false
+      }); //so external scripts listening on the react element can react.
 
-    onDoSurvey() {
-        this.setState({initialView:false});
+      this.el.dispatchEvent(this.closeModalEvent);
     }
+  }, {
+    key: "onDoSurvey",
+    value: function onDoSurvey() {
+      this.setState({
+        initialView: false
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
 
-    render() {
-        const content = this.state.initialView
-            ? <ExitModalOptions
-                onClose={() => this.handleCloseModal()}
-                onDoSurvey={() => this.onDoSurvey()}
-                introText={this.props.introText}
-                doSurveyButtonText={this.props.doSurveyButtonText}
-                skipButtonText={this.props.skipButtonText}
-                doSurveyButtonClass={this.props.buttonClass.doSurvey}
-                closeModalButtonClass={this.props.buttonClass.closeModal}
-                />
-            : <TypeFormEmbed
-                onSubmit={() => this.handleCloseModal()}
-                url={this.props.typeFormUrl}
-                popup={false}
-                typeFormStyle={this.props.styles.typeFormStyle}
-            />;
-        return (
-            <div ref={el => this.el = el}>
-                <ReactModal
-                    isOpen={this.state.showModal}
-                    style={this.props.styles}
-                >
-                    {content}
-                </ReactModal>
-            </div>
-        )
+      var content = this.state.initialView ? createElement(ExitModalOptions, {
+        onClose: function onClose() {
+          return _this2.handleCloseModal();
+        },
+        onDoSurvey: function onDoSurvey() {
+          return _this2.onDoSurvey();
+        },
+        introText: this.props.introText,
+        doSurveyButtonText: this.props.doSurveyButtonText,
+        skipButtonText: this.props.skipButtonText,
+        doSurveyButtonClass: this.props.buttonClass.doSurvey,
+        closeModalButtonClass: this.props.buttonClass.closeModal
+      }) : createElement(TypeFormEmbed, {
+        onSubmit: function onSubmit() {
+          return _this2.handleCloseModal();
+        },
+        url: this.props.typeFormUrl,
+        popup: false,
+        typeFormStyle: this.props.styles.typeFormStyle
+      });
+      return createElement("div", {
+        ref: function ref(el) {
+          return _this2.el = el;
+        }
+      }, createElement(ReactModal, {
+        isOpen: this.state.showModal,
+        style: this.props.styles
+      }, content));
     }
-}
+  }]);
 
+  return ExitModal;
+}(React.Component);
 
+export { ExitModal as default };
 ExitModal.defaultProps = {
-    showModal: true,
-    showTypeForm: false,
-    styles: {
-        overlay: {
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            backgroundColor: 'rgba(255, 255, 255, 0.75)'
-        },
-        content: {
-            position: 'absolute',
-            top: '40px',
-            left: '40px',
-            right: '40px',
-            bottom: '40px',
-            border: '1px solid #ccc',
-            background: '#fff',
-            overflow: 'auto',
-            WebkitOverflowScrolling: 'touch',
-            borderRadius: '4px',
-            outline: 'none',
-            padding: '20px'
-        },
-        typeFormStyle: {
-            width: '600px',
-            height: '400px',
-        }
+  showModal: true,
+  showTypeForm: false,
+  styles: {
+    overlay: {
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: 'rgba(255, 255, 255, 0.75)'
     },
-    buttonClass: {
-        doSurvey: '',
-        closeModal: ''
+    content: {
+      position: 'absolute',
+      top: '40px',
+      left: '40px',
+      right: '40px',
+      bottom: '40px',
+      border: '1px solid #ccc',
+      background: '#fff',
+      overflow: 'auto',
+      WebkitOverflowScrolling: 'touch',
+      borderRadius: '4px',
+      outline: 'none',
+      padding: '20px'
     },
-    modalClassName: {
-        content: '',
-        overlay: ''
-    },
-    typeFormUrl: '',
-    introText: "We're sorry to see you go! Will you share feedback through a short survey to help us improve our product?",
-    doSurveyButtonText: "Sure I'll help!",
-    skipButtonText: "Skip"
+    typeFormStyle: {
+      width: '600px',
+      height: '400px'
+    }
+  },
+  buttonClass: {
+    doSurvey: '',
+    closeModal: ''
+  },
+  modalClassName: {
+    content: '',
+    overlay: ''
+  },
+  typeFormUrl: '',
+  introText: "We're sorry to see you go! Will you share feedback through a short survey to help us improve our product?",
+  doSurveyButtonText: "Sure I'll help!",
+  skipButtonText: "Skip"
 };
-
 ExitModal.propTypes = {
-    showModal: PropTypes.bool,
-    showTypeForm: PropTypes.bool,
-    styles: PropTypes.shape({
-        overlay: PropTypes.object,
-        content: PropTypes.object,
-        typeFormStyle: PropTypes.object
-    }),
-    modalClassName: PropTypes.shape({
-        overlay: PropTypes.string,
-        content: PropTypes.string,
-        typeFormStyle: PropTypes.string
-    }),
-    buttonClass: PropTypes.shape({
-        doSurvey: PropTypes.string,
-        closeModal: PropTypes.string
-    }),
-    typeFormUrl: PropTypes.string.isRequired,
-    introText: PropTypes.string,
-    skipButtonText: PropTypes.string,
-    doSurveyButtonText: PropTypes.string
+  showModal: PropTypes.bool,
+  showTypeForm: PropTypes.bool,
+  styles: PropTypes.shape({
+    overlay: PropTypes.object,
+    content: PropTypes.object,
+    typeFormStyle: PropTypes.object
+  }),
+  modalClassName: PropTypes.shape({
+    overlay: PropTypes.string,
+    content: PropTypes.string,
+    typeFormStyle: PropTypes.string
+  }),
+  buttonClass: PropTypes.shape({
+    doSurvey: PropTypes.string,
+    closeModal: PropTypes.string
+  }),
+  typeFormUrl: PropTypes.string.isRequired,
+  introText: PropTypes.string,
+  skipButtonText: PropTypes.string,
+  doSurveyButtonText: PropTypes.string
 };
+//# sourceMappingURL=index.js.map

src/modal/button.js

@@ -0,10 +1,16 @@
+import { createElement } from "@wordpress/element";
 /**
  * External Dependencies
  */
+
 import React from 'react';
-
-export default function Button({handleOnClick, buttonText, buttonClass}) {
-    return (
-        <button className={buttonClass} onClick={handleOnClick}>{buttonText}</button>
-    );
-}
+export default function Button(_ref) {
+  var handleOnClick = _ref.handleOnClick,
+      buttonText = _ref.buttonText,
+      buttonClass = _ref.buttonClass;
+  return createElement("button", {
+    className: buttonClass,
+    onClick: handleOnClick
+  }, buttonText);
+}
+//# sourceMappingURL=button.js.map

src/modal/index.js

 export { default as ExitModalOptions } from './optionsview';
-export { default as TypeFormEmbed } from './typeFormEmbed';
+export { default as TypeFormEmbed } from './typeFormEmbed';
+//# sourceMappingURL=index.js.map

src/modal/optionsview.js

@@ -0,35 +1,33 @@
+import { createElement } from "@wordpress/element";
 /**
  * External Dependencies
  */
+
 import React from 'react';
 import Button from './button';
 import classNames from 'classnames';
-
-export default function ExitModalOptions({
-        onClose,
-        onDoSurvey,
-        introText,
-        doSurveyButtonText,
-        skipButtonText,
-        doSurveyButtonClass,
-        closeModalButtonClass
-    }) {
-    const buttonClass = "ee-cancel-prompt-button";
-    return (
-        <div className={'exit-modal-choices'}>
-            <p>{introText}</p>
-            <Button
-                key={'do survey'}
-                handleOnClick={onDoSurvey}
-                buttonText={doSurveyButtonText}
-                buttonClass={classNames(buttonClass, 'do-survey', doSurveyButtonClass)}
-            />
-            <Button
-                key='close-modal-and-cancel'
-                handleOnClick={onClose}
-                buttonText={skipButtonText}
-                buttonClass={classNames(buttonClass, 'close-modal-and-cancel', closeModalButtonClass)}
-            />
-        </div>
-    );
-};
+export default function ExitModalOptions(_ref) {
+  var onClose = _ref.onClose,
+      onDoSurvey = _ref.onDoSurvey,
+      introText = _ref.introText,
+      doSurveyButtonText = _ref.doSurveyButtonText,
+      skipButtonText = _ref.skipButtonText,
+      doSurveyButtonClass = _ref.doSurveyButtonClass,
+      closeModalButtonClass = _ref.closeModalButtonClass;
+  var buttonClass = "ee-cancel-prompt-button";
+  return createElement("div", {
+    className: 'exit-modal-choices'
+  }, createElement("p", null, introText), createElement(Button, {
+    key: 'do survey',
+    handleOnClick: onDoSurvey,
+    buttonText: doSurveyButtonText,
+    buttonClass: classNames(buttonClass, 'do-survey', doSurveyButtonClass)
+  }), createElement(Button, {
+    key: "close-modal-and-cancel",
+    handleOnClick: onClose,
+    buttonText: skipButtonText,
+    buttonClass: classNames(buttonClass, 'close-modal-and-cancel', closeModalButtonClass)
+  }));
+}
+;
+//# sourceMappingURL=optionsview.js.map

src/modal/typeFormEmbed.js

@@ -0,4 +1,11 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import { createElement } from "@wordpress/element";
 /**
  * External Dependencies
  */
+
 import React, { Component } from 'react';
@@ -8,71 +15,90 @@ import PropTypes from 'prop-types';
 
-export default class TypeFormEmbed extends Component {
+var TypeFormEmbed =
+/*#__PURE__*/
+function (_Component) {
+  _inherits(TypeFormEmbed, _Component);
 
-    componentDidMount() {
-        const {
-            url,
-            hideHeaders,
-            hideFooter,
-            opacity,
-            buttonText,
-            popup,
-            mode,
-            autoOpen,
-            autoClose,
-            onSubmit
-        } = this.props;
-        const options = {
-            hideHeaders,
-            hideFooter,
-            opacity,
-            buttonText,
-            mode,
-            autoOpen,
-            autoClose,
-            onSubmit
-        };
-        if ( popup ) {
-            this.typeform = tfEmbed.makePopup(url, options);
-        } else {
-            const el = this.typeformEl;
-            tfEmbed.makeWidget(el, url, options);
-        }
+  function TypeFormEmbed() {
+    _classCallCheck(this, TypeFormEmbed);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(TypeFormEmbed).apply(this, arguments));
+  }
+
+  _createClass(TypeFormEmbed, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this$props = this.props,
+          url = _this$props.url,
+          hideHeaders = _this$props.hideHeaders,
+          hideFooter = _this$props.hideFooter,
+          opacity = _this$props.opacity,
+          buttonText = _this$props.buttonText,
+          popup = _this$props.popup,
+          mode = _this$props.mode,
+          autoOpen = _this$props.autoOpen,
+          autoClose = _this$props.autoClose,
+          onSubmit = _this$props.onSubmit;
+      var options = {
+        hideHeaders: hideHeaders,
+        hideFooter: hideFooter,
+        opacity: opacity,
+        buttonText: buttonText,
+        mode: mode,
+        autoOpen: autoOpen,
+        autoClose: autoClose,
+        onSubmit: onSubmit
+      };
+
+      if (popup) {
+        this.typeform = tfEmbed.makePopup(url, options);
+      } else {
+        var el = this.typeformEl;
+        tfEmbed.makeWidget(el, url, options);
+      }
     }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this = this;
 
-    render() {
-        return (
-            <div className="react-typeform-embed" ref={tf => this.typeformEl = tf} style={this.props.typeFormStyle} />
-        )
+      return createElement("div", {
+        className: "react-typeform-embed",
+        ref: function ref(tf) {
+          return _this.typeformEl = tf;
+        },
+        style: this.props.typeFormStyle
+      });
     }
-}
+  }]);
 
+  return TypeFormEmbed;
+}(Component);
 
+export { TypeFormEmbed as default };
 TypeFormEmbed.propTypes = {
-    typeFormStyle: PropTypes.object,
-    url: PropTypes.string.isRequired,
-    popup: PropTypes.bool,
-    hideHeaders: PropTypes.bool,
-    hideFooter: PropTypes.bool,
-
-    // Widget options
-    opacity: PropTypes.number,
-    buttonText: PropTypes.string,
-
-    // Popup options
-    mode: PropTypes.oneOf(['popup', 'drawer_left', 'drawer_right']),
-    autoOpen: PropTypes.bool,
-    autoClose: PropTypes.number,
-    onSubmit: PropTypes.func
+  typeFormStyle: PropTypes.object,
+  url: PropTypes.string.isRequired,
+  popup: PropTypes.bool,
+  hideHeaders: PropTypes.bool,
+  hideFooter: PropTypes.bool,
+  // Widget options
+  opacity: PropTypes.number,
+  buttonText: PropTypes.string,
+  // Popup options
+  mode: PropTypes.oneOf(['popup', 'drawer_left', 'drawer_right']),
+  autoOpen: PropTypes.bool,
+  autoClose: PropTypes.number,
+  onSubmit: PropTypes.func
 };
-
 TypeFormEmbed.defaultProps = {
-    typeFormStyle: {},
-    url: '',
-    popup:false,
-    hideHeaders: false,
-    hideFooter: false,
-    opacity: 100,
-    buttonText: 'Start',
-    mode: "popup",
-    autoOpen:false
-};
+  typeFormStyle: {},
+  url: '',
+  popup: false,
+  hideHeaders: false,
+  hideFooter: false,
+  opacity: 100,
+  buttonText: 'Start',
+  mode: "popup",
+  autoOpen: false
+};
+//# sourceMappingURL=typeFormEmbed.js.map

New alerts

Copyleft License

License

(Experimental) Copyleft license information was found.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Non-permissive License

License

(Experimental) A license not known to be considered permissive was found.

Found 1 instance in 1 package

Fixed alerts

Copyleft License

License

(Experimental) Copyleft license information was found.

Found 1 instance in 1 package

Non-permissive License

License

(Experimental) A license not known to be considered permissive was found.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

63605

increased by72.06%

Dev dependency count

7

decreased by-12.5%

Number of package files

18

increased by5.88%

Worsened metrics

Number of low license alerts

3

increased by50%

Lines of code

672

decreased by-25.58%

Number of low quality alerts

2

increased by100%

Dependency changes

• Updatedclassnames@^2.2.6

• Updatedprop-types@^15.7.2

• Updatedreact@^16.8.6

• Updatedreact-dom@^16.8.6

• Updatedreact-modal@^3.8.1