oolib 2.62.0 → 2.62.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,5 @@
1
+ export namespace placeholders {
2
+ export { ph1 };
3
+ export { ph2 };
4
+ export { ph3 };
5
+ }
@@ -0,0 +1,14 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.placeholders = void 0;
7
+ var ph1_jpg_1 = __importDefault(require("./ph1.jpg"));
8
+ var ph2_jpg_1 = __importDefault(require("./ph2.jpg"));
9
+ var ph3_jpg_1 = __importDefault(require("./ph3.jpg"));
10
+ exports.placeholders = {
11
+ ph1: ph1_jpg_1.default,
12
+ ph2: ph2_jpg_1.default,
13
+ ph3: ph3_jpg_1.default
14
+ };
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.CardContent = void 0;
7
7
  var react_1 = __importDefault(require("react"));
8
8
  var styled_components_1 = require("styled-components");
9
- var icons_1 = require("../../../icons");
10
9
  var injectHttps_1 = require("../../../utils/injectHttps");
11
10
  var utilsOolib_1 = require("../../../utilsOolib");
12
11
  var renderImagePlaceholderForOolibPreview_1 = require("../../../utilsOolib/renderImagePlaceholderForOolibPreview");
@@ -19,8 +18,9 @@ var styled_1 = require("../styled");
19
18
  var decideLinkCompAndTarget_1 = require("../utils/decideLinkCompAndTarget");
20
19
  var dontRenderIfBothOnClickAndTo_1 = require("../utils/dontRenderIfBothOnClickAndTo");
21
20
  var parseCardConfig_1 = require("../utils/parseCardConfig");
21
+ var mediaDataExists_1 = require("../utils/mediaDataExists");
22
22
  var styled_2 = require("./styled");
23
- var ArrowLineUpRight = icons_1.icons.ArrowLineUpRight;
23
+ var CardPlaceholder_1 = require("../comps/CardPlaceholder");
24
24
  var CardContent = function (_a) {
25
25
  var id = _a.id, data = _a.data, config = _a.config, to = _a.to, onClick = _a.onClick, openInNewTab = _a.openInNewTab, actions = _a.actions;
26
26
  var theme = (0, styled_components_1.useTheme)();
@@ -57,16 +57,18 @@ var CardContent = function (_a) {
57
57
  react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 6, title: title },
58
58
  react_1.default.createElement(styled_1.StyledTitle, { capitalize: true, className: "StyledTitle" },
59
59
  react_1.default.createElement(styled_1.StyledTitleSpan, { className: "StyledTitleSpan" }, title))))) : null),
60
- (metaBlockData === null || metaBlockData === void 0 ? void 0 : metaBlockData.length) > 0 ? (react_1.default.createElement(CardMetaBlock_1.default, { value: metaBlockData.slice(0, 2) }) //show only two meta for cardContent
60
+ (metaBlockData === null || metaBlockData === void 0 ? void 0 : metaBlockData.length) > 0 ? (react_1.default.createElement(CardMetaBlock_1.default, { value: metaBlockData }) //show only two meta for cardContent
61
61
  ) : null),
