oolib 2.92.1 → 2.92.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -39,11 +39,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
39
39
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
40
|
exports.ImageEditor = void 0;
|
|
41
41
|
var react_1 = __importStar(require("react"));
|
|
42
|
-
var
|
|
42
|
+
var styled_components_1 = require("styled-components");
|
|
43
|
+
var themes_1 = require("../../../../themes");
|
|
44
|
+
var mixins_1 = require("../../../../themes/mixins");
|
|
45
|
+
var _EXPORTS_1 = require("../../../../utils/_EXPORTS");
|
|
46
|
+
var renderRTEPlaceholderForOolibPreview_1 = require("../../../../utilsOolib/renderRTEPlaceholderForOolibPreview");
|
|
43
47
|
var Divider_1 = require("../../../Divider");
|
|
44
|
-
var
|
|
45
|
-
var
|
|
48
|
+
var SkeletonLoader_1 = require("../../../LoadersAndProgress/SkeletonLoader");
|
|
49
|
+
var Modal_1 = require("../../../Modals/Modal");
|
|
46
50
|
var Paddings_1 = require("../../../Paddings");
|
|
51
|
+
var AspectRatioShell_1 = __importDefault(require("../AspectRatioShell"));
|
|
47
52
|
var ConfirmDeleteModal_1 = require("./comps/ConfirmDeleteModal");
|
|
48
53
|
var EditToolbar_1 = require("./comps/EditToolbar");
|
|
49
54
|
var ImageActionsMenu_1 = require("./comps/ImageActionsMenu");
|
|
@@ -51,11 +56,6 @@ var ImageReposManager_1 = require("./comps/ImageReposManager");
|
|
|
51
56
|
var styled_1 = require("./styled");
|
|
52
57
|
var smallImageInputUIConditionsMet_1 = require("./utils/smallImageInputUIConditionsMet");
|
|
53
58
|
var useReorientImage_1 = require("./utils/useReorientImage");
|
|
54
|
-
var styled_components_1 = require("styled-components");
|
|
55
|
-
var renderRTEPlaceholderForOolibPreview_1 = require("../../../../utilsOolib/renderRTEPlaceholderForOolibPreview");
|
|
56
|
-
var themes_1 = require("../../../../themes");
|
|
57
|
-
var Modal_1 = require("../../../Modals/Modal");
|
|
58
|
-
var SkeletonLoader_1 = require("../../../LoadersAndProgress/SkeletonLoader");
|
|
59
59
|
/**
|
|
60
60
|
* fiddle for dealing with rotation: https://jsfiddle.net/wunderbart/w1hw5kv1/
|
|
61
61
|
*/
|
|
@@ -72,6 +72,7 @@ function ImageEditor(_a) {
|
|
|
72
72
|
//backwards compat
|
|
73
73
|
richTextHasValue = _d === void 0 ? function () { return false; } : _d; //temporarily passed thru from okf
|
|
74
74
|
var _e = (0, react_1.useState)(_underEditImageData || undefined), underEditImageData = _e[0], setUnderEditImageData = _e[1];
|
|
75
|
+
var screenWidth = (0, _EXPORTS_1.useScreenWidth)();
|
|
75
76
|
//set state in parent imageeditor
|
|
76
77
|
(0, react_1.useEffect)(function () {
|
|
77
78
|
_setUnderEditImageData && _setUnderEditImageData(underEditImageData);
|
|
@@ -123,11 +124,9 @@ function ImageEditor(_a) {
|
|
|
123
124
|
var modalStyleEditorIsCurrentlyOpen = function () {
|
|
124
125
|
return editorStyle === "modal" && !!underEditImageData;
|
|
125
126
|
};
|
|
126
|
-
var genModalStyleEditor = function () { return (react_1.default.createElement(Modal_1.Modal, { title: "Edit Image" },
|
|
127
|
-
react_1.default.createElement(
|
|
128
|
-
react_1.default.createElement(
|
|
129
|
-
react_1.default.createElement(Paddings_1.PaddingTopBottom40, null,
|
|
130
|
-
react_1.default.createElement(ImageEditor, __assign({}, props, { id: 'insideModal', underEditImageData: underEditImageData, setUnderEditImageData: setUnderEditImageData, isInPopUp: true }))))))); };
|
|
127
|
+
var genModalStyleEditor = function () { return (react_1.default.createElement(Modal_1.Modal, { title: "Edit Image", fitToContentHeight: screenWidth >= (0, mixins_1.getBreakPoint)('sm') ? true : false, desktopWidth: "500px" },
|
|
128
|
+
react_1.default.createElement(Paddings_1.PaddingTop40, null,
|
|
129
|
+
react_1.default.createElement(ImageEditor, __assign({}, props, { id: 'insideModal', underEditImageData: underEditImageData, setUnderEditImageData: setUnderEditImageData, isInPopUp: true }))))); };
|
|
131
130
|
var genToolbarStyledEditor = function () { return (react_1.default.createElement(EditToolbar_1.EditToolbar, __assign({}, {
|
|
132
131
|
setUnderEditImageData: setUnderEditImageData,
|
|
133
132
|
underEditImageData: underEditImageData,
|
|
@@ -138,6 +137,7 @@ function ImageEditor(_a) {
|
|
|
138
137
|
publicUrl: publicUrl,
|
|
139
138
|
defaultImageSpread: defaultImageSpread,
|
|
140
139
|
omitEditorTools: omitEditorTools,
|
|
140
|
+
isInPopUp: isInPopUp
|
|
141
141
|
}))); };
|
|
142
142
|
return (react_1.default.createElement("div", { id: id && id + '_ImageEditor', style: {
|
|
143
143
|
position: "relative",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export function Modal({ title, onClose, children, linkTo, desktopWidth, headerStyle, subtitle, fitToContentHeight, invert, overflowVisible, showActionPanel, onCloseText, onConfirm, showCloseBtn, onConfirmText, showConfirmBtn, alignActions }: {
|
|
1
|
+
export function Modal({ title, onClose, children, linkTo, desktopWidth, headerStyle, subtitle, fitToContentHeight, invert, overflowVisible, showActionPanel, onCloseText, onConfirm, showCloseBtn, onConfirmText, showConfirmBtn, alignActions, disableHeader }: {
|
|
2
2
|
title: any;
|
|
3
3
|
onClose: any;
|
|
4
4
|
children: any;
|
|
@@ -16,4 +16,5 @@ export function Modal({ title, onClose, children, linkTo, desktopWidth, headerSt
|
|
|
16
16
|
onConfirmText?: string;
|
|
17
17
|
showConfirmBtn?: boolean;
|
|
18
18
|
alignActions?: string;
|
|
19
|
+
disableHeader?: boolean;
|
|
19
20
|
}): any;
|
|
@@ -48,12 +48,12 @@ var Divider_1 = require("../../Divider");
|
|
|
48
48
|
var Modal = function (_a) {
|
|
49
49
|
var title = _a.title, onClose = _a.onClose, children = _a.children, linkTo = _a.linkTo, _b = _a.desktopWidth, desktopWidth = _b === void 0 ? "80%" : _b, _c = _a.headerStyle, headerStyle = _c === void 0 ? "style1" : _c, subtitle = _a.subtitle, // used only in header style 2
|
|
50
50
|
_d = _a.fitToContentHeight, // used only in header style 2
|
|
51
|
-
fitToContentHeight = _d === void 0 ? false : _d, invert = _a.invert, overflowVisible = _a.overflowVisible, _e = _a.showActionPanel, showActionPanel = _e === void 0 ? false : _e, _f = _a.onCloseText, onCloseText = _f === void 0 ? "Close" : _f, onConfirm = _a.onConfirm, _g = _a.showCloseBtn, showCloseBtn = _g === void 0 ? true : _g, _h = _a.onConfirmText, onConfirmText = _h === void 0 ? "Confirm" : _h, _j = _a.showConfirmBtn, showConfirmBtn = _j === void 0 ? true : _j, _k = _a.alignActions, alignActions = _k === void 0 ? "right" : _k;
|
|
51
|
+
fitToContentHeight = _d === void 0 ? false : _d, invert = _a.invert, overflowVisible = _a.overflowVisible, _e = _a.showActionPanel, showActionPanel = _e === void 0 ? false : _e, _f = _a.onCloseText, onCloseText = _f === void 0 ? "Close" : _f, onConfirm = _a.onConfirm, _g = _a.showCloseBtn, showCloseBtn = _g === void 0 ? true : _g, _h = _a.onConfirmText, onConfirmText = _h === void 0 ? "Confirm" : _h, _j = _a.showConfirmBtn, showConfirmBtn = _j === void 0 ? true : _j, _k = _a.alignActions, alignActions = _k === void 0 ? "right" : _k, _l = _a.disableHeader, disableHeader = _l === void 0 ? false : _l;
|
|
52
52
|
var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
|
|
53
53
|
var handleClose = function () { return onClose(); };
|
|
54
54
|
var initAnimPos = { marginTop: "100vh", opacity: 0 };
|
|
55
55
|
var endAnimPos = { marginTop: 0, opacity: 1 };
|
|
56
|
-
var
|
|
56
|
+
var _m = (0, react_1.useState)(endAnimPos), animPos = _m[0], setAnimPos = _m[1];
|
|
57
57
|
(0, react_1.useEffect)(function () {
|
|
58
58
|
document.body.style.overflow = "hidden";
|
|
59
59
|
return function () { return (document.body.style.overflow = "unset"); };
|
|
@@ -76,7 +76,7 @@ var Modal = function (_a) {
|
|
|
76
76
|
? true
|
|
77
77
|
: ["style2"].indexOf(headerStyle) !== -1 && false;
|
|
78
78
|
var genModalContents = function () { return (react_1.default.createElement(styled_1.StyledModalLargeContentWrapper, { className: "StyledModalLargeContentWrapper", desktopWidth: desktopWidth, takeFullScreenOnScroll: takeFullScreenOnScroll, style: !fitToContentHeight ? { minHeight: 'calc(100vh - 4rem)' } : {} },
|
|
79
|
-
genHeader(),
|
|
79
|
+
!disableHeader && genHeader(),
|
|
80
80
|
react_1.default.createElement(styled_1.StyledModalBodyWrapper, { style: !fitToContentHeight ? { minHeight: 'calc(100vh - 8rem)' } : {}, overflowVisible: overflowVisible, takeFullScreenOnScroll: takeFullScreenOnScroll },
|
|
81
81
|
react_1.default.createElement(styled_1.StyledModalLargeBody, { takeFullScreenOnScroll: takeFullScreenOnScroll }, children),
|
|
82
82
|
showActionPanel &&
|