oolib 2.103.0 → 2.105.0

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 (14) hide show
  1. package/dist/components/Banners/bannerContext.js +15 -1
  2. package/dist/components/ResourceInput/comp/ResourceDisplayBlock.d.ts +8 -0
  3. package/dist/components/ResourceInput/comp/ResourceDisplayBlock.js +111 -0
  4. package/dist/components/ResourceInput/comp/styled.d.ts +6 -0
  5. package/dist/components/ResourceInput/comp/styled.js +33 -0
  6. package/dist/components/ResourceInput/index.d.ts +2 -0
  7. package/dist/components/ResourceInput/index.js +120 -0
  8. package/dist/components/ResourceInput/styled.d.ts +2 -0
  9. package/dist/components/ResourceInput/styled.js +29 -0
  10. package/dist/icons/custom/index.js +16 -15
  11. package/dist/index.d.ts +1 -0
  12. package/dist/index.js +3 -1
  13. package/dist/utilsOolib/useFakeUploadImpression.js +104 -5
  14. package/package.json +1 -1
package/dist/components/Banners/bannerContext.js CHANGED
@@ -98,6 +98,12 @@ var bannerReducer = function (state, action) {
98
98
  case "REMOVE_INFO":
99
99
  newInfoState = state.infoState.filter(function (a) { return a.id !== action.id; });
100
100
  return __assign(__assign({}, state), { infoState: newInfoState });
101
+ case "REMOVE_ALL_INFO":
102
+ newInfoState = [];
103
+ return __assign(__assign({}, state), { infoState: newInfoState });
104
+ case "REMOVE_ALL_ALERT":
105
+ newAlertState = [];
106
+ return __assign(__assign({}, state), { alertState: newAlertState });
101
107
  default:
102
108
  return state;
103
109
  }
@@ -112,6 +118,12 @@ var BannerProvider = function (_a) {
112
118
  var REMOVE_INFO_BANNER = function (e, id) {
113
119
  BANNER_DISPATCH({ type: "REMOVE_INFO", id: id });
114
120
  };
121
+ var REMOVE_ALL_INFO_BANNERS = function (e, id) {
122
+ BANNER_DISPATCH({ type: "REMOVE_ALL_INFO", id: id });
123
+ };
124
+ var REMOVE_ALL_ALERT_BANNERS = function (e, id) {
125
+ BANNER_DISPATCH({ type: "REMOVE_ALL_ALERT", id: id });
126
+ };
115
127
  // the config of bannner can either be passed as a object, or plain arguments.
116
128
  var SET_INFO_BANNER = function (options_msg, color, timeOut) {
117
129
  var options = {};
@@ -144,7 +156,9 @@ var BannerProvider = function (_a) {
144
156
  SET_INFO_BANNER: SET_INFO_BANNER,
145
157
  SET_ALERT_BANNER: SET_ALERT_BANNER,
146
158
  REMOVE_ALERT_BANNER: REMOVE_ALERT_BANNER,
147
- REMOVE_INFO_BANNER: REMOVE_INFO_BANNER
159
+ REMOVE_INFO_BANNER: REMOVE_INFO_BANNER,
160
+ REMOVE_ALL_INFO_BANNERS: REMOVE_ALL_INFO_BANNERS,
161
+ REMOVE_ALL_ALERT_BANNERS: REMOVE_ALL_ALERT_BANNERS
148
162
  } }, children));
149
163
  };
150
164
  exports.BannerProvider = BannerProvider;