62
- showEmbedSection ? (react_1.default.createElement(styled_2.StyledEmbedSection, null,
63
- (video === null || video === void 0 ? void 0 : video.length) > 0 ? (react_1.default.createElement("div", { style: { width: "100%" } },
64
- react_1.default.createElement(VideoInput_1.default, { value: video, readOnly: true, light: true }))) : null,
65
- (image === null || image === void 0 ? void 0 : image.length) > 0 && !video ? (react_1.default.createElement("div", { style: { width: "100%" } }, !ImageInput ? ((0, renderImagePlaceholderForOolibPreview_1.renderImagePlaceholderForOolibPreview)({
62
+ showEmbedSection && (react_1.default.createElement(styled_2.StyledEmbedSection, null,
63
+ !(0, mediaDataExists_1.imageDataExists)(image) && !(0, mediaDataExists_1.videoDataExists)(video) &&
64
+ react_1.default.createElement(CardPlaceholder_1.CardPlaceholder, null),
65
+ (0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement("div", { style: { width: "100%" } },
66
+ react_1.default.createElement(VideoInput_1.default, { value: video, readOnly: true, light: true }))),
67
+ (0, mediaDataExists_1.imageDataExists)(image) && !(0, mediaDataExists_1.videoDataExists)(video) ? (react_1.default.createElement("div", { style: { width: "100%" } }, !ImageInput ? ((0, renderImagePlaceholderForOolibPreview_1.renderImagePlaceholderForOolibPreview)({
66
68
  tooltipPos: "right",
67
69
  width: "100%",
68
70
  height: "100px",
69
71
  borderRadius: 0,
70
- })) : (react_1.default.createElement(ImageInput, { value: image, aspectRatio: image.aspectRatio || "5/3", containerShape: image.containerShape, readOnly: true, defaultImageSpread: "cover", enableCaptions: false, disableImageBorder: true })))) : null)) : null)));
72
+ })) : (react_1.default.createElement(ImageInput, { value: image, aspectRatio: image.aspectRatio || "5/3", containerShape: image.containerShape, readOnly: true, defaultImageSpread: "cover", enableCaptions: false, disableImageBorder: true })))) : null)))));
71
73
  };
72
74
  exports.CardContent = CardContent;
@@ -22,6 +22,8 @@ var utilsOolib_1 = require("../../../utilsOolib");
22
22
  var themes_1 = require("../../../themes");
23
23
  var icons_1 = require("../../../icons");
24
24
  var renderImagePlaceholderForOolibPreview_1 = require("../../../utilsOolib/renderImagePlaceholderForOolibPreview");
25
+ var mediaDataExists_1 = require("../utils/mediaDataExists");
26
+ var CardPlaceholder_1 = require("../comps/CardPlaceholder");
25
27
  var greyColor100 = themes_1.colors.greyColor100, greyColor40 = themes_1.colors.greyColor40, greyColor15 = themes_1.colors.greyColor15;
26
28
  var ArrowLineUpRight = icons_1.icons.ArrowLineUpRight;
27
29
  var ListContent = function (_a) {
@@ -37,9 +39,10 @@ var ListContent = function (_a) {
37
39
  to: to,
38
40
  openInNewTab: openInNewTab,
39
41
  }), LinkComp = _d.LinkComp, target = _d.target, externalUrl = _d.externalUrl;
