oolib 2.63.0 → 2.63.2

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

@@ -0,0 +1,217 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageEditor = void 0;
+var react_1 = __importStar(require("react"));
+var AspectRatioShell_1 = __importDefault(require("../AspectRatioShell"));
+var Divider_1 = require("../../../Divider");
+var Wrappers_1 = require("../../../Wrappers");
+var Container_1 = require("../../../Container");
+var Paddings_1 = require("../../../Paddings");
+var ConfirmDeleteModal_1 = require("./comps/ConfirmDeleteModal");
+var EditToolbar_1 = require("./comps/EditToolbar");
+var ImageActionsMenu_1 = require("./comps/ImageActionsMenu");
+var ImageReposManager_1 = require("./comps/ImageReposManager");
+var styled_1 = require("./styled");
+var smallImageInputUIConditionsMet_1 = require("./utils/smallImageInputUIConditionsMet");
+var useReorientImage_1 = require("./utils/useReorientImage");
+var styled_components_1 = require("styled-components");
+var renderRTEPlaceholderForOolibPreview_1 = require("../../../../utilsOolib/renderRTEPlaceholderForOolibPreview");
+var themes_1 = require("../../../../themes");
+var ModalLarge_1 = require("../../../Modals/ModalLarge");
+var SkeletonLoader_1 = require("../../../LoadersAndProgress/SkeletonLoader");
+/**
+ * fiddle for dealing with rotation: https://jsfiddle.net/wunderbart/w1hw5kv1/
+ */
+function ImageEditor(_a) {
+    var id = _a.id, readOnly = _a.readOnly, imageData = _a.value, defaultImageSpread = _a.defaultImageSpread, handleSingleImageDataChange = _a.handleSingleImageDataChange, handleDeleteSingleImage = _a.handleDeleteSingleImage, handleReplaceSingleImage = _a.handleReplaceSingleImage, aspectRatio = _a.aspectRatio, invert = _a.invert, handleUpload = _a.handleUpload, setImageUnderEdit = _a.setImageUnderEdit, //comes from ImageInput context if used inside it
+    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;
+    var theme = (0, styled_components_1.useTheme)();
+    var _b = theme || {}, RichTextEditor = _b.RichTextEditor, _c = _b.richTextHasValue //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.
+    , richTextHasValue = _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.
+    ; //temporarily passed thru from okf
+    var _d = (0, react_1.useState)(_underEditImageData || undefined), underEditImageData = _d[0], setUnderEditImageData = _d[1];
+    //set state in parent imageeditor
+    (0, react_1.useEffect)(function () {
+        _setUnderEditImageData && _setUnderEditImageData(underEditImageData);
+    }, [underEditImageData]);
+    var props = arguments[0];
+    /** rotation */
+    /**
+     * if underEditImageData exists, render the temp 'formattings' as well,
+     * which are stored in underEditImageData.
+     *
+     * underEditImageData is merged into imageData, only if the 'formattings'
+     * are 'saved'
+     */
+    var _e = underEditImageData || imageData, publicUrl = _e.publicUrl, _f = _e.imageSpread, imageSpread = _f === void 0 ? defaultImageSpread : _f, _g = _e.imageRotate, imageRotate = _g === void 0 ? 0 : _g, _h = _e.cropX, cropX = _h === void 0 ? 0 : _h, _j = _e.cropY, cropY = _j === void 0 ? 0 : _j;
+    /**
+     * repos management
+     */
+    var wrapperRef = (0, react_1.useRef)(null);
+    var renderedImageRef = (0, react_1.useRef)(null);
+    var isFirstMount = (0, react_1.useRef)(true);
+    var _k = (0, react_1.useState)(undefined), fullWidthOrFullHeightImg = _k[0], setFullWidthOrFullHeightImg = _k[1];
+    var _l = (0, useReorientImage_1.useReorientImage)({
+        imageRotate: imageRotate,
+        setFullWidthOrFullHeightImg: setFullWidthOrFullHeightImg,
+        setUnderEditImageData: setUnderEditImageData,
+        publicUrl: publicUrl,
+        aspectRatio: aspectRatio,
+        underEditImageData: underEditImageData,
+        isFirstMount: isFirstMount
+    }), reorientedImageTempUrl = _l.reorientedImageTempUrl, imageLazyLoading = _l.imageLazyLoading;
+    var _m = (0, react_1.useState)(undefined), showDeleteImageModal = _m[0], setShowDeleteImageModal = _m[1];
+    var inputRef = (0, react_1.useRef)(null);
+    var _o = (0, react_1.useState)(undefined), editorStyle = _o[0], setEditorStyle = _o[1]; //alt: modal
+    (0, react_1.useEffect)(function () { isFirstMount.current = false; }, []);
+    var decideEditorStyle = function () {
+        var _a = wrapperRef.current.getBoundingClientRect(), width = _a.width, height = _a.height;
+        if (isInPopUp) {
+            setEditorStyle("toolbar");
+        }
+        else if ((0, smallImageInputUIConditionsMet_1.smallImageInputUIConditionsMet)({ width: width, height: height, containerShape: containerShape })) {
+            setEditorStyle("modal");
+        }
+        else {
+            setEditorStyle("toolbar");
+        }
+    };
+    var modalStyleEditorIsCurrentlyOpen = function () {
+        return editorStyle === "modal" && !!underEditImageData;
+    };
+    var genModalStyleEditor = function () { return (react_1.default.createElement(ModalLarge_1.ModalLarge, { title: "Edit Image" },
+        react_1.default.createElement(Container_1.Container, null,
+            react_1.default.createElement(Wrappers_1.Wrapper650, null,
+                react_1.default.createElement(Paddings_1.PaddingTopBottom40, null,
+                    react_1.default.createElement(ImageEditor, __assign({}, props, { id: 'insideModal', underEditImageData: underEditImageData, setUnderEditImageData: setUnderEditImageData, isInPopUp: true }))))))); };
+    var genToolbarStyledEditor = function () { return (react_1.default.createElement(EditToolbar_1.EditToolbar, __assign({}, {
+        setUnderEditImageData: setUnderEditImageData,
+        underEditImageData: underEditImageData,
+        imageData: imageData,
+        handleSingleImageDataChange: handleSingleImageDataChange,
+        setImageUnderEdit: setImageUnderEdit,
+        imageSpread: imageSpread,
+        publicUrl: publicUrl,
+        defaultImageSpread: defaultImageSpread,
+        omitEditorTools: omitEditorTools,
+    }))); };
+    return (react_1.default.createElement("div", { id: id && id + '_ImageEditor', style: {
+            position: "relative",
+            height: stretchToFullHeight ? "100%" : "auto",
+        } }, imageLazyLoading && !modalStyleEditorIsCurrentlyOpen() ? (react_1.default.createElement(AspectRatioShell_1.default, __assign({}, {
+        key: "loaderShell",
+        aspectRatio: aspectRatio,
+        stretchToFullHeight: stretchToFullHeight,
+        containerShape: containerShape,
+        disableImageBorder: disableImageBorder,
+    }),
+        react_1.default.createElement(SkeletonLoader_1.SkeletonLoader, { style: { height: "100%" } }))) : (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement(AspectRatioShell_1.default, __assign({}, {
+            id: id,
+            invert: invert,
+            key: "imageShell",
+            aspectRatio: aspectRatio,
+            stretchToFullHeight: stretchToFullHeight,
+            containerShape: containerShape,
+            disableImageBorder: disableImageBorder,
+            onShellPrepared: decideEditorStyle,
+        }),
+            showDeleteImageModal && (react_1.default.createElement(ConfirmDeleteModal_1.ConfirmDeleteModal, __assign({}, {
+                showDeleteImageModal: showDeleteImageModal,
+                setShowDeleteImageModal: setShowDeleteImageModal,
+                handleDeleteSingleImage: handleDeleteSingleImage,
+            }))),
+            react_1.default.createElement(styled_1.StyledFullWidthImgWrapper, { ref: wrapperRef, invert: invert, disableImageBorder: disableImageBorder },
+                react_1.default.createElement(styled_1.StyledImg, __assign({}, {
+                    ref: renderedImageRef,
+                    fullWidthOrFullHeightImg: fullWidthOrFullHeightImg,
+                    src: reorientedImageTempUrl || publicUrl,
+                    imageSpread: imageSpread,
+                    cropX: cropX,
+                    cropY: cropY,
+                })),
+                underEditImageData !== undefined &&
+                    !omitEditorTools.includes("reposition") && (react_1.default.createElement(ImageReposManager_1.ImageReposManager, __assign({}, {
+                    fullWidthOrFullHeightImg: fullWidthOrFullHeightImg,
+                    wrapperRef: wrapperRef,
+                    renderedImageRef: renderedImageRef,
+                    setUnderEditImageData: setUnderEditImageData,
+                }))))),
+        !readOnly && (react_1.default.createElement(styled_1.StyledImageEditToolbar, __assign({}, {
+            underEditImageData: underEditImageData,
+            containerShape: containerShape,
+            isInPopUp: isInPopUp,
+        }), underEditImageData === undefined ? (react_1.default.createElement(ImageActionsMenu_1.ImageActionsMenu, __assign({}, {
+            invert: invert,
+            setUnderEditImageData: setUnderEditImageData,
+            setImageUnderEdit: setImageUnderEdit,
+            inputRef: inputRef,
+            setShowDeleteImageModal: setShowDeleteImageModal,
+            publicUrl: publicUrl,
+            imageData: imageData,
+            handleReplaceSingleImage: handleReplaceSingleImage,
+            handleUpload: handleUpload,
+            isInRTE: isInRTE
+        }))) : editorStyle === "toolbar" ? (genToolbarStyledEditor()) : (editorStyle === "modal" && genModalStyleEditor()))),
+        enableCaptions && (readOnly && !richTextHasValue(imageData.caption)
+            ? null
+            : react_1.default.createElement(react_1.Fragment, null,
+                react_1.default.createElement(Divider_1.Divider, { invert: invert }),
+                react_1.default.createElement("div", { style: {
+                        borderRadius: "0.2rem",
+                        padding: readOnly ? "1rem" : "2rem",
+                        backgroundColor: readOnly ? "initial" : invert ? themes_1.colors.greyColor90 : themes_1.colors.greyColor5,
+                    } }, !RichTextEditor
+                    ? (0, renderRTEPlaceholderForOolibPreview_1.renderRTEPlaceholderForOolibPreview)({
+                        width: '100%',
+                        height: '30px'
+                    })
+                    : react_1.default.createElement(RichTextEditor, { variant: 'simple', disableNewline: true, invert: invert, placeholder: "type caption for image (optional)", readOnly: readOnly, charLimit: 100, typo: "SANS_3", placeholderColor: invert ? themes_1.colors.greyColor70 : themes_1.colors.greyColor40, value: imageData.caption, onChange: function (id, val) {
+                            handleSingleImageDataChange({
+                                publicUrl: publicUrl,
+                                imageData: __assign(__assign({}, imageData), { caption: val }),
+                            });
+                        } })),
+                readOnly && react_1.default.createElement(Divider_1.Divider, { invert: invert })))))));
+}
+exports.ImageEditor = ImageEditor;

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

