@micromag/screen-keypad 0.4.56 → 0.4.58

package/es/index.js

@@ -6,7 +6,7 @@ import { animated } from '@react-spring/web';
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 import isString from 'lodash/isString';
-import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
+import { useRef, useState, useMemo, useEffect, useCallback } from 'react';
 import { Close, ScreenElement } from '@micromag/core/components';
 import { usePlaybackContext, usePlaybackMediaRef, useScreenState, useScreenSize, useViewerContext, useViewerWebView, useViewerInteraction, useScreenRenderContext } from '@micromag/core/contexts';
 import { useTrackScreenEvent, useDimensionObserver, useDragProgress } from '@micromag/core/hooks';
@@ -189,7 +189,6 @@ function KeypadScreen(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     popup = _useState6[0],
     setPopup = _useState6[1];
-  var prevShowPopupRef = useRef(showPopup);
   var _ref7 = popup || {},
     _ref7$heading = _ref7.heading,
     popupHeading = _ref7$heading === void 0 ? null : _ref7$heading,
@@ -227,6 +226,18 @@ function KeypadScreen(_ref) {
     popupInWebView = _ref10$inWebView === void 0 ? false : _ref10$inWebView,
     _ref10$boxStyle = _ref10.boxStyle,
     popupButtonBoxStyle = _ref10$boxStyle === void 0 ? null : _ref10$boxStyle;
+
+  // Skips a render loop when opening a popup
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    showNextPopup = _useState8[0],
+    setShowNextPopup = _useState8[1];
+  useEffect(function () {
+    if (showNextPopup) {
+      setShowNextPopup(false);
+      setShowPopup(true);
+    }
+  }, [showNextPopup, setShowPopup, setShowNextPopup]);
   var onItemClick = useCallback(function (e, item, index) {
     e.stopPropagation();
     if (isNotInteractive) {
@@ -247,7 +258,7 @@ function KeypadScreen(_ref) {
       });
     } else {
       setPopup(item);
-      setShowPopup(true);
+      setShowNextPopup(true);
     }
     var _ref12 = heading || {},
       _ref12$body = _ref12.body,
@@ -285,10 +296,10 @@ function KeypadScreen(_ref) {
       e.stopPropagation();
     }
   }, []);
-  var _useState7 = useState(null),
-    _useState8 = _slicedToArray(_useState7, 2),
-    popupDragDirection = _useState8[0],
-    setPopupDragDirection = _useState8[1];
+  var _useState9 = useState(null),
+    _useState0 = _slicedToArray(_useState9, 2),
+    popupDragDirection = _useState0[0],
+    setPopupDragDirection = _useState0[1];
   var onPopupScrollHeightChange = useCallback(function (_ref13) {
     var _ref13$scrolleeHeight = _ref13.scrolleeHeight,
       scrolleeHeight = _ref13$scrolleeHeight === void 0 ? 0 : _ref13$scrolleeHeight;
@@ -383,15 +394,6 @@ function KeypadScreen(_ref) {
     bindPopupDrag = _useDragProgress.bind,
     popupSpring = _useDragProgress.progress,
     popupTransitioning = _useDragProgress.transitioning;
-
-  // Clear popup contents after close transition completes
-  useEffect(function () {
-    if (prevShowPopupRef.current && !showPopup && !popupTransitioning) {
-      console.log('clear popup');
-      setPopup(null);
-    }
-    prevShowPopupRef.current = showPopup;
-  }, [showPopup, popupTransitioning]);
   useEffect(function () {
     var keyup = function keyup(e) {
       if (e.key === 'Escape') {
@@ -495,6 +497,17 @@ function KeypadScreen(_ref) {
       setShowPopup(false);
     }
   }, [screenState, items, isView]);
+
+  // Clear popup contents after close transition completes
+  useEffect(function () {
+    if (isView && screenState === null && !showPopup && !popupTransitioning) {
+      // console.log('clear popup');
+      setPopup(null);
+    }
+  }, [isView, screenState, showPopup, popupTransitioning]);
+
+  // console.log('render keypad', { screenState, popup, showPopup, popupTransitioning });
+
   return /*#__PURE__*/jsxs("div", {
     ref: containerRef,
     className: classNames([styles.container, className, _defineProperty(_defineProperty({}, styles.isPlaceholder, isPlaceholder), styles.withSquareItems, withSquareItems)]),
@@ -594,7 +607,7 @@ function KeypadScreen(_ref) {
             spacing: isPlaceholder ? 2 : columnSpacing,
             items: gridItems
           })]
-        }), popup !== null ? /*#__PURE__*/jsxs(Fragment, {
+        }), /*#__PURE__*/jsxs(Fragment, {
           children: [/*#__PURE__*/jsx(animated.div, {
             className: classNames([styles.popupBackdrop]),
             style: {
@@ -704,7 +717,7 @@ function KeypadScreen(_ref) {
               })
             })
           }))]
-        }) : null]
+        }) ]
       }), !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
         ref: footerRef,
         className: styles.footer,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-keypad",
-    "version": "0.4.56",
+    "version": "0.4.58",
     "private": false,
     "description": "",
     "keywords": [
@@ -94,6 +94,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "8d1c7dca724abbc01da7cebbe6913c77ee27f0b7",
+    "gitHead": "b521da8b8c3efd5c099079ca3bd6e679b97155cf",
     "types": "es/index.d.ts"
 }