42
+ var mediaConfigExists = config.video || config.image;
40
43
  return (react_1.default.createElement(LinkComp, { target: target, href: (0, injectHttps_1.injectHttps)(to), to: to },
41
44
  react_1.default.createElement(styled_js_1.StyledListElemContainer, { id: id, onClick: onClick },
42
- react_1.default.createElement(styled_js_1.StyledListWrapper, { mediaConfigExists: config.video || config.image /*cuz if it does space needs to be allocated for it */ },
45
+ react_1.default.createElement(styled_js_1.StyledListWrapper, { mediaConfigExists: mediaConfigExists /*cuz if it does space needs to be allocated for it */ },
43
46
  react_1.default.createElement(styled_js_1.StyledHeader, null,
44
47
  react_1.default.createElement(styled_js_1.StyledStatusTagCardLabelWrapper, null,
45
48
  cardLabel && (react_1.default.createElement("div", { title: cardLabel },
@@ -55,19 +58,23 @@ var ListContent = function (_a) {
55
58
  react_1.default.createElement(styled_1.StyledTitleSpan, { className: "StyledTitleSpan" }, title))))) : null,
56
59
  react_1.default.createElement("div", { style: { width: '100%' } }, (metaBlockData === null || metaBlockData === void 0 ? void 0 : metaBlockData.length) > 0 && (react_1.default.createElement(CardMetaBlock_1.default, { value: metaBlockData.slice(0, 3) }) // show only three metas for listContent
57
60
  ))),
58
- react_1.default.createElement(styled_js_1.StyledContentModule2, null,
59
- (video === null || video === void 0 ? void 0 : video.length) > 0 && (react_1.default.createElement(styled_js_1.StyledMediaWrapper, null,
60
- react_1.default.createElement("div", { style: { width: "14rem", border: "1px solid ".concat(greyColor15) } },
61
- react_1.default.createElement(VideoInput_1.default, { value: video, readOnly: true, light: true })))),
62
- (image === null || image === void 0 ? void 0 : image.length) > 0 && !video && (react_1.default.createElement(styled_js_1.StyledMediaWrapper, null, !ImageInput ? ((0, renderImagePlaceholderForOolibPreview_1.renderImagePlaceholderForOolibPreview)({
63
- width: "100%",
64
- height: "100%",
65
- borderRadius: 0,
66
- })) : (react_1.default.createElement("div", { style: {
67
- width: "14rem",
68
- border: "1px solid ".concat(greyColor15),
69
- } },
70
- react_1.default.createElement(ImageInput, { value: image, aspectRatio: image.aspectRatio || "5/3", containerShape: image.containerShape, readOnly: true, enableCaptions: false, disableImageBorder: true, defaultImageSpread: "cover" }))))),
71
- actions && react_1.default.createElement(ActionMenu_1.ActionMenu, { actions: actions, align: "right" }))))));
61
+ mediaConfigExists &&
62
+ react_1.default.createElement(styled_js_1.StyledContentModule2, null,
63
+ !(0, mediaDataExists_1.imageDataExists)(image) && !(0, mediaDataExists_1.videoDataExists)(video) &&
64
+ react_1.default.createElement(styled_js_1.StyledMediaWrapper, null,
65
+ react_1.default.createElement(CardPlaceholder_1.CardPlaceholder, { style: { height: '100%', width: 'auto' } })),
66
+ (0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_js_1.StyledMediaWrapper, null,
67
+ react_1.default.createElement("div", { style: { width: "14rem", border: "1px solid ".concat(greyColor15) } },
68
+ react_1.default.createElement(VideoInput_1.default, { value: video, readOnly: true, light: true })))),
69
+ (0, mediaDataExists_1.imageDataExists)(image) > 0 && !(0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_js_1.StyledMediaWrapper, null, !ImageInput ? ((0, renderImagePlaceholderForOolibPreview_1.renderImagePlaceholderForOolibPreview)({
70
+ width: "100%",
71
+ height: "100%",
72
+ borderRadius: 0,
73
+ })) : (react_1.default.createElement("div", { style: {
74
+ width: "14rem",
75
+ border: "1px solid ".concat(greyColor15),
76
+ } },
77
+ react_1.default.createElement(ImageInput, { value: image, aspectRatio: image.aspectRatio || "5/3", containerShape: image.containerShape, readOnly: true, enableCaptions: false, disableImageBorder: true, defaultImageSpread: "cover" }))))),
78
+ actions && react_1.default.createElement(ActionMenu_1.ActionMenu, { actions: actions, align: "right" }))))));
72
79
  };
73
80
  exports.ListContent = ListContent;
