oolib 2.64.12 → 2.64.13
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.
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
export default MetaBlock;
|
|
2
|
-
declare function MetaBlock({ data, config, disabled, align, invert }: {
|
|
2
|
+
declare function MetaBlock({ data, config, disabled, align, invert, orientation, }: {
|
|
3
3
|
data: any;
|
|
4
4
|
config: any;
|
|
5
5
|
disabled: any;
|
|
6
6
|
align?: string;
|
|
7
7
|
invert: any;
|
|
8
|
+
orientation?: string;
|
|
8
9
|
}): React.JSX.Element;
|
|
9
10
|
import React from "react";
|
|
@@ -37,16 +37,20 @@ var OKELink_1 = require("../OKELink");
|
|
|
37
37
|
var parseMetaBlockConfig_1 = require("./utils/parseMetaBlockConfig");
|
|
38
38
|
var utilsOolib_1 = require("../../utilsOolib");
|
|
39
39
|
var greyColor100 = themes_1.colors.greyColor100;
|
|
40
|
-
var
|
|
40
|
+
var StyledHorOrientContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 1rem;\n flex-wrap: wrap;\n ", "\n"], ["\n display: flex;\n align-items: center;\n gap: 1rem;\n flex-wrap: wrap;\n ", "\n"])), function (_a) {
|
|
41
41
|
var align = _a.align;
|
|
42
42
|
return align === "center" && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n justify-content: center;\n "], ["\n justify-content: center;\n "])));
|
|
43
43
|
});
|
|
44
|
-
var
|
|
45
|
-
var
|
|
44
|
+
var StyledVerOrientContainer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n ", "\n"], ["\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n ", "\n"])), function (_a) {
|
|
45
|
+
var align = _a.align;
|
|
46
|
+
return align === "center" && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n "], ["\n align-items: center;\n "])));
|
|
47
|
+
});
|
|
48
|
+
var StyledMetaWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 0.5rem;\n"], ["\n display: flex;\n align-items: center;\n gap: 0.5rem;\n"])));
|
|
49
|
+
var STYLED_SANS_2 = (0, styled_components_1.default)(Typo_1.SANS_2)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", "\n ", ";\n"], ["\n ", "\n ", ";\n"])), mixins_1.ellipsis, function (_a) {
|
|
46
50
|
var disabled = _a.disabled;
|
|
47
|
-
return disabled && (0, styled_components_1.css)(
|
|
51
|
+
return disabled && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), themes_1.colors.greyColor40);
|
|
48
52
|
});
|
|
49
|
-
var StyledSeparator = styled_components_1.default.div(
|
|
53
|
+
var StyledSeparator = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: 0.3rem;\n height: 0.3rem;\n border-radius: 50%;\n background-color: ", ";\n"], ["\n width: 0.3rem;\n height: 0.3rem;\n border-radius: 50%;\n background-color: ", ";\n"])), function (_a) {
|
|
50
54
|
var disabled = _a.disabled, invert = _a.invert;
|
|
51
55
|
return disabled
|
|
52
56
|
? themes_1.colors.greyColor40
|
|
@@ -55,7 +59,7 @@ var StyledSeparator = styled_components_1.default.div(templateObject_6 || (templ
|
|
|
55
59
|
: themes_1.colors.greyColor100;
|
|
56
60
|
});
|
|
57
61
|
var MetaBlock = function (_a) {
|
|
58
|
-
var data = _a.data, config = _a.config, disabled = _a.disabled, _b = _a.align, align = _b === void 0 ? "left" : _b, invert = _a.invert;
|
|
62
|
+
var data = _a.data, config = _a.config, disabled = _a.disabled, _b = _a.align, align = _b === void 0 ? "left" : _b, invert = _a.invert, _c = _a.orientation, orientation = _c === void 0 ? "horizontal" : _c;
|
|
59
63
|
var localize = (0, utilsOolib_1.useLocale)();
|
|
60
64
|
var value = (0, parseMetaBlockConfig_1.parseMetaBlockConfig)({ config: config, data: data, localize: localize });
|
|
61
65
|
if (value.length === 0)
|
|
@@ -72,11 +76,13 @@ var MetaBlock = function (_a) {
|
|
|
72
76
|
" ",
|
|
73
77
|
react_1.default.createElement(OKELink_1.OKELink, { to: to, text: display, invert: invert, icon: icon })));
|
|
74
78
|
};
|
|
75
|
-
return (react_1.default.createElement(
|
|
79
|
+
return orientation === "horizontal" ? (react_1.default.createElement(StyledHorOrientContainer, { align: align }, value.map(function (v, i) { return (react_1.default.createElement(react_1.Fragment, { key: i },
|
|
76
80
|
react_1.default.createElement(StyledMetaWrapper, { style: { maxWidth: 100 / value.length + "%" } }, v.to
|
|
77
81
|
? genLink({ display: v.display, to: v.to, icon: v.icon })
|
|
78
82
|
: genText({ icon: v.icon, display: v.display })),
|
|
79
|
-
i + 1 === value.length ? null : (react_1.default.createElement(StyledSeparator, { invert: invert, disabled: disabled })))); })))
|
|
83
|
+
i + 1 === value.length ? null : (react_1.default.createElement(StyledSeparator, { invert: invert, disabled: disabled })))); }))) : (react_1.default.createElement(StyledVerOrientContainer, { align: align }, value.map(function (v, i) { return (react_1.default.createElement("div", { style: { maxWidth: "100%" } }, v.to
|
|
84
|
+
? genLink({ display: v.display, to: v.to, icon: v.icon })
|
|
85
|
+
: genText({ icon: v.icon, display: v.display }))); })));
|
|
80
86
|
};
|
|
81
87
|
exports.default = MetaBlock;
|
|
82
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
88
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export function ListContent({ id, data, config, to, onClick, openInNewTab, actions, statusTag, }: {
|
|
1
|
+
export function ListContent({ id, data, config, to, onClick, openInNewTab, actions, statusTag, variant, }: {
|
|
2
2
|
id: any;
|
|
3
3
|
data: any;
|
|
4
4
|
config: any;
|
|
@@ -7,5 +7,6 @@ export function ListContent({ id, data, config, to, onClick, openInNewTab, actio
|
|
|
7
7
|
openInNewTab: any;
|
|
8
8
|
actions: any;
|
|
9
9
|
statusTag: any;
|
|
10
|
+
variant?: string;
|
|
10
11
|
}): React.JSX.Element;
|
|
11
12
|
import React from "react";
|
|
@@ -21,22 +21,23 @@ var dontRenderIfBothOnClickAndTo_1 = require("../utils/dontRenderIfBothOnClickAn
|
|
|
21
21
|
var mediaDataExists_1 = require("../utils/mediaDataExists");
|
|
22
22
|
var parseCardConfig_1 = require("../utils/parseCardConfig");
|
|
23
23
|
var styled_js_1 = require("./styled.js");
|
|
24
|
+
var ProfileImageInput_1 = require("../../ImageInput/derivedComps/ProfileImageInput");
|
|
24
25
|
var ListContent = function (_a) {
|
|
25
|
-
var id = _a.id, data = _a.data, config = _a.config, to = _a.to, onClick = _a.onClick, openInNewTab = _a.openInNewTab, actions = _a.actions, statusTag = _a.statusTag;
|
|
26
|
+
var id = _a.id, data = _a.data, config = _a.config, to = _a.to, onClick = _a.onClick, openInNewTab = _a.openInNewTab, actions = _a.actions, statusTag = _a.statusTag, _b = _a.variant, variant = _b === void 0 ? "content" : _b;
|
|
26
27
|
var theme = (0, styled_components_1.useTheme)();
|
|
27
28
|
var parseSpecialSyntax = (theme || {}).parseSpecialSyntax;
|
|
28
|
-
var
|
|
29
|
+
var _c = (0, parseCardConfig_1.parseCardConfig)({
|
|
29
30
|
config: config,
|
|
30
31
|
data: data,
|
|
31
32
|
parseSpecialSyntax: parseSpecialSyntax,
|
|
32
|
-
}), cardLabel =
|
|
33
|
+
}), cardLabel = _c.cardLabel, title = _c.title, video = _c.video, image = _c.image, metaBlock = _c.metaBlock;
|
|
33
34
|
var dontRenderRes = (0, dontRenderIfBothOnClickAndTo_1.dontRenderIfBothOnClickAndTo)({ onClick: onClick, to: to });
|
|
34
35
|
if (dontRenderRes)
|
|
35
36
|
return dontRenderRes;
|
|
36
|
-
var
|
|
37
|
+
var _d = (0, decideLinkCompAndTarget_1.decideLinkCompAndTarget)({
|
|
37
38
|
to: to,
|
|
38
39
|
openInNewTab: openInNewTab,
|
|
39
|
-
}), LinkComp =
|
|
40
|
+
}), LinkComp = _d.LinkComp, target = _d.target, externalUrl = _d.externalUrl;
|
|
40
41
|
var mediaConfigExists = config.video || config.image;
|
|
41
42
|
return (react_1.default.createElement(LinkComp, { target: target, href: (0, injectHttps_1.injectHttps)(to), to: to },
|
|
42
43
|
react_1.default.createElement(styled_js_1.StyledListElemContainer, { id: id, onClick: onClick },
|
|
@@ -53,9 +54,9 @@ var ListContent = function (_a) {
|
|
|
53
54
|
react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 6, noOfLines_D: 3, title: title },
|
|
54
55
|
react_1.default.createElement(styled_1.StyledTitle, { capitalize: true, className: "StyledTitle" },
|
|
55
56
|
react_1.default.createElement(styled_1.StyledTitleSpan, { className: "StyledTitleSpan" }, title))))) : null,
|
|
56
|
-
(metaBlock === null || metaBlock === void 0 ? void 0 : metaBlock.length) > 0 && (react_1.default.createElement("div", { style: { width: "100%", paddingTop: "1rem"
|
|
57
|
+
(metaBlock === null || metaBlock === void 0 ? void 0 : metaBlock.length) > 0 && (react_1.default.createElement("div", { style: { width: "100%", paddingTop: "1rem" } },
|
|
57
58
|
react_1.default.createElement(MetaBlock_1.default, { data: data, config: metaBlock })))),
|
|
58
|
-
mediaConfigExists && (react_1.default.createElement(styled_js_1.StyledContentModule2, null,
|
|
59
|
+
variant === "content" ? (mediaConfigExists && (react_1.default.createElement(styled_js_1.StyledContentModule2, null,
|
|
59
60
|
!(0, mediaDataExists_1.imageDataExists)(image) && !(0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_js_1.StyledMediaMask, null,
|
|
60
61
|
react_1.default.createElement(CardPlaceholder_1.CardPlaceholder, { style: { height: "100%", width: "auto" } }))),
|
|
61
62
|
(0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_js_1.StyledMediaMask, null,
|
|
@@ -77,6 +78,7 @@ var ListContent = function (_a) {
|
|
|
77
78
|
react_1.default.createElement(ImageInput_1.ImageInput, { stretchToFullHeight: true, value: image, aspectRatio: "5/3", readOnly: true, enableCaptions: false, disableImageBorder: true, defaultImageSpread: "cover" })
|
|
78
79
|
// </div>
|
|
79
80
|
)),
|
|
80
|
-
actions && react_1.default.createElement(ActionMenu_1.ActionMenu, { actions: actions, align: "right" }))))
|
|
81
|
+
actions && react_1.default.createElement(ActionMenu_1.ActionMenu, { actions: actions, align: "right" })))) : (react_1.default.createElement(styled_js_1.StyledContentModule2, null,
|
|
82
|
+
react_1.default.createElement(ProfileImageInput_1.ProfileImageInput, { readOnly: true, value: image, size: 60, imageTitle: title })))))));
|
|
81
83
|
};
|
|
82
84
|
exports.ListContent = ListContent;
|