@micromag/screen-urbania-horoscope 0.3.112 → 0.3.113

package/es/index.js

@@ -4,11 +4,12 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useCallback, useState, useMemo, useEffect } from 'react';
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { ScreenElement, PlaceholderTitle, TransitionsStagger } from '@micromag/core/components';
 import { useScreenRenderContext, useScreenState, useScreenSize, useViewer } from '@micromag/core/contexts';
+import { useTrackScreenEvent } from '@micromag/core/hooks';
 import { isTextFilled } from '@micromag/core/utils';
 import Background from '@micromag/element-background';
 import Button from '@micromag/element-button';
@@ -205,8 +206,7 @@ var propTypes$1 = {
     description: PropTypes$1.textElement
   })),
   signSubtitle: PropTypes$1.headingElement,
-  activeSignId: PropTypes.string,
-  setActiveSignId: PropTypes.func,
+  currentSign: PropTypes.string,
   width: PropTypes.number,
   height: PropTypes.number,
   background: PropTypes$1.backgroundElement,
@@ -214,13 +214,14 @@ var propTypes$1 = {
   current: PropTypes.bool,
   active: PropTypes.bool,
   transitionDisabled: PropTypes.bool,
+  onClickSign: PropTypes.func,
+  onClickClose: PropTypes.func,
   className: PropTypes.string
 };
 var defaultProps$1 = {
   signs: null,
   signSubtitle: null,
-  activeSignId: null,
-  setActiveSignId: null,
+  currentSign: null,
   width: null,
   height: null,
   background: null,
@@ -228,14 +229,15 @@ var defaultProps$1 = {
   current: true,
   active: true,
   transitionDisabled: false,
+  onClickSign: null,
+  onClickClose: null,
   className: null
 };
 
 var SignsGrid = function SignsGrid(_ref) {
   var signs = _ref.signs,
       signSubtitle = _ref.signSubtitle,
-      activeSignId = _ref.activeSignId,
-      setActiveSignId = _ref.setActiveSignId,
+      currentSignId = _ref.currentSign,
       width = _ref.width,
       height = _ref.height,
       background = _ref.background,
@@ -243,16 +245,14 @@ var SignsGrid = function SignsGrid(_ref) {
       current = _ref.current,
       active = _ref.active,
       transitionDisabled = _ref.transitionDisabled,
+      onClickSign = _ref.onClickSign,
+      onClickClose = _ref.onClickClose,
       className = _ref.className;
-  // const [activeSignId, setActiveSignId] = useState(null);
-  var activeSign = signs.find(function (_ref2) {
+  var currentSign = signs.find(function (_ref2) {
     var _ref2$id = _ref2.id,
         id = _ref2$id === void 0 ? null : _ref2$id;
-    return activeSignId === id;
+    return currentSignId === id;
   }) || null;
-  var closeModal = useCallback(function () {
-    return setActiveSignId(null);
-  }, [activeSignId, setActiveSignId]);
 
   var _useScreenRenderConte = useScreenRenderContext(),
       isView = _useScreenRenderConte.isView,
@@ -281,7 +281,7 @@ var SignsGrid = function SignsGrid(_ref) {
     className: styles$1.closeButton
   }, /*#__PURE__*/React.createElement(Close, {
     className: styles$1.close
-  })) : null, /*#__PURE__*/React.createElement(TransitionGroup, null, !activeSignId ? /*#__PURE__*/React.createElement(CSSTransition, {
+  })) : null, /*#__PURE__*/React.createElement(TransitionGroup, null, currentSign === null ? /*#__PURE__*/React.createElement(CSSTransition, {
     key: "grid",
     classNames: styles$1,
     timeout: transitionDisabled ? 0 : 1000
@@ -316,7 +316,9 @@ var SignsGrid = function SignsGrid(_ref) {
       className: styles$1.gridElement,
       type: "button",
       onClick: function onClick() {
-        return setActiveSignId(id);
+        if (onClickSign !== null) {
+          onClickSign(id);
+        }
       }
     }, image !== null ? /*#__PURE__*/React.createElement("img", {
       className: styles$1.image,
@@ -337,7 +339,7 @@ var SignsGrid = function SignsGrid(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$1.modalContainer
   }, /*#__PURE__*/React.createElement(Button, {
-    onClick: closeModal,
+    onClick: onClickClose,
     className: styles$1.backButton
   }, /*#__PURE__*/React.createElement("span", {
     className: styles$1.arrow
@@ -353,7 +355,7 @@ var SignsGrid = function SignsGrid(_ref) {
     width: width,
     height: height,
     className: styles$1.signModal,
-    sign: activeSign,
+    sign: currentSign,
     subtitle: signSubtitle,
     transitionDisabled: transitionDisabled
   })))))));
@@ -597,6 +599,7 @@ var propTypes = {
   disableInteraction: PropTypes.func,
   transitions: PropTypes$1.transitions,
   transitionStagger: PropTypes.number,
+  type: PropTypes.string,
   className: PropTypes.string
 };
 var defaultProps = {
@@ -612,6 +615,7 @@ var defaultProps = {
   popupBackground: null,
   current: true,
   active: true,
+  type: 'horoscope',
   enableInteraction: null,
   disableInteraction: null,
   transitions: null,
@@ -638,7 +642,9 @@ var Horoscope = function Horoscope(_ref) {
       disableInteraction = _ref.disableInteraction,
       transitions = _ref.transitions,
       transitionStagger = _ref.transitionStagger,
+      type = _ref.type,
       className = _ref.className;
+  var trackScreenEvent = useTrackScreenEvent(type);
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -656,17 +662,27 @@ var Horoscope = function Horoscope(_ref) {
 
   var _useState3 = useState(null),
       _useState4 = _slicedToArray(_useState3, 2),
-      activeSignId = _useState4[0],
-      setActiveSignId = _useState4[1];
+      currentSign = _useState4[0],
+      setCurrentSign = _useState4[1];
 
   var openPopup = useCallback(function () {
     setHasPopup(true);
     disableInteraction();
-  }, [hasPopup, setHasPopup, disableInteraction]);
+    trackScreenEvent('open');
+  }, [hasPopup, setHasPopup, disableInteraction, trackScreenEvent]);
   var closePopup = useCallback(function () {
     setHasPopup(false);
     enableInteraction();
+    trackScreenEvent('close');
   }, [hasPopup, setHasPopup, enableInteraction]);
+  var onClickSign = useCallback(function (signId) {
+    setCurrentSign(signId);
+    trackScreenEvent("open_sign_".concat(signId));
+  }, [setCurrentSign, trackScreenEvent]);
+  var onClickCloseSign = useCallback(function () {
+    setCurrentSign(null);
+    trackScreenEvent('close_sign');
+  }, [setCurrentSign, trackScreenEvent]);
   var screenState = useScreenState();
   useEffect(function () {
     if (screenState === 'intro') {
@@ -675,13 +691,13 @@ var Horoscope = function Horoscope(_ref) {
 
     if (screenState === 'grid') {
       setHasPopup(true);
-      setActiveSignId(null);
+      setCurrentSign(null);
     }
 
     if (screenState !== null && screenState.includes('signs')) {
       var index = screenState.split('.').pop();
       setHasPopup(true);
-      setActiveSignId(signs[index].id);
+      setCurrentSign(signs[index].id);
     }
   }, [screenState]);
 
@@ -790,7 +806,7 @@ var Horoscope = function Horoscope(_ref) {
   //                 signs={signs}
   //                 signSubtitle={signSubtitle}
   //                 activeSignId={activeSignId}
-  //                 setActiveSignId={setActiveSignId}
+  //                 setCurrentSign={setCurrentSign}
   //             />
   //         </CSSTransition>
   //     ) : null}
@@ -838,8 +854,9 @@ var Horoscope = function Horoscope(_ref) {
     background: popupBackground,
     signs: signs,
     signSubtitle: signSubtitle,
-    activeSignId: activeSignId,
-    setActiveSignId: setActiveSignId,
+    currentSign: currentSign,
+    onClickSign: onClickSign,
+    onClickClose: onClickCloseSign,
     transitionDisabled: transitionDisabled
   })) : null))));
 };

package/lib/index.js

@@ -13,6 +13,7 @@ var reactTransitionGroup = require('react-transition-group');
 var core = require('@micromag/core');
 var components = require('@micromag/core/components');
 var contexts = require('@micromag/core/contexts');
+var hooks = require('@micromag/core/hooks');
 var utils = require('@micromag/core/utils');
 var Background = require('@micromag/element-background');
 var Button = require('@micromag/element-button');
@@ -239,8 +240,7 @@ var propTypes$1 = {
     description: core.PropTypes.textElement
   })),
   signSubtitle: core.PropTypes.headingElement,
-  activeSignId: PropTypes__default["default"].string,
-  setActiveSignId: PropTypes__default["default"].func,
+  currentSign: PropTypes__default["default"].string,
   width: PropTypes__default["default"].number,
   height: PropTypes__default["default"].number,
   background: core.PropTypes.backgroundElement,
@@ -248,13 +248,14 @@ var propTypes$1 = {
   current: PropTypes__default["default"].bool,
   active: PropTypes__default["default"].bool,
   transitionDisabled: PropTypes__default["default"].bool,
+  onClickSign: PropTypes__default["default"].func,
+  onClickClose: PropTypes__default["default"].func,
   className: PropTypes__default["default"].string
 };
 var defaultProps$1 = {
   signs: null,
   signSubtitle: null,
-  activeSignId: null,
-  setActiveSignId: null,
+  currentSign: null,
   width: null,
   height: null,
   background: null,
@@ -262,14 +263,15 @@ var defaultProps$1 = {
   current: true,
   active: true,
   transitionDisabled: false,
+  onClickSign: null,
+  onClickClose: null,
   className: null
 };
 
 var SignsGrid = function SignsGrid(_ref) {
   var signs = _ref.signs,
       signSubtitle = _ref.signSubtitle,
-      activeSignId = _ref.activeSignId,
-      setActiveSignId = _ref.setActiveSignId,
+      currentSignId = _ref.currentSign,
       width = _ref.width,
       height = _ref.height,
       background = _ref.background,
@@ -277,16 +279,14 @@ var SignsGrid = function SignsGrid(_ref) {
       current = _ref.current,
       active = _ref.active,
       transitionDisabled = _ref.transitionDisabled,
+      onClickSign = _ref.onClickSign,
+      onClickClose = _ref.onClickClose,
       className = _ref.className;
-  // const [activeSignId, setActiveSignId] = useState(null);
-  var activeSign = signs.find(function (_ref2) {
+  var currentSign = signs.find(function (_ref2) {
     var _ref2$id = _ref2.id,
         id = _ref2$id === void 0 ? null : _ref2$id;
-    return activeSignId === id;
+    return currentSignId === id;
   }) || null;
-  var closeModal = React.useCallback(function () {
-    return setActiveSignId(null);
-  }, [activeSignId, setActiveSignId]);
 
   var _useScreenRenderConte = contexts.useScreenRenderContext(),
       isView = _useScreenRenderConte.isView,
@@ -315,7 +315,7 @@ var SignsGrid = function SignsGrid(_ref) {
     className: styles$1.closeButton
   }, /*#__PURE__*/React__default["default"].createElement(Close, {
     className: styles$1.close
-  })) : null, /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.TransitionGroup, null, !activeSignId ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
+  })) : null, /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.TransitionGroup, null, currentSign === null ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
     key: "grid",
     classNames: styles$1,
     timeout: transitionDisabled ? 0 : 1000
@@ -350,7 +350,9 @@ var SignsGrid = function SignsGrid(_ref) {
       className: styles$1.gridElement,
       type: "button",
       onClick: function onClick() {
-        return setActiveSignId(id);
+        if (onClickSign !== null) {
+          onClickSign(id);
+        }
       }
     }, image !== null ? /*#__PURE__*/React__default["default"].createElement("img", {
       className: styles$1.image,
@@ -371,7 +373,7 @@ var SignsGrid = function SignsGrid(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$1.modalContainer
   }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
-    onClick: closeModal,
+    onClick: onClickClose,
     className: styles$1.backButton
   }, /*#__PURE__*/React__default["default"].createElement("span", {
     className: styles$1.arrow
@@ -387,7 +389,7 @@ var SignsGrid = function SignsGrid(_ref) {
     width: width,
     height: height,
     className: styles$1.signModal,
-    sign: activeSign,
+    sign: currentSign,
     subtitle: signSubtitle,
     transitionDisabled: transitionDisabled
   })))))));
