oolib 2.101.7 → 2.102.0

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

@@ -31,7 +31,6 @@ 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) {
@@ -42,18 +41,8 @@ var SliderShell = function (_a) {
     (0, react_1.useEffect)(function () {
         setImageMinusCaptionHeight(wrapperRef.current.clientWidth / (0, calcAspectRatio_1.calcAspectRatio)(aspectRatio));
     }, []);
-    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 },
-        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 + "%" },
-            react_1.default.createElement("div", { onTouchStart: handleDragStart, onMouseDown: handleDragStart }, render(v, idx) /* explicitly called, cuz we want an error to throw if render prop aint passed thru */))); }),
+        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 () {
                     return setActiveIdx(activeIdx > 0 ? activeIdx - 1 : value.length - 1);

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

@@ -54,15 +54,26 @@ var makeArrayFromLength_1 = require("../../../../utils/makeArrayFromLength");
 var SingleImageInput_1 = require("../SingleImageInput");
 var GalleryThumbnails_1 = require("./comps/GalleryThumbnails");
 var SliderShell_1 = require("./comps/SliderShell");
+var useSwipe_1 = require("../../../../utils/customHooks/useSwipe");
 var GallerySlider = function () {
     var _a = (0, ImageInputContext_1.useImageInputContext)(), value = _a.value, noOfImagesUploading = _a.noOfImagesUploading, invert = _a.invert;
     var _b = (0, react_1.useState)(0), activeIdx = _b[0], setActiveIdx = _b[1];
     (0, react_1.useEffect)(function () { return setActiveIdx(0); }, [value === null || value === void 0 ? void 0 : value.length]); // reset the activeidx with uploading new images(focus on the newly added Images)
     var uploadingPlaceholders = (0, makeArrayFromLength_1.makeArrayFromLength)(noOfImagesUploading).map(function (d) { return undefined; });
+    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.StyledGallery, { invert: invert },
         react_1.default.createElement(GalleryThumbnails_1.GalleryThumbnails, { setActiveIdx: setActiveIdx, activeIdx: activeIdx }),
         (value === null || value === void 0 ? void 0 : value.length) > 0 ? (react_1.default.createElement(SliderShell_1.SliderShell, { value: __spreadArray(__spreadArray([], uploadingPlaceholders, true), value, true), activeIdx: activeIdx, setActiveIdx: setActiveIdx, render: function (v) { return (react_1.default.createElement(SingleImageInput_1.SingleImageInput, __assign({}, {
                 value: v,
+                handleDragStart: handleDragStart,
                 // key: v?.publicUrl || idx, //cuz this is done inside the SliderShell
             }))); } })) : (react_1.default.createElement(Placeholder_1.default, null))));
 };

package/dist/components/ImageInput/comps/ImageEditor/index.d.ts

@@ -1,7 +1,7 @@
 /**
  * fiddle for dealing with rotation: https://jsfiddle.net/wunderbart/w1hw5kv1/
  */