package/dist/components/ResourceInput/comp/ResourceDisplayBlock.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ export function ResourceDisplayBlock({ resources: _resources, filesLength, uploadProgress, removeResource, invert }: {
2
+ resources: any;
3
+ filesLength: any;
4
+ uploadProgress: any;
5
+ removeResource: any;
6
+ invert: any;
7
+ }): React.JSX.Element;
8
+ import React from "react";
package/dist/components/ResourceInput/comp/ResourceDisplayBlock.js ADDED
@@ -0,0 +1,111 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
25
+ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
26
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
27
+ if (ar || !(i in from)) {
28
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
29
+ ar[i] = from[i];
30
+ }
31
+ }
32
+ return to.concat(ar || Array.prototype.slice.call(from));
33
+ };
34
+ var __importDefault = (this && this.__importDefault) || function (mod) {
35
+ return (mod && mod.__esModule) ? mod : { "default": mod };
36
+ };
37
+ Object.defineProperty(exports, "__esModule", { value: true });
38
+ exports.ResourceDisplayBlock = void 0;
39
+ var react_1 = __importStar(require("react"));
40
+ var LoadersAndProgress_1 = require("../../LoadersAndProgress");
41
+ var ActionMenu_1 = require("../../ActionMenu");
42
+ var Typo_1 = require("../../Typo");
43
+ var injectHttps_1 = require("../../../utils/injectHttps");
44
+ var styled_1 = require("./styled");
45
+ var PDFEmbed_1 = __importDefault(require("../../PDFInput/comps/PDFEmbed"));
46
+ var react_player_1 = __importDefault(require("react-player"));
47
+ var icons_1 = require("../../../icons");
48
+ var FilePdf = icons_1.icons.FilePdf, ImageSquare = icons_1.icons.ImageSquare, SpeakerHigh = icons_1.icons.SpeakerHigh, File = icons_1.icons.File, VideoCamera = icons_1.icons.VideoCamera;
49
+ var iconsConfig = { FilePdf: FilePdf, ImageSquare: ImageSquare, SpeakerHigh: SpeakerHigh, File: File, VideoCamera: VideoCamera };
50
+ var ResourceDisplayBlock = function (_a) {
51
+ var _resources = _a.resources, filesLength = _a.filesLength, uploadProgress = _a.uploadProgress, removeResource = _a.removeResource, invert = _a.invert;
52
+ var _b = (0, react_1.useState)(__spreadArray([], _resources, true)), resources = _b[0], setResources = _b[1];
53
+ (0, react_1.useEffect)(function () {
54
+ setResources((_resources));
55
+ }, [_resources, resources]);
56
+ var downloadResource = function (url) {
57
+ window.open((0, injectHttps_1.injectHttps)(url));
58
+ };
59
+ var genInfoBand = function (_a) {
60
+ var d = _a.d, icon = _a.icon;
61
+ var IconComp = iconsConfig[icon];
62
+ return (react_1.default.createElement(styled_1.StyledMediaBand, { invert: invert },
63
+ react_1.default.createElement(IconComp, { size: 16 }),
64
+ react_1.default.createElement("div", { style: { width: '14rem' } },
65
+ react_1.default.createElement(Typo_1.SANS_0, { style: {
66
+ overflow: "hidden",
67
+ textOverflow: "ellipsis",
68
+ whiteSpace: "nowrap",
69
+ } }, d === null || d === void 0 ? void 0 : d.originalFilename))));
70
+ };
71
+ var genResourceBlock = function (d) {
72
+ switch (true) {
73
+ case ['application/pdf'].indexOf(d === null || d === void 0 ? void 0 : d.contentType) !== -1:
74
+ return (react_1.default.createElement(styled_1.StyledMediaBlock, null,
75
+ react_1.default.createElement(PDFEmbed_1.default, { filePath: d === null || d === void 0 ? void 0 : d.publicUrl, fileName: d === null || d === void 0 ? void 0 : d.originalFilename, fileID: d === null || d === void 0 ? void 0 : d.id }),
76
+ genInfoBand({ d: d, icon: "FilePdf" })));
77
+ case ['image/jpg', 'image/png', 'image/gif', 'image/webp', 'image/jpeg'].indexOf(d === null || d === void 0 ? void 0 : d.contentType) !== -1:
78
+ return (react_1.default.createElement(styled_1.StyledMediaBlock, null,
79
+ react_1.default.createElement("img", { alt: "Thumbnail", src: d.mediaLink, style: { width: '100%' } }),
80
+ genInfoBand({ d: d, icon: "ImageSquare" })));
81
+ case ['video/mp4'].indexOf(d === null || d === void 0 ? void 0 : d.contentType) !== -1:
82
+ return (react_1.default.createElement(styled_1.StyledMediaBlock, null,
83
+ react_1.default.createElement(react_player_1.default, { id: d === null || d === void 0 ? void 0 : d.id, url: d === null || d === void 0 ? void 0 : d.publicUrl, controls: true, width: "100%" }),
84
+ genInfoBand({ d: d, icon: "VideoCamera" })));
85
+ case ['audio/wav', 'audio/mp3', 'audio/mpeg'].indexOf(d === null || d === void 0 ? void 0 : d.contentType) !== -1:
86
+ return (react_1.default.createElement(styled_1.StyledMediaBlock, null,
87
+ react_1.default.createElement(styled_1.StyledAudioElement, { key: "".concat(d === null || d === void 0 ? void 0 : d.id), controls: true, src: d === null || d === void 0 ? void 0 : d.publicUrl, controlsList: "nodownload noplaybackrate" // to hide controls
88
+ }),
89
+ genInfoBand({ d: d, icon: "SpeakerHigh" })));
90
+ default:
91
+ return (react_1.default.createElement(styled_1.StyledDefaultBlock, { id: d === null || d === void 0 ? void 0 : d.id }, genInfoBand({ d: d, icon: 'File' })));
92
+ }
93
+ };
94
+ return (react_1.default.createElement(react_1.Fragment, null, resources === null || resources === void 0 ? void 0 :
95
+ resources.map(function (file) { return (react_1.default.createElement(styled_1.StyledBlock, { style: { position: 'relative' }, invert: invert, key: file === null || file === void 0 ? void 0 : file.id },
96
+ genResourceBlock(file),
97
+ react_1.default.createElement("div", { style: { position: 'absolute', top: '0', right: '0' } },
98
+ react_1.default.createElement(ActionMenu_1.ActionMenu, { popOutOfOverflowHiddenParent: true, ButtonComp: "ButtonPrimary", invert: invert, actions: [
99
+ {
100
+ display: "Delete",
101
+ onClick: function () { return removeResource(file === null || file === void 0 ? void 0 : file.id); },
102
+ },
103
+ {
104
+ display: "Download",
105
+ onClick: function () { return downloadResource((file === null || file === void 0 ? void 0 : file.mediaLink) || (file === null || file === void 0 ? void 0 : file.publicUrl)); },
106
+ },
107
+ ] })))); }),
108
+ Array.from({ length: filesLength }).map(function (_, index) { return (react_1.default.createElement(styled_1.StyledBlockWrapper, { key: index }, (react_1.default.createElement(styled_1.StyledBlock, { invert: invert },
109
+ react_1.default.createElement(LoadersAndProgress_1.ProgressBar, { progress: uploadProgress, invert: invert, text: uploadProgress && uploadProgress !== 100 ? "".concat(uploadProgress, "%") : 'Almost Done...' }))))); })));
110
+ };
111
+ exports.ResourceDisplayBlock = ResourceDisplayBlock;
package/dist/components/ResourceInput/comp/styled.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ export const StyledBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
2
+ export const StyledBlockWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
3
+ export const StyledAudioElement: import("styled-components").StyledComponent<"audio", any, {}, never>;
4
+ export const StyledDefaultBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
5
+ export const StyledMediaBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
6
+ export const StyledMediaBand: import("styled-components").StyledComponent<"div", any, {}, never>;
package/dist/components/ResourceInput/comp/styled.js ADDED
@@ -0,0 +1,33 @@
1
+ "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
6
+ var __importDefault = (this && this.__importDefault) || function (mod) {
7
+ return (mod && mod.__esModule) ? mod : { "default": mod };
8
+ };
9
+ Object.defineProperty(exports, "__esModule", { value: true });
10
+ exports.StyledMediaBand = exports.StyledMediaBlock = exports.StyledDefaultBlock = exports.StyledAudioElement = exports.StyledBlockWrapper = exports.StyledBlock = void 0;
11
+ var styled_components_1 = __importDefault(require("styled-components"));
12
+ var utilsOolib_1 = require("../../../utilsOolib");
13
+ var themes_1 = require("../../../themes");
14
+ var mixins_1 = require("../../../themes/mixins");
15
+ exports.StyledBlock = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 14rem;\n height: 14rem;\n display: flex;\n align-items: center;\n align-items: center;\n overflow: hidden;\n border: ", ";\n ", "\n"], ["\n width: 14rem;\n height: 14rem;\n display: flex;\n align-items: center;\n align-items: center;\n overflow: hidden;\n border: ", ";\n ", "\n"])), function (_a) {
16
+ var invert = _a.invert;
17
+ return invert ? "0.2px solid ".concat(themes_1.colors.greyColor10) : "1px solid ".concat((0, utilsOolib_1.getPrimaryColor100)(themes_1.colors));
18
+ }, (0, mixins_1.transition)('display'));
19
+ exports.StyledBlockWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\n"], ["\n\n"])));
20
+ exports.StyledAudioElement = styled_components_1.default.audio(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: inherit;\n height: 40px;\n background-color: ", ";\n &::-webkit-media-controls-enclosure {\n border-radius: 0;\n }\n\n &::-webkit-media-controls-panel {\n background-color: ", ";\n }\n /* -webkit-appearance: none; */\n \n /* Reset webkit border-radius to 0 */\n /* -webkit-border-radius: 0; */\n"], ["\n width: inherit;\n height: 40px;\n background-color: ", ";\n &::-webkit-media-controls-enclosure {\n border-radius: 0;\n }\n\n &::-webkit-media-controls-panel {\n background-color: ", ";\n }\n /* -webkit-appearance: none; */\n \n /* Reset webkit border-radius to 0 */\n /* -webkit-border-radius: 0; */\n"])), (0, utilsOolib_1.getPrimaryColor10)(themes_1.colors), (0, utilsOolib_1.getPrimaryColor10)(themes_1.colors));
21
+ exports.StyledDefaultBlock = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n"], ["\n"])));
22
+ exports.StyledMediaBlock = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: inherit;\n height: inherit;\n display: flex;\n align-items: center;\n background-color: ", ";\n position: relative;\n pointer-events: none;\n"], ["\n width: inherit;\n height: inherit;\n display: flex;\n align-items: center;\n background-color: ", ";\n position: relative;\n pointer-events: none;\n"])), function (_a) {
23
+ var invert = _a.invert;
24
+ return invert ? themes_1.colors.greyColor80 : (0, utilsOolib_1.getPrimaryColor10)(themes_1.colors);
25
+ });
26
+ exports.StyledMediaBand = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n bottom: 0;\n height: 3rem;\n color: ", ";\n padding: 0.5rem;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 0.5rem;\n background-color: ", ";\n"], ["\n position: absolute;\n bottom: 0;\n height: 3rem;\n color: ", ";\n padding: 0.5rem;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 0.5rem;\n background-color: ", ";\n"])), function (_a) {
27
+ var invert = _a.invert;
28
+ return (invert ? themes_1.colors.white : themes_1.colors.greyColor100);
29
+ }, function (_a) {
30
+ var invert = _a.invert;
31
+ return invert ? themes_1.colors.greyColor80 : (0, utilsOolib_1.getPrimaryColor10)(themes_1.colors);
32
+ });
33
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
package/dist/components/ResourceInput/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export function ResourceInput(props: any): React.JSX.Element;
2
+ import React from "react";
package/dist/components/ResourceInput/index.js ADDED
@@ -0,0 +1,120 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
14
+ if (k2 === undefined) k2 = k;
15
+ var desc = Object.getOwnPropertyDescriptor(m, k);
16
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
17
+ desc = { enumerable: true, get: function() { return m[k]; } };
18
+ }
19
+ Object.defineProperty(o, k2, desc);
20
+ }) : (function(o, m, k, k2) {
21
+ if (k2 === undefined) k2 = k;
22
+ o[k2] = m[k];
23
+ }));
24
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
25
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
26
+ }) : function(o, v) {
27
+ o["default"] = v;
28
+ });
29
+ var __importStar = (this && this.__importStar) || function (mod) {
30
+ if (mod && mod.__esModule) return mod;
31
+ var result = {};
32
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
33
+ __setModuleDefault(result, mod);
34
+ return result;
35
+ };
36
+ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
37
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
38
+ if (ar || !(i in from)) {
39
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
40
+ ar[i] = from[i];
41
+ }
42
+ }
43
+ return to.concat(ar || Array.prototype.slice.call(from));
44
+ };
45
+ Object.defineProperty(exports, "__esModule", { value: true });
46
+ exports.ResourceInput = void 0;
47
+ var react_1 = __importStar(require("react"));
48
+ var styled_components_1 = require("styled-components");
49
+ var Typo_1 = require("../Typo");
50
+ var bannerContext_1 = require("../Banners/bannerContext");
51
+ var icons_1 = require("../../icons");
52
+ var BlockLabel_1 = require("../BlockLabel");
53
+ var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
54
+ var ResourceDisplayBlock_1 = require("./comp/ResourceDisplayBlock");
55
+ var styled_1 = require("./styled");
56
+ var useFakeUploadImpression_1 = require("../../utilsOolib/useFakeUploadImpression");
57
+ var Plus = icons_1.icons.Plus;
58
+ var ResourceInput = function (props) {
59
+ var parentOnChange = props.onChange, comp_id = props.id, _a = props.folderName, folderName = _a === void 0 ? "media" : _a, value = props.value, _b = props.multiple, multiple = _b === void 0 ? true : _b, uploadBtnText = props.uploadBtnText, readOnly = props.readOnly, invert = props.invert;
60
+ var theme = (0, styled_components_1.useTheme)();
61
+ var SET_ALERT_BANNER = (0, bannerContext_1.useBannerContext)().SET_ALERT_BANNER;
62
+ var _c = (0, react_1.useState)(undefined), uploadProgress = _c[0], setUploadProgress = _c[1];
63
+ var _d = (0, react_1.useState)(0), filesLength = _d[0], setFilesLength = _d[1];
64
+ var _e = (0, react_1.useState)(__spreadArray([], value, true)), resources = _e[0], setResources = _e[1];
65
+ var handleUploadProgess = function (progress) { return setUploadProgress(progress); };
66
+ var upload = ((theme === null || theme === void 0 ? void 0 : theme.useUploadMedia({
67
+ mediaConfigs: {
68
+ type: "files",
69
+ folderName: folderName,
70
+ mediaType: "resources",
71
+ },
72
+ handleUploadProgess: handleUploadProgess,
73
+ })) ||
74
+ (0, useFakeUploadImpression_1.useFakeUploadImpression)({ handleUploadProgess: handleUploadProgess, fileType: "resource" })).mutate;
75
+ var inputRef = (0, react_1.useRef)();
76
+ var handleUpload = function (files) {
77
+ if (!files)
78
+ return;
79
+ if (!upload)
80
+ return;
81
+ setFilesLength(files === null || files === void 0 ? void 0 : files.length);
82
+ upload(files, {
83
+ onSuccess: function (data) {
84
+ var successfulUploads = data // In case of multiple file uploads, there is possiblity of one file failing
85
+ .filter(function (d) { return d.status === "success"; })
86
+ .map(function (d) { return d.fileData; });
87
+ var failedUploads = data
88
+ .filter(function (d) { return d.status === "error"; })
89
+ .map(function (d) { return d.message; });
90
+ failedUploads && failedUploads.map(function (msg) { return SET_ALERT_BANNER(msg, "red", 3500); });
91
+ setResources(function (prevResources) {
92
+ var newResources = __spreadArray(__spreadArray([], prevResources, true), successfulUploads, true);
93
+ return newResources;
94
+ });
95
+ parentOnChange(comp_id, resources);
96
+ setFilesLength(0);
97
+ },
98
+ onError: function (err) {
99
+ var _a;
100
+ SET_ALERT_BANNER(((_a = err.response) === null || _a === void 0 ? void 0 : _a.data.errors[0].msg) || err.message, "red", 3500);
101
+ setFilesLength(0);
102
+ },
103
+ });
104
+ };
105
+ var removeResource = function (id) {
106
+ var newResources = resources.filter(function (d) { return d.id !== id; });
107
+ setResources(newResources);
108
+ parentOnChange && parentOnChange(props.id, newResources);
109
+ };
110
+ return (react_1.default.createElement(react_1.default.Fragment, null,
111
+ react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props))),
112
+ react_1.default.createElement(styled_1.StyledWrapper, null,
113
+ react_1.default.createElement(ResourceDisplayBlock_1.ResourceDisplayBlock, { resources: resources, filesLength: filesLength, uploadProgress: uploadProgress, invert: invert, removeResource: function (id) { return removeResource(id); } }),
114
+ !readOnly &&
115
+ react_1.default.createElement(styled_1.StyledUploadButton, { onClick: function () { return inputRef.current.click(); }, invert: invert },
116
+ react_1.default.createElement(Plus, { stroke: 'white', size: 20, weight: 'bold' }),
117
+ react_1.default.createElement(Typo_1.SANS_2, { semibold: true, style: { marginTop: '0.5rem' } }, uploadBtnText || "Add Resource"))),
118
+ react_1.default.createElement("input", { id: "".concat(comp_id, "_resources_uploader"), type: "file", multiple: multiple, style: { display: 'none' }, ref: inputRef, onChange: function (v) { return handleUpload(v.target.files); } })));
119
+ };
120
+ exports.ResourceInput = ResourceInput;
package/dist/components/ResourceInput/styled.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export const StyledUploadButton: import("styled-components").StyledComponent<"button", any, {}, never>;
2
+ export const StyledWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
package/dist/components/ResourceInput/styled.js ADDED
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
6
+ var __importDefault = (this && this.__importDefault) || function (mod) {
7
+ return (mod && mod.__esModule) ? mod : { "default": mod };
8
+ };
9
+ Object.defineProperty(exports, "__esModule", { value: true });
10
+ exports.StyledWrapper = exports.StyledUploadButton = void 0;
11
+ var styled_components_1 = __importDefault(require("styled-components"));
12
+ var colors_1 = require("../../themes/colors");
13
+ var mixins_1 = require("../../themes/mixins");
14
+ var utilsOolib_1 = require("../../utilsOolib");
15
+ exports.StyledUploadButton = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: none;\n width: 14rem;\n height: 14rem;\n\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n cursor: pointer;\n color: ", ";;\n text-align: center;\n \n background-color: ", "; \n\n\n ", "\n\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n\n &:active {\n transform: scale(0.98);\n }\n\n &:focus {\n outline: none;\n }\n\n"], ["\n border: none;\n width: 14rem;\n height: 14rem;\n\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n cursor: pointer;\n color: ", ";;\n text-align: center;\n \n background-color: ", "; \n\n\n ", "\n\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n\n &:active {\n transform: scale(0.98);\n }\n\n &:focus {\n outline: none;\n }\n\n"])), function (_a) {
16
+ var invert = _a.invert;
17
+ return invert ? colors_1.colors.greyColor100 : 'white';
18
+ }, function (_a) {
19
+ var invert = _a.invert;
20
+ return invert ? (0, utilsOolib_1.getPrimaryColor40)(colors_1.colors) : (0, utilsOolib_1.getPrimaryColor100)(colors_1.colors);
21
+ }, (0, mixins_1.transition)('background-color'), function (_a) {
22
+ var invert = _a.invert;
23
+ return invert ? (0, utilsOolib_1.getPrimaryColor10)(colors_1.colors) : (0, utilsOolib_1.getPrimaryColor40)(colors_1.colors);
24
+ }, function (_a) {
25
+ var invert = _a.invert;
26
+ return invert ? colors_1.colors.greyColor100 : (0, utilsOolib_1.getPrimaryColorText)(colors_1.colors);
27
+ });
28
+ exports.StyledWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n \n"], ["\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n \n"])));
29
+ var templateObject_1, templateObject_2;
package/dist/icons/custom/index.js CHANGED
@@ -395,30 +395,31 @@ var IndonesiaFlag = function (props) {
395
395
  };