@@ -631,6 +633,7 @@ var propTypes = {
   disableInteraction: PropTypes__default["default"].func,
   transitions: core.PropTypes.transitions,
   transitionStagger: PropTypes__default["default"].number,
+  type: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string
 };
 var defaultProps = {
@@ -646,6 +649,7 @@ var defaultProps = {
   popupBackground: null,
   current: true,
   active: true,
+  type: 'horoscope',
   enableInteraction: null,
   disableInteraction: null,
   transitions: null,
@@ -672,7 +676,9 @@ var Horoscope = function Horoscope(_ref) {
       disableInteraction = _ref.disableInteraction,
       transitions = _ref.transitions,
       transitionStagger = _ref.transitionStagger,
+      type = _ref.type,
       className = _ref.className;
+  var trackScreenEvent = hooks.useTrackScreenEvent(type);
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
@@ -690,17 +696,27 @@ var Horoscope = function Horoscope(_ref) {
 
   var _useState3 = React.useState(null),
       _useState4 = _slicedToArray__default["default"](_useState3, 2),
-      activeSignId = _useState4[0],
-      setActiveSignId = _useState4[1];
+      currentSign = _useState4[0],
+      setCurrentSign = _useState4[1];
 
   var openPopup = React.useCallback(function () {
     setHasPopup(true);
     disableInteraction();
-  }, [hasPopup, setHasPopup, disableInteraction]);
+    trackScreenEvent('open');
+  }, [hasPopup, setHasPopup, disableInteraction, trackScreenEvent]);
   var closePopup = React.useCallback(function () {
     setHasPopup(false);
     enableInteraction();
+    trackScreenEvent('close');
   }, [hasPopup, setHasPopup, enableInteraction]);
+  var onClickSign = React.useCallback(function (signId) {
+    setCurrentSign(signId);
+    trackScreenEvent("open_sign_".concat(signId));
+  }, [setCurrentSign, trackScreenEvent]);
+  var onClickCloseSign = React.useCallback(function () {
+    setCurrentSign(null);
+    trackScreenEvent('close_sign');
+  }, [setCurrentSign, trackScreenEvent]);
   var screenState = contexts.useScreenState();
   React.useEffect(function () {
     if (screenState === 'intro') {
@@ -709,13 +725,13 @@ var Horoscope = function Horoscope(_ref) {
 
     if (screenState === 'grid') {
       setHasPopup(true);
-      setActiveSignId(null);
+      setCurrentSign(null);
     }
 
     if (screenState !== null && screenState.includes('signs')) {
       var index = screenState.split('.').pop();
       setHasPopup(true);
-      setActiveSignId(signs[index].id);
+      setCurrentSign(signs[index].id);
     }
   }, [screenState]);
 
@@ -824,7 +840,7 @@ var Horoscope = function Horoscope(_ref) {
   //                 signs={signs}
   //                 signSubtitle={signSubtitle}
   //                 activeSignId={activeSignId}
-  //                 setActiveSignId={setActiveSignId}
+  //                 setCurrentSign={setCurrentSign}
   //             />
   //         </CSSTransition>
   //     ) : null}
@@ -872,8 +888,9 @@ var Horoscope = function Horoscope(_ref) {
     background: popupBackground,
     signs: signs,
     signSubtitle: signSubtitle,
-    activeSignId: activeSignId,
-    setActiveSignId: setActiveSignId,
+    currentSign: currentSign,
+    onClickSign: onClickSign,
+    onClickClose: onClickCloseSign,
     transitionDisabled: transitionDisabled
   })) : null))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-urbania-horoscope",
-    "version": "0.3.112",
+    "version": "0.3.113",
     "description": "",
     "keywords": [
         "javascript"
@@ -53,7 +53,7 @@
         "@micromag/core": "^0.3.112",
         "@micromag/element-background": "^0.3.112",
         "@micromag/element-button": "^0.3.112",
-        "@micromag/element-call-to-action": "^0.3.112",
+        "@micromag/element-call-to-action": "^0.3.113",
         "@micromag/element-container": "^0.3.112",
         "@micromag/element-grid": "^0.3.112",
         "@micromag/element-heading": "^0.3.112",
@@ -72,5 +72,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "f85362071b76115397f9a77537ac6e66b91f59f3"
+    "gitHead": "4c6a28244ace23a23cfe3a61429c79afb04750ca"
 }