@micromag/screen-keypad 0.4.57 → 0.4.59

package/es/index.js

@@ -135,9 +135,9 @@ function KeypadScreen(_ref) {
     _useDimensionObserver4 = _useDimensionObserver3.height,
     footerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
   var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    popupDragDisabled = _useState2[0],
-    setPopupDragDisabled = _useState2[1];
+    _useState2 = _slicedToArray(_useState, 2);
+    _useState2[0];
+    var setPopupDragDisabled = _useState2[1];
   var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
   var mediaShouldLoad = !isPlaceholder && (current || preload);
   var isInteractivePreview = isEdit && screenState === null;
@@ -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,
@@ -311,19 +310,22 @@ function KeypadScreen(_ref) {
     }
   }, [height]);
   var computePopupProgress = useCallback(function (_ref14) {
-    var dragActive = _ref14.active,
+    var _ref14$active = _ref14.active,
+      dragActive = _ref14$active === void 0 ? false : _ref14$active,
       _ref14$movement = _slicedToArray(_ref14.movement, 2),
-      my = _ref14$movement[1],
+      _ref14$movement$ = _ref14$movement[1],
+      my = _ref14$movement$ === void 0 ? null : _ref14$movement$,
       _ref14$velocity = _slicedToArray(_ref14.velocity, 2),
-      vy = _ref14$velocity[1];
+      _ref14$velocity$ = _ref14$velocity[1],
+      vy = _ref14$velocity$ === void 0 ? null : _ref14$velocity$;
     var damper = 0.5;
     var windowHeight = typeof window !== 'undefined' ? window.innerHeight : 0;
-    var delta = windowHeight > 0 ? Math.abs(my) / windowHeight : 0;
-    var reachedThreshold = vy > 1 || delta > 0.3;
+    var delta = windowHeight > 0 && my !== null ? Math.abs(my) / windowHeight : 0;
+    var reachedThreshold = vy !== null ? vy > 1 || delta > 0.3 : false;
     var progress = 0;
-    if (popupDragDirection === 'top' && my < 0) {
+    if (popupDragDirection === 'top' && my !== null && my < 0) {
       progress = delta * damper * -1;
-    } else if (popupDragDirection === 'bottom' && my > 0) {
+    } else if (popupDragDirection === 'bottom' && my !== null && my > 0) {
       progress = delta * damper;
     }
     if (!dragActive) {
@@ -341,7 +343,7 @@ function KeypadScreen(_ref) {
     } else {
       enableInteraction();
     }
-  }, [showPopup]);
+  }, [showPopup, enableInteraction, disableInteraction]);
   useEffect(function () {
     function handleClickOutside(e) {
       if (!current && isView || popupInnerRef.current && !popupInnerRef.current.contains(e.target) && containerRef.current && containerRef.current.contains(e.target) && !isInteractivePreview && !isEdit && showPopup) {
@@ -375,7 +377,8 @@ function KeypadScreen(_ref) {
   }, [onCloseModal, showPopup]);
   var onResolve = useCallback(function () {}, []);
   var _useDragProgress = useDragProgress({
-      disabled: !isView || popupDragDisabled,
+      disabled: true,
+      // !isView || popupDragDisabled, // TODO: remove drag/popupDragDisabled if we're cool with it
       progress: showPopup ? 0 : 1,
       computeProgress: computePopupProgress,
       onResolve: onResolve,
@@ -395,15 +398,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') {
@@ -489,7 +483,7 @@ function KeypadScreen(_ref) {
   }, [items, screenState, buttonBoxStyle, buttonTextStyle, buttonLayout, isNotInteractive]);
   useEffect(function () {
     if (screenState === 'popup' && isPlaceholder) {
-      setPopup(placeholderPopupBoxStyles); // @note force placeholder
+      setPopup(placeholderPopupBoxStyles);
       setShowPopup(true);
     }
     if (screenState === 'keypad') {
@@ -507,6 +501,13 @@ function KeypadScreen(_ref) {
       setShowPopup(false);
     }
   }, [screenState, items, isView]);
+
+  // Clear popup contents after close transition completes
+  useEffect(function () {
+    if (isView && screenState === null && !showPopup && !popupTransitioning) {
+      setPopup(null);
+    }
+  }, [isView, screenState, showPopup, popupTransitioning]);
   return /*#__PURE__*/jsxs("div", {
     ref: containerRef,
     className: classNames([styles.container, className, _defineProperty(_defineProperty({}, styles.isPlaceholder, isPlaceholder), styles.withSquareItems, withSquareItems)]),
@@ -716,7 +717,7 @@ function KeypadScreen(_ref) {
               })
             })
           }))]
-        }) ]
+        })]
       }), !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
         ref: footerRef,
         className: styles.footer,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-keypad",
-    "version": "0.4.57",
+    "version": "0.4.59",
     "private": false,
     "description": "",
     "keywords": [
@@ -94,6 +94,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "fbe8859ecf20634ed5591afb432ff4869eb37352",
+    "gitHead": "e4dfd331721492c90cb0f38b3a60e91237ca990f",
     "types": "es/index.d.ts"
 }