@useupup/react 3.3.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.
- package/LICENSE +21 -0
- package/README.md +72 -0
- package/dist/AudioUploader-2WITC5YR.js +298 -0
- package/dist/AudioUploader-2WITC5YR.js.map +1 -0
- package/dist/AudioUploader-HWP4U6UJ.cjs +298 -0
- package/dist/AudioUploader-HWP4U6UJ.cjs.map +1 -0
- package/dist/BoxUploader-NEGZOMR4.cjs +172 -0
- package/dist/BoxUploader-NEGZOMR4.cjs.map +1 -0
- package/dist/BoxUploader-VE5LRJ7M.js +172 -0
- package/dist/BoxUploader-VE5LRJ7M.js.map +1 -0
- package/dist/CameraUploader-BJ3AU3VS.cjs +200 -0
- package/dist/CameraUploader-BJ3AU3VS.cjs.map +1 -0
- package/dist/CameraUploader-WF5A6UIS.js +200 -0
- package/dist/CameraUploader-WF5A6UIS.js.map +1 -0
- package/dist/DropboxUploader-INTOYHJP.cjs +174 -0
- package/dist/DropboxUploader-INTOYHJP.cjs.map +1 -0
- package/dist/DropboxUploader-VMUYG3OP.js +174 -0
- package/dist/DropboxUploader-VMUYG3OP.js.map +1 -0
- package/dist/GoogleDriveUploader-CXZUZI6R.cjs +177 -0
- package/dist/GoogleDriveUploader-CXZUZI6R.cjs.map +1 -0
- package/dist/GoogleDriveUploader-YA56X3QR.js +177 -0
- package/dist/GoogleDriveUploader-YA56X3QR.js.map +1 -0
- package/dist/ImageEditorInline-GJ3HCPPZ.cjs +185 -0
- package/dist/ImageEditorInline-GJ3HCPPZ.cjs.map +1 -0
- package/dist/ImageEditorInline-N2NSAODR.js +185 -0
- package/dist/ImageEditorInline-N2NSAODR.js.map +1 -0
- package/dist/ImageEditorModal-CWKMDVPY.js +236 -0
- package/dist/ImageEditorModal-CWKMDVPY.js.map +1 -0
- package/dist/ImageEditorModal-XJKPBTVQ.cjs +236 -0
- package/dist/ImageEditorModal-XJKPBTVQ.cjs.map +1 -0
- package/dist/OneDriveUploader-4RPTY7KT.cjs +175 -0
- package/dist/OneDriveUploader-4RPTY7KT.cjs.map +1 -0
- package/dist/OneDriveUploader-I25Y6AJP.js +175 -0
- package/dist/OneDriveUploader-I25Y6AJP.js.map +1 -0
- package/dist/ScreenCaptureUploader-7K6QPD42.cjs +281 -0
- package/dist/ScreenCaptureUploader-7K6QPD42.cjs.map +1 -0
- package/dist/ScreenCaptureUploader-WKDO4S75.js +281 -0
- package/dist/ScreenCaptureUploader-WKDO4S75.js.map +1 -0
- package/dist/chunk-6TFTTLOD.js +852 -0
- package/dist/chunk-6TFTTLOD.js.map +1 -0
- package/dist/chunk-DZQBTC6T.cjs +39 -0
- package/dist/chunk-DZQBTC6T.cjs.map +1 -0
- package/dist/chunk-GNMEQB32.cjs +195 -0
- package/dist/chunk-GNMEQB32.cjs.map +1 -0
- package/dist/chunk-IG62MHVQ.cjs +276 -0
- package/dist/chunk-IG62MHVQ.cjs.map +1 -0
- package/dist/chunk-L3E5OMY7.cjs +852 -0
- package/dist/chunk-L3E5OMY7.cjs.map +1 -0
- package/dist/chunk-LCMDDPUD.js +276 -0
- package/dist/chunk-LCMDDPUD.js.map +1 -0
- package/dist/chunk-N4XGN66E.cjs +79 -0
- package/dist/chunk-N4XGN66E.cjs.map +1 -0
- package/dist/chunk-N7TWHP5Z.js +195 -0
- package/dist/chunk-N7TWHP5Z.js.map +1 -0
- package/dist/chunk-OXWVO7Z6.cjs +70 -0
- package/dist/chunk-OXWVO7Z6.cjs.map +1 -0
- package/dist/chunk-PLGHK2Y4.js +79 -0
- package/dist/chunk-PLGHK2Y4.js.map +1 -0
- package/dist/chunk-SSLP3MEC.js +39 -0
- package/dist/chunk-SSLP3MEC.js.map +1 -0
- package/dist/chunk-WYMKISZI.js +70 -0
- package/dist/chunk-WYMKISZI.js.map +1 -0
- package/dist/index.cjs +4219 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +240 -0
- package/dist/index.d.ts +240 -0
- package/dist/index.js +4219 -0
- package/dist/index.js.map +1 -0
- package/dist/styles.d.ts +4 -0
- package/dist/tailwind-prefixed.css +2529 -0
- package/package.json +110 -0
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
var _chunkGNMEQB32cjs = require('./chunk-GNMEQB32.cjs');
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
var _chunkIG62MHVQcjs = require('./chunk-IG62MHVQ.cjs');
|
|
9
|
+
|
|
10
|
+
// src/components/ImageEditorInline.tsx
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
var _react = require('react');
|
|
19
|
+
var _internal = require('@useupup/core/internal');
|
|
20
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
21
|
+
var ImageEditorInline_default = _react.memo.call(void 0, function ImageEditorInline(props) {
|
|
22
|
+
var _a, _b;
|
|
23
|
+
const { file, onClose, onSave } = props;
|
|
24
|
+
const { imageEditor: editorConfig } = _chunkIG62MHVQcjs.useUploaderOptions.call(void 0, );
|
|
25
|
+
const { isDark: dark } = _chunkIG62MHVQcjs.useUploaderTheme.call(void 0, );
|
|
26
|
+
const containerRef = _react.useRef.call(void 0, null);
|
|
27
|
+
const [EditorComponent, setEditorComponent] = _react.useState.call(void 0, null);
|
|
28
|
+
const [editorConstants, setEditorConstants] = _react.useState.call(void 0, null);
|
|
29
|
+
const [loadError, setLoadError] = _react.useState.call(void 0, null);
|
|
30
|
+
const [StyleSheetMgr, setStyleSheetMgr] = _react.useState.call(void 0, null);
|
|
31
|
+
_react.useEffect.call(void 0, () => {
|
|
32
|
+
if (typeof window === "undefined") return;
|
|
33
|
+
let cancelled = false;
|
|
34
|
+
void (async () => {
|
|
35
|
+
try {
|
|
36
|
+
const [mod, scMod] = await Promise.all([
|
|
37
|
+
Promise.resolve().then(() => _interopRequireWildcard(require("react-filerobot-image-editor"))),
|
|
38
|
+
Promise.resolve().then(() => _interopRequireWildcard(require("styled-components"))).catch(() => null)
|
|
39
|
+
]);
|
|
40
|
+
if (cancelled) return;
|
|
41
|
+
setEditorComponent(
|
|
42
|
+
() => mod.default
|
|
43
|
+
);
|
|
44
|
+
setEditorConstants({
|
|
45
|
+
TABS: mod.TABS,
|
|
46
|
+
TOOLS: mod.TOOLS
|
|
47
|
+
});
|
|
48
|
+
if (scMod == null ? void 0 : scMod.StyleSheetManager) {
|
|
49
|
+
setStyleSheetMgr(
|
|
50
|
+
() => scMod.StyleSheetManager
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
} catch (e2) {
|
|
54
|
+
if (cancelled) return;
|
|
55
|
+
setLoadError(
|
|
56
|
+
'Image editor failed to load. Make sure "react-filerobot-image-editor" is installed.'
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
})();
|
|
60
|
+
return () => {
|
|
61
|
+
cancelled = true;
|
|
62
|
+
};
|
|
63
|
+
}, []);
|
|
64
|
+
const handleKeyDown = _react.useCallback.call(void 0,
|
|
65
|
+
(e) => {
|
|
66
|
+
if (e.key === "Escape") {
|
|
67
|
+
e.stopPropagation();
|
|
68
|
+
onClose();
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
[onClose]
|
|
72
|
+
);
|
|
73
|
+
const handleEditorSave = _react.useCallback.call(void 0,
|
|
74
|
+
(imageData) => {
|
|
75
|
+
if (!imageData.imageBase64) return;
|
|
76
|
+
const dataURL = imageData.imageBase64.startsWith("data:") ? imageData.imageBase64 : `data:${imageData.mimeType || file.type};base64,${imageData.imageBase64}`;
|
|
77
|
+
onSave(dataURL, imageData.mimeType);
|
|
78
|
+
},
|
|
79
|
+
[file.type, onSave]
|
|
80
|
+
);
|
|
81
|
+
const shouldForwardProp = _react.useCallback.call(void 0,
|
|
82
|
+
(prop) => !FILEROBOT_CUSTOM_PROPS.has(prop),
|
|
83
|
+
[]
|
|
84
|
+
);
|
|
85
|
+
const resolvedTabs = (editorConstants == null ? void 0 : editorConstants.TABS) ? (_a = editorConfig.tabs) == null ? void 0 : _a.map(
|
|
86
|
+
(tab) => {
|
|
87
|
+
var _a2;
|
|
88
|
+
return (_a2 = editorConstants.TABS[tab.toUpperCase()]) != null ? _a2 : tab;
|
|
89
|
+
}
|
|
90
|
+
) : void 0;
|
|
91
|
+
const filerobotTheme = _react.useMemo.call(void 0, () => _chunkGNMEQB32cjs.getFilerobotTheme.call(void 0, dark), [dark]);
|
|
92
|
+
const editorCssOverrides = _react.useMemo.call(void 0,
|
|
93
|
+
() => _chunkGNMEQB32cjs.getImageEditorCssOverrides.call(void 0, dark),
|
|
94
|
+
[dark]
|
|
95
|
+
);
|
|
96
|
+
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
97
|
+
"div",
|
|
98
|
+
{
|
|
99
|
+
ref: containerRef,
|
|
100
|
+
role: "region",
|
|
101
|
+
"aria-label": `Editing image: ${file.name}`,
|
|
102
|
+
tabIndex: -1,
|
|
103
|
+
className: _internal.cn.call(void 0,
|
|
104
|
+
"upup-absolute upup-inset-0 upup-z-[9999] upup-flex upup-flex-col upup-overflow-hidden",
|
|
105
|
+
dark ? "upup-bg-[#232323]" : "upup-bg-white"
|
|
106
|
+
),
|
|
107
|
+
onKeyDown: handleKeyDown,
|
|
108
|
+
"data-upup-slot": "image-editor",
|
|
109
|
+
"data-upup-theme": dark ? "dark" : "light",
|
|
110
|
+
children: [
|
|
111
|
+
editorCssOverrides && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
112
|
+
"style",
|
|
113
|
+
{
|
|
114
|
+
dangerouslySetInnerHTML: { __html: editorCssOverrides }
|
|
115
|
+
}
|
|
116
|
+
),
|
|
117
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "upup-relative upup-flex-1 upup-overflow-hidden", children: [
|
|
118
|
+
loadError && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "upup-flex upup-h-full upup-items-center upup-justify-center upup-p-8", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
119
|
+
"p",
|
|
120
|
+
{
|
|
121
|
+
className: _internal.cn.call(void 0,
|
|
122
|
+
"upup-text-center upup-text-sm",
|
|
123
|
+
dark ? "upup-text-red-400" : "upup-text-red-600"
|
|
124
|
+
),
|
|
125
|
+
children: loadError
|
|
126
|
+
}
|
|
127
|
+
) }),
|
|
128
|
+
!EditorComponent && !loadError && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "upup-flex upup-h-full upup-items-center upup-justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
129
|
+
"div",
|
|
130
|
+
{
|
|
131
|
+
className: _internal.cn.call(void 0,
|
|
132
|
+
"upup-h-8 upup-w-8 upup-animate-spin upup-rounded-full upup-border-2 upup-border-t-transparent",
|
|
133
|
+
dark ? "upup-border-[#38bdf8]" : "upup-border-[#0ea5e9]"
|
|
134
|
+
)
|
|
135
|
+
}
|
|
136
|
+
) }),
|
|
137
|
+
EditorComponent && !loadError && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
138
|
+
EditorWrapper,
|
|
139
|
+
{
|
|
140
|
+
StyleSheetMgr,
|
|
141
|
+
shouldForwardProp,
|
|
142
|
+
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
143
|
+
EditorComponent,
|
|
144
|
+
{
|
|
145
|
+
source: (_b = file.url) != null ? _b : "",
|
|
146
|
+
onSave: handleEditorSave,
|
|
147
|
+
onClose,
|
|
148
|
+
savingPixelRatio: 4,
|
|
149
|
+
previewPixelRatio: 4,
|
|
150
|
+
theme: filerobotTheme,
|
|
151
|
+
defaultTabId: (editorConstants == null ? void 0 : editorConstants.TABS) ? editorConstants.TABS.ADJUST : void 0,
|
|
152
|
+
...resolvedTabs !== void 0 ? { tabsIds: resolvedTabs } : {},
|
|
153
|
+
onBeforeSave: () => false
|
|
154
|
+
}
|
|
155
|
+
)
|
|
156
|
+
}
|
|
157
|
+
)
|
|
158
|
+
] })
|
|
159
|
+
]
|
|
160
|
+
}
|
|
161
|
+
);
|
|
162
|
+
});
|
|
163
|
+
var FILEROBOT_CUSTOM_PROPS = /* @__PURE__ */ new Set([
|
|
164
|
+
"active",
|
|
165
|
+
"noMargin",
|
|
166
|
+
"showBackButton",
|
|
167
|
+
"isPhoneScreen",
|
|
168
|
+
"showTabsDrawer",
|
|
169
|
+
"hasChildren",
|
|
170
|
+
"isAccordion"
|
|
171
|
+
]);
|
|
172
|
+
function EditorWrapper({
|
|
173
|
+
children,
|
|
174
|
+
StyleSheetMgr,
|
|
175
|
+
shouldForwardProp
|
|
176
|
+
}) {
|
|
177
|
+
if (StyleSheetMgr) {
|
|
178
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyleSheetMgr, { shouldForwardProp, children });
|
|
179
|
+
}
|
|
180
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children });
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
exports.default = ImageEditorInline_default;
|
|
185
|
+
//# sourceMappingURL=ImageEditorInline-GJ3HCPPZ.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["c:\\Users\\amind\\OneDrive\\Desktop\\Projects\\INTERNAL\\upup\\packages\\react\\dist\\ImageEditorInline-GJ3HCPPZ.cjs"],"names":[],"mappings":"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CA,EAAA;AACA,IAAA;AACA,IAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,QAAA;AACA,QAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,QAAA;AACA,UAAA;AACA,UAAA;AACA,YAAA;AACA,UAAA;AACA,QAAA;AACA,wBAAA;AACA,UAAA;AACA,YAAA;AACA,YAAA;AACA,cAAA;AACA,gBAAA;AACA,gBAAA;AACA,cAAA;AACA,cAAA;AACA,YAAA;AACA,UAAA;AACA,UAAA;AACA,YAAA;AACA,YAAA;AACA,cAAA;AACA,gBAAA;AACA,gBAAA;AACA,cAAA;AACA,YAAA;AACA,UAAA;AACA,UAAA;AACA,YAAA;AACA,YAAA;AACA,cAAA;AACA,cAAA;AACA,cAAA;AACA,gBAAA;AACA,gBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,gBAAA;AACA,cAAA;AACA,YAAA;AACA,UAAA;AACA,QAAA;AACA,MAAA;AACA,IAAA;AACA,EAAA;AACA;AACA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA;AACA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA;AACA,EAAA;AACA,IAAA;AACA,EAAA;AACA,EAAA;AACA;AACA;AACA;AACA","file":"C:\\Users\\amind\\OneDrive\\Desktop\\Projects\\INTERNAL\\upup\\packages\\react\\dist\\ImageEditorInline-GJ3HCPPZ.cjs","sourcesContent":[null]}
|
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
import {
|
|
2
|
+
getFilerobotTheme,
|
|
3
|
+
getImageEditorCssOverrides
|
|
4
|
+
} from "./chunk-N7TWHP5Z.js";
|
|
5
|
+
import {
|
|
6
|
+
useUploaderOptions,
|
|
7
|
+
useUploaderTheme
|
|
8
|
+
} from "./chunk-LCMDDPUD.js";
|
|
9
|
+
|
|
10
|
+
// src/components/ImageEditorInline.tsx
|
|
11
|
+
import {
|
|
12
|
+
memo,
|
|
13
|
+
useCallback,
|
|
14
|
+
useEffect,
|
|
15
|
+
useMemo,
|
|
16
|
+
useRef,
|
|
17
|
+
useState
|
|
18
|
+
} from "react";
|
|
19
|
+
import { cn } from "@useupup/core/internal";
|
|
20
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
21
|
+
var ImageEditorInline_default = memo(function ImageEditorInline(props) {
|
|
22
|
+
var _a, _b;
|
|
23
|
+
const { file, onClose, onSave } = props;
|
|
24
|
+
const { imageEditor: editorConfig } = useUploaderOptions();
|
|
25
|
+
const { isDark: dark } = useUploaderTheme();
|
|
26
|
+
const containerRef = useRef(null);
|
|
27
|
+
const [EditorComponent, setEditorComponent] = useState(null);
|
|
28
|
+
const [editorConstants, setEditorConstants] = useState(null);
|
|
29
|
+
const [loadError, setLoadError] = useState(null);
|
|
30
|
+
const [StyleSheetMgr, setStyleSheetMgr] = useState(null);
|
|
31
|
+
useEffect(() => {
|
|
32
|
+
if (typeof window === "undefined") return;
|
|
33
|
+
let cancelled = false;
|
|
34
|
+
void (async () => {
|
|
35
|
+
try {
|
|
36
|
+
const [mod, scMod] = await Promise.all([
|
|
37
|
+
import("react-filerobot-image-editor"),
|
|
38
|
+
import("styled-components").catch(() => null)
|
|
39
|
+
]);
|
|
40
|
+
if (cancelled) return;
|
|
41
|
+
setEditorComponent(
|
|
42
|
+
() => mod.default
|
|
43
|
+
);
|
|
44
|
+
setEditorConstants({
|
|
45
|
+
TABS: mod.TABS,
|
|
46
|
+
TOOLS: mod.TOOLS
|
|
47
|
+
});
|
|
48
|
+
if (scMod == null ? void 0 : scMod.StyleSheetManager) {
|
|
49
|
+
setStyleSheetMgr(
|
|
50
|
+
() => scMod.StyleSheetManager
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
} catch {
|
|
54
|
+
if (cancelled) return;
|
|
55
|
+
setLoadError(
|
|
56
|
+
'Image editor failed to load. Make sure "react-filerobot-image-editor" is installed.'
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
})();
|
|
60
|
+
return () => {
|
|
61
|
+
cancelled = true;
|
|
62
|
+
};
|
|
63
|
+
}, []);
|
|
64
|
+
const handleKeyDown = useCallback(
|
|
65
|
+
(e) => {
|
|
66
|
+
if (e.key === "Escape") {
|
|
67
|
+
e.stopPropagation();
|
|
68
|
+
onClose();
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
[onClose]
|
|
72
|
+
);
|
|
73
|
+
const handleEditorSave = useCallback(
|
|
74
|
+
(imageData) => {
|
|
75
|
+
if (!imageData.imageBase64) return;
|
|
76
|
+
const dataURL = imageData.imageBase64.startsWith("data:") ? imageData.imageBase64 : `data:${imageData.mimeType || file.type};base64,${imageData.imageBase64}`;
|
|
77
|
+
onSave(dataURL, imageData.mimeType);
|
|
78
|
+
},
|
|
79
|
+
[file.type, onSave]
|
|
80
|
+
);
|
|
81
|
+
const shouldForwardProp = useCallback(
|
|
82
|
+
(prop) => !FILEROBOT_CUSTOM_PROPS.has(prop),
|
|
83
|
+
[]
|
|
84
|
+
);
|
|
85
|
+
const resolvedTabs = (editorConstants == null ? void 0 : editorConstants.TABS) ? (_a = editorConfig.tabs) == null ? void 0 : _a.map(
|
|
86
|
+
(tab) => {
|
|
87
|
+
var _a2;
|
|
88
|
+
return (_a2 = editorConstants.TABS[tab.toUpperCase()]) != null ? _a2 : tab;
|
|
89
|
+
}
|
|
90
|
+
) : void 0;
|
|
91
|
+
const filerobotTheme = useMemo(() => getFilerobotTheme(dark), [dark]);
|
|
92
|
+
const editorCssOverrides = useMemo(
|
|
93
|
+
() => getImageEditorCssOverrides(dark),
|
|
94
|
+
[dark]
|
|
95
|
+
);
|
|
96
|
+
return /* @__PURE__ */ jsxs(
|
|
97
|
+
"div",
|
|
98
|
+
{
|
|
99
|
+
ref: containerRef,
|
|
100
|
+
role: "region",
|
|
101
|
+
"aria-label": `Editing image: ${file.name}`,
|
|
102
|
+
tabIndex: -1,
|
|
103
|
+
className: cn(
|
|
104
|
+
"upup-absolute upup-inset-0 upup-z-[9999] upup-flex upup-flex-col upup-overflow-hidden",
|
|
105
|
+
dark ? "upup-bg-[#232323]" : "upup-bg-white"
|
|
106
|
+
),
|
|
107
|
+
onKeyDown: handleKeyDown,
|
|
108
|
+
"data-upup-slot": "image-editor",
|
|
109
|
+
"data-upup-theme": dark ? "dark" : "light",
|
|
110
|
+
children: [
|
|
111
|
+
editorCssOverrides && /* @__PURE__ */ jsx(
|
|
112
|
+
"style",
|
|
113
|
+
{
|
|
114
|
+
dangerouslySetInnerHTML: { __html: editorCssOverrides }
|
|
115
|
+
}
|
|
116
|
+
),
|
|
117
|
+
/* @__PURE__ */ jsxs("div", { className: "upup-relative upup-flex-1 upup-overflow-hidden", children: [
|
|
118
|
+
loadError && /* @__PURE__ */ jsx("div", { className: "upup-flex upup-h-full upup-items-center upup-justify-center upup-p-8", children: /* @__PURE__ */ jsx(
|
|
119
|
+
"p",
|
|
120
|
+
{
|
|
121
|
+
className: cn(
|
|
122
|
+
"upup-text-center upup-text-sm",
|
|
123
|
+
dark ? "upup-text-red-400" : "upup-text-red-600"
|
|
124
|
+
),
|
|
125
|
+
children: loadError
|
|
126
|
+
}
|
|
127
|
+
) }),
|
|
128
|
+
!EditorComponent && !loadError && /* @__PURE__ */ jsx("div", { className: "upup-flex upup-h-full upup-items-center upup-justify-center", children: /* @__PURE__ */ jsx(
|
|
129
|
+
"div",
|
|
130
|
+
{
|
|
131
|
+
className: cn(
|
|
132
|
+
"upup-h-8 upup-w-8 upup-animate-spin upup-rounded-full upup-border-2 upup-border-t-transparent",
|
|
133
|
+
dark ? "upup-border-[#38bdf8]" : "upup-border-[#0ea5e9]"
|
|
134
|
+
)
|
|
135
|
+
}
|
|
136
|
+
) }),
|
|
137
|
+
EditorComponent && !loadError && /* @__PURE__ */ jsx(
|
|
138
|
+
EditorWrapper,
|
|
139
|
+
{
|
|
140
|
+
StyleSheetMgr,
|
|
141
|
+
shouldForwardProp,
|
|
142
|
+
children: /* @__PURE__ */ jsx(
|
|
143
|
+
EditorComponent,
|
|
144
|
+
{
|
|
145
|
+
source: (_b = file.url) != null ? _b : "",
|
|
146
|
+
onSave: handleEditorSave,
|
|
147
|
+
onClose,
|
|
148
|
+
savingPixelRatio: 4,
|
|
149
|
+
previewPixelRatio: 4,
|
|
150
|
+
theme: filerobotTheme,
|
|
151
|
+
defaultTabId: (editorConstants == null ? void 0 : editorConstants.TABS) ? editorConstants.TABS.ADJUST : void 0,
|
|
152
|
+
...resolvedTabs !== void 0 ? { tabsIds: resolvedTabs } : {},
|
|
153
|
+
onBeforeSave: () => false
|
|
154
|
+
}
|
|
155
|
+
)
|
|
156
|
+
}
|
|
157
|
+
)
|
|
158
|
+
] })
|
|
159
|
+
]
|
|
160
|
+
}
|
|
161
|
+
);
|
|
162
|
+
});
|
|
163
|
+
var FILEROBOT_CUSTOM_PROPS = /* @__PURE__ */ new Set([
|
|
164
|
+
"active",
|
|
165
|
+
"noMargin",
|
|
166
|
+
"showBackButton",
|
|
167
|
+
"isPhoneScreen",
|
|
168
|
+
"showTabsDrawer",
|
|
169
|
+
"hasChildren",
|
|
170
|
+
"isAccordion"
|
|
171
|
+
]);
|
|
172
|
+
function EditorWrapper({
|
|
173
|
+
children,
|
|
174
|
+
StyleSheetMgr,
|
|
175
|
+
shouldForwardProp
|
|
176
|
+
}) {
|
|
177
|
+
if (StyleSheetMgr) {
|
|
178
|
+
return /* @__PURE__ */ jsx(StyleSheetMgr, { shouldForwardProp, children });
|
|
179
|
+
}
|
|
180
|
+
return /* @__PURE__ */ jsx(Fragment, { children });
|
|
181
|
+
}
|
|
182
|
+
export {
|
|
183
|
+
ImageEditorInline_default as default
|
|
184
|
+
};
|
|
185
|
+
//# sourceMappingURL=ImageEditorInline-N2NSAODR.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/ImageEditorInline.tsx"],"sourcesContent":["import React, {\r\n ComponentType,\r\n memo,\r\n useCallback,\r\n useEffect,\r\n useMemo,\r\n useRef,\r\n useState,\r\n} from 'react'\r\nimport { cn } from '@useupup/core/internal'\r\nimport type { UploadFile } from '@useupup/core'\r\nimport {\r\n useUploaderOptions,\r\n useUploaderTheme,\r\n} from '../context/UploaderContext'\r\nimport {\r\n getFilerobotTheme,\r\n getImageEditorCssOverrides,\r\n} from '../lib/imageEditorHelpers'\r\n\r\ntype Props = {\r\n file: UploadFile\r\n onClose: () => void\r\n onSave: (editedImageData: string, mimeType?: string) => void\r\n}\r\n\r\n/**\r\n * Filerobot's onBeforeSave / onSave callback signature.\r\n */\r\ntype FilerobotImageState = {\r\n imageBase64?: string\r\n fullName?: string\r\n mimeType?: string\r\n width?: number\r\n height?: number\r\n}\r\n\r\ntype FilerobotDesignState = Record<string, unknown>\r\n\r\ntype FilerobotEditorProps = {\r\n source: string\r\n savingPixelRatio?: number\r\n previewPixelRatio?: number\r\n onSave?: (\r\n imageData: FilerobotImageState,\r\n designState: FilerobotDesignState,\r\n ) => void\r\n onClose?: () => void\r\n onBeforeSave?: (imageData: FilerobotImageState) => boolean | undefined\r\n annotationsCommon?: Record<string, unknown>\r\n Rotate?: Record<string, unknown>\r\n Crop?: Record<string, unknown>\r\n tabsIds?: unknown[]\r\n defaultTabId?: unknown\r\n defaultToolId?: unknown\r\n [key: string]: unknown\r\n}\r\n\r\n/**\r\n * Inline image editor that overlays on top of the uploader container,\r\n * giving an \"edit in place\" experience similar to Uppy.\r\n *\r\n * Unlike ImageEditorModal, this does NOT use a portal or fixed positioning.\r\n * It renders as an absolutely positioned overlay inside the uploader's\r\n * <section>, covering the file list and other UI underneath.\r\n */\r\nexport default memo(function ImageEditorInline(props: Props) {\r\n const { file, onClose, onSave } = props\r\n const { imageEditor: editorConfig } = useUploaderOptions()\r\n const { isDark: dark } = useUploaderTheme()\r\n\r\n const containerRef = useRef<HTMLDivElement>(null)\r\n\r\n // Lazy-loaded editor component + TABS/TOOLS constants\r\n const [EditorComponent, setEditorComponent] =\r\n useState<ComponentType<FilerobotEditorProps> | null>(null)\r\n const [editorConstants, setEditorConstants] = useState<{\r\n TABS: Record<string, unknown>\r\n TOOLS: Record<string, unknown>\r\n } | null>(null)\r\n const [loadError, setLoadError] = useState<string | null>(null)\r\n\r\n // StyleSheetManager from styled-components to filter custom props\r\n const [StyleSheetMgr, setStyleSheetMgr] = useState<ComponentType<{\r\n shouldForwardProp?: (prop: string) => boolean\r\n children: React.ReactNode\r\n }> | null>(null)\r\n\r\n // Dynamically import react-filerobot-image-editor (browser only)\r\n useEffect(() => {\r\n if (typeof window === 'undefined') return\r\n\r\n let cancelled = false\r\n void (async () => {\r\n try {\r\n const [mod, scMod] = await Promise.all([\r\n import('react-filerobot-image-editor'),\r\n import('styled-components').catch(() => null),\r\n ])\r\n if (cancelled) return\r\n setEditorComponent(\r\n () => mod.default as ComponentType<FilerobotEditorProps>,\r\n )\r\n setEditorConstants({\r\n TABS: (mod as Record<string, unknown>).TABS as Record<\r\n string,\r\n unknown\r\n >,\r\n TOOLS: (mod as Record<string, unknown>).TOOLS as Record<\r\n string,\r\n unknown\r\n >,\r\n })\r\n if (scMod?.StyleSheetManager) {\r\n setStyleSheetMgr(\r\n () =>\r\n scMod.StyleSheetManager as ComponentType<{\r\n shouldForwardProp?: (prop: string) => boolean\r\n children: React.ReactNode\r\n }>,\r\n )\r\n }\r\n } catch {\r\n // upup-catch: dynamic import failure (editor dep not installed) is surfaced to the user via setLoadError\r\n if (cancelled) return\r\n setLoadError(\r\n 'Image editor failed to load. Make sure \"react-filerobot-image-editor\" is installed.',\r\n )\r\n }\r\n })()\r\n\r\n return () => {\r\n cancelled = true\r\n }\r\n }, [])\r\n\r\n // Close on ESC\r\n const handleKeyDown = useCallback(\r\n (e: React.KeyboardEvent) => {\r\n if (e.key === 'Escape') {\r\n e.stopPropagation()\r\n onClose()\r\n }\r\n },\r\n [onClose],\r\n )\r\n\r\n // Filerobot onSave handler\r\n const handleEditorSave = useCallback(\r\n (imageData: FilerobotImageState) => {\r\n if (!imageData.imageBase64) return\r\n const dataURL = imageData.imageBase64.startsWith('data:')\r\n ? imageData.imageBase64\r\n : `data:${imageData.mimeType || file.type};base64,${\r\n imageData.imageBase64\r\n }`\r\n onSave(dataURL, imageData.mimeType)\r\n },\r\n [file.type, onSave],\r\n )\r\n\r\n // Filter styled-components custom props to avoid React 19 warnings\r\n const shouldForwardProp = useCallback(\r\n (prop: string) => !FILEROBOT_CUSTOM_PROPS.has(prop),\r\n [],\r\n )\r\n\r\n // Build Filerobot tabs from config\r\n const resolvedTabs = editorConstants?.TABS\r\n ? editorConfig.tabs?.map(\r\n tab => editorConstants.TABS[tab.toUpperCase()] ?? tab,\r\n )\r\n : undefined\r\n\r\n const filerobotTheme = useMemo(() => getFilerobotTheme(dark), [dark])\r\n const editorCssOverrides = useMemo(\r\n () => getImageEditorCssOverrides(dark),\r\n [dark],\r\n )\r\n\r\n return (\r\n <div\r\n ref={containerRef}\r\n role=\"region\"\r\n aria-label={`Editing image: ${file.name}`}\r\n tabIndex={-1}\r\n className={cn(\r\n 'upup-absolute upup-inset-0 upup-z-[9999] upup-flex upup-flex-col upup-overflow-hidden',\r\n dark ? 'upup-bg-[#232323]' : 'upup-bg-white',\r\n )}\r\n onKeyDown={handleKeyDown}\r\n data-upup-slot=\"image-editor\"\r\n data-upup-theme={dark ? 'dark' : 'light'}\r\n >\r\n {/* Theme fallback overrides for hardcoded library values */}\r\n {editorCssOverrides && (\r\n <style\r\n dangerouslySetInnerHTML={{ __html: editorCssOverrides }}\r\n />\r\n )}\r\n\r\n {/* Filerobot provides its own top bar with save / close */}\r\n <div className=\"upup-relative upup-flex-1 upup-overflow-hidden\">\r\n {loadError && (\r\n <div className=\"upup-flex upup-h-full upup-items-center upup-justify-center upup-p-8\">\r\n <p\r\n className={cn(\r\n 'upup-text-center upup-text-sm',\r\n dark\r\n ? 'upup-text-red-400'\r\n : 'upup-text-red-600',\r\n )}\r\n >\r\n {loadError}\r\n </p>\r\n </div>\r\n )}\r\n\r\n {!EditorComponent && !loadError && (\r\n <div className=\"upup-flex upup-h-full upup-items-center upup-justify-center\">\r\n <div\r\n className={cn(\r\n 'upup-h-8 upup-w-8 upup-animate-spin upup-rounded-full upup-border-2 upup-border-t-transparent',\r\n dark\r\n ? 'upup-border-[#38bdf8]'\r\n : 'upup-border-[#0ea5e9]',\r\n )}\r\n />\r\n </div>\r\n )}\r\n\r\n {EditorComponent && !loadError && (\r\n <EditorWrapper\r\n StyleSheetMgr={StyleSheetMgr}\r\n shouldForwardProp={shouldForwardProp}\r\n >\r\n <EditorComponent\r\n source={file.url ?? ''}\r\n onSave={handleEditorSave}\r\n onClose={onClose}\r\n savingPixelRatio={4}\r\n previewPixelRatio={4}\r\n theme={filerobotTheme}\r\n defaultTabId={\r\n editorConstants?.TABS\r\n ? editorConstants.TABS.ADJUST\r\n : undefined\r\n }\r\n {...(resolvedTabs !== undefined\r\n ? { tabsIds: resolvedTabs }\r\n : {})}\r\n onBeforeSave={() => false}\r\n />\r\n </EditorWrapper>\r\n )}\r\n </div>\r\n </div>\r\n )\r\n})\r\n\r\n/**\r\n * Custom props that filerobot-image-editor's styled-components leak to the DOM.\r\n */\r\nconst FILEROBOT_CUSTOM_PROPS = new Set([\r\n 'active',\r\n 'noMargin',\r\n 'showBackButton',\r\n 'isPhoneScreen',\r\n 'showTabsDrawer',\r\n 'hasChildren',\r\n 'isAccordion',\r\n])\r\n\r\n/**\r\n * Wraps children with styled-components' StyleSheetManager (when available)\r\n * to prevent custom props from leaking to the DOM in React 19+.\r\n */\r\nfunction EditorWrapper({\r\n children,\r\n StyleSheetMgr,\r\n shouldForwardProp,\r\n}: {\r\n children: React.ReactNode\r\n StyleSheetMgr: ComponentType<{\r\n shouldForwardProp?: (prop: string) => boolean\r\n children: React.ReactNode\r\n }> | null\r\n shouldForwardProp: (prop: string) => boolean\r\n}) {\r\n if (StyleSheetMgr) {\r\n return (\r\n <StyleSheetMgr shouldForwardProp={shouldForwardProp}>\r\n {children}\r\n </StyleSheetMgr>\r\n )\r\n }\r\n return <>{children}</>\r\n}\r\n"],"mappings":"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","names":["_a"]}
|
|
@@ -0,0 +1,236 @@
|
|
|
1
|
+
import {
|
|
2
|
+
getFilerobotTheme,
|
|
3
|
+
getImageEditorCssOverrides
|
|
4
|
+
} from "./chunk-N7TWHP5Z.js";
|
|
5
|
+
import {
|
|
6
|
+
useUploaderOptions,
|
|
7
|
+
useUploaderTheme
|
|
8
|
+
} from "./chunk-LCMDDPUD.js";
|
|
9
|
+
|
|
10
|
+
// src/components/ImageEditorModal.tsx
|
|
11
|
+
import {
|
|
12
|
+
memo,
|
|
13
|
+
useCallback,
|
|
14
|
+
useEffect,
|
|
15
|
+
useMemo,
|
|
16
|
+
useRef,
|
|
17
|
+
useState
|
|
18
|
+
} from "react";
|
|
19
|
+
import { createPortal } from "react-dom";
|
|
20
|
+
import { cn } from "@useupup/core/internal";
|
|
21
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
22
|
+
var ImageEditorModal_default = memo(function ImageEditorModal(props) {
|
|
23
|
+
var _a, _b;
|
|
24
|
+
const { file, onClose, onSave } = props;
|
|
25
|
+
const { imageEditor: editorConfig } = useUploaderOptions();
|
|
26
|
+
const { isDark: dark } = useUploaderTheme();
|
|
27
|
+
const overlayRef = useRef(null);
|
|
28
|
+
const previousFocusRef = useRef(null);
|
|
29
|
+
const [EditorComponent, setEditorComponent] = useState(null);
|
|
30
|
+
const [editorConstants, setEditorConstants] = useState(null);
|
|
31
|
+
const [loadError, setLoadError] = useState(null);
|
|
32
|
+
const [StyleSheetMgr, setStyleSheetMgr] = useState(null);
|
|
33
|
+
useEffect(() => {
|
|
34
|
+
if (typeof window === "undefined") return;
|
|
35
|
+
let cancelled = false;
|
|
36
|
+
void (async () => {
|
|
37
|
+
try {
|
|
38
|
+
const [mod, scMod] = await Promise.all([
|
|
39
|
+
import("react-filerobot-image-editor"),
|
|
40
|
+
import("styled-components").catch(() => null)
|
|
41
|
+
]);
|
|
42
|
+
if (cancelled) return;
|
|
43
|
+
setEditorComponent(
|
|
44
|
+
() => mod.default
|
|
45
|
+
);
|
|
46
|
+
setEditorConstants({
|
|
47
|
+
TABS: mod.TABS,
|
|
48
|
+
TOOLS: mod.TOOLS
|
|
49
|
+
});
|
|
50
|
+
if (scMod == null ? void 0 : scMod.StyleSheetManager) {
|
|
51
|
+
setStyleSheetMgr(
|
|
52
|
+
() => scMod.StyleSheetManager
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
} catch {
|
|
56
|
+
if (cancelled) return;
|
|
57
|
+
setLoadError(
|
|
58
|
+
'Image editor failed to load. Make sure "react-filerobot-image-editor" is installed.'
|
|
59
|
+
);
|
|
60
|
+
}
|
|
61
|
+
})();
|
|
62
|
+
return () => {
|
|
63
|
+
cancelled = true;
|
|
64
|
+
};
|
|
65
|
+
}, []);
|
|
66
|
+
useEffect(() => {
|
|
67
|
+
previousFocusRef.current = document.activeElement;
|
|
68
|
+
return () => {
|
|
69
|
+
if (previousFocusRef.current instanceof HTMLElement) {
|
|
70
|
+
previousFocusRef.current.focus();
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
}, []);
|
|
74
|
+
useEffect(() => {
|
|
75
|
+
var _a2;
|
|
76
|
+
(_a2 = overlayRef.current) == null ? void 0 : _a2.focus();
|
|
77
|
+
}, []);
|
|
78
|
+
const handleKeyDown = useCallback(
|
|
79
|
+
(e) => {
|
|
80
|
+
var _a2;
|
|
81
|
+
if (e.key === "Escape") {
|
|
82
|
+
e.stopPropagation();
|
|
83
|
+
onClose();
|
|
84
|
+
}
|
|
85
|
+
if (e.key === "Tab") {
|
|
86
|
+
const focusable = (_a2 = overlayRef.current) == null ? void 0 : _a2.querySelectorAll(
|
|
87
|
+
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
|
|
88
|
+
);
|
|
89
|
+
if (!focusable || focusable.length === 0) return;
|
|
90
|
+
const first = focusable[0];
|
|
91
|
+
const last = focusable[focusable.length - 1];
|
|
92
|
+
if (!first || !last) return;
|
|
93
|
+
if (e.shiftKey) {
|
|
94
|
+
if (document.activeElement === first) {
|
|
95
|
+
e.preventDefault();
|
|
96
|
+
last.focus();
|
|
97
|
+
}
|
|
98
|
+
} else {
|
|
99
|
+
if (document.activeElement === last) {
|
|
100
|
+
e.preventDefault();
|
|
101
|
+
first.focus();
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
[onClose]
|
|
107
|
+
);
|
|
108
|
+
const handleContentClick = useCallback((e) => {
|
|
109
|
+
e.stopPropagation();
|
|
110
|
+
}, []);
|
|
111
|
+
const handleEditorSave = useCallback(
|
|
112
|
+
(imageData) => {
|
|
113
|
+
if (!imageData.imageBase64) return;
|
|
114
|
+
const dataURL = imageData.imageBase64.startsWith("data:") ? imageData.imageBase64 : `data:${imageData.mimeType || file.type};base64,${imageData.imageBase64}`;
|
|
115
|
+
onSave(dataURL, imageData.mimeType);
|
|
116
|
+
},
|
|
117
|
+
[file.type, onSave]
|
|
118
|
+
);
|
|
119
|
+
const shouldForwardProp = useCallback(
|
|
120
|
+
(prop) => !FILEROBOT_CUSTOM_PROPS.has(prop),
|
|
121
|
+
[]
|
|
122
|
+
);
|
|
123
|
+
const resolvedTabs = (editorConstants == null ? void 0 : editorConstants.TABS) ? (_a = editorConfig.tabs) == null ? void 0 : _a.map(
|
|
124
|
+
(tab) => {
|
|
125
|
+
var _a2;
|
|
126
|
+
return (_a2 = editorConstants.TABS[tab.toUpperCase()]) != null ? _a2 : tab;
|
|
127
|
+
}
|
|
128
|
+
) : void 0;
|
|
129
|
+
const filerobotTheme = useMemo(() => getFilerobotTheme(dark), [dark]);
|
|
130
|
+
const editorCssOverrides = useMemo(
|
|
131
|
+
() => getImageEditorCssOverrides(dark),
|
|
132
|
+
[dark]
|
|
133
|
+
);
|
|
134
|
+
return createPortal(
|
|
135
|
+
/* @__PURE__ */ jsx("div", { className: "upup-scope", "data-upup-slot": "image-editor", children: /* @__PURE__ */ jsx(
|
|
136
|
+
"div",
|
|
137
|
+
{
|
|
138
|
+
ref: overlayRef,
|
|
139
|
+
role: "dialog",
|
|
140
|
+
"aria-modal": "true",
|
|
141
|
+
"aria-label": `Edit image: ${file.name}`,
|
|
142
|
+
tabIndex: -1,
|
|
143
|
+
className: "upup-fixed upup-inset-0 upup-z-[2147483647] upup-flex upup-items-center upup-justify-center upup-bg-black/60 upup-outline-none",
|
|
144
|
+
onClick: onClose,
|
|
145
|
+
onKeyDown: handleKeyDown,
|
|
146
|
+
children: /* @__PURE__ */ jsxs(
|
|
147
|
+
"div",
|
|
148
|
+
{
|
|
149
|
+
className: cn(
|
|
150
|
+
"upup-relative upup-flex upup-h-[90vh] upup-w-[90vw] upup-max-w-5xl upup-flex-col upup-overflow-hidden upup-rounded-xl upup-shadow-2xl upup-ring-1",
|
|
151
|
+
dark ? "upup-bg-[#232323] upup-ring-white/[0.08]" : "upup-bg-white upup-ring-black/10"
|
|
152
|
+
),
|
|
153
|
+
"data-upup-theme": dark ? "dark" : "light",
|
|
154
|
+
onClick: handleContentClick,
|
|
155
|
+
children: [
|
|
156
|
+
editorCssOverrides && /* @__PURE__ */ jsx(
|
|
157
|
+
"style",
|
|
158
|
+
{
|
|
159
|
+
dangerouslySetInnerHTML: {
|
|
160
|
+
__html: editorCssOverrides
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
),
|
|
164
|
+
/* @__PURE__ */ jsxs("div", { className: "upup-relative upup-flex-1 upup-overflow-hidden", children: [
|
|
165
|
+
loadError && /* @__PURE__ */ jsx("div", { className: "upup-flex upup-h-full upup-items-center upup-justify-center upup-p-8", children: /* @__PURE__ */ jsx(
|
|
166
|
+
"p",
|
|
167
|
+
{
|
|
168
|
+
className: cn(
|
|
169
|
+
"upup-text-center upup-text-sm",
|
|
170
|
+
dark ? "upup-text-red-400" : "upup-text-red-600"
|
|
171
|
+
),
|
|
172
|
+
children: loadError
|
|
173
|
+
}
|
|
174
|
+
) }),
|
|
175
|
+
!EditorComponent && !loadError && /* @__PURE__ */ jsx("div", { className: "upup-flex upup-h-full upup-items-center upup-justify-center", children: /* @__PURE__ */ jsx(
|
|
176
|
+
"div",
|
|
177
|
+
{
|
|
178
|
+
className: cn(
|
|
179
|
+
"upup-h-8 upup-w-8 upup-animate-spin upup-rounded-full upup-border-2 upup-border-t-transparent",
|
|
180
|
+
dark ? "upup-border-[#38bdf8]" : "upup-border-[#0ea5e9]"
|
|
181
|
+
)
|
|
182
|
+
}
|
|
183
|
+
) }),
|
|
184
|
+
EditorComponent && !loadError && /* @__PURE__ */ jsx(
|
|
185
|
+
EditorWrapper,
|
|
186
|
+
{
|
|
187
|
+
StyleSheetMgr,
|
|
188
|
+
shouldForwardProp,
|
|
189
|
+
children: /* @__PURE__ */ jsx(
|
|
190
|
+
EditorComponent,
|
|
191
|
+
{
|
|
192
|
+
source: (_b = file.url) != null ? _b : "",
|
|
193
|
+
onSave: handleEditorSave,
|
|
194
|
+
onClose,
|
|
195
|
+
savingPixelRatio: 4,
|
|
196
|
+
previewPixelRatio: 4,
|
|
197
|
+
theme: filerobotTheme,
|
|
198
|
+
defaultTabId: (editorConstants == null ? void 0 : editorConstants.TABS) ? editorConstants.TABS.ADJUST : void 0,
|
|
199
|
+
...resolvedTabs !== void 0 ? { tabsIds: resolvedTabs } : {},
|
|
200
|
+
onBeforeSave: () => false
|
|
201
|
+
}
|
|
202
|
+
)
|
|
203
|
+
}
|
|
204
|
+
)
|
|
205
|
+
] })
|
|
206
|
+
]
|
|
207
|
+
}
|
|
208
|
+
)
|
|
209
|
+
}
|
|
210
|
+
) }),
|
|
211
|
+
document.body
|
|
212
|
+
);
|
|
213
|
+
});
|
|
214
|
+
var FILEROBOT_CUSTOM_PROPS = /* @__PURE__ */ new Set([
|
|
215
|
+
"active",
|
|
216
|
+
"noMargin",
|
|
217
|
+
"showBackButton",
|
|
218
|
+
"isPhoneScreen",
|
|
219
|
+
"showTabsDrawer",
|
|
220
|
+
"hasChildren",
|
|
221
|
+
"isAccordion"
|
|
222
|
+
]);
|
|
223
|
+
function EditorWrapper({
|
|
224
|
+
children,
|
|
225
|
+
StyleSheetMgr,
|
|
226
|
+
shouldForwardProp
|
|
227
|
+
}) {
|
|
228
|
+
if (StyleSheetMgr) {
|
|
229
|
+
return /* @__PURE__ */ jsx(StyleSheetMgr, { shouldForwardProp, children });
|
|
230
|
+
}
|
|
231
|
+
return /* @__PURE__ */ jsx(Fragment, { children });
|
|
232
|
+
}
|
|
233
|
+
export {
|
|
234
|
+
ImageEditorModal_default as default
|
|
235
|
+
};
|
|
236
|
+
//# sourceMappingURL=ImageEditorModal-CWKMDVPY.js.map
|