396
396
  exports.IndonesiaFlag = IndonesiaFlag;
397
397
  var ChileFlag = function (props) {
398
- return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: props.size || 30, height: props.size || 30, fill: "none", viewBox: "-4 -4 24 16" },
399
- react_1.default.createElement("path", { d: "M20 12H-4V-4h24z", fill: "#d52b1e" }),
400
- react_1.default.createElement("path", { d: "M4 4h16v-8H-4z", fill: "#fff" }),
401
- react_1.default.createElement("path", { d: "M4 4h-8v-8h8z", fill: "#0039a6" })));
398
+ return (react_1.default.createElement("svg", { viewBox: "0 0 36 36", xmlns: "http://www.w3.org/2000/svg", width: props.size || 30, height: props.size || 30 },
399
+ react_1.default.createElement("path", { d: "m13 5h-9c-2.209 0-4 1.791-4 4v9h13zm-4.663 9.292-1.882-1.367-1.882 1.367.719-2.212-1.882-1.368h2.326l.719-2.212.719 2.212h2.326l-1.882 1.368z", fill: "#1f429b" }),
400
+ react_1.default.createElement("path", { d: "m32 5h-19v13h23v-9c0-2.209-1.791-4-4-4z", fill: "#eee" }),
401
+ react_1.default.createElement("path", { d: "m0 18v9c0 2.209 1.791 4 4 4h28c2.209 0 4-1.791 4-4v-9z", fill: "#d42d27" }),
402
+ react_1.default.createElement("path", { d: "m7.174 10.712-.719-2.212-.719 2.212h-2.326l1.882 1.368-.719 2.212 1.882-1.367 1.882 1.367-.719-2.212 1.882-1.368z", fill: "#fff" })));
402
403
  };
