oolib 2.63.4 → 2.63.5

package/dist/components/Dropdowns/comps/OptionContent/index.js

@@ -21,7 +21,7 @@ var OptionContent = function (_a) {
             gap: "1rem",
             maxWidth: "36rem",
         } },
-        (0, genProfileImg_1.genProfileImg)({ image: image, display: display, invert: invert, theme: theme }),
+        image && (0, genProfileImg_1.genProfileImg)({ image: image, display: display, invert: invert, theme: theme }),
         icon && (0, genIcon_1.genIcon)(icon),
         react_1.default.createElement("div", null,
             react_1.default.createElement(TypoComp, { invert: invert, semibold: desc ? true : false, className: "OKE-Dropdown__optionText ".concat(optionsClassName || "") }, (0, getText_1.getText)(display)),

package/dist/components/Dropdowns/utils/genProfileImg.d.ts

@@ -1,7 +1,6 @@
-export function genProfileImg({ image, display, invert, theme }: {
+export function genProfileImg({ image, display, invert }: {
     image: any;
     display: any;
     invert: any;
-    theme: any;
 }): React.JSX.Element;
 import React from "react";

package/dist/components/Dropdowns/utils/genProfileImg.js

@@ -5,18 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.genProfileImg = void 0;
 var react_1 = __importDefault(require("react"));
-var renderImagePlaceholderForOolibPreview_1 = require("../../../utilsOolib/renderImagePlaceholderForOolibPreview");
+var ProfileImageInput_1 = require("../../ImageInput/derivedComps/ProfileImageInput");
 var genProfileImg = function (_a) {
-    var image = _a.image, display = _a.display, invert = _a.invert, theme = _a.theme;
-    if (image) {
-        if (!(theme === null || theme === void 0 ? void 0 : theme.ProfileImageDisplay)) {
-            return (0, renderImagePlaceholderForOolibPreview_1.renderImagePlaceholderForOolibPreview)();
-        }
-        else {
-            var ProfileImageDisplay = theme.ProfileImageDisplay;
-            return (react_1.default.createElement("div", { style: { flex: "0 0 auto" } },
-                react_1.default.createElement(ProfileImageDisplay, { value: image, imageTitle: display, size: 20, invert: invert })));
-        }
-    }
+    var image = _a.image, display = _a.display, invert = _a.invert;
+    return (react_1.default.createElement("div", { style: { flex: "0 0 auto" } },
+        react_1.default.createElement(ProfileImageInput_1.ProfileImageInput, { readOnly: true, value: image, imageTitle: display, size: 20, invert: invert })));
 };
 exports.genProfileImg = genProfileImg;

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

@@ -0,0 +1,17 @@
+export function ProfileImageInput({ id, value, onChange, readOnly, invert, allowedFormats, disableImageBorder, defaultImageSpread, containerShape, size, imageTitle: _imageTitle, imageTitlePath, content: _content, tableRowData }: {
+    id: any;
+    value: any;
+    onChange: any;
+    readOnly: any;
+    invert: any;
+    allowedFormats?: string[];
+    disableImageBorder: any;
+    defaultImageSpread?: string;
+    containerShape?: string;
+    size?: number;
+    imageTitle: any;
+    imageTitlePath: any;
+    content: any;
+    tableRowData: any;
+}): React.JSX.Element;
+import React from "react";

package/dist/components/ImageInput/derivedComps/ProfileImageInput/index.js

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProfileImageInput = void 0;
+var react_1 = __importDefault(require("react"));
+var __1 = require("../../");
+var themes_1 = require("../../../../themes");
+var getVal_1 = require("../../../../utils/getterSetterDeleter/getVal");
+var makeArrayFromLength_1 = require("../../../../utils/makeArrayFromLength");
+var Typo_1 = require("../../../Typo");
+var ProfileImageInput = function (_a) {
+    var _b;
+    var 
+    //props that pass on to ImageInput
+    id = _a.id, value = _a.value, onChange = _a.onChange, readOnly = _a.readOnly, invert = _a.invert, _c = _a.allowedFormats, allowedFormats = _c === void 0 ? ["jpg", "jpeg", "png"] : _c, disableImageBorder = _a.disableImageBorder, _d = _a.defaultImageSpread, defaultImageSpread = _d === void 0 ? "cover" : _d, _e = _a.containerShape, containerShape = _e === void 0 ? "circle" : _e, 
+    //ProfileImageInput specific props
+    _f = _a.size, 
+    //ProfileImageInput specific props
+    size = _f === void 0 ? 200 : _f, // Number > representing pixels
+    _imageTitle = _a.imageTitle, imageTitlePath = _a.imageTitlePath, _content = _a.content, tableRowData = _a.tableRowData //DataTables pass the content of that row to the cell Comp as 'tableRowData'
+    ;
+    var content = _content || tableRowData;
+    var imageTitle = _imageTitle ||
+        (imageTitlePath && (0, getVal_1.getVal)(content, imageTitlePath)) ||
+        (value && ((_b = value[0]) === null || _b === void 0 ? void 0 : _b.publicUrl)) ||
+        "";
+    var sizeString = size + "px";
+    var calcPlaceholderInitialSize = function (_size) {
+        var size = _size / 10; //cuz now we are using pixel size
+        if (typeof size !== "number")
+            return undefined;
+        var inverseDecay = function (size) { return (1.2 / (size * size)) * 7; };
+        var textSize = 0;
+        (0, makeArrayFromLength_1.makeArrayFromLength)(size).map(function (s) {
+            textSize = textSize + inverseDecay(s + 1);
+        });
+        return textSize + size / 2;
+    };
+    return (react_1.default.createElement("div", { style: { width: sizeString, height: sizeString } }, 
+    //if edit mode then show imageinput
+    //if readonly mode, then value has to exist for imageinput to show
+    //the Array check is important so that string do that get accepted as value
+    ((Array.isArray(value) && (value === null || value === void 0 ? void 0 : value.length) > 0) || !readOnly) ? (react_1.default.createElement(__1.ImageInput, { id: id, value: value, onChange: onChange, aspectRatio: "1/1", containerShape: containerShape, enableCaptions: false, defaultImageSpread: defaultImageSpread, formatConvertConfig: "noConversion", omitEditorTools: ['cover_contain'], allowedFormats: allowedFormats, readOnly: readOnly, invert: invert, disableImageBorder: disableImageBorder })) : (react_1.default.createElement("div", { style: {
+            width: "100%",
+            height: "100%",
+            borderRadius: "50%",
+            backgroundColor: invert ? themes_1.colors.greyColor80 : themes_1.colors.greyColor100,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+        } },
+        react_1.default.createElement(Typo_1.LABEL, { style: {
+                fontSize: calcPlaceholderInitialSize(size),
+                fontWeight: 500,
+                letterSpacing: 0,
+            }, invert: true }, imageTitle.charAt(0).toUpperCase())))));
+};
+exports.ProfileImageInput = ProfileImageInput;

package/dist/components/OKELink/index.js

@@ -37,12 +37,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.OKELink = void 0;
 var react_1 = __importStar(require("react"));
 var react_router_dom_1 = require("react-router-dom");
-// import { ProfileImageDisplay } from '../../inputs/ImageInput/derivedComps/ProfileImageDisplay'
 var styled_components_1 = require("styled-components");
 var DisplayIcon_1 = require("../../utils/comps/DisplayIcon");
 var injectHttps_1 = require("../../utils/injectHttps");
 var utilsOolib_1 = require("../../utilsOolib");
 var styled_1 = require("./styled");
+var ProfileImageInput_1 = require("../ImageInput/derivedComps/ProfileImageInput");
 var OKELink = function (_a) {
     var _to = _a.to, link = _a.link, //link is deprecated. use to instead 
     onClick = _a.onClick, icon = _a.icon, iconAfter = _a.iconAfter, text = _a.text, children = _a.children, invertUnderline = _a.invertUnderline, color = _a.color, invert = _a.invert, disabled = _a.disabled, className = _a.className, style = _a.style, avatar = _a.avatar, // imageData // [ {...} ] OR {...}
@@ -82,12 +82,11 @@ var OKELink = function (_a) {
         }));
     };
     var genAvatar = function (avatar) {
-        var _a;
         if (!avatar)
             return;
         //else
         return (react_1.default.createElement("div", { style: { marginRight: '1rem', flex: '0 0 auto' } },
-            react_1.default.createElement("img", { src: (_a = avatar === null || avatar === void 0 ? void 0 : avatar.userUploaded[0]) === null || _a === void 0 ? void 0 : _a.publicUrl, style: { height: 'auto', width: '100%' } })));
+            react_1.default.createElement(ProfileImageInput_1.ProfileImageInput, { readOnly: true, value: avatar === null || avatar === void 0 ? void 0 : avatar.userUploaded, imageTitle: children || text, size: 20, invert: invert })));
     };
     var linkContents = react_1.default.createElement(react_1.Fragment, null,
         genAvatar(avatar),

package/package.json

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

package/dist/utilsOolib/renderImagePlaceholderForOolibPreview.d.ts

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

package/dist/utilsOolib/renderImagePlaceholderForOolibPreview.js

@@ -1,26 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderImagePlaceholderForOolibPreview = void 0;
-var react_1 = __importDefault(require("react"));
-var phosphor_react_1 = require("phosphor-react");
-var Tooltip_1 = require("../components/Tooltip");
-var themes_1 = require("../themes");
-var renderImagePlaceholderForOolibPreview = function (options) {
-    if (options === void 0) { options = {}; }
-    var _a = options.width, width = _a === void 0 ? "2rem" : _a, _b = options.height, height = _b === void 0 ? '2rem' : _b, _c = options.borderRadius, borderRadius = _c === void 0 ? "50%" : _c, _d = options.tooltipPos, tooltipPos = _d === void 0 ? 'bottom' : _d;
-    return (react_1.default.createElement("div", { style: {
-            width: width,
-            height: height,
-            borderRadius: borderRadius,
-            background: themes_1.colors.lightRed,
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            flex: "0 0 auto",
-        } },
-        react_1.default.createElement(Tooltip_1.Tooltip, { popOutOfOverflowHiddenParent: true, position: tooltipPos, text: "ProfileImageDisplay component needs to be provided via theme provider in order to render profile image", presetTarget: "infoIcon" })));
-};
-exports.renderImagePlaceholderForOolibPreview = renderImagePlaceholderForOolibPreview;