@micromag/element-call-to-action 0.3.88 → 0.3.94

package/assets/css/styles.css

@@ -1 +1 @@
-@-webkit-keyframes micromag-element-call-to-action-appear{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes micromag-element-call-to-action-appear{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.micromag-element-call-to-action-container{position:relative;padding-bottom:5px;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease;opacity:1;text-align:center}.micromag-element-call-to-action-container .micromag-element-call-to-action-arrow{display:block;margin:0 auto 3px;-webkit-animation:micromag-element-call-to-action-upAndDown .5s ease-in-out infinite alternate;animation:micromag-element-call-to-action-upAndDown .5s ease-in-out infinite alternate}.micromag-element-call-to-action-container .micromag-element-call-to-action-icon,.micromag-element-call-to-action-container .micromag-element-call-to-action-label{display:inline-block}.micromag-element-call-to-action-container .micromag-element-call-to-action-label{line-height:1}.micromag-element-call-to-action-container .micromag-element-call-to-action-button{display:block;margin:0 auto;padding:5px 10px;background-color:rgba(0,0,0,0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;-webkit-user-drag:none}.micromag-element-call-to-action-container .micromag-element-call-to-action-button:hover{text-decoration:none}.micromag-element-call-to-action-container .micromag-element-call-to-action-selfTargetLink{display:none}.micromag-element-call-to-action-container .micromag-element-call-to-action-leavingFrame{position:fixed;top:0;left:0;width:100vw;height:100vh;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-animation:micromag-element-call-to-action-appear .5s ease both;animation:micromag-element-call-to-action-appear .5s ease both;opacity:0;background-color:#fff}.micromag-element-call-to-action-container.micromag-element-call-to-action-animationDisabled .micromag-element-call-to-action-arrow{-webkit-animation:none;animation:none}.micromag-element-call-to-action-container.micromag-element-call-to-action-invalidUrl{opacity:.5;pointer-events:none}.micromag-element-call-to-action-container.micromag-element-call-to-action-invalidUrl .micromag-element-call-to-action-arrow{-webkit-animation:none;animation:none}.micromag-element-call-to-action-container.micromag-element-call-to-action-disabled{opacity:0;pointer-events:none}.micromag-element-call-to-action-container.micromag-element-call-to-action-inWebView{width:100%}.micromag-element-call-to-action-container.micromag-element-call-to-action-withMargin{margin-bottom:5px}.micromag-element-call-to-action-webView{position:absolute;z-index:9999;top:100%;width:100%;height:100%;-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;-o-transition:transform .3s ease;transition:transform .3s ease;transition:transform .3s ease, -webkit-transform .3s ease}.micromag-element-call-to-action-webView.micromag-element-call-to-action-visible{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}@-webkit-keyframes micromag-element-call-to-action-upAndDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(-20%);transform:translateY(-20%)}}@keyframes micromag-element-call-to-action-upAndDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(-20%);transform:translateY(-20%)}}
+@-webkit-keyframes micromag-element-call-to-action-appear{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes micromag-element-call-to-action-appear{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.micromag-element-call-to-action-container{position:relative;padding-bottom:5px;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease;opacity:1;text-align:center}.micromag-element-call-to-action-container .micromag-element-call-to-action-arrow{display:block;margin:0 auto 3px;-webkit-animation:micromag-element-call-to-action-upAndDown .5s ease-in-out infinite alternate;animation:micromag-element-call-to-action-upAndDown .5s ease-in-out infinite alternate}.micromag-element-call-to-action-container .micromag-element-call-to-action-icon,.micromag-element-call-to-action-container .micromag-element-call-to-action-label{display:inline-block}.micromag-element-call-to-action-container .micromag-element-call-to-action-label{line-height:1}.micromag-element-call-to-action-container .micromag-element-call-to-action-button{display:block;margin:0 auto;padding:5px 10px;background-color:rgba(0,0,0,0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;-webkit-user-drag:none}.micromag-element-call-to-action-container .micromag-element-call-to-action-button:hover{text-decoration:none}.micromag-element-call-to-action-container .micromag-element-call-to-action-selfTargetLink{display:none}.micromag-element-call-to-action-container .micromag-element-call-to-action-leavingFrame{position:fixed;top:0;left:0;width:100vw;height:100vh;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-animation:micromag-element-call-to-action-appear .5s ease both;animation:micromag-element-call-to-action-appear .5s ease both;opacity:0;background-color:#fff}.micromag-element-call-to-action-container.micromag-element-call-to-action-animationDisabled .micromag-element-call-to-action-arrow{-webkit-animation:none;animation:none}.micromag-element-call-to-action-container.micromag-element-call-to-action-invalidUrl{opacity:.5;pointer-events:none}.micromag-element-call-to-action-container.micromag-element-call-to-action-invalidUrl .micromag-element-call-to-action-arrow{-webkit-animation:none;animation:none}.micromag-element-call-to-action-container.micromag-element-call-to-action-disabled{opacity:0;pointer-events:none}.micromag-element-call-to-action-container.micromag-element-call-to-action-inWebView{width:100%}.micromag-element-call-to-action-container.micromag-element-call-to-action-withMargin{margin-bottom:5px}.micromag-element-call-to-action-webView{position:absolute;z-index:9999;top:100%;width:100%;height:100%;-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;-o-transition:transform .3s ease;transition:transform .3s ease;transition:transform .3s ease, -webkit-transform .3s ease}.micromag-element-call-to-action-webView.micromag-element-call-to-action-visible{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}@-webkit-keyframes micromag-element-call-to-action-upAndDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(-20%);transform:translateY(-20%)}}@keyframes micromag-element-call-to-action-upAndDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(-20%);transform:translateY(-20%)}}

package/es/index.js

@@ -72,7 +72,9 @@ var propTypes = {
   buttonBorderClassName: PropTypes.string,
   labelClassName: PropTypes.string,
   arrowClassName: PropTypes.string,
-  focusable: PropTypes.bool
+  focusable: PropTypes.bool,
+  enableInteraction: PropTypes.func,
+  disableInteraction: PropTypes.func
 };
 var defaultProps = {
   elRef: null,
@@ -88,7 +90,9 @@ var defaultProps = {
   buttonBorderClassName: null,
   labelClassName: null,
   arrowClassName: null,
-  focusable: true
+  focusable: true,
+  enableInteraction: null,
+  disableInteraction: null
 };
 
 function CallToAction(_ref) {
@@ -107,7 +111,9 @@ function CallToAction(_ref) {
       buttonBorderClassName = _ref.buttonBorderClassName,
       labelClassName = _ref.labelClassName,
       arrowClassName = _ref.arrowClassName,
-      focusable = _ref.focusable;
+      focusable = _ref.focusable,
+      enableInteraction = _ref.enableInteraction,
+      disableInteraction = _ref.disableInteraction;
 
   var _ref2 = callToAction || {},
       _ref2$active = _ref2.active,
@@ -135,7 +141,7 @@ function CallToAction(_ref) {
 
   var swipeUpEnabled = type === null || type === 'swipe-up';
   var validUrl = useMemo(function () {
-    return isValidUrl(url);
+    return isValidUrl(url) || true;
   }, [url]);
   var buttonRef = useRef(null);
 
@@ -182,7 +188,7 @@ function CallToAction(_ref) {
         if (inWebView) {
           setShowWebView(true);
           setDisabledWebView(false);
-        } else if (isIos()) {
+        } else if (isIos() && selfTargetLinkRef.current !== null) {
           selfTargetLinkRef.current.click();
           setLeaving(true);
         } else if (buttonRef.current) {
@@ -221,10 +227,18 @@ function CallToAction(_ref) {
   var onOpenWebView = useCallback(function () {
     setShowWebView(true);
     setDisabledWebView(false);
-  }, [setShowWebView, setDisabledWebView]);
+
+    if (disableInteraction !== null) {
+      disableInteraction();
+    }
+  }, [setShowWebView, setDisabledWebView, disableInteraction]);
   var onCloseWebView = useCallback(function () {
     setShowWebView(false);
-  }, [setShowWebView]);
+
+    if (enableInteraction !== null) {
+      enableInteraction();
+    }
+  }, [setShowWebView, enableInteraction]);
   var ArrowElement = arrow !== null ? /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.arrow, _defineProperty({}, arrowClassName, arrowClassName !== null)]),
     style: arrowStyle
@@ -232,17 +246,18 @@ function CallToAction(_ref) {
     className: classNames([styles.arrow, _defineProperty({}, arrowClassName, arrowClassName !== null)]),
     style: arrowStyle
   }, /*#__PURE__*/React.createElement(Arrow, null));
+  console.log('disabled', disabled, validUrl, inWebView);
   return active ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, (_ref10 = {}, _defineProperty(_ref10, className, className !== null), _defineProperty(_ref10, styles.disabled, disabled), _defineProperty(_ref10, styles.animationDisabled, animationDisabled), _defineProperty(_ref10, styles.invalidUrl, !validUrl), _defineProperty(_ref10, styles.inWebView, inWebView), _ref10)]),
     ref: elRef
   }, leaving ? /*#__PURE__*/React.createElement("div", {
     className: styles.leavingFrame
-  }) : null, /*#__PURE__*/React.createElement("a", {
+  }) : null, !inWebView && swipeUpEnabled ? /*#__PURE__*/React.createElement("a", {
     className: styles.selfTargetLink,
     href: url,
     ref: selfTargetLinkRef,
     tabIndex: focusable ? '0' : '-1'
-  }), swipeUpEnabled ? ArrowElement : null, /*#__PURE__*/React.createElement("div", {
+  }) : null, swipeUpEnabled ? ArrowElement : null, /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.buttonBorder, _defineProperty({}, buttonBorderClassName, buttonBorderClassName !== null)])
   }, /*#__PURE__*/React.createElement(Button, Object.assign({
     className: classNames([styles.button, _defineProperty({}, buttonClassName, buttonClassName !== null)]),

package/lib/index.js

@@ -86,7 +86,9 @@ var propTypes = {
   buttonBorderClassName: PropTypes__default["default"].string,
   labelClassName: PropTypes__default["default"].string,
   arrowClassName: PropTypes__default["default"].string,
-  focusable: PropTypes__default["default"].bool
+  focusable: PropTypes__default["default"].bool,
+  enableInteraction: PropTypes__default["default"].func,
+  disableInteraction: PropTypes__default["default"].func
 };
 var defaultProps = {
   elRef: null,
@@ -102,7 +104,9 @@ var defaultProps = {
   buttonBorderClassName: null,
   labelClassName: null,
   arrowClassName: null,
-  focusable: true
+  focusable: true,
+  enableInteraction: null,
+  disableInteraction: null
 };
 
 function CallToAction(_ref) {
@@ -121,7 +125,9 @@ function CallToAction(_ref) {
       buttonBorderClassName = _ref.buttonBorderClassName,
       labelClassName = _ref.labelClassName,
       arrowClassName = _ref.arrowClassName,
-      focusable = _ref.focusable;
+      focusable = _ref.focusable,
+      enableInteraction = _ref.enableInteraction,
+      disableInteraction = _ref.disableInteraction;
 
   var _ref2 = callToAction || {},
       _ref2$active = _ref2.active,
@@ -149,7 +155,7 @@ function CallToAction(_ref) {
 
   var swipeUpEnabled = type === null || type === 'swipe-up';
   var validUrl = React.useMemo(function () {
-    return utils.isValidUrl(url);
+    return utils.isValidUrl(url) || true;
   }, [url]);
   var buttonRef = React.useRef(null);
 
@@ -196,7 +202,7 @@ function CallToAction(_ref) {
         if (inWebView) {
           setShowWebView(true);
           setDisabledWebView(false);
-        } else if (utils.isIos()) {
+        } else if (utils.isIos() && selfTargetLinkRef.current !== null) {
           selfTargetLinkRef.current.click();
           setLeaving(true);
         } else if (buttonRef.current) {
@@ -235,10 +241,18 @@ function CallToAction(_ref) {
   var onOpenWebView = React.useCallback(function () {
     setShowWebView(true);
     setDisabledWebView(false);
-  }, [setShowWebView, setDisabledWebView]);
+
+    if (disableInteraction !== null) {
+      disableInteraction();
+    }
+  }, [setShowWebView, setDisabledWebView, disableInteraction]);
   var onCloseWebView = React.useCallback(function () {
     setShowWebView(false);
-  }, [setShowWebView]);
+
+    if (enableInteraction !== null) {
+      enableInteraction();
+    }
+  }, [setShowWebView, enableInteraction]);
   var ArrowElement = arrow !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles.arrow, _defineProperty__default["default"]({}, arrowClassName, arrowClassName !== null)]),
     style: arrowStyle
@@ -246,17 +260,18 @@ function CallToAction(_ref) {
     className: classNames__default["default"]([styles.arrow, _defineProperty__default["default"]({}, arrowClassName, arrowClassName !== null)]),
     style: arrowStyle
   }, /*#__PURE__*/React__default["default"].createElement(Arrow, null));
+  console.log('disabled', disabled, validUrl, inWebView);
   return active ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles.container, (_ref10 = {}, _defineProperty__default["default"](_ref10, className, className !== null), _defineProperty__default["default"](_ref10, styles.disabled, disabled), _defineProperty__default["default"](_ref10, styles.animationDisabled, animationDisabled), _defineProperty__default["default"](_ref10, styles.invalidUrl, !validUrl), _defineProperty__default["default"](_ref10, styles.inWebView, inWebView), _ref10)]),
     ref: elRef
   }, leaving ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles.leavingFrame
-  }) : null, /*#__PURE__*/React__default["default"].createElement("a", {
+  }) : null, !inWebView && swipeUpEnabled ? /*#__PURE__*/React__default["default"].createElement("a", {
     className: styles.selfTargetLink,
     href: url,
     ref: selfTargetLinkRef,
     tabIndex: focusable ? '0' : '-1'
-  }), swipeUpEnabled ? ArrowElement : null, /*#__PURE__*/React__default["default"].createElement("div", {
+  }) : null, swipeUpEnabled ? ArrowElement : null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles.buttonBorder, _defineProperty__default["default"]({}, buttonBorderClassName, buttonBorderClassName !== null)])
   }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], Object.assign({
     className: classNames__default["default"]([styles.button, _defineProperty__default["default"]({}, buttonClassName, buttonClassName !== null)]),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-call-to-action",
-    "version": "0.3.88",
+    "version": "0.3.94",
     "description": "",
     "keywords": [
         "javascript"
@@ -52,10 +52,10 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.13",
-        "@micromag/core": "^0.3.88",
-        "@micromag/element-button": "^0.3.88",
-        "@micromag/element-text": "^0.3.88",
-        "@micromag/element-webview": "^0.3.88",
+        "@micromag/core": "^0.3.91",
+        "@micromag/element-button": "^0.3.91",
+        "@micromag/element-text": "^0.3.91",
+        "@micromag/element-webview": "^0.3.94",
         "@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": "d0fb1f7d4ae6bfa1fd07dc856307c1c4225ab889"
+    "gitHead": "a52ac2b4e1b68403bafc9ed067b10e834b82f825"
 }