@micromag/element-call-to-action 0.3.49 → 0.3.52

package/es/index.js

@@ -8,8 +8,8 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useState, useMemo, useRef, useEffect, useCallback } from 'react';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
-import { Button } from '@micromag/core/components';
-import { isValidUrl, getStyleFromColor, isIos, getStyleFromBox } from '@micromag/core/utils';
+import { isValidUrl, getStyleFromColor, isIos } from '@micromag/core/utils';
+import Button from '@micromag/element-button';
 import Text from '@micromag/element-text';
 import WebView from '@micromag/element-webview';
 
@@ -73,6 +73,11 @@ function CallToAction(_ref) {
       showWebView = _useState2[0],
       setShowWebView = _useState2[1];
 
+  var _useState3 = useState(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      disableWebView = _useState4[0],
+      setDisabledWebView = _useState4[1];
+
   var swipeUpEnabled = type === null || type === 'swipe-up';
   var validUrl = useMemo(function () {
     return isValidUrl(url);
@@ -95,10 +100,10 @@ function CallToAction(_ref) {
 
   var selfTargetLinkRef = useRef(null);
 
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      leaving = _useState4[0],
-      setLeaving = _useState4[1];
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      leaving = _useState6[0],
+      setLeaving = _useState6[1];
 
   var bind = useGesture({
     onDrag: function onDrag(_ref4) {
@@ -113,6 +118,7 @@ function CallToAction(_ref) {
       if (my < -dragAmount) {
         if (inWebView) {
           setShowWebView(true);
+          setDisabledWebView(false);
         } else if (isIos()) {
           selfTargetLinkRef.current.click();
           setLeaving(true);
@@ -132,9 +138,27 @@ function CallToAction(_ref) {
       window.removeEventListener('pagehide', onPageHide);
     };
   }, [setLeaving]);
+  useEffect(function () {
+    var id = null;
+
+    if (inWebView) {
+      if (showWebView) {
+        setDisabledWebView(false);
+      } else {
+        id = setTimeout(function () {
+          setDisabledWebView(true);
+        }, 300);
+      }
+    }
+
+    return function () {
+      clearTimeout(id);
+    };
+  }, [showWebView, setDisabledWebView]);
   var onOpenWebView = useCallback(function () {
     setShowWebView(true);
-  }, [setShowWebView]);
+    setDisabledWebView(false);
+  }, [setShowWebView, setDisabledWebView]);
   var onCloseWebView = useCallback(function () {
     setShowWebView(false);
   }, [setShowWebView]);
@@ -158,7 +182,7 @@ function CallToAction(_ref) {
     focusable: focusable,
     buttonStyle: _objectSpread({
       marginBottom: 10
-    }, getStyleFromBox(buttonStyle))
+    }, buttonStyle)
   }, swipeUpEnabled && !disabled ? bind() : null, inWebView ? {
     onClick: onOpenWebView
   } : {
@@ -172,6 +196,7 @@ function CallToAction(_ref) {
     className: classNames([styles.webView, _defineProperty({}, styles.visible, showWebView)]),
     src: url,
     closeable: true,
+    hidden: disableWebView,
     onClose: onCloseWebView
   }, screenSize)) : null) : null;
 }

package/lib/index.js

@@ -10,8 +10,8 @@ var classNames = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
 var core = require('@micromag/core');
-var components = require('@micromag/core/components');
 var utils = require('@micromag/core/utils');
+var Button = require('@micromag/element-button');
 var Text = require('@micromag/element-text');
 var WebView = require('@micromag/element-webview');
 
@@ -23,6 +23,7 @@ var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray)
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
 var WebView__default = /*#__PURE__*/_interopDefaultLegacy(WebView);
 
@@ -86,6 +87,11 @@ function CallToAction(_ref) {
       showWebView = _useState2[0],
       setShowWebView = _useState2[1];
 
+  var _useState3 = React.useState(true),
+      _useState4 = _slicedToArray__default["default"](_useState3, 2),
+      disableWebView = _useState4[0],
+      setDisabledWebView = _useState4[1];
+
   var swipeUpEnabled = type === null || type === 'swipe-up';
   var validUrl = React.useMemo(function () {
     return utils.isValidUrl(url);
@@ -108,10 +114,10 @@ function CallToAction(_ref) {
 
   var selfTargetLinkRef = React.useRef(null);
 
-  var _useState3 = React.useState(false),
-      _useState4 = _slicedToArray__default["default"](_useState3, 2),
-      leaving = _useState4[0],
-      setLeaving = _useState4[1];
+  var _useState5 = React.useState(false),
+      _useState6 = _slicedToArray__default["default"](_useState5, 2),
+      leaving = _useState6[0],
+      setLeaving = _useState6[1];
 
   var bind = react.useGesture({
     onDrag: function onDrag(_ref4) {
@@ -126,6 +132,7 @@ function CallToAction(_ref) {
       if (my < -dragAmount) {
         if (inWebView) {
           setShowWebView(true);
+          setDisabledWebView(false);
         } else if (utils.isIos()) {
           selfTargetLinkRef.current.click();
           setLeaving(true);
@@ -145,9 +152,27 @@ function CallToAction(_ref) {
       window.removeEventListener('pagehide', onPageHide);
     };
   }, [setLeaving]);
+  React.useEffect(function () {
+    var id = null;
+
+    if (inWebView) {
+      if (showWebView) {
+        setDisabledWebView(false);
+      } else {
+        id = setTimeout(function () {
+          setDisabledWebView(true);
+        }, 300);
+      }
+    }
+
+    return function () {
+      clearTimeout(id);
+    };
+  }, [showWebView, setDisabledWebView]);
   var onOpenWebView = React.useCallback(function () {
     setShowWebView(true);
-  }, [setShowWebView]);
+    setDisabledWebView(false);
+  }, [setShowWebView, setDisabledWebView]);
   var onCloseWebView = React.useCallback(function () {
     setShowWebView(false);
   }, [setShowWebView]);
@@ -165,13 +190,13 @@ function CallToAction(_ref) {
     className: styles.arrow,
     style: arrowStyle,
     icon: freeSolidSvgIcons.faChevronUp
-  }) : null, /*#__PURE__*/React__default["default"].createElement(components.Button, Object.assign({
+  }) : null, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], Object.assign({
     className: styles.button,
     refButton: buttonRef,
     focusable: focusable,
     buttonStyle: _objectSpread__default["default"]({
       marginBottom: 10
-    }, utils.getStyleFromBox(buttonStyle))
+    }, buttonStyle)
   }, swipeUpEnabled && !disabled ? bind() : null, inWebView ? {
     onClick: onOpenWebView
   } : {
@@ -185,6 +210,7 @@ function CallToAction(_ref) {
     className: classNames__default["default"]([styles.webView, _defineProperty__default["default"]({}, styles.visible, showWebView)]),
     src: url,
     closeable: true,
+    hidden: disableWebView,
     onClose: onCloseWebView
   }, screenSize)) : null) : null;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-call-to-action",
-    "version": "0.3.49",
+    "version": "0.3.52",
     "description": "",
     "keywords": [
         "javascript"
@@ -55,7 +55,7 @@
         "@micromag/core": "^0.3.42",
         "@micromag/element-button": "^0.3.45",
         "@micromag/element-text": "^0.3.45",
-        "@micromag/element-webview": "^0.3.48",
+        "@micromag/element-webview": "^0.3.52",
         "@react-spring/core": "^9.1.1",
         "@react-spring/web": "^9.1.1",
         "@use-gesture/react": "^10.2.4",
@@ -68,5 +68,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "2eaa5dd74d48d73e004241e3b68ed774c8606ef7"
+    "gitHead": "55e5140dad51adb6e1052f83b6fcb4db97437a6d"
 }