@panneau/field-upload 3.0.211 → 3.0.216

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/es/index.js +158 -92
  2. package/lib/index.js +158 -92
  3. package/package.json +9 -9
package/es/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
2
+ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
2
3
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
3
4
  import _objectSpread from '@babel/runtime/helpers/objectSpread2';
4
5
  import { Dashboard, DashboardModal } from '@uppy/react';
@@ -9,9 +10,11 @@ import PropTypes from 'prop-types';
9
10
  import React, { useCallback, useMemo, useState, useRef, useEffect } from 'react';
10
11
  import { FormattedMessage } from 'react-intl';
11
12
  import { PropTypes as PropTypes$1 } from '@panneau/core';
13
+ import { useQuery } from '@panneau/core/hooks';
12
14
  import Button from '@panneau/element-button';
13
15
  import Label from '@panneau/element-label';
14
16
  import MediaCard, { MediaCards } from '@panneau/element-media-card';
17
+ import ModalResourceItems from '@panneau/modal-resource-items';
15
18
  import { useUppy } from '@panneau/uppy';
16
19
  import '@uppy/core/dist/style.css';
17
20
  import '@uppy/dashboard/dist/style.css';
@@ -53,6 +56,7 @@ var propTypes$1 = {
53
56
  height: PropTypes.number,
54
57
  disabled: PropTypes.bool,
55
58
  uploadDisabled: PropTypes.bool,
59
+ outline: PropTypes.bool,
56
60
  loading: PropTypes.bool,
57
61
  onChange: PropTypes.func,
58
62
  onClear: PropTypes.func,
@@ -104,6 +108,7 @@ var defaultProps$1 = {
104
108
  height: 300,
105
109
  disabled: false,
106
110
  uploadDisabled: false,
111
+ outline: true,
107
112
  loading: false,
108
113
  onChange: null,
109
114
  onClear: null,
@@ -112,19 +117,19 @@ var defaultProps$1 = {
112
117
  className: null
113
118
  };
114
119
  var UploadField = function UploadField(_ref) {
115
- _ref.resource;
116
- var value = _ref.value;
117
- _ref.name;
118
- var types = _ref.types,
120
+ var resource = _ref.resource,
121
+ value = _ref.value,
122
+ name = _ref.name,
123
+ types = _ref.types,
119
124
  fileTypes = _ref.fileTypes,
120
125
  sources = _ref.sources,
121
- withButton = _ref.withButton;
122
- _ref.withFind;
123
- var withClearButton = _ref.withClearButton,
126
+ withButton = _ref.withButton,
127
+ withFind = _ref.withFind,
128
+ withClearButton = _ref.withClearButton,
124
129
  withoutMedia = _ref.withoutMedia,
125
- addButtonLabel = _ref.addButtonLabel;
126
- _ref.findButtonLabel;
127
- var clearButtonLabel = _ref.clearButtonLabel,
130
+ addButtonLabel = _ref.addButtonLabel,
131
+ findButtonLabel = _ref.findButtonLabel,
132
+ clearButtonLabel = _ref.clearButtonLabel,
128
133
  allowMultipleUploads = _ref.allowMultipleUploads,
129
134
  closeAfterFinish = _ref.closeAfterFinish,
130
135
  maxNumberOfFiles = _ref.maxNumberOfFiles,
@@ -137,12 +142,13 @@ var UploadField = function UploadField(_ref) {
137
142
  height = _ref.height,
138
143
  disabled = _ref.disabled,
139
144
  uploadDisabled = _ref.uploadDisabled,
145
+ outline = _ref.outline,
140
146
  parentLoading = _ref.loading,
141
147
  onChange = _ref.onChange,
142
148
  onClear = _ref.onClear,
143
- onClickAdd = _ref.onClickAdd;
144
- _ref.onClickFind;
145
- var className = _ref.className;
149
+ onClickAdd = _ref.onClickAdd,
150
+ onClickFind = _ref.onClickFind,
151
+ className = _ref.className;
146
152
  var mergeData = useCallback(function (newValue) {
147
153
  // Merge the response from our back-end
148
154
  if (isObject(newValue) && isObject(newValue.response) && newValue.response.status === 200 && newValue.response.body !== null) {
@@ -241,80 +247,88 @@ var UploadField = function UploadField(_ref) {
241
247
  }
242
248
  return value !== null ? [value] : null;
243
249
  }, [value]);
244
- var hasMedia = values !== null && values.length > 0;
245
250
 
246
251
  // Resource-modal-picker
247
- // const { register, unregister, modalIsOpen } = useModal();
248
- // const modalKey = `upload-field-${name}`;
249
- // const resourceModalOpen = modalIsOpen(modalKey);
250
- // const showResourceModal = withFind && resourceModalOpen;
251
-
252
- // const toggleResourceModal = useCallback(() => {
253
- // if (resourceModalOpen) {
254
- // unregister(modalKey);
255
- // } else {
256
- // register(modalKey);
257
- // }
258
- // }, [resourceModalOpen, register, unregister, modalKey]);
259
-
260
- // const [modalItems, setModalItems] = useState([]);
261
- // const closeResourceModal = useCallback(() => {
262
- // unregister(modalKey);
263
- // setModalItems(null);
264
- // }, [resourceModalOpen, unregister, modalKey, setModalItems]);
265
-
266
- // const openModalInResource = useCallback(() => {
267
- // unregister(modalKey);
268
- // setModalItems(null);
269
- // setModalOpened(true);
270
- // }, [modalOpened, unregister, modalKey, setModalOpened]);
271
-
272
- // const onChangeSelection = useCallback(
273
- // (newValue) => {
274
- // if (allowMultipleUploads) {
275
- // if (newValue !== null && !isArray(newValue)) {
276
- // const { id = null } = newValue || {};
277
- // if (id !== null) {
278
- // const previous = (modalItems || []).find(
279
- // ({ id: itemId = null } = {}) => id === itemId,
280
- // );
281
- // if (previous) {
282
- // setModalItems(
283
- // (modalItems || []).filter(
284
- // ({ id: itemId = null } = {}) => id !== itemId,
285
- // ),
286
- // );
287
- // } else {
288
- // setModalItems([...(modalItems || []), newValue]);
289
- // }
290
- // }
291
- // } else if (newValue !== null && isArray(newValue)) {
292
- // setModalItems(newValue);
293
- // }
294
- // } else if (onChange !== null) {
295
- // // Single value onchange
296
- // const [finalValue = null] = isArray(newValue) ? newValue : [newValue];
297
- // onChange(finalValue);
298
- // unregister(modalKey);
299
- // }
300
- // },
301
- // [onChange, unregister, modalKey, allowMultipleUploads, modalItems, setModalItems],
302
- // );
303
-
304
- // const onConfirmSelection = useCallback(() => {
305
- // if (onChange !== null) {
306
- // onChange(modalItems);
307
- // unregister(modalKey);
308
- // }
309
- // }, [onChange, modalItems, unregister, modalKey, allowMultipleUploads]);
310
-
252
+ var hasMedia = values !== null && values.length > 0;
253
+ var _useState3 = useState(false),
254
+ _useState4 = _slicedToArray(_useState3, 2),
255
+ resourceModalOpen = _useState4[0],
256
+ setResourceModalOpen = _useState4[1];
257
+ var showResourceModal = resource !== null && withFind && resourceModalOpen;
258
+ var openResourceModal = useCallback(function () {
259
+ setResourceModalOpen(true);
260
+ }, [resourceModalOpen, setResourceModalOpen]);
261
+ var _useState5 = useState([]),
262
+ _useState6 = _slicedToArray(_useState5, 2),
263
+ modalItems = _useState6[0],
264
+ setModalItems = _useState6[1];
265
+ var closeResourceModal = useCallback(function () {
266
+ setResourceModalOpen(false);
267
+ setModalItems(null);
268
+ }, [resourceModalOpen, setResourceModalOpen, setModalItems]);
269
+ var finalOnClickFind = useCallback(function () {
270
+ if (onClickFind !== null) {
271
+ onClickFind();
272
+ } else {
273
+ openResourceModal();
274
+ }
275
+ }, [onClickFind, openResourceModal]);
276
+ var onSelectionChange = useCallback(function (newValue) {
277
+ if (allowMultipleUploads) {
278
+ if (newValue !== null && !isArray(newValue)) {
279
+ var _ref2 = newValue || {},
280
+ _ref2$id = _ref2.id,
281
+ id = _ref2$id === void 0 ? null : _ref2$id;
282
+ if (id !== null) {
283
+ var previous = (modalItems || []).find(function () {
284
+ var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
285
+ _ref3$id = _ref3.id,
286
+ itemId = _ref3$id === void 0 ? null : _ref3$id;
287
+ return id === itemId;
288
+ });
289
+ if (previous) {
290
+ setModalItems((modalItems || []).filter(function () {
291
+ var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
292
+ _ref4$id = _ref4.id,
293
+ itemId = _ref4$id === void 0 ? null : _ref4$id;
294
+ return id !== itemId;
295
+ }));
296
+ } else {
297
+ setModalItems([].concat(_toConsumableArray(modalItems || []), [newValue]));
298
+ }
299
+ }
300
+ } else if (newValue !== null && isArray(newValue)) {
301
+ setModalItems(newValue);
302
+ }
303
+ } else {
304
+ setModalItems(newValue);
305
+ }
306
+ }, [onChange, setResourceModalOpen, allowMultipleUploads, modalItems, setModalItems]);
307
+ var confirmResourceModal = useCallback(function () {
308
+ if (onChange !== null) {
309
+ // Always multiple onchange
310
+ onChange(modalItems);
311
+ setResourceModalOpen(false);
312
+ setModalItems(null);
313
+ }
314
+ }, [onChange, setResourceModalOpen, modalItems, allowMultipleUploads, setModalItems]);
315
+ var initialQuery = useMemo(function () {
316
+ return {
317
+ types: types
318
+ };
319
+ }, [types]);
320
+ var _useQuery = useQuery(initialQuery, true),
321
+ listQuery = _useQuery.query,
322
+ onListPageChange = _useQuery.onPageChange,
323
+ onListQueryChange = _useQuery.onQueryChange,
324
+ onListQueryReset = _useQuery.onQueryReset;
311
325
  var containerRef = useRef(null);
312
326
 
313
327
  // Keep this stable, uppy doesnt like
314
- var _useState3 = useState(null),
315
- _useState4 = _slicedToArray(_useState3, 2),
316
- finalUppy = _useState4[0],
317
- setFinalUppy = _useState4[1];
328
+ var _useState7 = useState(null),
329
+ _useState8 = _slicedToArray(_useState7, 2),
330
+ finalUppy = _useState8[0],
331
+ setFinalUppy = _useState8[1];
318
332
  useEffect(function () {
319
333
  if (uppy !== null && finalUppy === null) {
320
334
  setFinalUppy(uppy);
@@ -322,10 +336,10 @@ var UploadField = function UploadField(_ref) {
322
336
  }, [uppy, finalUppy]);
323
337
 
324
338
  // Uppy state
325
- var _useState5 = useState(false),
326
- _useState6 = _slicedToArray(_useState5, 2),
327
- loading = _useState6[0],
328
- setLoading = _useState6[1];
339
+ var _useState9 = useState(false),
340
+ _useState10 = _slicedToArray(_useState9, 2),
341
+ loading = _useState10[0],
342
+ setLoading = _useState10[1];
329
343
  var startLoading = useCallback(function () {
330
344
  setLoading(true);
331
345
  }, []);
@@ -381,14 +395,23 @@ var UploadField = function UploadField(_ref) {
381
395
  icon: finalLoading ? 'loading' : 'upload',
382
396
  iconPosition: "right",
383
397
  onClick: onClickAdd || openModal,
384
- disabled: finalLoading || disabled
398
+ disabled: finalLoading || disabled,
399
+ outline: outline
385
400
  }, /*#__PURE__*/React.createElement(Label, null, finalLoading ? /*#__PURE__*/React.createElement(FormattedMessage, {
386
401
  id: "NozDYd",
387
402
  defaultMessage: [{
388
403
  "type": 0,
389
404
  "value": "Uploading"
390
405
  }]
391
- }) : addButtonLabel)))) : null, !uploadDisabled && !hasMedia && !withButton && finalUppy !== null ? /*#__PURE__*/React.createElement("div", {
406
+ }) : addButtonLabel))), withFind ? /*#__PURE__*/React.createElement("div", {
407
+ className: "col-auto ps-0"
408
+ }, /*#__PURE__*/React.createElement(Button, {
409
+ type: "button",
410
+ theme: "primary",
411
+ onClick: finalOnClickFind,
412
+ disabled: disabled,
413
+ outline: outline
414
+ }, /*#__PURE__*/React.createElement(Label, null, findButtonLabel))) : null) : null, !uploadDisabled && !hasMedia && !withButton && finalUppy !== null ? /*#__PURE__*/React.createElement("div", {
392
415
  className: styles.dashboard
393
416
  }, /*#__PURE__*/React.createElement(Dashboard, Object.assign({
394
417
  uppy: finalUppy
@@ -404,9 +427,8 @@ var UploadField = function UploadField(_ref) {
404
427
  inline: true,
405
428
  showProgressDetails: true,
406
429
  areInsidesReadyToBeVisible: true,
407
- proudlyDisplayPoweredByUppy: false,
408
- closeAfterFinish: closeAfterFinish
409
- }))) : null, !uploadDisabled && withButton && finalUppy !== null && modalOpened ? /*#__PURE__*/React.createElement(DashboardModal, {
430
+ proudlyDisplayPoweredByUppy: false
431
+ }))) : null, !showResourceModal && !uploadDisabled && withButton && finalUppy !== null && modalOpened ? /*#__PURE__*/React.createElement(DashboardModal, {
410
432
  uppy: finalUppy,
411
433
  className: styles.dashboardModal,
412
434
  plugins: sources,
@@ -420,7 +442,51 @@ var UploadField = function UploadField(_ref) {
420
442
  showAddFilesPanel: true,
421
443
  doneButtonHandler: closeModal,
422
444
  closeAfterFinish: closeAfterFinish
423
- }) : null);
445
+ }) : null, showResourceModal ? /*#__PURE__*/React.createElement(ModalResourceItems, {
446
+ id: "upload-".concat(name),
447
+ resource: resource,
448
+ query: listQuery,
449
+ onPageChange: onListPageChange,
450
+ onQueryChange: onListQueryChange,
451
+ onQueryReset: onListQueryReset,
452
+ baseUrl: null,
453
+ showActions: false,
454
+ selectable: true,
455
+ selectedItems: modalItems,
456
+ onSelectionChange: onSelectionChange,
457
+ multipleSelection: allowMultipleUploads,
458
+ onClose: closeResourceModal
459
+ }, /*#__PURE__*/React.createElement("div", {
460
+ className: "d-flex mt-4 justify-content-between"
461
+ }, modalItems !== null && modalItems.length > 0 ? /*#__PURE__*/React.createElement("span", {
462
+ className: "me-2"
463
+ }, modalItems.length, " items") : /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("div", {
464
+ className: "d-flex"
465
+ }, /*#__PURE__*/React.createElement(Button, {
466
+ type: "button",
467
+ theme: "secondary",
468
+ onClick: closeResourceModal,
469
+ disabled: disabled,
470
+ className: "d-block me-2"
471
+ }, /*#__PURE__*/React.createElement(FormattedMessage, {
472
+ id: "PyxZY2",
473
+ defaultMessage: [{
474
+ "type": 0,
475
+ "value": "Cancel"
476
+ }]
477
+ })), /*#__PURE__*/React.createElement(Button, {
478
+ type: "button",
479
+ theme: "primary",
480
+ onClick: confirmResourceModal,
481
+ disabled: disabled || modalItems !== null && modalItems.length === 0,
482
+ className: "d-block"
483
+ }, /*#__PURE__*/React.createElement(FormattedMessage, {
484
+ id: "rvOVCV",
485
+ defaultMessage: [{
486
+ "type": 0,
487
+ "value": "Confirm selection"
488
+ }]
489
+ }))))) : null);
424
490
  };
