oolib 2.64.14 → 2.64.15
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/components/Banners/bannerContext.d.ts +6 -0
- package/dist/components/Banners/bannerContext.js +154 -0
- package/dist/components/ImageInput/ImageInputContext.js +2 -2
- package/dist/components/ImageInput/comps/ImageUploadShell/index.d.ts +2 -1
- package/dist/components/ImageInput/comps/ImageUploadShell/index.js +29 -9
- package/dist/components/ImageInput/comps/Placeholder/index.js +4 -3
- package/dist/components/ImageInput/index.d.ts +1 -2
- package/dist/components/ImageInput/index.js +3 -2
- package/dist/components/MetaBlock/index.js +0 -1
- package/dist/components/VideoInput/index.js +2 -8
- package/dist/index.d.ts +2 -1
- package/dist/index.js +9 -2
- package/package.json +1 -1
- package/dist/utilsOolib/infoAlertBannerFnPlaceholder.d.ts +0 -4
- package/dist/utilsOolib/infoAlertBannerFnPlaceholder.js +0 -10
|
@@ -0,0 +1,154 @@
|
|
|
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.useBannerContext = exports.BannerProvider = exports.BannerContext = void 0;
|
|
47
|
+
var react_1 = __importStar(require("react"));
|
|
48
|
+
exports.BannerContext = (0, react_1.createContext)();
|
|
49
|
+
var counter = 0;
|
|
50
|
+
// FEEDBACK:
|
|
51
|
+
// needs to be outside the BannerProvider, else it gets called twice.
|
|
52
|
+
// which wouldn't be a problem if this function was pure, but its not cuz of the counter.
|
|
53
|
+
// need to find an alt implementation to that.
|
|
54
|
+
// discussion on useReducer being pure: https://github.com/facebook/react/issues/16295
|
|
55
|
+
var bannerReducer = function (state, action) {
|
|
56
|
+
var newInfoState, newAlertState, newEntry, alreadyExistsIdx;
|
|
57
|
+
switch (action.type) {
|
|
58
|
+
case "ADD_ALERT":
|
|
59
|
+
var alertState = state.alertState;
|
|
60
|
+
counter = counter + 1;
|
|
61
|
+
newEntry = __assign({ id: "ALERT-".concat(counter) }, action.payload
|
|
62
|
+
// if an id is passed in the payload itelf, it will override the counter based id
|
|
63
|
+
);
|
|
64
|
+
// if a alert banner exists with the same id, as the new one coming in,
|
|
65
|
+
// we remove that first.
|
|
66
|
+
newAlertState = alertState.filter(function (d) { return d.id !== newEntry.id; });
|
|
67
|
+
alreadyExistsIdx = alertState.findIndex(function (d) { return d.id === newEntry.id; });
|
|
68
|
+
if (alreadyExistsIdx !== -1) {
|
|
69
|
+
alertState[alreadyExistsIdx] = newEntry;
|
|
70
|
+
newAlertState = alertState;
|
|
71
|
+
}
|
|
72
|
+
else {
|
|
73
|
+
newAlertState = __spreadArray([newEntry], alertState, true);
|
|
74
|
+
}
|
|
75
|
+
return __assign(__assign({}, state), { alertState: __spreadArray([
|
|
76
|
+
newEntry
|
|
77
|
+
], alertState, true) });
|
|
78
|
+
case "ADD_INFO":
|
|
79
|
+
var infoState = state.infoState;
|
|
80
|
+
counter = counter + 1;
|
|
81
|
+
newEntry = __assign({ id: "INFO-".concat(counter) }, action.payload
|
|
82
|
+
// if an id is passed in the payload itelf, it will override the counter based id
|
|
83
|
+
);
|
|
84
|
+
// if a info banner exists with the same id, as the new one coming in,
|
|
85
|
+
// we remove that first.
|
|
86
|
+
alreadyExistsIdx = infoState.findIndex(function (d) { return d.id === newEntry.id; });
|
|
87
|
+
if (alreadyExistsIdx !== -1) {
|
|
88
|
+
infoState[alreadyExistsIdx] = newEntry;
|
|
89
|
+
newInfoState = infoState;
|
|
90
|
+
}
|
|
91
|
+
else {
|
|
92
|
+
newInfoState = __spreadArray([newEntry], infoState, true);
|
|
93
|
+
}
|
|
94
|
+
return __assign(__assign({}, state), { infoState: newInfoState });
|
|
95
|
+
case "REMOVE_ALERT":
|
|
96
|
+
newAlertState = state.alertState.filter(function (a) { return a.id !== action.id; });
|
|
97
|
+
return __assign(__assign({}, state), { alertState: newAlertState });
|
|
98
|
+
case "REMOVE_INFO":
|
|
99
|
+
newInfoState = state.infoState.filter(function (a) { return a.id !== action.id; });
|
|
100
|
+
return __assign(__assign({}, state), { infoState: newInfoState });
|
|
101
|
+
default:
|
|
102
|
+
return state;
|
|
103
|
+
}
|
|
104
|
+
};
|
|
105
|
+
var BannerProvider = function (_a) {
|
|
106
|
+
var children = _a.children;
|
|
107
|
+
var initialState = { alertState: [], infoState: [] };
|
|
108
|
+
var _b = (0, react_1.useReducer)(bannerReducer, initialState), BANNER_STATE = _b[0], BANNER_DISPATCH = _b[1];
|
|
109
|
+
var REMOVE_ALERT_BANNER = function (e, id) {
|
|
110
|
+
BANNER_DISPATCH({ type: "REMOVE_ALERT", id: id });
|
|
111
|
+
};
|
|
112
|
+
var REMOVE_INFO_BANNER = function (e, id) {
|
|
113
|
+
BANNER_DISPATCH({ type: "REMOVE_INFO", id: id });
|
|
114
|
+
};
|
|
115
|
+
// the config of bannner can either be passed as a object, or plain arguments.
|
|
116
|
+
var SET_INFO_BANNER = function (options_msg, color, timeOut) {
|
|
117
|
+
var options = {};
|
|
118
|
+
if (typeof options_msg === 'string') { //means it is the 'msg' config
|
|
119
|
+
options.msg = options_msg;
|
|
120
|
+
options.color = color || 'green'; //defaults to green
|
|
121
|
+
options.timeOut = timeOut;
|
|
122
|
+
}
|
|
123
|
+
else {
|
|
124
|
+
options = options_msg;
|
|
125
|
+
}
|
|
126
|
+
BANNER_DISPATCH({ type: "ADD_INFO", payload: options });
|
|
127
|
+
return "INFO-".concat(counter); //bannerId
|
|
128
|
+
};
|
|
129
|
+
var SET_ALERT_BANNER = function (options_msg, color, timeOut) {
|
|
130
|
+
var options = {};
|
|
131
|
+
if (typeof options_msg === 'string') { //means it is the 'msg' config
|
|
132
|
+
options.msg = options_msg;
|
|
133
|
+
options.color = color || 'green'; //defaults to green
|
|
134
|
+
options.timeOut = timeOut;
|
|
135
|
+
}
|
|
136
|
+
else {
|
|
137
|
+
options = options_msg;
|
|
138
|
+
}
|
|
139
|
+
BANNER_DISPATCH({ type: "ADD_ALERT", payload: options });
|
|
140
|
+
return "ALERT-".concat(counter); //bannerId
|
|
141
|
+
};
|
|
142
|
+
return (react_1.default.createElement(exports.BannerContext.Provider, { value: {
|
|
143
|
+
BANNER_STATE: BANNER_STATE,
|
|
144
|
+
SET_INFO_BANNER: SET_INFO_BANNER,
|
|
145
|
+
SET_ALERT_BANNER: SET_ALERT_BANNER,
|
|
146
|
+
REMOVE_ALERT_BANNER: REMOVE_ALERT_BANNER,
|
|
147
|
+
REMOVE_INFO_BANNER: REMOVE_INFO_BANNER
|
|
148
|
+
} }, children));
|
|
149
|
+
};
|
|
150
|
+
exports.BannerProvider = BannerProvider;
|
|
151
|
+
var useBannerContext = function () {
|
|
152
|
+
return (0, react_1.useContext)(exports.BannerContext);
|
|
153
|
+
};
|
|
154
|
+
exports.useBannerContext = useBannerContext;
|
|
@@ -35,8 +35,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
35
35
|
exports.useImageInputContext = exports.ImageInputContextProvider = exports.ImageInputContext = void 0;
|
|
36
36
|
var react_1 = __importStar(require("react"));
|
|
37
37
|
var styled_components_1 = require("styled-components");
|
|
38
|
-
var infoAlertBannerFnPlaceholder_1 = require("../../utilsOolib/infoAlertBannerFnPlaceholder");
|
|
39
38
|
var useFakeUploadMedia_1 = require("../../utilsOolib/useFakeUploadMedia");
|
|
39
|
+
var bannerContext_1 = require("../Banners/bannerContext");
|
|
40
40
|
exports.ImageInputContext = (0, react_1.createContext)();
|
|
41
41
|
var ImageInputContextProvider = function (_a) {
|
|
42
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;
|
|
@@ -54,7 +54,7 @@ var ImageInputContextProvider = function (_a) {
|
|
|
54
54
|
handleUploadProgess: handleUploadProgess,
|
|
55
55
|
})) ||
|
|
56
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
|
|
57
|
-
var SET_ALERT_BANNER = (
|
|
57
|
+
var SET_ALERT_BANNER = (0, bannerContext_1.useBannerContext)().SET_ALERT_BANNER;
|
|
58
58
|
var _d = (0, react_1.useState)(0), noOfImagesUploading = _d[0], setNoOfImagesUploading = _d[1];
|
|
59
59
|
var _e = (0, react_1.useState)(undefined), publicUrlBeingReplaced = _e[0], setPublicUrlBeingReplaced = _e[1];
|
|
60
60
|
var handleUpload = function (_a) {
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
export default ImageUploadShell;
|
|
2
|
-
declare function ImageUploadShell({ style, children, disabled }: {
|
|
2
|
+
declare function ImageUploadShell({ style, children, disabled, enableFilesDrop }: {
|
|
3
3
|
style: any;
|
|
4
4
|
children: any;
|
|
5
5
|
disabled: any;
|
|
6
|
+
enableFilesDrop: any;
|
|
6
7
|
}): React.JSX.Element;
|
|
7
8
|
import React from "react";
|
|
@@ -35,20 +35,40 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
35
35
|
var react_1 = __importStar(require("react"));
|
|
36
36
|
var ImageInputContext_1 = require("../../ImageInputContext");
|
|
37
37
|
var ImageUploadShell = function (_a) {
|
|
38
|
-
var style = _a.style, children = _a.children, disabled = _a.disabled;
|
|
38
|
+
var style = _a.style, children = _a.children, disabled = _a.disabled, enableFilesDrop = _a.enableFilesDrop;
|
|
39
39
|
var inputRef = (0, react_1.useRef)(null);
|
|
40
40
|
var _b = (0, ImageInputContext_1.useImageInputContext)(), handleUpload = _b.handleUpload, onChange = _b.onChange, value = _b.value, id = _b.id, multiple = _b.multiple;
|
|
41
41
|
if (disabled)
|
|
42
42
|
return react_1.default.createElement("div", { style: { width: '100%', height: '100%' } }, children);
|
|
43
|
+
var fireHandleUpload = function (files) {
|
|
44
|
+
handleUpload({
|
|
45
|
+
files: files,
|
|
46
|
+
callback: function (_a) {
|
|
47
|
+
var successfulUploads = _a.successfulUploads;
|
|
48
|
+
onChange(id, multiple
|
|
49
|
+
? __spreadArray(__spreadArray([], successfulUploads, true), (value || []), true) : successfulUploads);
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
};
|
|
43
53
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
44
|
-
react_1.default.createElement("input", { type: "file", accept: "image/*", style: { display: 'none' }, ref: inputRef, onChange: function (e) { return
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
54
|
+
react_1.default.createElement("input", { type: "file", accept: "image/*", style: { display: 'none' }, ref: inputRef, onChange: function (e) { return fireHandleUpload(e.target.files); }, multiple: multiple }),
|
|
55
|
+
react_1.default.createElement("div", { onDragOver: enableFilesDrop
|
|
56
|
+
? function (e) { return e.preventDefault(); }
|
|
57
|
+
: function () { }, onDrop: enableFilesDrop
|
|
58
|
+
? function (e) {
|
|
59
|
+
var _a;
|
|
60
|
+
e.preventDefault();
|
|
61
|
+
e.stopPropagation();
|
|
62
|
+
if ((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) {
|
|
63
|
+
var filesToUpload = multiple
|
|
64
|
+
? Array.from(e.dataTransfer.files)
|
|
65
|
+
: [Array.from(e.dataTransfer.files)[0]];
|
|
66
|
+
if (filesToUpload
|
|
67
|
+
.every(function (d) { return d.type.split('/')[0] === 'image'; })) {
|
|
68
|
+
fireHandleUpload(e.dataTransfer.files);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
50
71
|
}
|
|
51
|
-
|
|
52
|
-
react_1.default.createElement("div", { onClick: function () { return inputRef.current.click(); }, style: { height: '100%', width: '100%' } }, children)));
|
|
72
|
+
: function () { }, onClick: function () { return inputRef.current.click(); }, style: { height: '100%', width: '100%' } }, children)));
|
|
53
73
|
};
|
|
54
74
|
exports.default = ImageUploadShell;
|
|
@@ -83,12 +83,13 @@ var Placeholder = function (_a) {
|
|
|
83
83
|
}),
|
|
84
84
|
react_1.default.createElement(styled_1.StyledPlaceholderWrapper, { smallPlaceholderUI: smallPlaceholderUI, ref: styledPlaceholderWrapperRef }, isLoading ? (react_1.default.createElement(ProgressBar_1.ProgressBar, { progress: uploadProgress, text: uploadProgress && uploadProgress !== 100
|
|
85
85
|
? uploadProgress + "%"
|
|
86
|
-
: "Almost Done..." })) : (react_1.default.createElement(ImageUploadShell_1.default, { multiple: multiple },
|
|
86
|
+
: "Almost Done..." })) : (react_1.default.createElement(ImageUploadShell_1.default, { enableFilesDrop: true, multiple: multiple },
|
|
87
87
|
react_1.default.createElement(styled_1.StyledPlaceholder, __assign({}, { containerShape: containerShape }, { smallPlaceholderUI: smallPlaceholderUI }), smallPlaceholderUI ? (react_1.default.createElement(react_1.Fragment, null,
|
|
88
88
|
react_1.default.createElement(ImageSquare, { size: 16, color: greyColor100 }),
|
|
89
|
-
react_1.default.createElement(Typo_1.SANS_0, { semibold: true }, dropzoneLabel)
|
|
89
|
+
react_1.default.createElement(Typo_1.SANS_0, { semibold: true }, dropzoneLabel),
|
|
90
|
+
showOptionalLabelInDropzone && isRequired === false && react_1.default.createElement(Typo_1.SANS_0, null, "(optional)"))) : (react_1.default.createElement(react_1.Fragment, null,
|
|
90
91
|
react_1.default.createElement(ImageSquare, { size: 30, color: greyColor100 }),
|
|
91
|
-
react_1.default.createElement(Typo_1.SANS_2, { semibold: true }, "".concat(dropzoneLabel, " ").concat(showOptionalLabelInDropzone &&
|
|
92
|
+
react_1.default.createElement(Typo_1.SANS_2, { semibold: true }, "".concat(dropzoneLabel, " ").concat(showOptionalLabelInDropzone && isRequired === false
|
|
92
93
|
? "(optional)"
|
|
93
94
|
: "")),
|
|
94
95
|
react_1.default.createElement(Typo_1.SANS_2, null, dropzoneSublabel)))))))));
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
* - richInputHasValue (util)
|
|
7
7
|
* - RichTextEditor
|
|
8
8
|
*/
|
|
9
|
-
export function ImageInput({ id, value, onChange, readOnly, multiple, stretchToFullHeight, aspectRatio, containerShape, invert, enableCaptions, defaultImageSpread, allowedFormats, folderName, bucketEnv, formatConvertConfig, dropzoneLabel, dropzoneSublabel, disableImageBorder, omitEditorTools,
|
|
9
|
+
export function ImageInput({ id, value, onChange, readOnly, multiple, stretchToFullHeight, aspectRatio, containerShape, invert, enableCaptions, defaultImageSpread, allowedFormats, folderName, bucketEnv, formatConvertConfig, dropzoneLabel, dropzoneSublabel, disableImageBorder, omitEditorTools, isRequired, files, isInRTE }: {
|
|
10
10
|
id: any;
|
|
11
11
|
value: any;
|
|
12
12
|
onChange: any;
|
|
@@ -26,7 +26,6 @@ export function ImageInput({ id, value, onChange, readOnly, multiple, stretchToF
|
|
|
26
26
|
dropzoneSublabel: any;
|
|
27
27
|
disableImageBorder?: boolean;
|
|
28
28
|
omitEditorTools?: any[];
|
|
29
|
-
showOptionalLabelInDropzone: any;
|
|
30
29
|
isRequired: any;
|
|
31
30
|
files: any;
|
|
32
31
|
isInRTE: any;
|
|
@@ -32,10 +32,11 @@ var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
|
|
|
32
32
|
*/
|
|
33
33
|
function ImageInput(_a) {
|
|
34
34
|
var id = _a.id, value = _a.value, onChange = _a.onChange, readOnly = _a.readOnly, multiple = _a.multiple, _b = _a.stretchToFullHeight, stretchToFullHeight = _b === void 0 ? false : _b, _c = _a.aspectRatio, aspectRatio = _c === void 0 ? '5/3' : _c, _d = _a.containerShape, containerShape = _d === void 0 ? 'rectangle' : _d, //alt = circle
|
|
35
|
-
invert = _a.invert, _e = _a.enableCaptions, enableCaptions = _e === void 0 ? true : _e, _f = _a.defaultImageSpread, defaultImageSpread = _f === void 0 ? '
|
|
36
|
-
|
|
35
|
+
invert = _a.invert, _e = _a.enableCaptions, enableCaptions = _e === void 0 ? true : _e, _f = _a.defaultImageSpread, defaultImageSpread = _f === void 0 ? 'cover' : _f, _g = _a.allowedFormats, allowedFormats = _g === void 0 ? ["jpg", "jpeg", "png"] : _g, _h = _a.folderName, folderName = _h === void 0 ? 'images' : _h, bucketEnv = _a.bucketEnv, formatConvertConfig = _a.formatConvertConfig, dropzoneLabel = _a.dropzoneLabel, dropzoneSublabel = _a.dropzoneSublabel, _j = _a.disableImageBorder, disableImageBorder = _j === void 0 ? false : _j, _k = _a.omitEditorTools, omitEditorTools = _k === void 0 ? [] : _k, //can include : 'cover_contain' | 'rotate' | 'reposition'
|
|
36
|
+
isRequired = _a.isRequired, files = _a.files, //used by RTEImageInput
|
|
37
37
|
isInRTE = _a.isInRTE;
|
|
38
38
|
var props = arguments[0];
|
|
39
|
+
var showOptionalLabelInDropzone = !props.label && !props.sublabel;
|
|
39
40
|
return (react_1.default.createElement(ImageInputContext_1.ImageInputContextProvider, __assign({}, {
|
|
40
41
|
value: value,
|
|
41
42
|
onChange: onChange,
|
|
@@ -89,7 +89,6 @@ var MetaBlock = function (_a) {
|
|
|
89
89
|
var percent = (100 / value.length) + '%';
|
|
90
90
|
var pixelsToMinus = ((value.length - 1) * (2 + 0.3)) + 'rem'; // 2 = flex gap on the 2 sides of the separator, 0.3 = separator width
|
|
91
91
|
var toReturn = "calc(".concat(percent, " - ").concat(pixelsToMinus, ")");
|
|
92
|
-
console.log({ toReturn: toReturn });
|
|
93
92
|
return toReturn;
|
|
94
93
|
};
|
|
95
94
|
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 },
|
|
@@ -49,6 +49,7 @@ var EmbedLinkModal_1 = require("./comps/EmbedLinkModal");
|
|
|
49
49
|
var ActionMenu_1 = require("../ActionMenu");
|
|
50
50
|
var themes_1 = require("../../themes");
|
|
51
51
|
var useFakeUploadMedia_1 = require("../../utilsOolib/useFakeUploadMedia");
|
|
52
|
+
var bannerContext_1 = require("../Banners/bannerContext");
|
|
52
53
|
var VideoInput = function (_a) {
|
|
53
54
|
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
|
|
54
55
|
width = _a.width, height = _a.height;
|
|
@@ -59,14 +60,7 @@ var VideoInput = function (_a) {
|
|
|
59
60
|
var _c = (0, react_1.useState)(false), showEmbedLinkModal = _c[0], setShowEmbedLinkModal = _c[1];
|
|
60
61
|
var theme = (0, styled_components_1.useTheme)();
|
|
61
62
|
var canPlay = function (value) { var _a; return react_player_1.default.canPlay(value && ((_a = value[0]) === null || _a === void 0 ? void 0 : _a.publicUrl)); };
|
|
62
|
-
var SET_ALERT_BANNER;
|
|
63
|
-
if (theme && theme.useBannerContext) {
|
|
64
|
-
var bannerContext = theme.useBannerContext();
|
|
65
|
-
SET_ALERT_BANNER = bannerContext.SET_ALERT_BANNER;
|
|
66
|
-
}
|
|
67
|
-
else {
|
|
68
|
-
SET_ALERT_BANNER = 'Incorrect video format' /* fallback value / function */;
|
|
69
|
-
}
|
|
63
|
+
var SET_ALERT_BANNER = (0, bannerContext_1.useBannerContext)().SET_ALERT_BANNER;
|
|
70
64
|
var _d = (0, react_1.useState)(undefined), uploadProgress = _d[0], setUploadProgress = _d[1];
|
|
71
65
|
var inputRef = (0, react_1.useRef)();
|
|
72
66
|
var handleUploadProgess = function (progress) { return setUploadProgress(progress); };
|
package/dist/index.d.ts
CHANGED
|
@@ -11,7 +11,6 @@ export * from "./components/Container";
|
|
|
11
11
|
export * from "./components/Wrappers";
|
|
12
12
|
export * from "./components/Switches";
|
|
13
13
|
export * from "./components/TabBar";
|
|
14
|
-
export * from "./components/Banners";
|
|
15
14
|
export * from "./components/RadioAndCheckbox";
|
|
16
15
|
export * from "./components/Margins";
|
|
17
16
|
export * from "./components/Paddings";
|
|
@@ -51,3 +50,5 @@ export { ImageInput } from "./components/ImageInput";
|
|
|
51
50
|
export { ProfileImageInput } from "./components/ImageInput/derivedComps/ProfileImageInput";
|
|
52
51
|
export { default as VideoInput } from "./components/VideoInput";
|
|
53
52
|
export { LoaderCircle, ProgressBar, LoaderCircle as Loader, LoaderOverlay } from "./components/LoadersAndProgress";
|
|
53
|
+
export { BannerAlert, BannerInfo } from "./components/Banners";
|
|
54
|
+
export { BannerContext, useBannerContext, BannerProvider } from "./components/Banners/bannerContext";
|
package/dist/index.js
CHANGED
|
@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
17
17
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
18
18
|
};
|
|
19
19
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
20
|
-
exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.CardEmbed = exports.ListContent = exports.CardContent = exports.TextLoader = exports.BarChart = exports.DateRangePicker = exports.DatePicker = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.ModalLarge = 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;
|
|
20
|
+
exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.CardEmbed = exports.ListContent = exports.CardContent = exports.TextLoader = exports.BarChart = exports.DateRangePicker = exports.DatePicker = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.ModalLarge = 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
21
|
//css and styling related ( styled-components )
|
|
22
22
|
var globalStyles_1 = require("./globalStyles");
|
|
23
23
|
Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
|
|
@@ -45,7 +45,6 @@ __exportStar(require("./components/Container"), exports);
|
|
|
45
45
|
__exportStar(require("./components/Wrappers"), exports);
|
|
46
46
|
__exportStar(require("./components/Switches"), exports);
|
|
47
47
|
__exportStar(require("./components/TabBar"), exports);
|
|
48
|
-
__exportStar(require("./components/Banners"), exports);
|
|
49
48
|
__exportStar(require("./components/RadioAndCheckbox"), exports);
|
|
50
49
|
__exportStar(require("./components/Margins"), exports);
|
|
51
50
|
__exportStar(require("./components/Paddings"), exports);
|
|
@@ -123,3 +122,11 @@ var ProfileImageInput_1 = require("./components/ImageInput/derivedComps/ProfileI
|
|
|
123
122
|
Object.defineProperty(exports, "ProfileImageInput", { enumerable: true, get: function () { return ProfileImageInput_1.ProfileImageInput; } });
|
|
124
123
|
var VideoInput_1 = require("./components/VideoInput");
|
|
125
124
|
Object.defineProperty(exports, "VideoInput", { enumerable: true, get: function () { return __importDefault(VideoInput_1).default; } });
|
|
125
|
+
//banners
|
|
126
|
+
var Banners_1 = require("./components/Banners");
|
|
127
|
+
Object.defineProperty(exports, "BannerAlert", { enumerable: true, get: function () { return Banners_1.BannerAlert; } });
|
|
128
|
+
Object.defineProperty(exports, "BannerInfo", { enumerable: true, get: function () { return Banners_1.BannerInfo; } });
|
|
129
|
+
var bannerContext_1 = require("./components/Banners/bannerContext");
|
|
130
|
+
Object.defineProperty(exports, "BannerContext", { enumerable: true, get: function () { return bannerContext_1.BannerContext; } });
|
|
131
|
+
Object.defineProperty(exports, "useBannerContext", { enumerable: true, get: function () { return bannerContext_1.useBannerContext; } });
|
|
132
|
+
Object.defineProperty(exports, "BannerProvider", { enumerable: true, get: function () { return bannerContext_1.BannerProvider; } });
|
package/package.json
CHANGED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.infoAlertBannerFnPlaceholder = void 0;
|
|
4
|
-
var infoAlertBannerFnPlaceholder = function () {
|
|
5
|
-
return ({
|
|
6
|
-
SET_INFO_BANNER: function (msg) { return window.alert(msg); },
|
|
7
|
-
SET_ALERT_BANNER: function (msg) { return window.alert(msg); }
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
|
-
exports.infoAlertBannerFnPlaceholder = infoAlertBannerFnPlaceholder;
|