@@ -0,0 +1,4 @@
+export const StyledImageEditToolbar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledFullWidthImgWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledImg: import("styled-components").StyledComponent<"img", any, {}, never>;
+export const StyledImageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,72 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledImageWrapper = exports.StyledImg = exports.StyledFullWidthImgWrapper = exports.StyledImageEditToolbar = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var utilsOolib_1 = require("../../../../utilsOolib");
+exports.StyledImageEditToolbar = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n\n  display: flex;\n  gap: 0.5rem;\n  width: ", ";\n  ", "\n"], ["\n  position: absolute;\n\n  display: flex;\n  gap: 0.5rem;\n  width: ", ";\n  ", "\n"])), function (_a) {
+    var underEditImageData = _a.underEditImageData;
+    return (!underEditImageData ? "auto" : "100%");
+}, function (_a) {
+    var containerShape = _a.containerShape, isInPopUp = _a.isInPopUp;
+    if (isInPopUp) {
+        return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            top: 0;\n            right: 0;\n            transform: translateY(-100%);\n        "], ["\n            top: 0;\n            right: 0;\n            transform: translateY(-100%);\n        "])));
+    }
+    //else it is not in popup
+    return containerShape === "circle"
+        ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          top: 7%;\n          right: 4%;\n          /* transform: translate(50%, -50%); */\n        "], ["\n          top: 7%;\n          right: 4%;\n          /* transform: translate(50%, -50%); */\n        "]))) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          top: 0;\n            right: 0;\n        "], ["\n          top: 0;\n            right: 0;\n        "])));
+});
+exports.StyledFullWidthImgWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  position: relative;\n  \n"], ["\n  width: 100%;\n  height: 100%;\n  position: relative;\n  \n"])));
+exports.StyledImg = styled_components_1.default.img(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  /* z-index: -1; */\n  position: absolute;\n  left: 0;\n  top: 0;\n  transform: ", ";\n  margin-left: ", "; //when image is 'contain'ed\n  margin-top: ", "; //when image is 'contain'ed\n  ", "\n"], ["\n  /* z-index: -1; */\n  position: absolute;\n  left: 0;\n  top: 0;\n  transform: ", ";\n  margin-left: ", "; //when image is 'contain'ed\n  margin-top: ", "; //when image is 'contain'ed\n  ", "\n"])), function (_a) {
+    var _b = _a.cropX, cropX = _b === void 0 ? 0 : _b, _c = _a.cropY, cropY = _c === void 0 ? 0 : _c;
+    return "translate(".concat(cropX, "%,").concat(cropY, "%)");
+}, function (_a) {
+    var _b = _a.marginLeft, marginLeft = _b === void 0 ? 0 : _b;
+    return marginLeft;
+}, function (_a) {
+    var _b = _a.marginTop, marginTop = _b === void 0 ? 0 : _b;
+    return marginTop;
+}, function (_a) {
+    var fullWidthOrFullHeightImg = _a.fullWidthOrFullHeightImg, imageSpread = _a.imageSpread;
+    if (fullWidthOrFullHeightImg === 'fullWidth') {
+        return imageSpread === 'cover'
+            ? "width: 100%; height: auto;"
+            : "\n            height: 100%; \n            width: auto;\n            left: 50%;\n            transform: translateX(-50%);\n          "; //contain
+    }
+    else if (fullWidthOrFullHeightImg === 'fullHeight') {
+        return imageSpread === 'cover'
+            ? "height: 100%; width: auto;"
+            : "\n            width: 100%; \n            height: auto;\n            top: 50%;\n            transform: translateY(-50%);\n          ";
+    }
+});
+exports.StyledImageWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  height: 100%;\n  border: 2px solid ", ";\n"], ["\n  position: relative;\n  height: 100%;\n  border: 2px solid ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return (0, utilsOolib_1.getPrimaryColor10)(theme === null || theme === void 0 ? void 0 : theme.colors);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/ImageInput/comps/ImageEditor/utils/calcAspectRatio.d.ts