425
491
  UploadField.propTypes = propTypes$1;
426
492
  UploadField.defaultProps = defaultProps$1;
package/lib/index.js CHANGED
@@ -3,6 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
6
+ var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
6
7
  var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
7
8
  var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
8
9
  var react = require('@uppy/react');
@@ -13,9 +14,11 @@ var PropTypes = require('prop-types');
13
14
  var React = require('react');
14
15
  var reactIntl = require('react-intl');
15
16
  var core = require('@panneau/core');
17
+ var hooks = require('@panneau/core/hooks');
16
18
  var Button = require('@panneau/element-button');
17
19
  var Label = require('@panneau/element-label');
18
20
  var MediaCard = require('@panneau/element-media-card');
21
+ var ModalResourceItems = require('@panneau/modal-resource-items');
19
22
  var uppy = require('@panneau/uppy');
20
23
  require('@uppy/core/dist/style.css');
21
24
  require('@uppy/dashboard/dist/style.css');
@@ -57,6 +60,7 @@ var propTypes$1 = {
57
60
  height: PropTypes.number,
58
61
  disabled: PropTypes.bool,
59
62
  uploadDisabled: PropTypes.bool,
63
+ outline: PropTypes.bool,
60
64
  loading: PropTypes.bool,
61
65
  onChange: PropTypes.func,
62
66
  onClear: PropTypes.func,
@@ -108,6 +112,7 @@ var defaultProps$1 = {
108
112
  height: 300,
109
113
  disabled: false,
110
114
  uploadDisabled: false,
115
+ outline: true,
111
116
  loading: false,
112
117
  onChange: null,
113
118
  onClear: null,
@@ -116,19 +121,19 @@ var defaultProps$1 = {
116
121
  className: null
117
122
  };
118
123
  var UploadField = function UploadField(_ref) {
119
- _ref.resource;
120
- var value = _ref.value;
121
- _ref.name;
122
- var types = _ref.types,
124
+ var resource = _ref.resource,
125
+ value = _ref.value,
126
+ name = _ref.name,
127
+ types = _ref.types,
123
128
  fileTypes = _ref.fileTypes,
124
129
  sources = _ref.sources,
125
- withButton = _ref.withButton;
126
- _ref.withFind;
127
- var withClearButton = _ref.withClearButton,
130
+ withButton = _ref.withButton,
131
+ withFind = _ref.withFind,
132
+ withClearButton = _ref.withClearButton,
128
133
  withoutMedia = _ref.withoutMedia,
129
- addButtonLabel = _ref.addButtonLabel;
130
- _ref.findButtonLabel;
131
- var clearButtonLabel = _ref.clearButtonLabel,
134
+ addButtonLabel = _ref.addButtonLabel,
135
+ findButtonLabel = _ref.findButtonLabel,
136
+ clearButtonLabel = _ref.clearButtonLabel,
132
137
  allowMultipleUploads = _ref.allowMultipleUploads,
133
138
  closeAfterFinish = _ref.closeAfterFinish,
134
139
  maxNumberOfFiles = _ref.maxNumberOfFiles,
@@ -141,12 +146,13 @@ var UploadField = function UploadField(_ref) {
141
146
  height = _ref.height,
142
147
  disabled = _ref.disabled,
143
148
  uploadDisabled = _ref.uploadDisabled,
149
+ outline = _ref.outline,
144
150
  parentLoading = _ref.loading,
145
151
  onChange = _ref.onChange,
146
152
  onClear = _ref.onClear,
147
- onClickAdd = _ref.onClickAdd;
148
- _ref.onClickFind;
149
- var className = _ref.className;
153
+ onClickAdd = _ref.onClickAdd,
154
+ onClickFind = _ref.onClickFind,
155
+ className = _ref.className;
150
156
  var mergeData = React.useCallback(function (newValue) {
151
157
  // Merge the response from our back-end
152
158
  if (isObject(newValue) && isObject(newValue.response) && newValue.response.status === 200 && newValue.response.body !== null) {
@@ -245,80 +251,88 @@ var UploadField = function UploadField(_ref) {
245
251
  }
246
252
  return value !== null ? [value] : null;
247
253
  }, [value]);
248
- var hasMedia = values !== null && values.length > 0;
249
254
 
250
255
  // Resource-modal-picker
251
- // const { register, unregister, modalIsOpen } = useModal();
252
- // const modalKey = `upload-field-${name}`;
253
- // const resourceModalOpen = modalIsOpen(modalKey);
254
- // const showResourceModal = withFind && resourceModalOpen;
255
-
256
- // const toggleResourceModal = useCallback(() => {
257
- // if (resourceModalOpen) {
258
- // unregister(modalKey);
259
- // } else {
260
- // register(modalKey);
261
- // }
262
- // }, [resourceModalOpen, register, unregister, modalKey]);
263
-
264
- // const [modalItems, setModalItems] = useState([]);
265
- // const closeResourceModal = useCallback(() => {
266
- // unregister(modalKey);
267
- // setModalItems(null);
268
- // }, [resourceModalOpen, unregister, modalKey, setModalItems]);
269
-
270
- // const openModalInResource = useCallback(() => {
271
- // unregister(modalKey);
272
- // setModalItems(null);
273
- // setModalOpened(true);
274
- // }, [modalOpened, unregister, modalKey, setModalOpened]);
275
-
276
- // const onChangeSelection = useCallback(
277
- // (newValue) => {
278
- // if (allowMultipleUploads) {
279
- // if (newValue !== null && !isArray(newValue)) {
280
- // const { id = null } = newValue || {};
281
- // if (id !== null) {
282
- // const previous = (modalItems || []).find(
283
- // ({ id: itemId = null } = {}) => id === itemId,
284
- // );
285
- // if (previous) {
286
- // setModalItems(
287
- // (modalItems || []).filter(
288
- // ({ id: itemId = null } = {}) => id !== itemId,
289
- // ),
290
- // );
291
- // } else {
292
- // setModalItems([...(modalItems || []), newValue]);
293
- // }
294
- // }
295
- // } else if (newValue !== null && isArray(newValue)) {
296
- // setModalItems(newValue);
297
- // }
298
- // } else if (onChange !== null) {
299
- // // Single value onchange
300
- // const [finalValue = null] = isArray(newValue) ? newValue : [newValue];
301
- // onChange(finalValue);
302
- // unregister(modalKey);
303
- // }
304
- // },
305
- // [onChange, unregister, modalKey, allowMultipleUploads, modalItems, setModalItems],
306
- // );
307
-
308
- // const onConfirmSelection = useCallback(() => {
309
- // if (onChange !== null) {
310
- // onChange(modalItems);
311
- // unregister(modalKey);
312
- // }
313
- // }, [onChange, modalItems, unregister, modalKey, allowMultipleUploads]);
314
-
256
+ var hasMedia = values !== null && values.length > 0;
257
+ var _useState3 = React.useState(false),
258
+ _useState4 = _slicedToArray(_useState3, 2),
259
+ resourceModalOpen = _useState4[0],
260
+ setResourceModalOpen = _useState4[1];
261
+ var showResourceModal = resource !== null && withFind && resourceModalOpen;
262
+ var openResourceModal = React.useCallback(function () {
263
+ setResourceModalOpen(true);
264
+ }, [resourceModalOpen, setResourceModalOpen]);
265
+ var _useState5 = React.useState([]),
266
+ _useState6 = _slicedToArray(_useState5, 2),
267
+ modalItems = _useState6[0],
268
+ setModalItems = _useState6[1];
269
+ var closeResourceModal = React.useCallback(function () {
270
+ setResourceModalOpen(false);
271
+ setModalItems(null);
272
+ }, [resourceModalOpen, setResourceModalOpen, setModalItems]);
273
+ var finalOnClickFind = React.useCallback(function () {
274
+ if (onClickFind !== null) {
275
+ onClickFind();
276
+ } else {
277
+ openResourceModal();
278
+ }
279
+ }, [onClickFind, openResourceModal]);
280
+ var onSelectionChange = React.useCallback(function (newValue) {
281
+ if (allowMultipleUploads) {
282
+ if (newValue !== null && !isArray(newValue)) {
283
+ var _ref2 = newValue || {},
284
+ _ref2$id = _ref2.id,
285
+ id = _ref2$id === void 0 ? null : _ref2$id;
286
+ if (id !== null) {
287
+ var previous = (modalItems || []).find(function () {
288
+ var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
289
+ _ref3$id = _ref3.id,
290
+ itemId = _ref3$id === void 0 ? null : _ref3$id;
291
+ return id === itemId;
292
+ });
293
+ if (previous) {
294
+ setModalItems((modalItems || []).filter(function () {
295
+ var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
296
+ _ref4$id = _ref4.id,
297
+ itemId = _ref4$id === void 0 ? null : _ref4$id;
298
+ return id !== itemId;
299
+ }));
300
+ } else {
301
+ setModalItems([].concat(_toConsumableArray(modalItems || []), [newValue]));
302
+ }
303
+ }
304
+ } else if (newValue !== null && isArray(newValue)) {
305
+ setModalItems(newValue);
306
+ }
307
+ } else {
308
+ setModalItems(newValue);
309
+ }
310
+ }, [onChange, setResourceModalOpen, allowMultipleUploads, modalItems, setModalItems]);
311
+ var confirmResourceModal = React.useCallback(function () {
312
+ if (onChange !== null) {
313
+ // Always multiple onchange
314
+ onChange(modalItems);
315
+ setResourceModalOpen(false);
316
+ setModalItems(null);
317
+ }
318
+ }, [onChange, setResourceModalOpen, modalItems, allowMultipleUploads, setModalItems]);
319
+ var initialQuery = React.useMemo(function () {
320
+ return {
321
+ types: types
322
+ };
323
+ }, [types]);
324
+ var _useQuery = hooks.useQuery(initialQuery, true),
325
+ listQuery = _useQuery.query,
326
+ onListPageChange = _useQuery.onPageChange,
327
+ onListQueryChange = _useQuery.onQueryChange,
328
+ onListQueryReset = _useQuery.onQueryReset;
315
329
  var containerRef = React.useRef(null);
316
330
 
317
331
  // Keep this stable, uppy doesnt like
318
- var _useState3 = React.useState(null),
319
- _useState4 = _slicedToArray(_useState3, 2),
320
- finalUppy = _useState4[0],
321
- setFinalUppy = _useState4[1];
332
+ var _useState7 = React.useState(null),
333
+ _useState8 = _slicedToArray(_useState7, 2),
334
+ finalUppy = _useState8[0],
335
+ setFinalUppy = _useState8[1];
322
336
  React.useEffect(function () {
323
337
  if (uppy$1 !== null && finalUppy === null) {
324
338
  setFinalUppy(uppy$1);
@@ -326,10 +340,10 @@ var UploadField = function UploadField(_ref) {
326
340
  }, [uppy$1, finalUppy]);
327
341
 
328
342
  // Uppy state
329
- var _useState5 = React.useState(false),
330
- _useState6 = _slicedToArray(_useState5, 2),
331
- loading = _useState6[0],
332
- setLoading = _useState6[1];
343
+ var _useState9 = React.useState(false),
344
+ _useState10 = _slicedToArray(_useState9, 2),
345
+ loading = _useState10[0],
346
+ setLoading = _useState10[1];
333
347
  var startLoading = React.useCallback(function () {
334
348
  setLoading(true);
335
349
  }, []);
@@ -385,14 +399,23 @@ var UploadField = function UploadField(_ref) {
385
399
  icon: finalLoading ? 'loading' : 'upload',
386
400
  iconPosition: "right",
387
401
  onClick: onClickAdd || openModal,
388
- disabled: finalLoading || disabled
402
+ disabled: finalLoading || disabled,
403
+ outline: outline
389
404
  }, /*#__PURE__*/React.createElement(Label, null, finalLoading ? /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
390
405
  id: "NozDYd",
391
406
  defaultMessage: [{
392
407
  "type": 0,
393
408
  "value": "Uploading"
394
409
  }]
395
- }) : addButtonLabel)))) : null, !uploadDisabled && !hasMedia && !withButton && finalUppy !== null ? /*#__PURE__*/React.createElement("div", {
410
+ }) : addButtonLabel))), withFind ? /*#__PURE__*/React.createElement("div", {
411
+ className: "col-auto ps-0"
412
+ }, /*#__PURE__*/React.createElement(Button, {
413
+ type: "button",
414
+ theme: "primary",
415
+ onClick: finalOnClickFind,
416
+ disabled: disabled,
417
+ outline: outline
418
+ }, /*#__PURE__*/React.createElement(Label, null, findButtonLabel))) : null) : null, !uploadDisabled && !hasMedia && !withButton && finalUppy !== null ? /*#__PURE__*/React.createElement("div", {
396
419
  className: styles.dashboard
397
420
  }, /*#__PURE__*/React.createElement(react.Dashboard, Object.assign({
398
421
  uppy: finalUppy
@@ -408,9 +431,8 @@ var UploadField = function UploadField(_ref) {
408
431
  inline: true,
409
432
  showProgressDetails: true,
410
433
  areInsidesReadyToBeVisible: true,
411
- proudlyDisplayPoweredByUppy: false,
412
- closeAfterFinish: closeAfterFinish
413
- }))) : null, !uploadDisabled && withButton && finalUppy !== null && modalOpened ? /*#__PURE__*/React.createElement(react.DashboardModal, {
434
+ proudlyDisplayPoweredByUppy: false
435
+ }))) : null, !showResourceModal && !uploadDisabled && withButton && finalUppy !== null && modalOpened ? /*#__PURE__*/React.createElement(react.DashboardModal, {
414
436
  uppy: finalUppy,
415
437
  className: styles.dashboardModal,
416
438
  plugins: sources,
@@ -424,7 +446,51 @@ var UploadField = function UploadField(_ref) {
424
446
  showAddFilesPanel: true,
425
447
  doneButtonHandler: closeModal,
426
448
  closeAfterFinish: closeAfterFinish
427
- }) : null);
449
+ }) : null, showResourceModal ? /*#__PURE__*/React.createElement(ModalResourceItems, {
450
+ id: "upload-".concat(name),
451
+ resource: resource,
452
+ query: listQuery,
453
+ onPageChange: onListPageChange,
454
+ onQueryChange: onListQueryChange,
455
+ onQueryReset: onListQueryReset,
456
+ baseUrl: null,
457
+ showActions: false,
458
+ selectable: true,
459
+ selectedItems: modalItems,
460
+ onSelectionChange: onSelectionChange,
461
+ multipleSelection: allowMultipleUploads,
462
+ onClose: closeResourceModal
463
+ }, /*#__PURE__*/React.createElement("div", {
464
+ className: "d-flex mt-4 justify-content-between"
465
+ }, modalItems !== null && modalItems.length > 0 ? /*#__PURE__*/React.createElement("span", {
466
+ className: "me-2"
467
+ }, modalItems.length, " items") : /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("div", {
468
+ className: "d-flex"
469
+ }, /*#__PURE__*/React.createElement(Button, {
470
+ type: "button",
471
+ theme: "secondary",
472
+ onClick: closeResourceModal,
473
+ disabled: disabled,
474
+ className: "d-block me-2"
475
+ }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
476
+ id: "PyxZY2",
477
+ defaultMessage: [{
478
+ "type": 0,
479
+ "value": "Cancel"
480
+ }]
481
+ })), /*#__PURE__*/React.createElement(Button, {
482
+ type: "button",
483
+ theme: "primary",
484
+ onClick: confirmResourceModal,
485
+ disabled: disabled || modalItems !== null && modalItems.length === 0,
486
+ className: "d-block"
487
+ }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
488
+ id: "rvOVCV",
489
+ defaultMessage: [{
490
+ "type": 0,
491
+ "value": "Confirm selection"
492
+ }]
493
+ }))))) : null);
428
494
  };