403
404
  exports.ChileFlag = ChileFlag;
404
405
  var PakistanFlag = function (props) {
405
- return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: props.size || 30, height: props.size || 30, fill: "none", viewBox: "-75 -40 120 80" },
406
- react_1.default.createElement("path", { fill: "#fff", d: "M-75-40H45v80H-75z" }),
407
- react_1.default.createElement("path", { fill: "#01411C", d: "M-45-40h90v80h-90z" }),
408
- react_1.default.createElement("circle", { r: "24", fill: "#fff" }),
409
- react_1.default.createElement("circle", { r: "22", cx: "-7", cy: "-40", fill: "#01411C", transform: "rotate(-41.634 45 -40)" }),
410
- react_1.default.createElement("path", { fill: "#fff", d: "M8.751-17.959l10.11 11.373L3.997-9.844l13.94-6.1-7.692 13.129z" })));
406
+ return (react_1.default.createElement("svg", { viewBox: "0 0 36 36", xmlns: "http://www.w3.org/2000/svg", width: props.size || 30, height: props.size || 30 },
407
+ react_1.default.createElement("path", { d: "m32 5h-23v26h23c2.209 0 4-1.791 4-4v-18c0-2.209-1.791-4-4-4zm-9.5 20.472c-4.142 0-7.5-3.358-7.5-7.5 0-3.72 2.711-6.799 6.263-7.39-2.22 1.034-3.763 3.279-3.763 5.89 0 3.59 2.91 6.5 6.5 6.5 2.611 0 4.856-1.543 5.89-3.763-.591 3.553-3.67 6.263-7.39 6.263zm5.11-10.424-1.213 2.022-.208-2.349-2.298-.528 2.17-.924-.207-2.349 1.548 1.779 2.17-.924-1.212 2.023 1.548 1.779z", fill: "#004600" }),
408
+ react_1.default.createElement("path", { d: "m4 5c-2.209 0-4 1.791-4 4v18c0 2.209 1.791 4 4 4h5v-26z", fill: "#eee" }),
409
+ react_1.default.createElement("g", { fill: "#fff" },
410
+ react_1.default.createElement("path", { d: "m29.572 11.775-2.17.924-1.548-1.779.207 2.349-2.17.924 2.298.528.208 2.349 1.213-2.022 2.298.529-1.548-1.779z" }),
411
+ react_1.default.createElement("path", { d: "m24 22.972c-3.59 0-6.5-2.91-6.5-6.5 0-2.611 1.543-4.856 3.763-5.89-3.552.592-6.263 3.671-6.263 7.39 0 4.142 3.358 7.5 7.5 7.5 3.72 0 6.799-2.711 7.39-6.263-1.034 2.221-3.279 3.763-5.89 3.763z" }))));
411
412
  };