@@ -0,0 +1 @@
+export function calcAspectRatio(aspectRatio: any): number;

package/dist/components/ImageInput/comps/ImageEditor/utils/calcAspectRatio.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calcAspectRatio = void 0;
+var calcAspectRatio = function (aspectRatio) {
+    var split = aspectRatio.split("/");
+    return !split[1]
+        ? parseInt(split[0])
+        : parseInt(split[0]) / parseInt(split[1]);
+};
+exports.calcAspectRatio = calcAspectRatio;

package/dist/components/ImageInput/comps/ImageEditor/utils/changesMadeToUnderEditImageData.d.ts

@@ -0,0 +1,5 @@
+export function changesMadeToUnderEditImageData({ imageData, underEditImageData, defaultImageSpread }: {
+    imageData: any;
+    underEditImageData: any;
+    defaultImageSpread: any;
+}): boolean;

package/dist/components/ImageInput/comps/ImageEditor/utils/changesMadeToUnderEditImageData.js

@@ -0,0 +1,27 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.changesMadeToUnderEditImageData = void 0;
+var lodash_1 = require("lodash");
+/**
+   * we have to shove the defaults into imageData,
+   * else equality check wont work
+   */
+var changesMadeToUnderEditImageData = function (_a) {
+    var imageData = _a.imageData, underEditImageData = _a.underEditImageData, defaultImageSpread = _a.defaultImageSpread;
+    var fullImageData = __assign(__assign({ imageSpread: defaultImageSpread, imageRotate: 0, cropX: 0, cropY: 0 }, imageData), { caption: undefined //we dont compare changes in caption
+     });
+    var fullUnderEditImageData = __assign(__assign({ imageSpread: defaultImageSpread, imageRotate: 0, cropX: 0, cropY: 0 }, underEditImageData), { caption: undefined });
+    return !(0, lodash_1.isEqual)(fullImageData, fullUnderEditImageData);
+};
+exports.changesMadeToUnderEditImageData = changesMadeToUnderEditImageData;

