@micromag/element-call-to-action 0.3.311 → 0.3.322

package/assets/css/styles.css

@@ -1 +1 @@
-@-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;z-index:100;-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;vertical-align:middle}.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-withMargin{margin-bottom:5px}
+@-webkit-keyframes micromag-element-call-to-action-appear{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes micromag-element-call-to-action-appear{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.micromag-element-call-to-action-container{opacity:1;position:relative;text-align:center;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease;z-index:100}.micromag-element-call-to-action-container .micromag-element-call-to-action-arrow{-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;display:block;margin:0 auto 3px}.micromag-element-call-to-action-container .micromag-element-call-to-action-icon{display:inline-block;vertical-align:middle}.micromag-element-call-to-action-container .micromag-element-call-to-action-label{display:inline-block;line-height:1;vertical-align:middle}.micromag-element-call-to-action-container .micromag-element-call-to-action-button{-webkit-user-drag:none;background-color:rgba(0,0,0,0);display:block;margin:0 auto;padding:5px 10px;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select: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{-webkit-animation:micromag-element-call-to-action-appear .5s ease both;animation:micromag-element-call-to-action-appear .5s ease both;background-color:#fff;height:100vh;left:0;opacity:0;position:fixed;top:0;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);width:100vw}.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-withMargin{margin-bottom:5px}

package/es/index.js

@@ -20,10 +20,9 @@ var defaultProps$1 = {
   color: 'currentColor',
   className: null
 };
-
 var Arrow = function Arrow(_ref) {
   var color = _ref.color,
-      className = _ref.className;
+    className = _ref.className;
   return /*#__PURE__*/React.createElement("svg", {
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
@@ -47,7 +46,6 @@ var Arrow = function Arrow(_ref) {
     d: "M1.5,10.88L24.26,1.5l22.77,9.38"
   })));
 };
-
 Arrow.propTypes = propTypes$1;
 Arrow.defaultProps = defaultProps$1;
 
@@ -61,8 +59,8 @@ var propTypes = {
   inWebView: PropTypes.bool,
   elRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.any // eslint-disable-line
-
   })]),
+
   animationDisabled: PropTypes.bool,
   icon: PropTypes.node,
   arrow: PropTypes.node,
@@ -96,79 +94,70 @@ var defaultProps = {
   openWebView: null,
   onClick: null
 };
-
 function CallToAction(_ref) {
   var _ref7;
-
   var type = _ref.type,
-      url = _ref.url,
-      label = _ref.label,
-      boxStyle = _ref.boxStyle,
-      inWebView = _ref.inWebView,
-      elRef = _ref.elRef,
-      disabled = _ref.disabled,
-      animationDisabled = _ref.animationDisabled,
-      icon = _ref.icon,
-      arrow = _ref.arrow,
-      dragAmount = _ref.dragAmount,
-      className = _ref.className,
-      buttonClassName = _ref.buttonClassName,
-      buttonBorderClassName = _ref.buttonBorderClassName,
-      labelClassName = _ref.labelClassName,
-      arrowClassName = _ref.arrowClassName,
-      focusable = _ref.focusable,
-      openWebView = _ref.openWebView,
-      onClick = _ref.onClick;
+    url = _ref.url,
+    label = _ref.label,
+    boxStyle = _ref.boxStyle,
+    inWebView = _ref.inWebView,
+    elRef = _ref.elRef,
+    disabled = _ref.disabled,
+    animationDisabled = _ref.animationDisabled,
+    icon = _ref.icon,
+    arrow = _ref.arrow,
+    dragAmount = _ref.dragAmount,
+    className = _ref.className,
+    buttonClassName = _ref.buttonClassName,
+    buttonBorderClassName = _ref.buttonBorderClassName,
+    labelClassName = _ref.labelClassName,
+    arrowClassName = _ref.arrowClassName,
+    focusable = _ref.focusable,
+    openWebView = _ref.openWebView,
+    onClick = _ref.onClick;
   var trackEvent = useTrackEvent();
   var swipeUpEnabled = type === null || type === 'swipe-up';
   var validUrl = useMemo(function () {
     return isValidUrl(url);
   }, [url]);
   var buttonRef = useRef(null);
-
   var _ref2 = label || {},
-      _ref2$textStyle = _ref2.textStyle,
-      textStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle;
-
+    _ref2$textStyle = _ref2.textStyle,
+    textStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle;
   var _ref3 = textStyle || {},
-      _ref3$fontSize = _ref3.fontSize,
-      fontSize = _ref3$fontSize === void 0 ? null : _ref3$fontSize,
-      _ref3$color = _ref3.color,
-      color = _ref3$color === void 0 ? null : _ref3$color,
-      _ref3$lineHeight = _ref3.lineHeight,
-      lineHeight = _ref3$lineHeight === void 0 ? null : _ref3$lineHeight;
-
+    _ref3$fontSize = _ref3.fontSize,
+    fontSize = _ref3$fontSize === void 0 ? null : _ref3$fontSize,
+    _ref3$color = _ref3.color,
+    color = _ref3$color === void 0 ? null : _ref3$color,
+    _ref3$lineHeight = _ref3.lineHeight,
+    lineHeight = _ref3$lineHeight === void 0 ? null : _ref3$lineHeight;
   var _ref4 = boxStyle || {},
-      _ref4$backgroundColor = _ref4.backgroundColor,
-      backgroundColor = _ref4$backgroundColor === void 0 ? null : _ref4$backgroundColor;
-
+    _ref4$backgroundColor = _ref4.backgroundColor,
+    backgroundColor = _ref4$backgroundColor === void 0 ? null : _ref4$backgroundColor;
   var arrowStyle = useMemo(function () {
     return _objectSpread(_objectSpread({}, {
       fontSize: fontSize
     }), backgroundColor === null ? getStyleFromColor(color, 'color') : getStyleFromColor(backgroundColor, 'color'));
-  }, [fontSize, backgroundColor, color]); // MobileSafari blocks popup no matter what
+  }, [fontSize, backgroundColor, color]);
 