412
413
  exports.PakistanFlag = PakistanFlag;
413
414
  var SpainFlag = function (props) {
414
- return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: props.size || 30, height: props.size || 30, viewBox: "0 0 36 36" },
415
- react_1.default.createElement("path", { fill: "#C60A1D", d: "M36 27a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V9a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4z" }),
415
+ return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 36 36", width: props.size || 30, height: props.size || 30 },
416
+ react_1.default.createElement("path", { fill: "#C60A1D", d: "M36 27c0 2.209-1.791 4-4 4H4c-2.209 0-4-1.791-4-4V9c0-2.209 1.791-4 4-4h28c2.209 0 4 1.791 4 4v18z" }),
416
417
  react_1.default.createElement("path", { fill: "#FFC400", d: "M0 12h36v12H0z" }),
417
- react_1.default.createElement("path", { fill: "#EA596E", d: "M9 17v3a3 3 0 1 0 6 0v-3z" }),
418
+ react_1.default.createElement("path", { fill: "#EA596E", d: "M9 17v3c0 1.657 1.343 3 3 3s3-1.343 3-3v-3H9z" }),
418
419
  react_1.default.createElement("path", { fill: "#F4A2B2", d: "M12 16h3v3h-3z" }),
419
420
  react_1.default.createElement("path", { fill: "#DD2E44", d: "M9 16h3v3H9z" }),