package/dist/components/ImageInput/comps/ImageEditor/utils/decideIfFullWidthOrFullHeightImg.d.ts

@@ -0,0 +1,5 @@
+export function decideIfFullWidthOrFullHeightImg({ imgWidth, imgHeight, wrapperAspectRatio, }: {
+    imgWidth: any;
+    imgHeight: any;
+    wrapperAspectRatio: any;
+}): "fullWidth" | "fullHeight";

package/dist/components/ImageInput/comps/ImageEditor/utils/decideIfFullWidthOrFullHeightImg.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.decideIfFullWidthOrFullHeightImg = void 0;
+var calcAspectRatio_1 = require("./calcAspectRatio");
+var decideIfFullWidthOrFullHeightImg = function (_a) {
+    var imgWidth = _a.imgWidth, imgHeight = _a.imgHeight, wrapperAspectRatio = _a.wrapperAspectRatio;
+    var wrapperAspectRatioCalc = (0, calcAspectRatio_1.calcAspectRatio)(wrapperAspectRatio);
+    var imgRatioCalc = imgWidth / imgHeight;
+    //if image is relatively 'narrower' than the wrapper, then it should take full width
+    if (wrapperAspectRatioCalc > imgRatioCalc) {
+        return "fullWidth";
+    }
+    //if they are exactly the same, then image can take fullWidth
+    else if (imgRatioCalc === wrapperAspectRatioCalc) {
+        return "fullWidth";
+    }
+    //if image is relatively 'wider' than the wrapper, then it should take full height
+    else if (imgRatioCalc > wrapperAspectRatioCalc) {
+        return "fullHeight";
+    }
+};
+exports.decideIfFullWidthOrFullHeightImg = decideIfFullWidthOrFullHeightImg;