+  // MobileSafari blocks popup no matter what
   var selfTargetLinkRef = useRef(null);
-
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      leaving = _useState2[0],
-      setLeaving = _useState2[1]; // On click
-
+    _useState2 = _slicedToArray(_useState, 2),
+    leaving = _useState2[0],
+    setLeaving = _useState2[1];
 
+  // On click
   var onClickLink = useCallback(function (e) {
     var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'click';
-
     if (inWebView && openWebView !== null) {
       openWebView({
         url: url
       });
     }
-
     if (onClick !== null && action === 'cllick') {
       onClick(e);
     }
-
     if (trackEvent !== null) {
       trackEvent('call_to_action', isString(action) ? action : 'click', url);
     }
@@ -180,8 +169,7 @@ function CallToAction(_ref) {
   }, []);
   var onDragEnd = useCallback(function (_ref6) {
     var _ref6$movement = _slicedToArray(_ref6.movement, 2),
-        my = _ref6$movement[1];
-
+      my = _ref6$movement[1];
     if (my < -dragAmount) {
       if (inWebView) {
         onClickLink(null, 'swipe');
@@ -203,7 +191,6 @@ function CallToAction(_ref) {
     var onPageHide = function onPageHide() {
       setLeaving(false);
     };
-
     window.addEventListener('pagehide', onPageHide);
     return function () {
       window.removeEventListener('pagehide', onPageHide);
@@ -244,7 +231,6 @@ function CallToAction(_ref) {
     inline: true
   }))))));
 }
-
 CallToAction.propTypes = propTypes;
 CallToAction.defaultProps = defaultProps;
 var CallToAction$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {

package/lib/index.js

@@ -34,10 +34,9 @@ var defaultProps$1 = {
   color: 'currentColor',
   className: null
 };
-
 var Arrow = function Arrow(_ref) {
   var color = _ref.color,
-      className = _ref.className;
+    className = _ref.className;
   return /*#__PURE__*/React__default["default"].createElement("svg", {
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
@@ -61,7 +60,6 @@ var Arrow = function Arrow(_ref) {
     d: "M1.5,10.88L24.26,1.5l22.77,9.38"
   })));
 };
-
 Arrow.propTypes = propTypes$1;
 Arrow.defaultProps = defaultProps$1;
 
@@ -75,8 +73,8 @@ var propTypes = {
   inWebView: PropTypes__default["default"].bool,
   elRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
     current: PropTypes__default["default"].any // eslint-disable-line
-
   })]),
+
   animationDisabled: PropTypes__default["default"].bool,
   icon: PropTypes__default["default"].node,
   arrow: PropTypes__default["default"].node,
@@ -110,79 +108,70 @@ var defaultProps = {
   openWebView: null,
   onClick: null
 };
