oolib 2.101.7 → 2.101.8

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/package.json

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