package/dist/components/ImageInput/comps/ImageEditor/utils/smallImageInputUIConditionsMet.d.ts

@@ -0,0 +1,5 @@
+export function smallImageInputUIConditionsMet({ width, height, containerShape }: {
+    width: any;
+    height: any;
+    containerShape: any;
+}): boolean;

package/dist/components/ImageInput/comps/ImageEditor/utils/smallImageInputUIConditionsMet.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.smallImageInputUIConditionsMet = void 0;
+var smallImageInputUIConditionsMet = function (_a) {
+    var width = _a.width, height = _a.height, containerShape = _a.containerShape;
+    return width < 300 || height < 300 || containerShape === "circle";
+};
+exports.smallImageInputUIConditionsMet = smallImageInputUIConditionsMet;

package/dist/components/ImageInput/comps/ImageEditor/utils/useReorientImage/changeImageOrientation.d.ts

@@ -0,0 +1,5 @@
+export function changeImageOrientation({ srcUrl, imageRotate, callback }: {
+    srcUrl: any;
+    imageRotate: any;
+    callback: any;
+}): void;

package/dist/components/ImageInput/comps/ImageEditor/utils/useReorientImage/changeImageOrientation.js

@@ -0,0 +1,76 @@
+"use strict";
+//this is a child function to useReorientImage. is not meant to be used 
+//for anything else
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.changeImageOrientation = void 0;
+var changeImageOrientation = function (_a) {
+    var srcUrl = _a.srcUrl, imageRotate = _a.imageRotate, callback = _a.callback;
+    var img = new Image();
+    img.crossOrigin = "anonymous"; // This enables CORS
+    img.src = srcUrl;
+    img.onload = function () {
+        var width = img.width, height = img.height, canvas = document.createElement("canvas"), ctx = canvas.getContext("2d");
+        var degToOrientationValueMap = [
+            { deg: -0, orientation: 1 },
+            { deg: 0, orientation: 1 },
+            { deg: -360, orientation: 1 },
+            { deg: 90, orientation: 6 },
+            { deg: -270, orientation: 6 },
+            { deg: 180, orientation: 3 },
+            { deg: -180, orientation: 3 },
+            { deg: 270, orientation: 8 },
+            { deg: -90, orientation: 8 },
+            //later : permutations and combinations of these can enable flip
+        ];
+        // console.log({imageRotate})
+        var orientationToSet = degToOrientationValueMap.find(function (d) { return d.deg === (imageRotate % 360); } //so that we bring all numbers within the range of -360 & 360
+        ).orientation;
+        // set proper canvas dimensions before transform & export
+        if (orientationToSet >= 5 && orientationToSet <= 8) {
+            canvas.width = height;
+            canvas.height = width;
+        }
+        else {
+            canvas.width = width;
+            canvas.height = height;
+        }
+        // transform context before drawing image
+        switch (orientationToSet) {
+            case 2:
+                ctx.transform(-1, 0, 0, 1, width, 0);
+                break;
+            case 3:
+                ctx.transform(-1, 0, 0, -1, width, height);
+                break;
+            case 4:
+                ctx.transform(1, 0, 0, -1, 0, height);
+                break;
+            case 5:
+                ctx.transform(0, 1, 1, 0, 0, 0);
+                break;
+            case 6:
+                ctx.transform(0, 1, -1, 0, height, 0);
+                break;
+            case 7:
+                ctx.transform(0, -1, -1, 0, height, width);
+                break;
+            case 8:
+                ctx.transform(0, -1, 1, 0, 0, width);
+                break;
+            default:
+                break;
+        }
+        // draw image
+        ctx.drawImage(img, 0, 0);
+        // console.log({newUrl: 'newUrl'})
+        // console.log({newUrl: canvas.toDataURL()})
+        // export base64
+        callback({
+            reorientedUrl: canvas.toDataURL(),
+            imageWidth: canvas.width,
+            imageHeight: canvas.height
+        });
+    };
+    // console.log({ srcUrl });
+};
+exports.changeImageOrientation = changeImageOrientation;

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