420
- react_1.default.createElement("ellipse", { cx: "12", cy: "14.5", fill: "#EA596E", rx: "3", ry: "1.5" }),
421
- react_1.default.createElement("ellipse", { cx: "12", cy: "13.75", fill: "#FFAC33", rx: "3", ry: ".75" }),
421
+ react_1.default.createElement("ellipse", { fill: "#EA596E", cx: "12", cy: "14.5", rx: "3", ry: "1.5" }),
422
+ react_1.default.createElement("ellipse", { fill: "#FFAC33", cx: "12", cy: "13.75", rx: "3", ry: ".75" }),
422
423
  react_1.default.createElement("path", { fill: "#99AAB5", d: "M7 16h1v7H7zm9 0h1v7h-1z" }),
423
424
  react_1.default.createElement("path", { fill: "#66757F", d: "M6 22h3v1H6zm9 0h3v1h-3zm-8-7h1v1H7zm9 0h1v1h-1z" })));
424
425
  };
package/dist/index.d.ts CHANGED
@@ -61,6 +61,7 @@ export { default as VideoInput } from "./components/VideoInput";
61
61
  export { default as AudioInput } from "./components/AudioInput";
62
62
  export { default as PDFInput } from "./components/PDFInput";
63
63
  export { default as IFrameInput } from "./components/IFrameInput";
