oolib 2.63.3 → 2.63.4

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.
Files changed (10) hide show
  1. package/dist/components/ImageInput/ImageInputContext.js +3 -26
  2. package/dist/components/VideoInput/index.d.ts +3 -1
  3. package/dist/components/VideoInput/index.js +4 -3
  4. package/dist/components/cards/CardContent/index.js +9 -13
  5. package/dist/components/cards/ListContent/index.js +30 -30
  6. package/dist/components/cards/ListContent/styled.d.ts +2 -1
  7. package/dist/components/cards/ListContent/styled.js +4 -3
  8. package/dist/utilsOolib/useFakeUploadMedia.d.ts +4 -0
  9. package/dist/utilsOolib/useFakeUploadMedia.js +60 -0
  10. package/package.json +1 -1
package/dist/components/ImageInput/ImageInputContext.js CHANGED
@@ -36,6 +36,7 @@ exports.useImageInputContext = exports.ImageInputContextProvider = exports.Image
36
36
  var react_1 = __importStar(require("react"));
37
37
  var styled_components_1 = require("styled-components");
38
38
  var infoAlertBannerFnPlaceholder_1 = require("../../utilsOolib/infoAlertBannerFnPlaceholder");
39
+ var useFakeUploadMedia_1 = require("../../utilsOolib/useFakeUploadMedia");
39
40
  exports.ImageInputContext = (0, react_1.createContext)();
40
41
  var ImageInputContextProvider = function (_a) {
41
42
  var children = _a.children, value = _a.value, multiple = _a.multiple, allowedFormats = _a.allowedFormats, formatConvertConfig = _a.formatConvertConfig, folderName = _a.folderName, bucketEnv = _a.bucketEnv, onChange = _a.onChange, id = _a.id, aspectRatio = _a.aspectRatio, readOnly = _a.readOnly, enableCaptions = _a.enableCaptions, defaultImageSpread = _a.defaultImageSpread, invert = _a.invert, containerShape = _a.containerShape, stretchToFullHeight = _a.stretchToFullHeight, dropzoneLabel = _a.dropzoneLabel, dropzoneSublabel = _a.dropzoneSublabel, disableImageBorder = _a.disableImageBorder, omitEditorTools = _a.omitEditorTools, files = _a.files, showOptionalLabelInDropzone = _a.showOptionalLabelInDropzone, isRequired = _a.isRequired, isInRTE = _a.isInRTE;
@@ -51,7 +52,8 @@ var ImageInputContextProvider = function (_a) {
51
52
  mediaType: "image"
52
53
  },
53
54
  handleUploadProgess: handleUploadProgess,
54
- })) || {}, upload = _c.mutate, isLoading = _c.isLoading;
55
+ })) ||
56
+ (0, useFakeUploadMedia_1.useFakeUploadMedia)({ handleUploadProgess: handleUploadProgess }), upload = _c.mutate, isLoading = _c.isLoading; //for storybook purposes cuz we dont have access to mediaupload api here
55
57
  var SET_ALERT_BANNER = ((theme === null || theme === void 0 ? void 0 : theme.useBannerContext()) || (0, infoAlertBannerFnPlaceholder_1.infoAlertBannerFnPlaceholder)()).SET_ALERT_BANNER;
56
58
  var _d = (0, react_1.useState)(0), noOfImagesUploading = _d[0], setNoOfImagesUploading = _d[1];
57
59
  var _e = (0, react_1.useState)(undefined), publicUrlBeingReplaced = _e[0], setPublicUrlBeingReplaced = _e[1];
@@ -110,31 +112,6 @@ var ImageInputContextProvider = function (_a) {
110
112
  });
111
113
  }
112
114
  }, []);
