@agilemotion/oui-react-js 1.8.51 → 1.8.52

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.
@@ -1,201 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- var _react = _interopRequireDefault(require("react"));
8
- var _Utils = _interopRequireDefault(require("../Utils"));
9
- var _AppBar = _interopRequireDefault(require("@mui/material/AppBar"));
10
- var _Tab = _interopRequireDefault(require("@mui/material/Tab"));
11
- var _Tabs = _interopRequireDefault(require("@mui/material/Tabs"));
12
- var _TabPage = _interopRequireDefault(require("./TabPage"));
13
- var _Section = _interopRequireDefault(require("./form/Section"));
14
- var _Toolbar = _interopRequireDefault(require("./Toolbar"));
15
- var _ApplicationManager = _interopRequireDefault(require("../ApplicationManager"));
16
- var _Layout = require("./layout/Layout");
17
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
18
- function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
19
- function a11yProps(index) {
20
- return {
21
- id: `simple-tab-${index}`,
22
- 'aria-controls': `simple-tabpanel-${index}`
23
- };
24
- }
25
- const TabPanel = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
26
- const [tabValue, setTabValue] = _react.default.useState(0);
27
- const [errors, setErrors] = _react.default.useState({});
28
- const [visibleTabPages, setVisibleTabPages] = _react.default.useState(null);
29
- const [componentHandles] = _react.default.useState({});
30
- const handleTabChange = (event, newValue) => {
31
- setTabValue(newValue);
32
- };
33
- const createComponentHandle = component => {
34
- if (_Utils.default.isNull(componentHandles[component.id])) {
35
- let handle = {};
36
- componentHandles[component.id] = handle;
37
- return handle;
38
- }
39
- return componentHandles[component.id];
40
- };
41
- _react.default.useEffect(() => {
42
- props.handle.api = api();
43
- });
44
- _react.default.useEffect(() => {
45
- if (!_Utils.default.isNull(props.form)) {
46
- props.form().setContainerErrorHandler(containerErrors => {
47
- let shouldRefresh = false;
48
- let properties = Object.getOwnPropertyNames(containerErrors);
49
- for (const property of properties) {
50
- if (errors[property] !== containerErrors[property]) {
51
- shouldRefresh = true;
52
- break;
53
- }
54
- }
55
- if (_ApplicationManager.default.isFormMarkersEnabled() && shouldRefresh) {
56
- setErrors(JSON.parse(JSON.stringify(containerErrors)));
57
- }
58
- });
59
- }
60
- if (props.config.tabPages) {
61
- let allVisibleTabPages = [];
62
- for (const page of props.config.tabPages) {
63
- if (_Utils.default.isNull(page.id)) {
64
- page.id = index + '-tab-page';
65
- }
66
- let parsedConfig = _Utils.default.parseConfig(page, props.viewId);
67
- let visible = _Utils.default.isNull(parsedConfig.visible) || _Utils.default.evaluateBooleanExpression(parsedConfig.visible, page.id);
68
- if (visible) {
69
- allVisibleTabPages.push(page);
70
- }
71
- }
72
- setVisibleTabPages(allVisibleTabPages);
73
- }
74
- }, []);
75
- function renderTabPageComponent(component, tabId, index) {
76
- if (_Utils.default.isNull(component.id)) {
77
- component.id = index + '-tab-content';
78
- }
79
- return component.type === 'formSection' ? /*#__PURE__*/_react.default.createElement(_Section.default, {
80
- keyHandler: props.keyHandler,
81
- key: index,
82
- config: component,
83
- handle: createComponentHandle(component),
84
- form: props.form,
85
- parentId: tabId,
86
- viewId: props.viewId,
87
- values: props.values
88
- }) : component.type === 'toolbar' ? /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
89
- config: component,
90
- handle: createComponentHandle(component),
91
- key: index,
92
- viewId: props.viewId
93
- }) : component.type === 'layout' ? /*#__PURE__*/_react.default.createElement(_Layout.Layout, {
94
- config: component,
95
- handle: createComponentHandle(component),
96
- key: index,
97
- viewId: props.viewId
98
- }) : /*#__PURE__*/_react.default.createElement("div", null, 'Unsupported component type ' + component.type);
99
- }
100
- function renderPage(page, pageIndex) {
101
- return /*#__PURE__*/_react.default.createElement("div", {
102
- style: {
103
- margin: '16px'
104
- },
105
- className: 'tab-page-container'
106
- }, page.components.map((component, index) => {
107
- return renderTabPageComponent(component, page.id, pageIndex + index);
108
- }));
109
- }
110
- const api = () => {
111
- return {
112
- get id() {
113
- return props.config.id;
114
- },
115
- getChildren: () => {
116
- let children = [];
117
- let properties = Object.getOwnPropertyNames(componentHandles);
118
- for (const property of properties) {
119
- let componentHandle = componentHandles[property];
120
- children.push(componentHandle);
121
- if (!_Utils.default.isNull(componentHandle.api.getChildren)) {
122
- for (const child of componentHandle.api.getChildren()) {
123
- children.push(child);
124
- }
125
- }
126
- }
127
- return children;
128
- },
129
- set value(value) {
130
- setTabValue(value);
131
- },
132
- get value() {
133
- return tabValue;
134
- },
135
- setPageHasError: (pageId, hasError) => {
136
- setErrors({
137
- ...errors,
138
- [pageId]: hasError
139
- });
140
- },
141
- clearErrors: () => {
142
- setErrors({});
143
- }
144
- };
145
- };
146
- return !_Utils.default.isNull(visibleTabPages) && /*#__PURE__*/_react.default.createElement("div", {
147
- style: _Utils.default.mergeStyles({
148
- width: '100%'
149
- }, props.config)
150
- }, /*#__PURE__*/_react.default.createElement(_AppBar.default, {
151
- position: "static",
152
- color: "default",
153
- style: {
154
- background: 'transparent',
155
- boxShadow: 'none',
156
- borderBottom: '1px solid #d1d1d1'
157
- }
158
- }, /*#__PURE__*/_react.default.createElement(_Tabs.default, {
159
- value: tabValue,
160
- onChange: handleTabChange,
161
- variant: "scrollable" // enables horizontal scroll
162
- ,
163
- scrollButtons: "auto" // shows arrows when needed
164
- ,
165
- allowScrollButtonsMobile: true // show arrows on mobile too
166
- ,
167
- textColor: "primary",
168
- indicatorColor: "primary",
169
- "aria-label": "tabs",
170
- sx: {
171
- // optional: reduce default min width so more tabs fit
172
- '& .MuiTab-root': {
173
- minWidth: 120
174
- }
175
- }
176
- }, visibleTabPages?.length > 0 ? visibleTabPages.map((page, index) => /*#__PURE__*/_react.default.createElement(_Tab.default, _extends({
177
- key: index,
178
- label: page.attributes['label'],
179
- wrapped: true // allow multi-line label
180
- }, a11yProps(index), {
181
- sx: {
182
- maxWidth: 240,
183
- // constrain so wrapping can occur
184
- whiteSpace: 'normal',
185
- // allow wrap
186
- wordBreak: 'break-word',
187
- // break long words
188
- textTransform: 'uppercase',
189
- // keep original casing
190
- color: _ApplicationManager.default.isFormMarkersEnabled() && errors !== null && errors[page.id] === true ? '#ed5249' : undefined
191
- }
192
- }))) : null)), visibleTabPages.length > 0 ? visibleTabPages.map((page, index) => {
193
- return /*#__PURE__*/_react.default.createElement(_TabPage.default, {
194
- value: tabValue,
195
- key: index,
196
- index: index,
197
- config: page
198
- }, renderPage(page, index));
199
- }) : null);
200
- }));
201
- var _default = exports.default = TabPanel;
@@ -1,466 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = exports.ImageEditorComponent = exports.ImageEditor = void 0;
7
- var _react = _interopRequireDefault(require("react"));
8
- var _Button = _interopRequireDefault(require("@mui/material/Button"));
9
- var _BaseField = require("./BaseField");
10
- var _styles = require("@mui/styles");
11
- var _Utils = _interopRequireDefault(require("../../Utils"));
12
- var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
13
- var _Icon = _interopRequireDefault(require("../Icon"));
14
- var _reactPromiseTracker = require("react-promise-tracker");
15
- var _Event = _interopRequireDefault(require("../../event/Event"));
16
- var _Observable = _interopRequireDefault(require("../../event/Observable"));
17
- var _EventType = _interopRequireDefault(require("../../event/EventType"));
18
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
19
- function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
20
- const useStyles = (0, _styles.makeStyles)(theme => ({
21
- button: {
22
- margin: theme.spacing(1)
23
- },
24
- input: {
25
- display: 'none'
26
- },
27
- errorMessageDisplay: {
28
- color: 'red'
29
- }
30
- }));
31
- const status = response => {
32
- if (response.ok) {
33
- return Promise.resolve(response);
34
- } else {
35
- let error = new Error(response.statusText);
36
- error.code = response.status;
37
- return Promise.reject(error);
38
- }
39
- };
40
- const json = response => {
41
- return response.text();
42
- };
43
- const location = window.location.protocol + "//" + window.location.hostname;
44
- const ImageEditorComponent = exports.ImageEditorComponent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
45
- const [multiple] = _react.default.useState(props.multiple === true);
46
- const [angle, setAngle] = _react.default.useState(0);
47
- const [zoomDepth, setZoomDepth] = _react.default.useState(null);
48
- const [originalImageWidth, setOriginalImageWidth] = _react.default.useState(null);
49
- const [originalImageHeight, setOriginalImageHeight] = _react.default.useState(null);
50
- const [payloadStorageMode] = _react.default.useState(props.config.payloadStorageMode || 'base64');
51
- const classes = useStyles();
52
- const width = _Utils.default.getComponentAttribute(props.config, 'width', '320px');
53
- const height = _Utils.default.getComponentAttribute(props.config, 'height', '320px');
54
- const cacheId = _react.default.useRef(!_Utils.default.isNull(props.base.value) ? props.base.value.documentRepositoryCacheId : null);
55
- const base = props.base;
56
- _react.default.useEffect(() => {}, [props.initialFile]);
57
- function getFetchConfig(data) {
58
- const accessToken = sessionStorage.getItem("accessToken");
59
- const idToken = sessionStorage.getItem("idToken");
60
- return {
61
- method: 'POST',
62
- headers: {
63
- 'Accept': 'application/json',
64
- 'Authorization': 'Bearer ' + accessToken,
65
- 'idToken': idToken
66
- },
67
- body: data
68
- };
69
- }
70
- function getRotateAngle(action) {
71
- let rotateAngle = null;
72
- if ("rotateLeft" === action) {
73
- rotateAngle = -90;
74
- } else if ("rotateRight" === action) {
75
- rotateAngle = 90;
76
- }
77
- return rotateAngle;
78
- }
79
- function process(callback, data, action) {
80
- let fetchConfig = getFetchConfig(data);
81
- let url = location + _ApplicationManager.default.getContextRoot() + _Utils.default.getComponentAttribute(props.config, 'processingUrl', null) + "/" + action + "/" + _Utils.default.getComponentAttribute(props.config, "mode", "DOC");
82
- let rotateAngle = getRotateAngle(action);
83
- if (rotateAngle) {
84
- url += "?" + rotateAngle;
85
- }
86
- (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(json).then(data => {
87
- callback(data);
88
- }).catch(e => {
89
- if (e.code === 401) {
90
- _ApplicationManager.default.clear();
91
- _ApplicationManager.default.getApplicationHistory().push('/login');
92
- }
93
- }));
94
- }
95
- const handleChange = () => event => {
96
- if (cacheId.current) {
97
- remove().then(() => cacheId.current = null).catch(e => {});
98
- }
99
- let files = event.target.files;
100
- let file = files[0];
101
- let reader = new FileReader();
102
- reader.readAsDataURL(file);
103
- reader.onload = () => {
104
- if (!_Utils.default.isNull(file)) {
105
- let fileMetaData = {};
106
- fileMetaData.name = file.name;
107
- fileMetaData.type = file.type;
108
- fileMetaData.size = file.size;
109
- if (base.value) {
110
- fileMetaData.id = base.value.id;
111
- }
112
- if ('base64' === payloadStorageMode) {
113
- if (_Utils.default.getComponentAttribute(props.config, 'autoRemoveBackground', false)) {
114
- process(data => {
115
- fileMetaData.url = data;
116
- base.handleValueChange(fileMetaData);
117
- }, reader.result, 'removeBackground');
118
- } else {
119
- fileMetaData.url = file.base64;
120
- base.handleValueChange(fileMetaData);
121
- }
122
- } else {
123
- if (_Utils.default.getComponentAttribute(props.config, 'autoRemoveBackground', false)) {
124
- process(data => {
125
- setCacheModeValue(fileMetaData, file);
126
- }, reader.result, 'removeBackground');
127
- } else {
128
- setCacheModeValue(fileMetaData, file);
129
- }
130
- }
131
- }
132
- };
133
- reader.onloadend = () => {};
134
- };
135
- const setCacheModeValue = (fileMetaData, file) => {
136
- fileMetaData.correlationId = props.config.id;
137
- fileMetaData.domain = props.viewId;
138
- if (cacheId.current) {
139
- remove().then(() => {
140
- cacheId.current = null;
141
- upload(fileMetaData, file, reader);
142
- }).catch(e => {});
143
- } else {
144
- upload(fileMetaData, file, reader);
145
- }
146
- };
147
- const upload = (metadata, file, reader) => {
148
- let uploadUrl = _Utils.default.getComponentAttribute(props.config, 'uploadUrl', null);
149
- if (uploadUrl === null) {
150
- uploadUrl = _ApplicationManager.default.getContextRoot() + "/docs/api/v1/manager/upload/save";
151
- }
152
- let payloadStorageMode = props.config.payloadStorageMode;
153
- if (payloadStorageMode === 'post') {
154
- const accessToken = sessionStorage.getItem("accessToken");
155
- const idToken = sessionStorage.getItem("idToken");
156
- let data = new FormData();
157
- metadata.correlationId = props.viewId + "." + props.config.id;
158
- data.append("metadata", JSON.stringify(metadata));
159
- data.append("file", file);
160
- let fetchConfig = {
161
- method: 'POST',
162
- headers: {
163
- 'Accept': 'application/json',
164
- 'Authorization': 'Bearer ' + accessToken,
165
- 'idToken': idToken,
166
- 'tenant': _ApplicationManager.default.getActiveTenant()
167
- },
168
- body: data
169
- };
170
- let url = location + uploadUrl;
171
- (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(json).then(data => {
172
- metadata.documentRepositoryId = !_Utils.default.isNull(base.value) ? base.value.documentRepositoryId : null;
173
- metadata.documentRepositoryCacheId = data;
174
- cacheId.current = data;
175
- base.handleValueChange(metadata);
176
- }).catch(e => {
177
- if (e.code === 401) {
178
- _ApplicationManager.default.clear();
179
- _ApplicationManager.default.getApplicationHistory().push('/login');
180
- }
181
- let message = {
182
- messageType: 'ERROR',
183
- message: 'An error has accurred while uploading file'
184
- };
185
- let event = new _Event.default(_ApplicationManager.default, props.viewId, message);
186
- _Observable.default.fireEvent(_EventType.default.MESSAGE_ARRIVED, event);
187
- }));
188
- } else {
189
- metadata.payload = reader.result;
190
- base.handleValueChange(metadata);
191
- }
192
- };
193
- const remove = () => {
194
- return new Promise((resolve, reject) => {
195
- const accessToken = sessionStorage.getItem("accessToken");
196
- const idToken = sessionStorage.getItem("idToken");
197
- let fetchConfig = {
198
- method: 'GET',
199
- headers: {
200
- 'Accept': 'application/json',
201
- 'Authorization': 'Bearer ' + accessToken,
202
- 'idToken': idToken,
203
- 'tenant': _ApplicationManager.default.getActiveTenant()
204
- }
205
- };
206
- let url = location + _ApplicationManager.default.getContextRoot() + '/docs/api/v1/manager/upload/remove/' + cacheId.current;
207
- (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(() => {
208
- resolve();
209
- }).catch(e => {
210
- if (e.code === 401) {
211
- _ApplicationManager.default.clear();
212
- _ApplicationManager.default.getApplicationHistory().push('/login');
213
- } else {
214
- reject(e);
215
- }
216
- }));
217
- });
218
- };
219
- _react.default.useEffect(() => {
220
- let container = document.getElementById("__image_container");
221
- let image = document.getElementById("__image");
222
- if (container) {
223
- let ratio = 10 * zoomDepth / 100;
224
- container.style.width = originalImageWidth + originalImageWidth * ratio + "px";
225
- container.style.height = originalImageHeight + originalImageHeight * ratio + "px";
226
- image.style.width = container.style.width;
227
- image.style.height = container.style.height;
228
- }
229
- }, [zoomDepth]);
230
- const zoom = direction => {
231
- if (originalImageWidth === null) {
232
- setOriginalImageWidth(document.getElementById("__image").width);
233
- setOriginalImageHeight(document.getElementById("__image").height);
234
- }
235
- let depth = direction === "In" ? zoomDepth + 1 : zoomDepth - 1;
236
- if (depth <= 0) {
237
- depth = 1;
238
- }
239
- setZoomDepth(depth);
240
- };
241
- const rotate = direction => {
242
- let rotateMode = _Utils.default.getComponentAttribute(props.config, "rotateMode", null);
243
- if (rotateMode === null || rotateMode === 'SERVER') {
244
- process(data => {
245
- base.handleValueChange({
246
- ...base.value,
247
- url: data
248
- });
249
- }, base.value.url, 'rotate' + direction);
250
- } else {
251
- let rotateAngle = angle + getRotateAngle("rotate" + direction);
252
- document.getElementById("__image_container").style.transform = "rotate(" + rotateAngle + "deg)";
253
- setAngle(rotateAngle);
254
- }
255
- };
256
- return /*#__PURE__*/_react.default.createElement("div", {
257
- style: _Utils.default.mergeStyles({
258
- width: width
259
- }, props.config)
260
- }, /*#__PURE__*/_react.default.createElement("div", {
261
- className: "row",
262
- style: {
263
- marginLeft: '0',
264
- marginRight: '0'
265
- }
266
- }, /*#__PURE__*/_react.default.createElement("div", {
267
- className: "col-*-*"
268
- }, /*#__PURE__*/_react.default.createElement("label", null, _Utils.default.getComponentAttribute(props.config, 'label', '')))), /*#__PURE__*/_react.default.createElement("div", {
269
- className: "row",
270
- style: {
271
- marginLeft: '0',
272
- marginRight: '0'
273
- }
274
- }, /*#__PURE__*/_react.default.createElement("div", {
275
- className: "col-*-*"
276
- }, /*#__PURE__*/_react.default.createElement("input", {
277
- accept: "image/jpeg,image/gif,image/png,image/x-eps",
278
- className: classes.input,
279
- id: `contained-button-file-${props.config.id}`,
280
- disabled: base.disabled,
281
- required: base.required,
282
- multiple: multiple,
283
- onChange: handleChange(),
284
- type: "file"
285
- }), /*#__PURE__*/_react.default.createElement("label", {
286
- htmlFor: `contained-button-file-${props.config.id}`
287
- }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
288
- component: "span",
289
- variant: 'contained',
290
- size: "large",
291
- style: {
292
- width: '120px',
293
- height: '40px',
294
- border: base.hasError ? "1px solid #f44336" : null,
295
- color: base.hasError ? "#f44336" : null
296
- },
297
- startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
298
- id: 'UPLOAD'
299
- })
300
- }, "UPLOAD")), base.hasError ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
301
- style: {
302
- color: "#f44336",
303
- padding: "8px 0"
304
- }
305
- }, base.errorMessage)) : null)), /*#__PURE__*/_react.default.createElement("div", {
306
- className: "col-*-*",
307
- style: {
308
- marginLeft: '4px'
309
- }
310
- }, base.value ? /*#__PURE__*/_react.default.createElement(_Button.default, {
311
- variant: 'contained',
312
- size: "large",
313
- style: {
314
- width: '40px',
315
- height: '40px'
316
- },
317
- onClick: () => rotate('Left'),
318
- startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
319
- id: 'ROTATE_LEFT'
320
- })
321
- }) : null), /*#__PURE__*/_react.default.createElement("div", {
322
- className: "col-*-*",
323
- style: {
324
- marginLeft: '4px'
325
- }
326
- }, base.value ? /*#__PURE__*/_react.default.createElement(_Button.default, {
327
- variant: 'contained',
328
- size: "large",
329
- style: {
330
- width: '40px',
331
- height: '40px'
332
- },
333
- onClick: () => rotate('Right'),
334
- startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
335
- id: 'ROTATE_RIGHT'
336
- })
337
- }) : null), /*#__PURE__*/_react.default.createElement("div", {
338
- className: "col-*-*",
339
- style: {
340
- marginLeft: '4px'
341
- }
342
- }, base.value ? /*#__PURE__*/_react.default.createElement(_Button.default, {
343
- variant: 'contained',
344
- size: "large",
345
- style: {
346
- width: '40px',
347
- height: '40px'
348
- },
349
- onClick: () => zoom('Out'),
350
- startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
351
- id: 'ZOOM_OUT'
352
- })
353
- }) : null), /*#__PURE__*/_react.default.createElement("div", {
354
- className: "col-*-*",
355
- style: {
356
- marginLeft: '4px'
357
- }
358
- }, base.value ? /*#__PURE__*/_react.default.createElement(_Button.default, {
359
- variant: 'contained',
360
- size: "large",
361
- style: {
362
- width: '40px',
363
- height: '40px'
364
- },
365
- onClick: () => zoom('In'),
366
- startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
367
- id: 'ZOOM_IN'
368
- })
369
- }) : null)), !_Utils.default.isNull(base.value) ? /*#__PURE__*/_react.default.createElement("div", {
370
- className: "row",
371
- style: {
372
- padding: "8px 0",
373
- marginLeft: '0',
374
- marginRight: '0'
375
- }
376
- }, /*#__PURE__*/_react.default.createElement("div", {
377
- id: "__image_parent",
378
- style: {
379
- width: "100%",
380
- height: height,
381
- backgroundRepeat: 'no-repeat',
382
- backgroundSize: 'cover',
383
- backgroundColor: 'transparent',
384
- backgroundImage: `url(${require('./transparent.jpeg')})`,
385
- border: '4px solid #e1e1e1',
386
- borderRadius: '4px'
387
- },
388
- className: "col-*-*"
389
- }, /*#__PURE__*/_react.default.createElement("div", {
390
- className: classes.button,
391
- style: {
392
- width: 'auto',
393
- height: parseFloat(height.replace('px', '')) - 20 + 'px',
394
- maxHeight: parseFloat(height.replace('px', '')) - 20 + 'px',
395
- textAlign: 'center',
396
- overflow: 'auto',
397
- display: 'flex',
398
- justifyContent: 'center',
399
- alignItems: 'center'
400
- }
401
- }, /*#__PURE__*/_react.default.createElement("div", {
402
- id: "__image_container"
403
- }, /*#__PURE__*/_react.default.createElement("img", {
404
- id: "__image",
405
- src: base.value.url,
406
- alt: '',
407
- style: {
408
- maxHeight: parseFloat(height.replace('px', '')) - 20 + 'px'
409
- }
410
- }))))) : null);
411
- }));
412
- const ImageEditor = exports.ImageEditor = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
413
- const [file, setFile] = _react.default.useState(null);
414
- const clearTrigger = _react.default.useRef(false);
415
- return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
416
- handle: props.handle,
417
- valueParser: (value, inbound) => {
418
- if (inbound) {
419
- clearTrigger.current = !clearTrigger.current;
420
- if (!_Utils.default.isNull(value)) {
421
- let val = value;
422
-
423
- // TODO : Support multiple file upload
424
- if (_Utils.default.getComponentAttribute(props.config, 'multiple', false)) {
425
- if (typeof value.length !== 'undefined' && value.length > 0) {
426
- val = value[0];
427
- } else {
428
- if (value.documentRepositoryId) {
429
- return value;
430
- }
431
- return null;
432
- }
433
- }
434
- if (val.map) {
435
- val = val.map;
436
- }
437
- let fileMetaData = {};
438
- fileMetaData.name = !_Utils.default.isNull(val.label) ? val.label : val.name;
439
- fileMetaData.id = val.id;
440
- fileMetaData.type = val.type;
441
- fileMetaData.size = val.size;
442
- fileMetaData.documentRepositoryId = !_Utils.default.isNull(val.key) ? val.key : val.documentRepositoryId;
443
- fileMetaData.documentRepositoryCacheId = val.documentRepositoryCacheId;
444
- fileMetaData.url = val.url;
445
- if (!_Utils.default.isNull(val.url)) {
446
- let file = {};
447
- file.base64 = val.url;
448
- setFile(file);
449
- }
450
- return fileMetaData;
451
- }
452
- }
453
- return value;
454
- },
455
- valueChangeCallback: value => {
456
- if (_Utils.default.isNull(value)) {
457
- clearTrigger.current = !clearTrigger.current;
458
- }
459
- }
460
- }), base => /*#__PURE__*/_react.default.createElement(ImageEditorComponent, _extends({
461
- base: base,
462
- initialFile: file,
463
- clearTrigger: clearTrigger.current
464
- }, props)));
465
- }));
466
- var _default = exports.default = ImageEditor;