@@ -0,0 +1,11 @@
+export function useReorientImage({ imageRotate, setFullWidthOrFullHeightImg, setUnderEditImageData, publicUrl, aspectRatio, isFirstMount, }: {
+    imageRotate: any;
+    setFullWidthOrFullHeightImg: any;
+    setUnderEditImageData: any;
+    publicUrl: any;
+    aspectRatio: any;
+    isFirstMount: any;
+}): {
+    reorientedImageTempUrl: any;
+    imageLazyLoading: boolean;
+};

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

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useReorientImage = void 0;
+var lodash_1 = require("lodash");
+var react_1 = require("react");
+var decideIfFullWidthOrFullHeightImg_1 = require("../decideIfFullWidthOrFullHeightImg");
+var changeImageOrientation_1 = require("./changeImageOrientation");
+var useReorientImage = function (_a) {
+    var imageRotate = _a.imageRotate, setFullWidthOrFullHeightImg = _a.setFullWidthOrFullHeightImg, setUnderEditImageData = _a.setUnderEditImageData, publicUrl = _a.publicUrl, aspectRatio = _a.aspectRatio, isFirstMount = _a.isFirstMount;
+    var _b = (0, react_1.useState)(true), imageLazyLoading = _b[0], setImageLazyLoading = _b[1];
+    var _c = (0, react_1.useState)(undefined), reorientedImageTempUrl = _c[0], setReorientedImageTempUrl = _c[1];
+    (0, react_1.useEffect)(function () {
+        if (!imageLazyLoading)
+            setImageLazyLoading(true);
+        //if image rotation = undefined / 0 / -0, set reorientedImgTemp -> undefined
+        //this way the og public url will be used to render
+        if (imageRotate === undefined || [0, -0].indexOf(imageRotate) !== -1) {
+            if (reorientedImageTempUrl)
+                setReorientedImageTempUrl(undefined);
+            var img = new Image();
+            img.src = publicUrl;
+            img.onload = function () {
+                setFullWidthOrFullHeightImg((0, decideIfFullWidthOrFullHeightImg_1.decideIfFullWidthOrFullHeightImg)({
+                    imgWidth: this.width,
+                    imgHeight: this.height,
+                    wrapperAspectRatio: aspectRatio,
+                }));
+                setImageLazyLoading(false);
+            };
+        }
+        else {
+            (0, changeImageOrientation_1.changeImageOrientation)({
+                srcUrl: publicUrl,
+                imageRotate: imageRotate,
+                callback: function (_a) {
+                    //cuz its possible that this may run even if not in edit mode
+                    //e.g first mount, and on 'dont save changes'
+                    var reorientedUrl = _a.reorientedUrl, imageWidth = _a.imageWidth, imageHeight = _a.imageHeight;
+                    setFullWidthOrFullHeightImg((0, decideIfFullWidthOrFullHeightImg_1.decideIfFullWidthOrFullHeightImg)({
+                        imgWidth: imageWidth,
+                        imgHeight: imageHeight,
+                        wrapperAspectRatio: aspectRatio,
+                    }));
+                    setReorientedImageTempUrl(reorientedUrl);
+                    setImageLazyLoading(false);
+                    // setUrlAfterRotate(resetBase64Image);
+                },
+            });
+        }
+        /**
+         * if is not first mount, then rotate just happened.
+         * so reset crop data
+         */
+        if (!isFirstMount) {
+            //means if it is in edit mode
+            setUnderEditImageData(function (prev) {
+                var newData = (0, lodash_1.cloneDeep)(prev);
+                delete newData.cropX;
+                delete newData.cropY;
+                return newData;
+            });
+        }
+    }, [imageRotate]);
+    return { reorientedImageTempUrl: reorientedImageTempUrl, imageLazyLoading: imageLazyLoading };
+};
+exports.useReorientImage = useReorientImage;

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

