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.
- package/dist/assets/images/cards/placeholders/index.d.ts +5 -0
- package/dist/assets/images/cards/placeholders/index.js +14 -0
- package/dist/components/cards/CardContent/index.js +10 -8
- package/dist/components/cards/ListContent/index.js +22 -15
- package/dist/components/cards/comps/CardPlaceholder/index.d.ts +7 -0
- package/dist/components/cards/comps/CardPlaceholder/index.js +14 -0
- package/dist/components/cards/utils/mediaDataExists.d.ts +2 -0
- package/dist/components/cards/utils/mediaDataExists.js +7 -0
- package/dist/components/cards/utils/parseCardConfig.js +2 -1
- package/dist/utils/_EXPORTS/index.d.ts +1 -0
- package/dist/utils/_EXPORTS/index.js +3 -1
- package/dist/utils/makeArrayFromLength.d.ts +1 -0
- package/dist/utils/makeArrayFromLength.js +5 -0
- package/package.json +1 -1
|
@@ -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
|
|
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
|
|
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
|
|
63
|
-
(
|
|
64
|
-
react_1.default.createElement(
|
|
65
|
-
(
|
|
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))
|
|
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:
|
|
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
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
react_1.default.createElement(
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
width: "
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
react_1.default.createElement(
|
|
71
|
-
|
|
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,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,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
|
-
|
|
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[];
|