429
495
  UploadField.propTypes = propTypes$1;
430
496
  UploadField.defaultProps = defaultProps$1;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@panneau/field-upload",
3
- "version": "3.0.211",
3
+ "version": "3.0.216",
4
4
  "description": "An Upload field",
5
5
  "keywords": [
6
6
  "javascript"
@@ -57,13 +57,13 @@
57
57
  "@fortawesome/fontawesome-svg-core": "^6.5.1",
58
58
  "@fortawesome/free-solid-svg-icons": "^6.5.1",
59
59
  "@fortawesome/react-fontawesome": "^0.2.0",
60
- "@panneau/core": "^3.0.194",
61
- "@panneau/element-button": "^3.0.211",
62
- "@panneau/element-label": "^3.0.194",
63
- "@panneau/element-media-card": "^3.0.211",
64
- "@panneau/list-resource-items": "^3.0.211",
65
- "@panneau/themes": "^3.0.194",
66
- "@panneau/uppy": "^3.0.203",
60
+ "@panneau/core": "^3.0.215",
61
+ "@panneau/element-button": "^3.0.216",
62
+ "@panneau/element-label": "^3.0.215",
63
+ "@panneau/element-media-card": "^3.0.216",
64
+ "@panneau/modal-resource-items": "^3.0.216",
65
+ "@panneau/themes": "^3.0.215",
66
+ "@panneau/uppy": "^3.0.215",
67
67
  "@uppy/core": "^3.9.1",
68
68
  "@uppy/dashboard": "^3.7.3",
69
69
  "@uppy/drag-drop": "^3.0.3",
@@ -80,5 +80,5 @@
80
80
  "publishConfig": {
81
81
  "access": "public"
82
82
  },
83
- "gitHead": "852b4a2eb4644413197a8f91739cf74f42b039f4"
83
+ "gitHead": "5b2ee4f43b0034a741cc2a7fea024f451b2f2779"
84
84
  }