oolib 2.188.0 → 2.188.2

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, handleDragStart }: {
+export function ImageEditor({ id, readOnly, value: imageData, defaultImageSpread, handleSingleImageDataChange, handleDeleteSingleImage, handleReplaceSingleImage, aspectRatio, invert, handleUpload, setImageUnderEdit, disableImageBorder, stretchToFullHeight, containerShape, omitEditorTools, enableCaptions, imageTags, underEditImageData: _underEditImageData, setUnderEditImageData: _setUnderEditImageData, isInPopUp, isInRTE, handleDragStart }: {
     id: any;
     readOnly: any;
     value: any;
@@ -18,6 +18,7 @@ export function ImageEditor({ id, readOnly, value: imageData, defaultImageSpread
     containerShape: any;
     omitEditorTools: any;
     enableCaptions: any;
+    imageTags: any;
     underEditImageData: any;
     setUnderEditImageData: any;
     isInPopUp: any;

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

@@ -71,18 +71,20 @@ var TextInputs_1 = require("../../../../v2/components/TextInputs");
  * fiddle for dealing with rotation: https://jsfiddle.net/wunderbart/w1hw5kv1/
  */
 function ImageEditor(_a) {
+    var _b;
     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, 
+    disableImageBorder = _a.disableImageBorder, stretchToFullHeight = _a.stretchToFullHeight, containerShape = _a.containerShape, omitEditorTools = _a.omitEditorTools, enableCaptions = _a.enableCaptions, imageTags = _a.imageTags, 
     //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, 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.
+    var _c = theme || {}, LexicalTextEditor = _c.LexicalTextEditor, _d = _c.lexicalTextEditorHasValue, lexicalTextEditorHasValue = _d === void 0 ? function () { return false; } : _d, //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.
+    TagsInputSingle = _c.TagsInputSingle, TagsInputMulti = _c.TagsInputMulti, 
     //backwards compat
-    _d = _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.
+    _e = _c.richTextHasValue, 
     //backwards compat
-    richTextHasValue = _d === void 0 ? function () { return false; } : _d; //temporarily passed thru from okf
-    var _e = (0, react_1.useState)(_underEditImageData || undefined), underEditImageData = _e[0], setUnderEditImageData = _e[1];
+    richTextHasValue = _e === void 0 ? function () { return false; } : _e; //temporarily passed thru from okf
+    var _f = (0, react_1.useState)(_underEditImageData || undefined), underEditImageData = _f[0], setUnderEditImageData = _f[1];
     var screenWidth = (0, _EXPORTS_1.useScreenWidth)();
     //set state in parent imageeditor
     (0, react_1.useEffect)(function () {
@@ -97,15 +99,15 @@ function ImageEditor(_a) {
      * underEditImageData is merged into imageData, only if the 'formattings'
      * are 'saved'
      */
-    var _f = underEditImageData || imageData, publicUrl = _f.publicUrl, _g = _f.imageSpread, imageSpread = _g === void 0 ? defaultImageSpread : _g, _h = _f.imageRotate, imageRotate = _h === void 0 ? 0 : _h, _j = _f.cropX, cropX = _j === void 0 ? 0 : _j, _k = _f.cropY, cropY = _k === void 0 ? 0 : _k;
+    var _g = underEditImageData || imageData, publicUrl = _g.publicUrl, _h = _g.imageSpread, imageSpread = _h === void 0 ? defaultImageSpread : _h, _j = _g.imageRotate, imageRotate = _j === void 0 ? 0 : _j, _k = _g.cropX, cropX = _k === void 0 ? 0 : _k, _l = _g.cropY, cropY = _l === void 0 ? 0 : _l;
     /**
      * repos management
      */
     var wrapperRef = (0, react_1.useRef)(null);
     var renderedImageRef = (0, react_1.useRef)(null);
     var isFirstMount = (0, react_1.useRef)(true);
-    var _l = (0, react_1.useState)(undefined), fullWidthOrFullHeightImg = _l[0], setFullWidthOrFullHeightImg = _l[1];
-    var _m = (0, useReorientImage_1.useReorientImage)({
+    var _m = (0, react_1.useState)(undefined), fullWidthOrFullHeightImg = _m[0], setFullWidthOrFullHeightImg = _m[1];
+    var _o = (0, useReorientImage_1.useReorientImage)({
         imageRotate: imageRotate,
         setFullWidthOrFullHeightImg: setFullWidthOrFullHeightImg,
         setUnderEditImageData: setUnderEditImageData,
@@ -115,10 +117,10 @@ function ImageEditor(_a) {
         isFirstMount: isFirstMount,
         handleDeleteSingleImage: handleDeleteSingleImage,
         readOnly: readOnly
-    }), reorientedImageTempUrl = _m.reorientedImageTempUrl, imageLazyLoading = _m.imageLazyLoading;
-    var _o = (0, react_1.useState)(undefined), showDeleteImageModal = _o[0], setShowDeleteImageModal = _o[1];
+    }), reorientedImageTempUrl = _o.reorientedImageTempUrl, imageLazyLoading = _o.imageLazyLoading;
+    var _p = (0, react_1.useState)(undefined), showDeleteImageModal = _p[0], setShowDeleteImageModal = _p[1];
     var inputRef = (0, react_1.useRef)(null);
-    var _p = (0, react_1.useState)(undefined), editorStyle = _p[0], setEditorStyle = _p[1]; //alt: modal
+    var _q = (0, react_1.useState)(undefined), editorStyle = _q[0], setEditorStyle = _q[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;
@@ -177,5 +179,24 @@ function ImageEditor(_a) {
                                 imageData: __assign(__assign({}, imageData), { caption: val }),
                             });
                         } })),
-                readOnly && react_1.default.createElement(Divider_1.Divider, { invert: invert })))))));
+                readOnly && react_1.default.createElement(Divider_1.Divider, { invert: invert }))),
+        (imageTags === null || imageTags === void 0 ? void 0 : imageTags.enable) &&
+            ((_b = imageTags === null || imageTags === void 0 ? void 0 : imageTags.config) === null || _b === void 0 ? void 0 : _b.map(function (_a) {
+                var _b;
+                var comp = _a.comp, tagCategory = _a.tagCategory;
+                var compsLookup = {
+                    TagsInputMulti: TagsInputMulti,
+                    TagsInputSingle: TagsInputSingle
+                };
+                var Comp = compsLookup[comp];
+                if (!Comp)
+                    return react_1.default.createElement("div", null, "placeholder for tag input");
+                return (react_1.default.createElement(Comp, { tagType: tagCategory, value: (_b = imageData.tags) === null || _b === void 0 ? void 0 : _b[tagCategory], onChange: function (id, val) {
+                        var _a;
+                        handleSingleImageDataChange({
+                            publicUrl: publicUrl,
+                            imageData: __assign(__assign({}, imageData), { tags: __assign(__assign({}, (imageData.tags || {})), (_a = {}, _a[tagCategory] = val, _a)) }),
+                        });
+                    } }));
+            }))))));
 }

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

