oolib 2.96.0 → 2.97.0

package/dist/components/ImageInput/comps/GallerySlider/comps/SliderShell/index.js

@@ -31,6 +31,7 @@ var calcAspectRatio_1 = require("../../../ImageEditor/utils/calcAspectRatio");
 var themes_1 = require("../../../../../../themes");
 var icons_1 = require("../../../../../../icons");
 var Typo_1 = require("../../../../../Typo");
+var useSwipe_1 = require("../../../../../../utils/customHooks/useSwipe");
 var greyColor80 = themes_1.colors.greyColor80;
 var CaretLeft = icons_1.icons.CaretLeft, CaretRight = icons_1.icons.CaretRight;
 var SliderShell = function (_a) {
@@ -41,7 +42,16 @@ var SliderShell = function (_a) {
     (0, react_1.useEffect)(function () {
         setImageMinusCaptionHeight(wrapperRef.current.clientWidth / (0, calcAspectRatio_1.calcAspectRatio)(aspectRatio));
     }, []);
-    return (react_1.default.createElement(styled_1.StyledFlexWrapper, { ref: wrapperRef },
+    var isTouchDevice = (0, react_1.useRef)('ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0);
+    var handleDragStart = (0, useSwipe_1.useSwipe)({
+        isTouchDevice: isTouchDevice,
+        onSlide: function (direction) {
+            setActiveIdx(function (prevIdx) {
+                return direction === 'right' ? (prevIdx < value.length - 1 ? prevIdx + 1 : 0) : (prevIdx > 0 ? prevIdx - 1 : value.length - 1);
+            });
+        },
+    }).handleDragStart;
+    return (react_1.default.createElement(styled_1.StyledFlexWrapper, { ref: wrapperRef, onTouchStart: handleDragStart, onMouseDown: handleDragStart },
         value.map(function (v, idx) { return (react_1.default.createElement(styled_1.StyledFlexItem, { key: (v === null || v === void 0 ? void 0 : v.publicUrl) || idx, marginLeft: idx === 0 && activeIdx * -100 + "%" }, render(v, idx) /* explicitly called, cuz we want an error to throw if render prop aint passed thru */)); }),
         !isLoading && value.length > 1 && !imageUnderEdit && react_1.default.createElement(react_1.Fragment, null,
             react_1.default.createElement(styled_1.StyledCaretLeft, { onClick: function () {

package/dist/components/Modals/Modal/index.js

@@ -88,7 +88,15 @@ var Modal = function (_a) {
                             ? react_1.default.createElement(Buttons_1.ButtonPrimary, { onClick: onConfirm }, onConfirmText) // In some cases we want to pass button directly to the component as prop
                             : onConfirm,
                         showCloseBtn && react_1.default.createElement(Buttons_1.ButtonGhost, { onClick: onClose }, onCloseText)))))); };
-    return ((0, react_dom_1.createPortal)(react_1.default.createElement(styled_1.StyledModalLargeBg, null,
+    var _o = (0, react_1.useState)(window.visualViewport.height), screenHeight = _o[0], setScreenHeight = _o[1];
+    (0, react_1.useEffect)(function () {
+        window.addEventListener('resize', setScreenHeight(window.visualViewport.height));
+        return function () {
+            window.removeEventListener('resize', setScreenHeight(window.visualViewport.height));
+        };
+    }, []);
+    var isKeyboardOpen = window.visualViewport.height < screenHeight;
+    return ((0, react_dom_1.createPortal)(react_1.default.createElement(styled_1.StyledModalLargeBg, { style: { height: isKeyboardOpen ? 'auto' : '100svh', overflow: 'hidden' } },
         react_1.default.createElement(styled_1.StyledModalLargeBgColor, { initial: { opacity: initAnimPos.opacity }, animate: { opacity: animPos.opacity }, transition: {
                 type: "tween",
                 ease: "easeOut",

package/dist/index.d.ts

@@ -31,7 +31,7 @@ export { ModalConfirm } from "./components/Modals/ModalConfirm";
 export { ModalForms } from "./components/Modals/derivedComps/ModalForms";
 export { Modal } from "./components/Modals/Modal";
 export { ModalSmall } from "./components/Modals/derivedComps/ModalSmall";
-export { EmptyStates } from "./components/EmptyStates2";
+export { EmptyStates } from "./components/EmptyStates";
 export { HomeCover } from "./components/HomeCover";
 export { PageScrollIndicator } from "./components/PageScrollIndicator";
 export { BarChart } from "./components/dataViz/comps/BarChart";

package/dist/index.js

@@ -76,8 +76,8 @@ var Modal_1 = require("./components/Modals/Modal");
 Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return Modal_1.Modal; } });
 var ModalSmall_1 = require("./components/Modals/derivedComps/ModalSmall");
 Object.defineProperty(exports, "ModalSmall", { enumerable: true, get: function () { return ModalSmall_1.ModalSmall; } });
-var EmptyStates2_1 = require("./components/EmptyStates2");
-Object.defineProperty(exports, "EmptyStates", { enumerable: true, get: function () { return EmptyStates2_1.EmptyStates; } });
+var EmptyStates_1 = require("./components/EmptyStates");
+Object.defineProperty(exports, "EmptyStates", { enumerable: true, get: function () { return EmptyStates_1.EmptyStates; } });
 var HomeCover_1 = require("./components/HomeCover");
 Object.defineProperty(exports, "HomeCover", { enumerable: true, get: function () { return HomeCover_1.HomeCover; } });
 var PageScrollIndicator_1 = require("./components/PageScrollIndicator");

package/dist/themes/colors.d.ts

@@ -45,6 +45,7 @@ export namespace colors {
     export { lightPink };
     export { pinkHighlight };
     export { blueHighlight };
+    export { yellowHighlight };
     export { annoPink };
     export { annoBlue };
 }
@@ -94,6 +95,7 @@ declare const cyan: "#B5F2FA";
 declare const lightPink: "#FFE5F2";
 declare const pinkHighlight: "#FF9AF4";
 declare const blueHighlight: "#52E2EE";
+declare const yellowHighlight: "#FFE600";
 declare const annoPink: "#FF91F4";
 declare const annoBlue: "#52E2EE";
 export {};

package/dist/themes/colors.js

@@ -48,6 +48,7 @@ var disabledShadowColor = greyColor70;
 // Highlight colors used in RTE 
 var pinkHighlight = '#FF9AF4';
 var blueHighlight = '#52E2EE';
+var yellowHighlight = "#FFE600";
 // annotation RTE Colors
 var annoPink = '#FF91F4';
 var annoBlue = '#52E2EE';
@@ -98,6 +99,7 @@ exports.colors = {
     lightPink: lightPink,
     pinkHighlight: pinkHighlight,
     blueHighlight: blueHighlight,
+    yellowHighlight: yellowHighlight,
     annoPink: annoPink,
-    annoBlue: annoBlue
+    annoBlue: annoBlue,
 };

package/dist/utils/customHooks/useSwipe.d.ts

@@ -0,0 +1,6 @@
+export function useSwipe({ isTouchDevice, onSlide }: {
+    isTouchDevice: any;
+    onSlide: any;
+}): {
+    handleDragStart: (e: any) => void;
+};

package/dist/utils/customHooks/useSwipe.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSwipe = void 0;
+var react_1 = require("react");
+// A custom hook for handling swipe gestures.
+var useSwipe = function (_a) {
+    var isTouchDevice = _a.isTouchDevice, onSlide = _a.onSlide;
+    var isSliding = (0, react_1.useRef)(false); // A reference to track if sliding is happening or not.
+    var dragStartX = (0, react_1.useRef)(null); // A reference to track the start position of the drag.
+    var dragDistance = (0, react_1.useRef)(0); // A reference to track the distance of the drag.
+    //Handles the start of the drag gesture.
+    var handleDragStart = function (e) {
+        e.preventDefault();
+        // Set the initial drag start position
+        dragStartX.current = isTouchDevice.current ? e.touches[0].clientX : e.clientX;
+        // Reset the drag distance
+        dragDistance.current = 0;
+        // Set the sliding flag to false
+        isSliding.current = false;
+        // Add event listeners for touch or mouse move and end events
+        if (isTouchDevice.current) {
+            document.body.addEventListener('touchmove', handleDragMove, { passive: false });
+            document.body.addEventListener('touchend', handleDragEnd);
+        }
+        else {
+            document.body.addEventListener('mousemove', handleDragMove);
+            document.body.addEventListener('mouseup', handleDragEnd);
+        }
+    };
+    //Handles the move of the drag gesture.
+    var handleDragMove = function (e) {
+        // Get the clientX value based on the device type
+        var clientX = isTouchDevice.current ? e.touches[0].clientX : e.clientX;
+        // Calculate the drag distance
+        dragDistance.current = clientX - dragStartX.current;
+        // Check if sliding is happening
+        if (Math.abs(dragDistance.current) > 20 && !isSliding.current) {
+            // Determine the direction of the slide
+            var direction = dragDistance.current > 0 ? 'left' : 'right';
+            // Call the onSlide function with the direction
+            onSlide(direction);
+            // Reset the drag start position and distance
+            dragStartX.current = clientX;
+            dragDistance.current = 0;
+            // Set the sliding flag
+            isSliding.current = true;
+        }
+    };
+    // Handles the end of the drag gesture.
+    var handleDragEnd = function () {
+        // Remove event listeners based on device type
+        if (isTouchDevice.current) {
+            document.body.removeEventListener('touchmove', handleDragMove);
+            document.body.removeEventListener('touchend', handleDragEnd);
+        }
+        else {
+            document.body.removeEventListener('mousemove', handleDragMove);
+            document.body.removeEventListener('mouseup', handleDragEnd);
+        }
+        // Reset drag start coordinates, drag distance, and sliding flag
+        dragStartX.current = null;
+        dragDistance.current = 0;
+        isSliding.current = false;
+    };
+    return {
+        handleDragStart: handleDragStart,
+    };
+};
+exports.useSwipe = useSwipe;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.96.0",
+  "version": "2.97.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",