oolib 2.96.1 → 2.98.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/icons/custom/index.d.ts

@@ -59,3 +59,5 @@ export declare const MalaysiaFlag: (props: any) => React.JSX.Element;
 export declare const UKFlag: (props: any) => React.JSX.Element;
 export declare const USAFlag: (props: any) => React.JSX.Element;
 export declare const IndonesiaFlag: (props: any) => React.JSX.Element;
+export declare const ChileFlag: (props: any) => React.JSX.Element;
+export declare const PakistanFlag: (props: any) => React.JSX.Element;

package/dist/icons/custom/index.js

@@ -15,7 +15,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.USAFlag = exports.UKFlag = exports.MalaysiaFlag = exports.ColombiaFlag = exports.BrazilFlag = exports.AudioEmbedIcon = exports.VideoEmbedIcon = exports.Attachment2 = exports.PDFIcon = exports.RichFormatToolOrderedList = exports.RichFormatToolUnorderedList = exports.RichFormatToolH2 = exports.RichFormatToolBlockquote = exports.LinkIcon = exports.UnderlineBtn = exports.ItalicBtn = exports.BoldBtn = exports.SettingsSM = exports.Close_S = exports.UploadImage = exports.KebabMenu = exports.Website_solid_SM = exports.Phone_solid_SM = exports.Mail_solid_SM = exports.Youtube_solid_SM = exports.Instagram_solid_SM = exports.Twitter_solid_SM = exports.Linkedin_solid_SM = exports.Facebook_solid_SM = exports.EditSM = exports.AddXS = exports.UploadSM = exports.Download = exports.Download__nofill = exports.Index = exports.Person14 = exports.Location14 = exports.ModalBulbIcon = exports.KenyaFlag = exports.NigeriaFlag = exports.IndiaFlag = exports.BadgeVetted = exports.BadgeMod = exports.BadgeSuperAdmin = exports.BadgeAdmin = exports.OkeGoogleIcon = exports.LetterH = exports.LanguageIcon = exports.MultipleImages = exports.IndexIcon = void 0;
-exports.IndonesiaFlag = void 0;
+exports.PakistanFlag = exports.ChileFlag = exports.IndonesiaFlag = void 0;
 var react_1 = __importDefault(require("react"));
 var themes_1 = require("../../themes");
 var DisplayIcon_1 = require("../../utils/comps/DisplayIcon");
@@ -394,3 +394,19 @@ var IndonesiaFlag = function (props) {
         react_1.default.createElement("path", { fill: "#EEE", d: "M36 27a4 4 0 01-4 4H4a4 4 0 01-4-4v-9h36v9z" })));
 };
 exports.IndonesiaFlag = IndonesiaFlag;
+var ChileFlag = function (props) {
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 30, height: 30, fill: "none", viewBox: "-4 -4 24 16" },
+        react_1.default.createElement("path", { d: "M20 12H-4V-4h24z", fill: "#d52b1e" }),
+        react_1.default.createElement("path", { d: "M4 4h16v-8H-4z", fill: "#fff" }),
+        react_1.default.createElement("path", { d: "M4 4h-8v-8h8z", fill: "#0039a6" })));
+};
+exports.ChileFlag = ChileFlag;
+var PakistanFlag = function (props) {
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 30, height: 30, fill: "none", viewBox: "-75 -40 120 80" },
+        react_1.default.createElement("path", { fill: "#fff", d: "M-75-40H45v80H-75z" }),
+        react_1.default.createElement("path", { fill: "#01411C", d: "M-45-40h90v80h-90z" }),
+        react_1.default.createElement("circle", { r: "24", fill: "#fff" }),
+        react_1.default.createElement("circle", { r: "22", cx: "-7", cy: "-40", fill: "#01411C", transform: "rotate(-41.634 45 -40)" }),
+        react_1.default.createElement("path", { fill: "#fff", d: "M8.751-17.959l10.11 11.373L3.997-9.844l13.94-6.1-7.692 13.129z" })));
+};
+exports.PakistanFlag = PakistanFlag;

package/dist/icons/index.d.ts

@@ -160,6 +160,8 @@ export namespace icons {
     export { MalaysiaFlag };
     export { BrazilFlag };
     export { ColombiaFlag };
+    export { ChileFlag };
+    export { PakistanFlag };
 }
 import { PencilSimple } from "phosphor-react";
 import { PencilLine } from "phosphor-react";
@@ -322,3 +324,5 @@ import { UKFlag } from "./custom";
 import { MalaysiaFlag } from "./custom";
 import { BrazilFlag } from "./custom";
 import { ColombiaFlag } from "./custom";
+import { ChileFlag } from "./custom";
+import { PakistanFlag } from "./custom";

package/dist/icons/index.js

@@ -165,5 +165,7 @@ exports.icons = {
     UKFlag: custom_1.UKFlag,
     MalaysiaFlag: custom_1.MalaysiaFlag,
     BrazilFlag: custom_1.BrazilFlag,
-    ColombiaFlag: custom_1.ColombiaFlag
+    ColombiaFlag: custom_1.ColombiaFlag,
+    ChileFlag: custom_1.ChileFlag,
+    PakistanFlag: custom_1.PakistanFlag
 };

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/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.1",
+  "version": "2.98.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",