@@ -20,9 +20,9 @@ var Placeholder_1 = __importDefault(require("../Placeholder"));
 var SingleImageInput = function (_a) {
     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;
+    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, imageTags = _b.imageTags, 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);
-    return !value || !value.publicUrl || isBeingReplaced ? (react_1.default.createElement(Placeholder_1.default, null)) : (react_1.default.createElement(ImageEditor_1.ImageEditor, { id: id, value: value, aspectRatio: aspectRatio, invert: invert, containerShape: containerShape, readOnly: readOnly, onChange: onChange, enableCaptions: enableCaptions, defaultImageSpread: defaultImageSpread, handleSingleImageDataChange: handleSingleImageDataChange, handleDeleteSingleImage: handleDeleteSingleImage, handleReplaceSingleImage: handleReplaceSingleImage, handleUpload: handleUpload, setImageUnderEdit: setImageUnderEdit, stretchToFullHeight: stretchToFullHeight, disableImageBorder: disableImageBorder, omitEditorTools: omitEditorTools, isInRTE: isInRTE, handleDragStart: handleDragStart }));
+    return !value || !value.publicUrl || isBeingReplaced ? (react_1.default.createElement(Placeholder_1.default, null)) : (react_1.default.createElement(ImageEditor_1.ImageEditor, { id: id, value: value, aspectRatio: aspectRatio, invert: invert, containerShape: containerShape, readOnly: readOnly, onChange: onChange, enableCaptions: enableCaptions, imageTags: imageTags, defaultImageSpread: defaultImageSpread, handleSingleImageDataChange: handleSingleImageDataChange, handleDeleteSingleImage: handleDeleteSingleImage, handleReplaceSingleImage: handleReplaceSingleImage, handleUpload: handleUpload, setImageUnderEdit: setImageUnderEdit, stretchToFullHeight: stretchToFullHeight, disableImageBorder: disableImageBorder, omitEditorTools: omitEditorTools, isInRTE: isInRTE, handleDragStart: handleDragStart }));
 };
 exports.SingleImageInput = SingleImageInput;

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

@@ -6,7 +6,7 @@
  * - richInputHasValue (util)
  * - RichTextEditor
  */