@@ -0,0 +1,7 @@
+export default ImageUploadShell;
+declare function ImageUploadShell({ style, children, disabled }: {
+    style: any;
+    children: any;
+    disabled: any;
+}): React.JSX.Element;
+import React from "react";

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

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var ImageInputContext_1 = require("../../ImageInputContext");
+var ImageUploadShell = function (_a) {
+    var style = _a.style, children = _a.children, disabled = _a.disabled;
+    var inputRef = (0, react_1.useRef)(null);
+    var _b = (0, ImageInputContext_1.useImageInputContext)(), handleUpload = _b.handleUpload, onChange = _b.onChange, value = _b.value, id = _b.id, multiple = _b.multiple;
+    if (disabled)
+        return react_1.default.createElement("div", { style: { width: '100%', height: '100%' } }, children);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("input", { type: "file", accept: "image/*", style: { display: 'none' }, ref: inputRef, onChange: function (e) { return handleUpload({
+                files: e.target.files,
+                callback: function (_a) {
+                    var successfulUploads = _a.successfulUploads;
+                    onChange(id, multiple
+                        ? __spreadArray(__spreadArray([], successfulUploads, true), (value || []), true) : successfulUploads);
+                }
+            }); }, multiple: multiple }),
+        react_1.default.createElement("div", { onClick: function () { return inputRef.current.click(); }, style: { height: '100%', width: '100%' } }, children)));
+};
+exports.default = ImageUploadShell;

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

@@ -0,0 +1,2 @@
+export function InlineImageInput({}: {}): React.JSX.Element;
+import React from "react";

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

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineImageInput = void 0;
+var react_1 = __importDefault(require("react"));
+var ImageInputContext_1 = require("../../ImageInputContext");
+var Placeholder_1 = __importDefault(require("../Placeholder"));
+/**
+ * this component will expand in its complexity with time
+ */
+var InlineImageInput = function (_a) {
+    var _b, _c;
+    var _d = (0, ImageInputContext_1.useImageInputContext)(), isLoading = _d.isLoading, value = _d.value;
+    return isLoading ? (react_1.default.createElement(Placeholder_1.default, { aspectRatio: "4/1" })) : value && ((_b = value[0]) === null || _b === void 0 ? void 0 : _b.publicUrl) && (react_1.default.createElement("div", null,
+        react_1.default.createElement("img", { src: (_c = value[0]) === null || _c === void 0 ? void 0 : _c.publicUrl, style: { width: '100%', height: 'auto' } })));
+};
+exports.InlineImageInput = InlineImageInput;