@@ -0,0 +1,7 @@
1
+ export function CardPlaceholder({ style }: {
2
+ style?: {
3
+ height: string;
4
+ width: string;
5
+ };
6
+ }): React.JSX.Element;
7
+ import React from "react";
@@ -0,0 +1,14 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.CardPlaceholder = void 0;
7
+ var react_1 = __importDefault(require("react"));
8
+ var placeholders_1 = require("../../../../assets/images/cards/placeholders");
9
+ var CardPlaceholder = function (_a) {
10
+ var _b = _a.style, style = _b === void 0 ? { height: 'auto', width: '100%' } : _b;
11
+ var randomInt = Math.ceil(Math.random() * 3); //will give us 1,2 or 3
12
+ return react_1.default.createElement("img", { style: style, src: placeholders_1.placeholders["ph".concat(randomInt)] });
13
+ };
14
+ exports.CardPlaceholder = CardPlaceholder;
@@ -0,0 +1,2 @@
1
+ export function imageDataExists(image: any): boolean;
2
+ export function videoDataExists(video: any): boolean;
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.videoDataExists = exports.imageDataExists = void 0;
4
+ var imageDataExists = function (image) { return (image === null || image === void 0 ? void 0 : image.length) > 0; };
5
+ exports.imageDataExists = imageDataExists;
6
+ var videoDataExists = function (video) { return (video === null || video === void 0 ? void 0 : video.length) > 0; };
7
+ exports.videoDataExists = videoDataExists;
@@ -16,7 +16,8 @@ var parseCardConfig = function (_a) {
16
16
  var video = config.video && (0, getVal_1.getVal)(data, config.video);
17
17
  var tagDisplay = config.tagDisplay && (0, getVal_1.getVal)(data, config.tagDisplay);
18
18
  var image = config.image && (0, getVal_1.getVal)(data, config.image);
19
- var metaBlockData = (_b = config.metaBlock) === null || _b === void 0 ? void 0 : _b.map(function (d) {
19
+ //metablock data doesnt accept more than 2 configs
20
+ var metaBlockData = (_b = config.metaBlock) === null || _b === void 0 ? void 0 : _b.slice(0, 2).map(function (d) {
20
21
  var key = d.key;
21
22
  var valuePath = d.valuePath;
22
23
  var prefix = d.prefix;
@@ -8,6 +8,7 @@ export { injectHttps } from "../injectHttps";
8
8
  export { formatTextToCamelCase } from "../formatTextToCamelCase";
9
9
  export { formatCamelCaseToSentenceCase } from "../formatCamelCaseToSentenceCase";
10
10
  export { toArray } from "../toArray";
11
+ export { makeArrayFromLength } from "../makeArrayFromLength";
11
12
  export { sortData } from "../sortData";
12
13
  export { isStringMatch } from "../isStringMatch";
13
14
  export { useScroll } from "../customHooks/useScroll";
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.getDaysDiff = exports.useScreenWidth = exports.testJSON = exports.useHandleClickOutside = exports.usePopOutOfOverflowHiddenParent = exports.useScroll = exports.isStringMatch = exports.sortData = exports.toArray = exports.formatCamelCaseToSentenceCase = exports.formatTextToCamelCase = exports.injectHttps = exports.getBlockLabelProps = exports.getKeyCode = exports.getText = exports.deleteVal = exports.setVal = exports.getVal = void 0;
3
+ exports.getDaysDiff = exports.useScreenWidth = exports.testJSON = exports.useHandleClickOutside = exports.usePopOutOfOverflowHiddenParent = exports.useScroll = exports.isStringMatch = exports.sortData = exports.makeArrayFromLength = exports.toArray = exports.formatCamelCaseToSentenceCase = exports.formatTextToCamelCase = exports.injectHttps = exports.getBlockLabelProps = exports.getKeyCode = exports.getText = exports.deleteVal = exports.setVal = exports.getVal = void 0;
4
4
  //the holy setter, getter & deleter
5
5
  var getVal_1 = require("../getterSetterDeleter/getVal");
6
6
  Object.defineProperty(exports, "getVal", { enumerable: true, get: function () { return getVal_1.getVal; } });
@@ -24,6 +24,8 @@ var formatCamelCaseToSentenceCase_1 = require("../formatCamelCaseToSentenceCase"
24
24
  Object.defineProperty(exports, "formatCamelCaseToSentenceCase", { enumerable: true, get: function () { return formatCamelCaseToSentenceCase_1.formatCamelCaseToSentenceCase; } });
25
25
  var toArray_1 = require("../toArray");
26
26
  Object.defineProperty(exports, "toArray", { enumerable: true, get: function () { return toArray_1.toArray; } });
27
+ var makeArrayFromLength_1 = require("../makeArrayFromLength");
28
+ Object.defineProperty(exports, "makeArrayFromLength", { enumerable: true, get: function () { return makeArrayFromLength_1.makeArrayFromLength; } });
27
29
  var sortData_1 = require("../sortData");
28
30
  Object.defineProperty(exports, "sortData", { enumerable: true, get: function () { return sortData_1.sortData; } });
29
31
  var isStringMatch_1 = require("../isStringMatch");
@@ -0,0 +1 @@
1
+ export function makeArrayFromLength(len: any): number[];
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.makeArrayFromLength = void 0;
4
+ var makeArrayFromLength = function (len) { return Array.from(Array(len).keys()); };
5
+ exports.makeArrayFromLength = makeArrayFromLength;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oolib",
3
- "version": "2.62.0",
3
+ "version": "2.62.2",
4
4
  "description": " OKE Component Library",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",