-export function ImageInput({ id, value, onChange, readOnly, multiple, stretchToFullHeight, aspectRatio, containerShape, invert, enableCaptions, defaultImageSpread, allowedFormats, folderName, bucketEnv, formatConvertConfig, dropzoneLabel, dropzoneSublabel, disableImageBorder, omitEditorTools, isRequired, showImageUploadCaution, files, isInRTE }: {
+export function ImageInput({ id, value, onChange, readOnly, multiple, stretchToFullHeight, aspectRatio, containerShape, invert, enableCaptions, imageTags, defaultImageSpread, allowedFormats, folderName, bucketEnv, formatConvertConfig, dropzoneLabel, dropzoneSublabel, disableImageBorder, omitEditorTools, isRequired, showImageUploadCaution, files, isInRTE }: {
     id: any;
     value: any;
     onChange: any;
@@ -17,6 +17,7 @@ export function ImageInput({ id, value, onChange, readOnly, multiple, stretchToF
     containerShape?: string;
     invert: any;
     enableCaptions?: boolean;
+    imageTags: any;
     defaultImageSpread?: string;
     allowedFormats?: string[];
     folderName?: string;

package/dist/components/ImageInput/index.js

@@ -33,13 +33,13 @@ var utilsOolib_1 = require("../../utilsOolib");
  */
 function ImageInput(_a) {
     var id = _a.id, value = _a.value, onChange = _a.onChange, readOnly = _a.readOnly, multiple = _a.multiple, _b = _a.stretchToFullHeight, stretchToFullHeight = _b === void 0 ? false : _b, _c = _a.aspectRatio, aspectRatio = _c === void 0 ? '5/3' : _c, _d = _a.containerShape, containerShape = _d === void 0 ? 'rectangle' : _d, //alt = circle
-    invert = _a.invert, _e = _a.enableCaptions, enableCaptions = _e === void 0 ? true : _e, _f = _a.defaultImageSpread, defaultImageSpread = _f === void 0 ? 'contain' : _f, _g = _a.allowedFormats, allowedFormats = _g === void 0 ? ["jpg", "jpeg", "png"] : _g, _h = _a.folderName, folderName = _h === void 0 ? 'images' : _h, bucketEnv = _a.bucketEnv, formatConvertConfig = _a.formatConvertConfig, dropzoneLabel = _a.dropzoneLabel, dropzoneSublabel = _a.dropzoneSublabel, _j = _a.disableImageBorder, disableImageBorder = _j === void 0 ? false : _j, _k = _a.omitEditorTools, omitEditorTools = _k === void 0 ? [] : _k, //can include : 'cover_contain' | 'rotate' | 'reposition'
+    invert = _a.invert, _e = _a.enableCaptions, enableCaptions = _e === void 0 ? true : _e, imageTags = _a.imageTags, _f = _a.defaultImageSpread, defaultImageSpread = _f === void 0 ? 'contain' : _f, _g = _a.allowedFormats, allowedFormats = _g === void 0 ? ["jpg", "jpeg", "png"] : _g, _h = _a.folderName, folderName = _h === void 0 ? 'images' : _h, bucketEnv = _a.bucketEnv, formatConvertConfig = _a.formatConvertConfig, dropzoneLabel = _a.dropzoneLabel, dropzoneSublabel = _a.dropzoneSublabel, _j = _a.disableImageBorder, disableImageBorder = _j === void 0 ? false : _j, _k = _a.omitEditorTools, omitEditorTools = _k === void 0 ? [] : _k, //can include : 'cover_contain' | 'rotate' | 'reposition'
     isRequired = _a.isRequired, _l = _a.showImageUploadCaution, showImageUploadCaution = _l === void 0 ? {} : _l, files = _a.files, //used by RTEImageInput
     isInRTE = _a.isInRTE;
     var props = arguments[0];
     var showOptionalLabelInDropzone = !props.label && !props.sublabel;
     var localize = (0, utilsOolib_1.useLocale)();
-    return (react_1.default.createElement(ImageInputContext_1.ImageInputContextProvider, { value: value, onChange: onChange, id: id, allowedFormats: allowedFormats, formatConvertConfig: formatConvertConfig, folderName: folderName, bucketEnv: bucketEnv, multiple: multiple, aspectRatio: aspectRatio, readOnly: readOnly, enableCaptions: enableCaptions, defaultImageSpread: defaultImageSpread, invert: invert, containerShape: containerShape, stretchToFullHeight: stretchToFullHeight, disableImageBorder: disableImageBorder, omitEditorTools: omitEditorTools, dropzoneLabel: dropzoneLabel || (multiple ? "".concat(localize('Add Images'), " ( max 10 )") : "Add Image"),
+    return (react_1.default.createElement(ImageInputContext_1.ImageInputContextProvider, { value: value, onChange: onChange, id: id, allowedFormats: allowedFormats, formatConvertConfig: formatConvertConfig, folderName: folderName, bucketEnv: bucketEnv, multiple: multiple, aspectRatio: aspectRatio, readOnly: readOnly, enableCaptions: enableCaptions, imageTags: imageTags, defaultImageSpread: defaultImageSpread, invert: invert, containerShape: containerShape, stretchToFullHeight: stretchToFullHeight, disableImageBorder: disableImageBorder, omitEditorTools: omitEditorTools, dropzoneLabel: dropzoneLabel || (multiple ? "".concat(localize('Add Images'), " ( max 10 )") : "Add Image"),
         dropzoneSublabel: dropzoneSublabel ||
             "Supports: ".concat(allowedFormats.map(function (f) { return f.toUpperCase(); }).join(", ")), showOptionalLabelInDropzone: showOptionalLabelInDropzone, // in cases like cover image scenario, we wanna show the 'optional' label in the dropzone area, rather than label area
         isRequired: isRequired, files: files, isInRTE: isInRTE, showImageUploadCaution: showImageUploadCaution },

package/dist/v2/components/TextInputs/derivedComps/URLInput.d.ts

@@ -1,8 +1,9 @@
-export function URLInput({ routesAreValidInputs, validationPlugin, passValidationErrorToFormValidation, content, ...props }: {
+export function URLInput({ routesAreValidInputs, validationPlugin: _validationPlugin, passValidationErrorToFormValidation, content, plugin, ...props }: {
     [x: string]: any;
     routesAreValidInputs?: boolean;
     validationPlugin: any;
     passValidationErrorToFormValidation: any;
     content: any;
+    plugin: any;
 }): React.JSX.Element;
 import React from "react";

package/dist/v2/components/TextInputs/derivedComps/URLInput.js

@@ -63,15 +63,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.URLInput = void 0;
 var react_1 = __importDefault(require("react"));
+var styled_components_1 = require("styled-components");
 var __1 = require("..");
 var URLInput = function (_a) {
     var _b = _a.routesAreValidInputs, routesAreValidInputs = _b === void 0 ? false : _b, //if we want react route declarations to be considered as 'valid' then set this to true
-    validationPlugin = _a.validationPlugin, passValidationErrorToFormValidation = _a.passValidationErrorToFormValidation, content = _a.content, props = __rest(_a, ["routesAreValidInputs", "validationPlugin", "passValidationErrorToFormValidation", "content"]);
+    _validationPlugin = _a.validationPlugin, passValidationErrorToFormValidation = _a.passValidationErrorToFormValidation, content = _a.content, plugin = _a.plugin, props = __rest(_a, ["routesAreValidInputs", "validationPlugin", "passValidationErrorToFormValidation", "content", "plugin"]);
+    var theme = (0, styled_components_1.useTheme)();
     var handleValidation = function (value) { return __awaiter(void 0, void 0, void 0, function () {
-        var pluginResponse, successObj, response, successObj, err_1, successObj, errorObj;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
+        var validationPlugin, pluginResponse, successObj, response, successObj, err_1, successObj, errorObj;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
                 case 0:
+                    validationPlugin = (_validationPlugin ||
+                        ((plugin === null || plugin === void 0 ? void 0 : plugin.validation) && ((_a = theme.pluginConfigs) === null || _a === void 0 ? void 0 : _a.tplBlockPlugins[plugin.validation])));
                     if (!validationPlugin) return [3 /*break*/, 2];
                     return [4 /*yield*/, validationPlugin({
                             value: value,
@@ -79,10 +84,10 @@ var URLInput = function (_a) {
                             passValidationErrorToFormValidation: passValidationErrorToFormValidation,
                         })];
                 case 1:
-                    pluginResponse = _a.sent();
+                    pluginResponse = _b.sent();
                     if (pluginResponse)
                         return [2 /*return*/, pluginResponse];
-                    _a.label = 2;
+                    _b.label = 2;
                 case 2:
                     //else
                     //if routesAreValidInputs, then first validate for a route
@@ -96,12 +101,12 @@ var URLInput = function (_a) {
                     if (!/^https?:\/\//i.test(value)) {
                         value = "https://" + value;
                     }
-                    _a.label = 3;
+                    _b.label = 3;
                 case 3:
-                    _a.trys.push([3, 5, , 6]);
+                    _b.trys.push([3, 5, , 6]);
                     return [4 /*yield*/, fetch(value)];
                 case 4:
-                    response = _a.sent();
+                    response = _b.sent();
                     if (response.status !== 200)
                         throw new Error("");
                     successObj = { type: "success", msg: "valid url" };
@@ -109,7 +114,7 @@ var URLInput = function (_a) {
                         passValidationErrorToFormValidation(successObj.type);
                     return [2 /*return*/, successObj];
                 case 5:
-                    err_1 = _a.sent();
+                    err_1 = _b.sent();
                     if (/[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/gi.test(value)) {
                         successObj = { type: "success", msg: "valid url" };
                         if (passValidationErrorToFormValidation)

package/package.json

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