113
- /**
114
- * example alt code to display image directly from uploaded files
115
- * this will be used for preview purposes only in storybook
116
- *
117
- *
118
- document.getElementById('picField').onchange = function (evt) {
119
- var tgt = evt.target || window.event.srcElement,
120
- files = tgt.files;
121
-
122
- // FileReader support
123
- if (FileReader && files && files.length) {
124
- var fr = new FileReader();
125
- fr.onload = function () {
126
- document.getElementById(outImage).src = fr.result;
127
- }
128
- fr.readAsDataURL(files[0]);
129
- }
130
-
131
- // Not supported
132
- else {
133
- // fallback -- perhaps submit the input to an iframe and temporarily store
134
- // them on the server until the user's session ends.
135
- }
136
- }
137
- */
138
115
  var handleSingleImageDataChange = function (_a) {
139
116
  var publicUrl = _a.publicUrl, imageData = _a.imageData;
140
117
  //publicUrl is used as an 'id' identifier
package/dist/components/VideoInput/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export default VideoInput;
2
- declare function VideoInput({ id, label, sublabel, isRequired, value: _value, onChange, readOnly, light: lightPlayer, enableVideoUpload, isInRTE, invert, files, }: {
2
+ declare function VideoInput({ id, label, sublabel, isRequired, value: _value, onChange, readOnly, light: lightPlayer, enableVideoUpload, isInRTE, invert, files, width, height }: {
3
3
  id: any;
4
4
  label: any;
5
5
  sublabel: any;
@@ -12,5 +12,7 @@ declare function VideoInput({ id, label, sublabel, isRequired, value: _value, on
12
12
  isInRTE: any;
13
13
  invert: any;
14
14
  files: any;
15
+ width: any;
16
+ height: any;
15
17
  }): React.JSX.Element;
16
18
  import React from "react";
package/dist/components/VideoInput/index.js CHANGED
@@ -49,7 +49,8 @@ var EmbedLinkModal_1 = require("./comps/EmbedLinkModal");
49
49
  var ActionMenu_1 = require("../ActionMenu");
50
50
  var themes_1 = require("../../themes");
51
51
  var VideoInput = function (_a) {
52
- var id = _a.id, label = _a.label, sublabel = _a.sublabel, isRequired = _a.isRequired, _value = _a.value, onChange = _a.onChange, readOnly = _a.readOnly, lightPlayer = _a.light, _b = _a.enableVideoUpload, enableVideoUpload = _b === void 0 ? false : _b, isInRTE = _a.isInRTE, invert = _a.invert, files = _a.files;
52
+ var id = _a.id, label = _a.label, sublabel = _a.sublabel, isRequired = _a.isRequired, _value = _a.value, onChange = _a.onChange, readOnly = _a.readOnly, lightPlayer = _a.light, _b = _a.enableVideoUpload, enableVideoUpload = _b === void 0 ? false : _b, isInRTE = _a.isInRTE, invert = _a.invert, files = _a.files, // //used by RTEVideoInput
53
+ width = _a.width, height = _a.height;
53
54
  //backwards compatibility
54
55
  var value = typeof _value === 'string'
55
56
  ? [{ publicUrl: _value }]
@@ -152,9 +153,9 @@ var VideoInput = function (_a) {
152
153
  "https://www.youtube.com/watch?v=" +
153
154
  url.split("&list=")[0].match(regex)[1];
154
155
  }
155
- return (react_1.default.createElement(styled_index_1.StyledVideoEmbedPreviewSection, null,
156
+ return (react_1.default.createElement(styled_index_1.StyledVideoEmbedPreviewSection, { style: { height: height } },
156
157
  actionMenuButton && genVideoActionMenu(),
157
- react_1.default.createElement(react_player_1.default, { id: "outVideo", url: url, controls: true, width: "100%", light: lightPlayer, style: { overflow: "hidden" } })));
158
+ react_1.default.createElement(react_player_1.default, { id: "outVideo", url: url, controls: true, width: width || "100%", height: height, light: lightPlayer, style: { overflow: "hidden" } })));
158
159
  }
159
160
  };
160
161
  return (react_1.default.createElement(react_1.Fragment, null,
package/dist/components/cards/CardContent/index.js CHANGED
@@ -8,7 +8,6 @@ var react_1 = __importDefault(require("react"));
8
8
  var styled_components_1 = require("styled-components");
9
9
  var injectHttps_1 = require("../../../utils/injectHttps");
10
10
  var utilsOolib_1 = require("../../../utilsOolib");
11
- var renderImagePlaceholderForOolibPreview_1 = require("../../../utilsOolib/renderImagePlaceholderForOolibPreview");
12
11
  var ActionMenu_1 = require("../../ActionMenu");
13
12
  var Typo_1 = require("../../Typo");
14
13
  var VideoInput_1 = __importDefault(require("../../VideoInput"));
@@ -21,22 +20,23 @@ var parseCardConfig_1 = require("../utils/parseCardConfig");
21
20
  var mediaDataExists_1 = require("../utils/mediaDataExists");
22
21
  var styled_2 = require("./styled");
23
22
  var CardPlaceholder_1 = require("../comps/CardPlaceholder");
23
+ var ImageInput_1 = require("../../ImageInput");
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)();
27
27
  var localize = (0, utilsOolib_1.useLocale)();
28
- var _b = theme || {}, ImageInput = _b.ImageInput, parseSpecialSyntax = _b.parseSpecialSyntax;
28
+ var parseSpecialSyntax = (theme || {}).parseSpecialSyntax;
29
29
  var showEmbedSection = !!((config === null || config === void 0 ? void 0 : config.image) || (config === null || config === void 0 ? void 0 : config.video));
30
- var _c = (0, parseCardConfig_1.parseCardConfig)({
30
+ var _b = (0, parseCardConfig_1.parseCardConfig)({
31
31
  config: config,
32
32
  data: data,
33
33
  parseSpecialSyntax: parseSpecialSyntax,
34
34
  localize: localize,
35
- }), cardLabel = _c.cardLabel, title = _c.title, video = _c.video, image = _c.image, metaBlockData = _c.metaBlockData;
35
+ }), cardLabel = _b.cardLabel, title = _b.title, video = _b.video, image = _b.image, metaBlockData = _b.metaBlockData;
36
36
  var dontRenderRes = (0, dontRenderIfBothOnClickAndTo_1.dontRenderIfBothOnClickAndTo)({ onClick: onClick, to: to });
37
37
  if (dontRenderRes)
38
38
  return dontRenderRes;
39
- var _d = (0, decideLinkCompAndTarget_1.decideLinkCompAndTarget)({ to: to, openInNewTab: openInNewTab }), LinkComp = _d.LinkComp, target = _d.target, externalUrl = _d.externalUrl;
39
+ var _c = (0, decideLinkCompAndTarget_1.decideLinkCompAndTarget)({ to: to, openInNewTab: openInNewTab }), LinkComp = _c.LinkComp, target = _c.target, externalUrl = _c.externalUrl;
40
40
  return (react_1.default.createElement(LinkComp, { target: target, href: (0, injectHttps_1.injectHttps)(to), to: to },
41
41
  react_1.default.createElement(styled_2.StyledCardWrapper, { id: id, onClick: onClick },
42
42
  react_1.default.createElement(styled_2.StyledUpperSection, null,
@@ -62,13 +62,9 @@ var CardContent = function (_a) {
62
62
  showEmbedSection && (react_1.default.createElement(styled_2.StyledEmbedSection, null,
63
63
  !(0, mediaDataExists_1.imageDataExists)(image) && !(0, mediaDataExists_1.videoDataExists)(video) &&
64
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)({
68
- tooltipPos: "right",
69
- width: "100%",
70
- height: "100px",
71
- borderRadius: 0,
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)))));
65
+ (0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement("div", { style: { width: "100%", position: 'relative' } },
66
+ react_1.default.createElement(VideoInput_1.default, { value: video, readOnly: true, light: true }),
67
+ react_1.default.createElement("div", { style: { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' } }))),
68
+ (0, mediaDataExists_1.imageDataExists)(image) && !(0, mediaDataExists_1.videoDataExists)(video) ? (react_1.default.createElement("div", { style: { width: "100%" } }, react_1.default.createElement(ImageInput_1.ImageInput, { value: image, aspectRatio: "5/3", readOnly: true, defaultImageSpread: "cover", enableCaptions: false, disableImageBorder: true }))) : null)))));
73
69
  };
74
70
  exports.CardContent = CardContent;
package/dist/components/cards/ListContent/index.js CHANGED
@@ -5,40 +5,39 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.ListContent = void 0;
7
7
  var react_1 = __importDefault(require("react"));
8
- var parseCardConfig_1 = require("../utils/parseCardConfig");
9
- var styled_js_1 = require("./styled.js");
10
- var styled_1 = require("../styled");
11
8
  var styled_components_1 = require("styled-components");
12
- var decideLinkCompAndTarget_1 = require("../utils/decideLinkCompAndTarget");
13
- var dontRenderIfBothOnClickAndTo_1 = require("../utils/dontRenderIfBothOnClickAndTo");
9
+ var icons_1 = require("../../../icons");
10
+ var themes_1 = require("../../../themes");
11
+ var injectHttps_1 = require("../../../utils/injectHttps");
12
+ var utilsOolib_1 = require("../../../utilsOolib");
14
13
  var ActionMenu_1 = require("../../ActionMenu");
15
- var Typo_1 = require("../../Typo");
14
+ var ImageInput_1 = require("../../ImageInput");
16
15
  var Tags_1 = require("../../Tags");
17
- var LineClampWrapper_1 = require("../comps/LineClampWrapper");
18
16
  var VideoInput_1 = __importDefault(require("../../VideoInput"));
19
17
  var CardMetaBlock_1 = __importDefault(require("../comps/CardMetaBlock"));
20
- var injectHttps_1 = require("../../../utils/injectHttps");
21
- var utilsOolib_1 = require("../../../utilsOolib");
22
- var themes_1 = require("../../../themes");
23
- var icons_1 = require("../../../icons");
24
- var renderImagePlaceholderForOolibPreview_1 = require("../../../utilsOolib/renderImagePlaceholderForOolibPreview");
25
- var mediaDataExists_1 = require("../utils/mediaDataExists");
26
18
  var CardPlaceholder_1 = require("../comps/CardPlaceholder");
19
+ var LineClampWrapper_1 = require("../comps/LineClampWrapper");
20
+ var styled_1 = require("../styled");
21
+ var decideLinkCompAndTarget_1 = require("../utils/decideLinkCompAndTarget");
22
+ var dontRenderIfBothOnClickAndTo_1 = require("../utils/dontRenderIfBothOnClickAndTo");
23
+ var mediaDataExists_1 = require("../utils/mediaDataExists");
24
+ var parseCardConfig_1 = require("../utils/parseCardConfig");
25
+ var styled_js_1 = require("./styled.js");
27
26
  var greyColor100 = themes_1.colors.greyColor100, greyColor40 = themes_1.colors.greyColor40, greyColor15 = themes_1.colors.greyColor15;
28
27
  var ArrowLineUpRight = icons_1.icons.ArrowLineUpRight;
29
28
  var ListContent = function (_a) {
30
29
  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;
31
30
  var theme = (0, styled_components_1.useTheme)();
32
31
  var localize = (0, utilsOolib_1.useLocale)();
33
- var _b = theme || {}, ImageInput = _b.ImageInput, parseSpecialSyntax = _b.parseSpecialSyntax;
34
- var _c = (0, parseCardConfig_1.parseCardConfig)({ config: config, data: data, parseSpecialSyntax: parseSpecialSyntax, localize: localize }), cardLabel = _c.cardLabel, title = _c.title, video = _c.video, image = _c.image, metaBlockData = _c.metaBlockData;
32
+ var parseSpecialSyntax = (theme || {}).parseSpecialSyntax;
33
+ var _b = (0, parseCardConfig_1.parseCardConfig)({ config: config, data: data, parseSpecialSyntax: parseSpecialSyntax, localize: localize }), cardLabel = _b.cardLabel, title = _b.title, video = _b.video, image = _b.image, metaBlockData = _b.metaBlockData;
35
34
  var dontRenderRes = (0, dontRenderIfBothOnClickAndTo_1.dontRenderIfBothOnClickAndTo)({ onClick: onClick, to: to });
36
35
  if (dontRenderRes)
37
36
  return dontRenderRes;
38
- var _d = (0, decideLinkCompAndTarget_1.decideLinkCompAndTarget)({
37
+ var _c = (0, decideLinkCompAndTarget_1.decideLinkCompAndTarget)({
39
38
  to: to,
40
39
  openInNewTab: openInNewTab,
41
- }), LinkComp = _d.LinkComp, target = _d.target, externalUrl = _d.externalUrl;
40
+ }), LinkComp = _c.LinkComp, target = _c.target, externalUrl = _c.externalUrl;
42
41
  var mediaConfigExists = config.video || config.image;
43
42
  return (react_1.default.createElement(LinkComp, { target: target, href: (0, injectHttps_1.injectHttps)(to), to: to },
44
43
  react_1.default.createElement(styled_js_1.StyledListElemContainer, { id: id, onClick: onClick },
@@ -61,20 +60,21 @@ var ListContent = function (_a) {
61
60
  mediaConfigExists &&
62
61
  react_1.default.createElement(styled_js_1.StyledContentModule2, null,
63
62
  !(0, mediaDataExists_1.imageDataExists)(image) && !(0, mediaDataExists_1.videoDataExists)(video) &&
64
- react_1.default.createElement(styled_js_1.StyledMediaWrapper, null,
63
+ react_1.default.createElement(styled_js_1.StyledMediaMask, null,
65
64
  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" }))))),
65
+ (0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_js_1.StyledMediaMask, null,
66
+ react_1.default.createElement(styled_js_1.StyledVideoWrapper, null,
67
+ react_1.default.createElement(VideoInput_1.default, { value: video, readOnly: true, light: true, height: '100%' }),
68
+ react_1.default.createElement("div", { style: { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' } })))),
69
+ (0, mediaDataExists_1.imageDataExists)(image) > 0 && !(0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_js_1.StyledMediaMask, null,
70
+ // <div
71
+ // // style={{
72
+ // // width: "14rem",
73
+ // // }}
74
+ // >
75
+ react_1.default.createElement(ImageInput_1.ImageInput, { stretchToFullHeight: true, value: image, aspectRatio: "5/3", readOnly: true, enableCaptions: false, disableImageBorder: true, defaultImageSpread: "cover" })
76
+ // </div>
77
+ )),
78
78
  actions && react_1.default.createElement(ActionMenu_1.ActionMenu, { actions: actions, align: "right" }))))));
79
79
  };
80
80
  exports.ListContent = ListContent;
package/dist/components/cards/ListContent/styled.d.ts CHANGED
@@ -4,4 +4,5 @@ export const StyledHeader: import("styled-components").StyledComponent<"div", an
4
4
  export const StyledLabel: import("styled-components").StyledComponent<(props: any) => import("react").JSX.Element, any, {}, never>;
5
5
  export const StyledListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
6
6
  export const StyledContentModule2: import("styled-components").StyledComponent<"div", any, {}, never>;
7
- export const StyledMediaWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
7
+ export const StyledMediaMask: import("styled-components").StyledComponent<"div", any, {}, never>;
8
+ export const StyledVideoWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
package/dist/components/cards/ListContent/styled.js CHANGED
@@ -7,7 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
7
7
  return (mod && mod.__esModule) ? mod : { "default": mod };
8
8
  };
9
9
  Object.defineProperty(exports, "__esModule", { value: true });
10
- exports.StyledMediaWrapper = exports.StyledContentModule2 = exports.StyledListWrapper = exports.StyledLabel = exports.StyledHeader = exports.StyledStatusTagCardLabelWrapper = exports.StyledListElemContainer = void 0;
10
+ exports.StyledVideoWrapper = exports.StyledMediaMask = exports.StyledContentModule2 = exports.StyledListWrapper = exports.StyledLabel = exports.StyledHeader = exports.StyledStatusTagCardLabelWrapper = exports.StyledListElemContainer = void 0;
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
12
  var themes_1 = require("../../../themes");
13
13
  var mixins_1 = require("../../../themes/mixins");
@@ -31,5 +31,6 @@ exports.StyledListWrapper = styled_components_1.default.div(templateObject_5 ||
31
31
  return mediaConfigExists && "".concat((2 * mediaPadding) + mediaContainerWidth_SM, "px");
32
32
  });
33
33
  exports.StyledContentModule2 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n transform: translateY(0);\n justify-content: center;\n display: flex;\n align-items: flex-end;\n padding: 0 ", "px;\n row-gap: 1rem;\n column-gap: 0;\n flex-direction: column-reverse;\n ", " {\n top: 50%;\n transform: translateY(-50%); \n flex-direction: row;\n align-items: center;\n row-gap: 0;\n column-gap: 1rem;\n }\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n transform: translateY(0);\n justify-content: center;\n display: flex;\n align-items: flex-end;\n padding: 0 ", "px;\n row-gap: 1rem;\n column-gap: 0;\n flex-direction: column-reverse;\n ", " {\n top: 50%;\n transform: translateY(-50%); \n flex-direction: row;\n align-items: center;\n row-gap: 0;\n column-gap: 1rem;\n }\n"])), mediaPadding, (0, mixins_1.mediaQuery)("sm"));
34
- exports.StyledMediaWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: ", "px;\n height: 84px;\n display: flex;\n flex-direction: column;\n align-items: center;\n overflow: hidden;\n flex-wrap: wrap;\n ", " {\n width: ", "px;\n height: 6rem;\n }\n"], ["\n width: ", "px;\n height: 84px;\n display: flex;\n flex-direction: column;\n align-items: center;\n overflow: hidden;\n flex-wrap: wrap;\n ", " {\n width: ", "px;\n height: 6rem;\n }\n"])), mediaContainerWidth, (0, mixins_1.mediaQuery)("sm"), mediaContainerWidth_SM);
35
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
34
+ exports.StyledMediaMask = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: ", "px;\n height: 84px;\n display: flex;\n flex-direction: column;\n align-items: center;\n overflow: hidden;\n flex-wrap: wrap;\n ", " {\n width: ", "px;\n height: 6rem;\n }\n"], ["\n width: ", "px;\n height: 84px;\n display: flex;\n flex-direction: column;\n align-items: center;\n overflow: hidden;\n flex-wrap: wrap;\n ", " {\n width: ", "px;\n height: 6rem;\n }\n"])), mediaContainerWidth, (0, mixins_1.mediaQuery)("sm"), mediaContainerWidth_SM);
35
+ exports.StyledVideoWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: 14rem;\n height: 8.4rem;\n ", " {\n height: 6rem;\n }\n"], ["\n width: 14rem;\n height: 8.4rem;\n ", " {\n height: 6rem;\n }\n"])), (0, mixins_1.mediaQuery)("sm"));
36
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
package/dist/utilsOolib/useFakeUploadMedia.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export function useFakeUploadMedia(options?: {}): {
2
+ mutate: (files: any, callbacks?: {}) => void;
3
+ isLoading: boolean;
4
+ };
package/dist/utilsOolib/useFakeUploadMedia.js ADDED
@@ -0,0 +1,60 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useFakeUploadMedia = void 0;
4
+ var react_1 = require("react");
5
+ var useFakeUploadMedia = function (options) {
6
+ if (options === void 0) { options = {}; }
7
+ var handleUploadProgess = options.handleUploadProgess;
8
+ var _a = (0, react_1.useState)(false), isLoading = _a[0], setIsLoading = _a[1];
9
+ var mutate = function (files, callbacks) {
10
+ if (callbacks === void 0) { callbacks = {}; }
11
+ var onSuccess = callbacks.onSuccess;
12
+ setIsLoading(true);
13
+ // FileReader support
14
+ if (FileReader && files && files.length) {
15
+ var fileReader = new FileReader();
16
+ fileReader.addEventListener("progress", function (ev) {
17
+ handleUploadProgess &&
18
+ handleUploadProgess(Math.round((100 * ev.loaded) / ev.total));
19
+ });
20
+ recursFileReader({
21
+ fileReader: fileReader,
22
+ files: files,
23
+ index: 0,
24
+ onComplete: function (finalData) {
25
+ setIsLoading(false);
26
+ onSuccess(finalData);
27
+ },
28
+ });
29
+ }
30
+ // Not supported
31
+ else {
32
+ setIsLoading(false);
33
+ onSuccess([]);
34
+ }
35
+ };
36
+ return { mutate: mutate, isLoading: isLoading };
37
+ };
38
+ exports.useFakeUploadMedia = useFakeUploadMedia;
39
+ var recursFileReader = function (_a) {
40
+ var fileReader = _a.fileReader, files = _a.files, index = _a.index, _b = _a.finalData, finalData = _b === void 0 ? [] : _b, onComplete = _a.onComplete;
41
+ if (index >= files.length) {
42
+ onComplete(finalData);
43
+ return;
44
+ }
45
+ var file = files[index];
46
+ fileReader.onload = function () {
47
+ finalData.push({
48
+ fileData: { publicUrl: fileReader.result },
49
+ status: "success",
50
+ });
51
+ recursFileReader({
52
+ fileReader: fileReader,
53
+ files: files,
54
+ index: index + 1,
55
+ finalData: finalData,
56
+ onComplete: onComplete,
57
+ });
58
+ };
59
+ fileReader.readAsDataURL(file);
60
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oolib",
3
- "version": "2.63.3",
3
+ "version": "2.63.4",
4
4
  "description": " OKE Component Library",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",