-export function ImageEditor({ id, readOnly, value: imageData, defaultImageSpread, handleSingleImageDataChange, handleDeleteSingleImage, handleReplaceSingleImage, aspectRatio, invert, handleUpload, setImageUnderEdit, disableImageBorder, stretchToFullHeight, containerShape, omitEditorTools, enableCaptions, underEditImageData: _underEditImageData, setUnderEditImageData: _setUnderEditImageData, isInPopUp, isInRTE }: {
+export function ImageEditor({ id, readOnly, value: imageData, defaultImageSpread, handleSingleImageDataChange, handleDeleteSingleImage, handleReplaceSingleImage, aspectRatio, invert, handleUpload, setImageUnderEdit, disableImageBorder, stretchToFullHeight, containerShape, omitEditorTools, enableCaptions, underEditImageData: _underEditImageData, setUnderEditImageData: _setUnderEditImageData, isInPopUp, isInRTE, handleDragStart }: {
     id: any;
     readOnly: any;
     value: any;
@@ -22,5 +22,6 @@ export function ImageEditor({ id, readOnly, value: imageData, defaultImageSpread
     setUnderEditImageData: any;
     isInPopUp: any;
     isInRTE: any;
+    handleDragStart: any;
 }, ...args: any[]): React.JSX.Element;
 import React from "react";

package/dist/components/ImageInput/comps/ImageEditor/index.js

@@ -64,7 +64,7 @@ function ImageEditor(_a) {
     disableImageBorder = _a.disableImageBorder, stretchToFullHeight = _a.stretchToFullHeight, containerShape = _a.containerShape, omitEditorTools = _a.omitEditorTools, enableCaptions = _a.enableCaptions, 
     //sent by parent ImageEditor to child (modal) ImageEditor
     _underEditImageData = _a.underEditImageData, //ImageEditor passes this to its recursive self when opening in popup
-    _setUnderEditImageData = _a.setUnderEditImageData, isInPopUp = _a.isInPopUp, isInRTE = _a.isInRTE;
+    _setUnderEditImageData = _a.setUnderEditImageData, isInPopUp = _a.isInPopUp, isInRTE = _a.isInRTE, handleDragStart = _a.handleDragStart;
     var theme = (0, styled_components_1.useTheme)();
     var _b = theme || {}, LexicalTextEditor = _b.LexicalTextEditor, _c = _b.lexicalTextEditorHasValue, lexicalTextEditorHasValue = _c === void 0 ? function () { return false; } : _c, //we are just defaulting to false for oolib preview. Meaning, when previewing in oolib, since this function doesnt exist (as it has to be provided by okf-fe), we will always return false from it.
     //backwards compat
@@ -173,7 +173,7 @@ function ImageEditor(_a) {
                     imageSpread: imageSpread,
                     cropX: cropX,
                     cropY: cropY,
-                })),
+                }, { onTouchStart: handleDragStart && handleDragStart, onMouseDown: handleDragStart && handleDragStart })),
                 underEditImageData !== undefined &&
                     !omitEditorTools.includes("reposition") && (react_1.default.createElement(ImageReposManager_1.ImageReposManager, __assign({}, {
                     fullWidthOrFullHeightImg: fullWidthOrFullHeightImg,

package/dist/components/ImageInput/comps/SingleImageInput/index.d.ts

@@ -1,4 +1,5 @@
-export function SingleImageInput({ value, }: {
+export function SingleImageInput({ value, handleDragStart }: {
     value: any;
+    handleDragStart: any;
 }): React.JSX.Element;
 import React from "react";

package/dist/components/ImageInput/comps/SingleImageInput/index.js

@@ -29,7 +29,8 @@ var Placeholder_1 = __importDefault(require("../Placeholder"));
  *
  */
 var SingleImageInput = function (_a) {
-    var value = _a.value;
+    var value = _a.value, // this is a subset of ImageInput's value prop
+    handleDragStart = _a.handleDragStart;
     var _b = (0, ImageInputContext_1.useImageInputContext)(), id = _b.id, aspectRatio = _b.aspectRatio, onChange = _b.onChange, handleUpload = _b.handleUpload, publicUrlBeingReplaced = _b.publicUrlBeingReplaced, readOnly = _b.readOnly, enableCaptions = _b.enableCaptions, invert = _b.invert, containerShape = _b.containerShape, defaultImageSpread = _b.defaultImageSpread, handleSingleImageDataChange = _b.handleSingleImageDataChange, handleDeleteSingleImage = _b.handleDeleteSingleImage, handleReplaceSingleImage = _b.handleReplaceSingleImage, setImageUnderEdit = _b.setImageUnderEdit, stretchToFullHeight = _b.stretchToFullHeight, disableImageBorder = _b.disableImageBorder, omitEditorTools = _b.omitEditorTools, isInRTE = _b.isInRTE;
     //this helps for the ImageSlider, since ImageSlider uses SingleImageInput as child
     var isBeingReplaced = publicUrlBeingReplaced && publicUrlBeingReplaced === (value === null || value === void 0 ? void 0 : value.publicUrl);
@@ -51,7 +52,8 @@ var SingleImageInput = function (_a) {
         stretchToFullHeight: stretchToFullHeight,
         disableImageBorder: disableImageBorder,
         omitEditorTools: omitEditorTools,
-        isInRTE: isInRTE
+        isInRTE: isInRTE,
+        handleDragStart: handleDragStart
     })));
 };
 exports.SingleImageInput = SingleImageInput;

package/dist/icons/custom/index.d.ts

@@ -61,3 +61,4 @@ 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;
+export declare const SpainFlag: (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.PakistanFlag = exports.ChileFlag = exports.IndonesiaFlag = void 0;
+exports.SpainFlag = 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");
@@ -410,3 +410,16 @@ var PakistanFlag = function (props) {
         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;
+var SpainFlag = function (props) {
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "40", height: "40", viewBox: "0 0 36 36" },
+        react_1.default.createElement("path", { fill: "#C60A1D", d: "M36 27a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V9a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4z" }),
+        react_1.default.createElement("path", { fill: "#FFC400", d: "M0 12h36v12H0z" }),
+        react_1.default.createElement("path", { fill: "#EA596E", d: "M9 17v3a3 3 0 1 0 6 0v-3z" }),
+        react_1.default.createElement("path", { fill: "#F4A2B2", d: "M12 16h3v3h-3z" }),
+        react_1.default.createElement("path", { fill: "#DD2E44", d: "M9 16h3v3H9z" }),
+        react_1.default.createElement("ellipse", { cx: "12", cy: "14.5", fill: "#EA596E", rx: "3", ry: "1.5" }),
+        react_1.default.createElement("ellipse", { cx: "12", cy: "13.75", fill: "#FFAC33", rx: "3", ry: ".75" }),
+        react_1.default.createElement("path", { fill: "#99AAB5", d: "M7 16h1v7H7zm9 0h1v7h-1z" }),
+        react_1.default.createElement("path", { fill: "#66757F", d: "M6 22h3v1H6zm9 0h3v1h-3zm-8-7h1v1H7zm9 0h1v1h-1z" })));
+};
+exports.SpainFlag = SpainFlag;

package/dist/icons/index.d.ts

@@ -162,6 +162,7 @@ export namespace icons {
     export { ColombiaFlag };
     export { ChileFlag };
     export { PakistanFlag };
+    export { SpainFlag };
 }
 import { PencilSimple } from "phosphor-react";
 import { PencilLine } from "phosphor-react";
@@ -326,3 +327,4 @@ import { BrazilFlag } from "./custom";
 import { ColombiaFlag } from "./custom";
 import { ChileFlag } from "./custom";
 import { PakistanFlag } from "./custom";
+import { SpainFlag } from "./custom";

package/dist/icons/index.js

@@ -167,5 +167,6 @@ exports.icons = {
     BrazilFlag: custom_1.BrazilFlag,
     ColombiaFlag: custom_1.ColombiaFlag,
     ChileFlag: custom_1.ChileFlag,
-    PakistanFlag: custom_1.PakistanFlag
+    PakistanFlag: custom_1.PakistanFlag,
+    SpainFlag: custom_1.SpainFlag
 };

package/package.json

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