@smart-react-components/ui - npm Package Compare versions

Comparing version 2.0.0-alpha-83 to 2.0.0-alpha-84

hooks/useFixedBoxMethods.d.ts

@@ -9,3 +9,3 @@ /// <reference types="react" />
     getTriggerEl: () => HTMLElement;
-    handlePosition: (e: MouseEvent) => void;
+    handlePosition: (e: MouseEvent | TouchEvent) => void;
     hoverDelay?: number;
@@ -12,0 +12,0 @@ isDismissible: boolean;

hooks/useFixedBoxMethods.js

@@ -14,5 +14,7 @@ "use strict";
 const react_1 = require("react");
+const styled_components_1 = require("styled-components");
 const types_1 = require("../types");
 const dom_2 = require("../util/dom");
 const useFixedBoxMethods = ({ beforeShow, boxEl, getTriggerEl, handlePosition, hoverDelay, isDismissible, key, setStatus, status, triggerInteraction }) => {
+    const theme = (0, styled_components_1.useTheme)();
     const enterTimeout = (0, react_1.useRef)(null);
@@ -22,2 +24,3 @@ const enterTimeoutMouseMove = (0, react_1.useRef)(null);
     const mouseEvent = (0, react_1.useRef)(null);
+    const touchStartDate = (0, react_1.useRef)(null);
     const [localStatus, setLocalStatus] = (0, react_1.useState)(() => false);
@@ -41,2 +44,24 @@ const getStatus = () => status !== null && status !== void 0 ? status : localStatus;
     };
+    const handleTriggerRightTouchStart = e => {
+        e.preventDefault();
+        mouseEvent.current = e;
+        touchStartDate.current = Date.now();
+        const triggerEl = getTriggerEl();
+        (0, dom_1.addEventListener)(triggerEl, ['touchend'], handleTriggerRightTouchEnd);
+        setTimeout(() => {
+            if (touchStartDate.current) {
+                touchStartDate.current = null;
+                (0, dom_1.removeEventListener)(triggerEl, ['touchend'], handleTriggerRightTouchEnd);
+                setStatus(true);
+            }
+        }, 1500);
+    };
+    const handleTriggerRightTouchEnd = e => {
+        e.preventDefault();
+        if (touchStartDate.current) {
+            touchStartDate.current = null;
+            const triggerEl = getTriggerEl();
+            (0, dom_1.removeEventListener)(triggerEl, ['touchend'], handleTriggerRightTouchEnd);
+        }
+    };
     const handleTriggerMouseEnter = e => {
@@ -123,3 +148,8 @@ mouseEvent.current = null;
         if (triggerInteraction & types_1.TriggerInteraction.RIGHT_CLICK) {
-            (0, dom_1.addEventListener)(triggerEl, ['contextmenu'], handleTriggerRightClick);
+            if (theme.$.vars.isMobile) {
+                (0, dom_1.addEventListener)(triggerEl, ['touchstart'], handleTriggerRightTouchStart);
+            }
+            else {
+                (0, dom_1.addEventListener)(triggerEl, ['contextmenu'], handleTriggerRightClick);
+            }
             if (getStatus()) {
@@ -150,3 +180,8 @@ (0, dom_1.addEventListener)(triggerEl, ['click'], handleTriggerClick);
             if (triggerInteraction & types_1.TriggerInteraction.RIGHT_CLICK) {
-                (0, dom_1.removeEventListener)(triggerEl, ['contextmenu'], handleTriggerRightClick);
+                if (theme.$.vars.isMobile) {
+                    (0, dom_1.removeEventListener)(triggerEl, ['touchstart'], handleTriggerRightTouchStart);
+                }
+                else {
+                    (0, dom_1.removeEventListener)(triggerEl, ['contextmenu'], handleTriggerRightClick);
+                }
                 if (getStatus()) {
@@ -153,0 +188,0 @@ (0, dom_1.removeEventListener)(triggerEl, ['click'], handleTriggerClick);

package.json

 {
   "name": "@smart-react-components/ui",
-  "version": "2.0.0-alpha-83",
+  "version": "2.0.0-alpha-84",
   "license": "MIT",
@@ -5,0 +5,0 @@ "main": "index.js",

util/fixed-box.js

@@ -38,7 +38,7 @@ "use strict";
 const calculatePositionBasedOnXAxis = (triggerRect, boxEl, e, position, space, windowWidth, windowHeight, isOverflowPrevented) => {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     // left & width
     let left;
     const width = boxEl.offsetWidth + .5;
-    const triggerLeft = (_a = e === null || e === void 0 ? void 0 : e.clientX) !== null && _a !== void 0 ? _a : triggerRect.left;
+    const triggerLeft = (_d = (_a = e === null || e === void 0 ? void 0 : e.clientX) !== null && _a !== void 0 ? _a : (_c = (_b = e === null || e === void 0 ? void 0 : e.touches) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.pageX) !== null && _d !== void 0 ? _d : triggerRect.left;
     const triggerWidth = e ? 0 : triggerRect.width;
@@ -60,3 +60,3 @@ const diffLeft = triggerRect.left - (space + width);
     let height = boxEl.offsetHeight;
-    const triggerTop = (_b = e === null || e === void 0 ? void 0 : e.clientY) !== null && _b !== void 0 ? _b : triggerRect.top;
+    const triggerTop = (_h = (_e = e === null || e === void 0 ? void 0 : e.clientY) !== null && _e !== void 0 ? _e : (_g = (_f = e === null || e === void 0 ? void 0 : e.touches) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.pageY) !== null && _h !== void 0 ? _h : triggerRect.top;
     const triggerHeight = e ? 0 : triggerRect.height + triggerRect.top <= windowHeight ? triggerRect.height : (windowHeight - triggerRect.top);
@@ -84,7 +84,7 @@ const diffBottom = windowHeight - (triggerRect.top + height);
 const calculatePositionBasedOnYAxis = (triggerRect, boxEl, e, position, space, windowWidth, windowHeight, isOverflowPrevented) => {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     // left & width
     let left;
     const width = boxEl.offsetWidth + .5;
-    const triggerLeft = (_a = e === null || e === void 0 ? void 0 : e.clientX) !== null && _a !== void 0 ? _a : triggerRect.left;
+    const triggerLeft = (_d = (_a = e === null || e === void 0 ? void 0 : e.clientX) !== null && _a !== void 0 ? _a : (_c = (_b = e === null || e === void 0 ? void 0 : e.touches) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.pageX) !== null && _d !== void 0 ? _d : triggerRect.left;
     const triggerWidth = e ? 0 : triggerRect.width;
@@ -105,3 +105,3 @@ const diffLeft = windowWidth - (triggerLeft + width);
     let height = boxEl.offsetHeight;
-    const triggerTop = (_b = e === null || e === void 0 ? void 0 : e.clientY) !== null && _b !== void 0 ? _b : triggerRect.top;
+    const triggerTop = (_h = (_e = e === null || e === void 0 ? void 0 : e.clientY) !== null && _e !== void 0 ? _e : (_g = (_f = e === null || e === void 0 ? void 0 : e.touches) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.pageY) !== null && _h !== void 0 ? _h : triggerRect.top;
     const triggerHeight = e ? 0 : triggerRect.height;
@@ -108,0 +108,0 @@ const diffBottom = windowHeight - (triggerTop + triggerHeight + height + space);

No alert changes

Improved metrics

Total package byte prevSize

529352

increased by0.43%

Lines of code

10985

increased by0.32%

No dependency changes