64
+ export { ResourceInput } from "./components/ResourceInput";
64
65
  export { ModalConfirmAction } from "./components/Modals/derivedComps/ModalConfirmAction";
65
66
  export { SimpleTable } from "./components/SimpleTable";
66
67
  export { styledOKELinkCSS } from "./components/OKELink/styled";
package/dist/index.js CHANGED
@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
18
18
  };
19
19
  Object.defineProperty(exports, "__esModule", { value: true });
20
20
  exports.IFrameInput = exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.ListContent = exports.CardContent = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.BarChart = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
21
- exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = void 0;
21
+ exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.ResourceInput = void 0;
22
22
  //css and styling related ( styled-components )
23
23
  var globalStyles_1 = require("./globalStyles");
24
24
  Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -149,6 +149,8 @@ var PDFInput_1 = require("./components/PDFInput");
149
149
  Object.defineProperty(exports, "PDFInput", { enumerable: true, get: function () { return __importDefault(PDFInput_1).default; } });
150
150
  var IFrameInput_1 = require("./components/IFrameInput");
151
151
  Object.defineProperty(exports, "IFrameInput", { enumerable: true, get: function () { return __importDefault(IFrameInput_1).default; } });
152
+ var ResourceInput_1 = require("./components/ResourceInput");
153
+ Object.defineProperty(exports, "ResourceInput", { enumerable: true, get: function () { return ResourceInput_1.ResourceInput; } });
152
154
  //banners
153
155
  var Banners_1 = require("./components/Banners");
154
156
  Object.defineProperty(exports, "BannerAlert", { enumerable: true, get: function () { return Banners_1.BannerAlert; } });
package/dist/utilsOolib/useFakeUploadImpression.js CHANGED
@@ -1,6 +1,18 @@
1
1
  "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
2
13
  Object.defineProperty(exports, "__esModule", { value: true });
3
14
  exports.useFakeUploadImpression = void 0;
15
+ var lodash_1 = require("lodash");
4
16
  var react_1 = require("react");