-
 function CallToAction(_ref) {
   var _ref7;
-
   var type = _ref.type,
-      url = _ref.url,
-      label = _ref.label,
-      boxStyle = _ref.boxStyle,
-      inWebView = _ref.inWebView,
-      elRef = _ref.elRef,
-      disabled = _ref.disabled,
-      animationDisabled = _ref.animationDisabled,
-      icon = _ref.icon,
-      arrow = _ref.arrow,
-      dragAmount = _ref.dragAmount,
-      className = _ref.className,
-      buttonClassName = _ref.buttonClassName,
-      buttonBorderClassName = _ref.buttonBorderClassName,
-      labelClassName = _ref.labelClassName,
-      arrowClassName = _ref.arrowClassName,
-      focusable = _ref.focusable,
-      openWebView = _ref.openWebView,
-      onClick = _ref.onClick;
+    url = _ref.url,
+    label = _ref.label,
+    boxStyle = _ref.boxStyle,
+    inWebView = _ref.inWebView,
+    elRef = _ref.elRef,
+    disabled = _ref.disabled,
+    animationDisabled = _ref.animationDisabled,
+    icon = _ref.icon,
+    arrow = _ref.arrow,
+    dragAmount = _ref.dragAmount,
+    className = _ref.className,
+    buttonClassName = _ref.buttonClassName,
+    buttonBorderClassName = _ref.buttonBorderClassName,
+    labelClassName = _ref.labelClassName,
+    arrowClassName = _ref.arrowClassName,
+    focusable = _ref.focusable,
+    openWebView = _ref.openWebView,
+    onClick = _ref.onClick;
   var trackEvent = hooks.useTrackEvent();
   var swipeUpEnabled = type === null || type === 'swipe-up';
   var validUrl = React.useMemo(function () {
     return utils.isValidUrl(url);
   }, [url]);
   var buttonRef = React.useRef(null);
-
   var _ref2 = label || {},
-      _ref2$textStyle = _ref2.textStyle,
-      textStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle;
-
+    _ref2$textStyle = _ref2.textStyle,
+    textStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle;
   var _ref3 = textStyle || {},
-      _ref3$fontSize = _ref3.fontSize,
-      fontSize = _ref3$fontSize === void 0 ? null : _ref3$fontSize,
-      _ref3$color = _ref3.color,
-      color = _ref3$color === void 0 ? null : _ref3$color,
-      _ref3$lineHeight = _ref3.lineHeight,
-      lineHeight = _ref3$lineHeight === void 0 ? null : _ref3$lineHeight;
-
+    _ref3$fontSize = _ref3.fontSize,
+    fontSize = _ref3$fontSize === void 0 ? null : _ref3$fontSize,
+    _ref3$color = _ref3.color,
+    color = _ref3$color === void 0 ? null : _ref3$color,
+    _ref3$lineHeight = _ref3.lineHeight,
+    lineHeight = _ref3$lineHeight === void 0 ? null : _ref3$lineHeight;
   var _ref4 = boxStyle || {},
-      _ref4$backgroundColor = _ref4.backgroundColor,
-      backgroundColor = _ref4$backgroundColor === void 0 ? null : _ref4$backgroundColor;
-
+    _ref4$backgroundColor = _ref4.backgroundColor,
+    backgroundColor = _ref4$backgroundColor === void 0 ? null : _ref4$backgroundColor;
   var arrowStyle = React.useMemo(function () {
     return _objectSpread__default["default"](_objectSpread__default["default"]({}, {
       fontSize: fontSize
     }), backgroundColor === null ? utils.getStyleFromColor(color, 'color') : utils.getStyleFromColor(backgroundColor, 'color'));
-  }, [fontSize, backgroundColor, color]); // MobileSafari blocks popup no matter what
+  }, [fontSize, backgroundColor, color]);
 
+  // MobileSafari blocks popup no matter what
   var selfTargetLinkRef = React.useRef(null);
-
   var _useState = React.useState(false),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      leaving = _useState2[0],
-      setLeaving = _useState2[1]; // On click
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    leaving = _useState2[0],
+    setLeaving = _useState2[1];
 
+  // On click
   var onClickLink = React.useCallback(function (e) {
     var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'click';
-
     if (inWebView && openWebView !== null) {
       openWebView({
         url: url
       });
     }
-
     if (onClick !== null && action === 'cllick') {
       onClick(e);
     }
-
     if (trackEvent !== null) {
       trackEvent('call_to_action', isString__default["default"](action) ? action : 'click', url);
     }
@@ -194,8 +183,7 @@ function CallToAction(_ref) {
   }, []);
   var onDragEnd = React.useCallback(function (_ref6) {
     var _ref6$movement = _slicedToArray__default["default"](_ref6.movement, 2),
-        my = _ref6$movement[1];
-
+      my = _ref6$movement[1];
     if (my < -dragAmount) {
       if (inWebView) {
         onClickLink(null, 'swipe');
@@ -217,7 +205,6 @@ function CallToAction(_ref) {
     var onPageHide = function onPageHide() {
       setLeaving(false);
     };
-
     window.addEventListener('pagehide', onPageHide);
     return function () {
       window.removeEventListener('pagehide', onPageHide);
@@ -258,7 +245,6 @@ function CallToAction(_ref) {
     inline: true
   }))))));
 }
-
 CallToAction.propTypes = propTypes;
 CallToAction.defaultProps = defaultProps;
 var CallToAction$1 = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-call-to-action",
-    "version": "0.3.311",
+    "version": "0.3.322",
     "description": "",
     "keywords": [
         "javascript"
@@ -52,21 +52,21 @@
         "@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.311",
-        "@micromag/element-button": "^0.3.311",
-        "@micromag/element-text": "^0.3.311",
-        "@micromag/element-webview": "^0.3.311",
-        "@react-spring/core": "^9.1.1",
-        "@react-spring/web": "^9.1.1",
+        "@micromag/core": "^0.3.322",
+        "@micromag/element-button": "^0.3.322",
+        "@micromag/element-text": "^0.3.322",
+        "@micromag/element-webview": "^0.3.322",
+        "@react-spring/core": "^9.6.1",
+        "@react-spring/web": "^9.6.1",
         "@use-gesture/react": "^10.2.4",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
         "react-intl": "^5.12.1",
-        "uuid": "^8.3.2"
+        "uuid": "^9.0.0"
     },
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "fab297a7ad204611597c749b969f14d992d35d47"
+    "gitHead": "2dfe09ad5a9ac720e4bfbffcb6371fc31c24fa9f"
 }