5
17
  var data = {
6
18
  audio: [{
@@ -26,7 +38,6 @@ var data = {
26
38
  "mediaHost": "gcs",
27
39
  "publicUrl": "https://storage.googleapis.com/cata_dev__media/audios/sampleaudio3_d9022d06-c304-4fbb-ade6-7d0784704768.wav"
28
40
  },
29
- "status": "success"
30
41
  }],
31
42
  video: [{
32
43
  fileData: {
@@ -76,7 +87,81 @@ var data = {
76
87
  "format": "pdf",
77
88
  "publicUrl": "https://storage.googleapis.com/dev-okf-assets-01/demo/pdfs/70afac90-134a-42b7-863f-3d76739636e9.pdf"
78
89
  }
79
- }]
90
+ }],
91
+ resource: [
92
+ {
93
+ fileData: {
94
+ "kind": "storage#object",
95
+ "id": "dev-okf-assets-01/demo/pdfs/70afac90-134a-42b7-863f-3d76739636e9.pdf/1695017447246490",
96
+ "selfLink": "https://www.googleapis.com/storage/v1/b/dev-okf-assets-01/o/demo%2Fpdfs%2F70afac90-134a-42b7-863f-3d76739636e9.pdf",
97
+ "mediaLink": "https://storage.googleapis.com/download/storage/v1/b/dev-okf-assets-01/o/demo%2Fpdfs%2F70afac90-134a-42b7-863f-3d76739636e9.pdf?generation=1695017447246490&alt=media",
98
+ "name": "demo/pdfs/70afac90-134a-42b7-863f-3d76739636e9.pdf",
99
+ "bucket": "dev-okf-assets-01",
100
+ "generation": "1695017447246490",
101
+ "metageneration": "1",
102
+ "contentType": "application/pdff",
103
+ "storageClass": "STANDARD",
104
+ "size": "54836",
105
+ "md5Hash": "a7SSw4MkD82HtcQpWMLkgg==",
106
+ "crc32c": "aDpX1g==",
107
+ "etag": "CJqV04bAs4EDEAE=",
108
+ "timeCreated": "2023-09-18T06:10:47.301Z",
109
+ "updated": "2023-09-18T06:10:47.301Z",
110
+ "timeStorageClassUpdated": "2023-09-18T06:10:47.301Z",
111
+ "mediaHost": "gcs",
112
+ "originalFilename": "sample.pdf",
113
+ "publicUrl": "https://storage.googleapis.com/dev-okf-assets-01/demo/pdfs/70afac90-134a-42b7-863f-3d76739636e9.pdf"
114
+ }
115
+ },
116
+ {
117
+ fileData: {
118
+ "kind": "storage#object",
119
+ "id": "cata_dev__media/videos/file_example_mp4_1920_18mg_1dded13e-9090-4477-b00e-78591823fd41.mp4/1694442756300353",
120
+ "selfLink": "https://www.googleapis.com/storage/v1/b/cata_dev__media/o/videos%2Ffile_example_mp4_1920_18mg_1dded13e-9090-4477-b00e-78591823fd41.mp4",
121
+ "mediaLink": "https://storage.googleapis.com/download/storage/v1/b/cata_dev__media/o/videos%2Ffile_example_mp4_1920_18mg_1dded13e-9090-4477-b00e-78591823fd41.mp4?generation=1694442756300353&alt=media",
122
+ "name": "videos/file_example_mp4_1920_18mg_1dded13e-9090-4477-b00e-78591823fd41.mp4",
123
+ "bucket": "cata_dev__media",
124
+ "generation": "1694442756300353",
125
+ "metageneration": "1",
126
+ "contentType": "video/mp4",
127
+ "storageClass": "STANDARD",
128
+ "size": 17839845,
129
+ "md5Hash": "16PezbYoDrDvOgWaw16g7g==",
130
+ "crc32c": "xo062A==",
131
+ "etag": "CMG805TjooEDEAE=",
132
+ "timeCreated": "2023-09-11T14:32:36.302Z",
133
+ "updated": "2023-09-11T14:32:36.302Z",
134
+ "timeStorageClassUpdated": "2023-09-11T14:32:36.302Z",
135
+ "originalFilename": "file_example_MP4_1920_18MG.mp4",
136
+ "mediaHost": "gcs",
137
+ "publicUrl": "https://storage.googleapis.com/cata_dev__media/videos/file_example_mp4_1920_18mg_1dded13e-9090-4477-b00e-78591823fd41.mp4"
138
+ }
139
+ },
140
+ {
141
+ fileData: {
142
+ "kind": "storage#object",
143
+ "id": "cata_dev__media/audios/sampleaudio3_d9022d06-c304-4fbb-ade6-7d0784704768.wav/1694442705602562",
144
+ "selfLink": "https://www.googleapis.com/storage/v1/b/cata_dev__media/o/audios%2Fsampleaudio3_d9022d06-c304-4fbb-ade6-7d0784704768.wav",
145
+ "mediaLink": "https://storage.googleapis.com/download/storage/v1/b/cata_dev__media/o/audios%2Fsampleaudio3_d9022d06-c304-4fbb-ade6-7d0784704768.wav?generation=1694442705602562&alt=media",
146
+ "name": "audios/sampleaudio3_d9022d06-c304-4fbb-ade6-7d0784704768.wav",
147
+ "bucket": "cata_dev__media",
148
+ "generation": "1694442705602562",
149
+ "metageneration": "1",
150
+ "contentType": "audio/wav",
151
+ "storageClass": "STANDARD",
152
+ "size": 10544134,
153
+ "md5Hash": "G4cmpod1v6ysmkrndou8kQ==",
154
+ "crc32c": "SAkgWg==",
155
+ "etag": "CIKQvfziooEDEAE=",
156
+ "timeCreated": "2023-09-11T14:31:45.605Z",
157
+ "updated": "2023-09-11T14:31:45.605Z",
158
+ "timeStorageClassUpdated": "2023-09-11T14:31:45.605Z",
159
+ "originalFilename": "sampleaudio3.wav",
160
+ "mediaHost": "gcs",
161
+ "publicUrl": "https://storage.googleapis.com/cata_dev__media/audios/sampleaudio3_d9022d06-c304-4fbb-ade6-7d0784704768.wav"
162
+ },
163
+ }
164
+ ]
80
165
  };
81
166
  var useFakeUploadImpression = function (options) {
82
167
  if (options === void 0) { options = {}; }
@@ -99,9 +184,23 @@ var useFakeUploadImpression = function (options) {
99
184
  };
100
185
  var mutate = function (files, callbacks) {
101
186
  if (callbacks === void 0) { callbacks = {}; }
102
- var fileTypeData = data[fileType] && data[fileType][0];
103
- if (fileTypeData) {
104
- files = [{ fileData: fileTypeData.fileData, status: "success" }];
187
+ if (fileType === "resource" && files.length > 0) {
188
+ var fileTypeData = data[fileType];
189
+ // Repeat the data from data[fileType] until it matches the length of received files
190
+ while (fileTypeData.length < files.length) {
191
+ fileTypeData.push.apply(fileTypeData, fileTypeData);
192
+ }
193
+ // Select files from repeated data[fileType] and update the id
194
+ var selectedFiles = fileTypeData.slice(0, files.length);
195
+ files = selectedFiles.map(function (file) { return ({
196
+ fileData: __assign(__assign({}, file.fileData), { id: (0, lodash_1.uniqueId)() }),
197
+ status: "success"
198
+ }); });
199
+ }
200
+ else {
201
+ // Use the hardcoded data for other fileTypes
202
+ var fileTypeData = data[fileType] && data[fileType][0];
203
+ files = fileTypeData ? [{ fileData: fileTypeData.fileData, status: "success" }] : [];
105
204
  }
106
205
  var onSuccess = callbacks.onSuccess;
107
206
  setIsLoading(true);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oolib",
3
- "version": "2.103.0",
3
+ "version": "2.105.0",
4
4
  "description": " OKE Component Library",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",