@micromag/media-gallery 0.3.331 → 0.3.332

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 (4) hide show
  1. package/assets/css/styles.css +2 -2
  2. package/es/index.js +165 -81
  3. package/lib/index.js +166 -82
  4. package/package.json +4 -4
package/assets/css/styles.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .micromag-media-gallery-items-gallery-item-container{border:1px solid #343434;cursor:pointer;overflow:hidden;position:relative}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-imageButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-image{background-color:#1c1c1c;background-position:50%;background-repeat:no-repeat;background-size:contain;display:block;height:0;padding-bottom:100%;width:100%}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-icon{height:16px;margin-right:5px;width:16px}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-top:1px solid #343434;color:inherit;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;text-align:inherit}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer .micromag-media-gallery-items-gallery-item-label{-ms-flex-positive:1;flex-grow:1}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer small{font-size:.75rem}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-closeButton,.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-infoButton{color:#fff;-webkit-filter:drop-shadow(0 0 .75rem #1c1c1c);filter:drop-shadow(0 0 .75rem #1C1C1C);padding:.5rem;position:absolute;top:0;-webkit-transition:opacity .15s ease-out;-o-transition:opacity .15s ease-out;transition:opacity .15s ease-out}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-closeButton .micromag-media-gallery-items-gallery-item-icon,.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-infoButton .micromag-media-gallery-items-gallery-item-icon{height:1rem;margin-right:0;width:1rem}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-closeButton:hover,.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-infoButton:hover{opacity:.8}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-infoButton{left:0}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-closeButton{right:0}
2
2
 
3
- .micromag-media-gallery-partials-media-metadata-container{position:relative}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-image{display:block;margin:0 auto;max-height:40vh;max-width:100%;min-height:200px}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-video{background-color:#1c1c1c;height:40vh;min-height:200px;position:relative}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-video .micromag-media-gallery-partials-media-metadata-player{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-audio{bottom:0;position:absolute;width:100%}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-audio .micromag-media-gallery-partials-media-metadata-player{display:block;margin:0 auto}
3
+ .micromag-media-gallery-partials-media-metadata-container{position:relative}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-image{display:block;margin:0 auto;max-height:40vh;max-width:100%;min-height:200px}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-video{background-color:#1c1c1c;height:40vh;min-height:200px;position:relative}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-video .micromag-media-gallery-partials-media-metadata-player{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-audio{background-color:#1c1c1c;bottom:0;position:absolute;width:100%}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-audio .micromag-media-gallery-partials-media-metadata-player{display:block;margin:0 auto}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-placeholder{background-color:#1c1c1c;height:60px}
4
4
  .micromag-media-gallery-forms-dropdown-section-container .micromag-media-gallery-forms-dropdown-section-dropdownToggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-media-gallery-forms-dropdown-section-container{padding-top:5px;position:relative}.micromag-media-gallery-forms-dropdown-section-container .micromag-media-gallery-forms-dropdown-section-label{display:inline-block;font-weight:400;padding-right:5px}.micromag-media-gallery-forms-dropdown-section-container .micromag-media-gallery-forms-dropdown-section-dropdownToggle{font-weight:700}.micromag-media-gallery-forms-dropdown-section-container .micromag-media-gallery-forms-dropdown-section-dropdown{left:auto;right:0}
5
5
  .micromag-media-gallery-forms-search-container{position:relative}.micromag-media-gallery-forms-search-container .micromag-media-gallery-forms-search-input{background-color:#2b2b2b}.micromag-media-gallery-forms-search-container .micromag-media-gallery-forms-search-input.micromag-media-gallery-forms-search-active,.micromag-media-gallery-forms-search-container .micromag-media-gallery-forms-search-input:focus{background-color:#2b2b2b!important;-webkit-box-shadow:none!important;box-shadow:none!important;color:#fff!important;outline:none!important}.micromag-media-gallery-forms-search-container .micromag-media-gallery-forms-search-input ::-webkit-input-placeholder{background-color:#2b2b2b!important}.micromag-media-gallery-forms-search-container .micromag-media-gallery-forms-search-input ::-moz-placeholder{background-color:#2b2b2b!important}.micromag-media-gallery-forms-search-container .micromag-media-gallery-forms-search-input :-ms-input-placeholder{background-color:#2b2b2b!important}.micromag-media-gallery-forms-search-container .micromag-media-gallery-forms-search-input ::-ms-input-placeholder{background-color:#2b2b2b!important}.micromag-media-gallery-forms-search-container .micromag-media-gallery-forms-search-input ::placeholder{background-color:#2b2b2b!important}
6
6
  .micromag-media-gallery-forms-tag-dropdown-container .micromag-media-gallery-forms-tag-dropdown-select{font-size:.8rem;padding:.25rem .5rem}
@@ -8,5 +8,5 @@
8
8
  .micromag-media-gallery-forms-search-filters-container{left:0;overflow:hidden;padding:0 10px;position:absolute;right:0;width:100%;z-index:1}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-closeBtn{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;border:0!important;display:-ms-flexbox;display:flex;height:24px;justify-content:center;position:absolute;right:10px;top:0;-webkit-transition:opacity .15s ease-out;-o-transition:opacity .15s ease-out;transition:opacity .15s ease-out;width:24px}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-closeBtn:hover{opacity:.8}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-section{border-bottom:1px solid #adadad}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-section:last-child{border-bottom:0}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-title{color:#adadad;font-size:.7875rem;font-weight:600;text-transform:uppercase}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-tags{overflow-x:auto}
9
9
  .micromag-media-gallery-buttons-close-container{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}
10
10
  .micromag-media-gallery-partials-active-filters-container .micromag-media-gallery-partials-active-filters-heading{-ms-flex-pack:justify;display:-ms-flexbox;display:flex;justify-content:space-between}.micromag-media-gallery-partials-active-filters-container .micromag-media-gallery-partials-active-filters-title{color:#adadad;font-size:.7875rem;font-weight:600;text-transform:uppercase}.micromag-media-gallery-partials-active-filters-container .micromag-media-gallery-partials-active-filters-resetButton{font-size:.7875rem;margin-left:5px;outline:none}.micromag-media-gallery-partials-active-filters-container .micromag-media-gallery-partials-active-filters-activeTag{margin-right:5px;margin-top:5px}
11
- .micromag-media-gallery-partials-navbar-container{max-width:100%;max-width:320px;padding:.5rem;position:relative}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-inner{-ms-flex-align:start;-ms-flex-pack:center;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:center;width:100%}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-mediaPreview{display:block;margin-right:5px;width:100px}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-mediaPreview img{display:block;width:100%}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-mediaLabel{display:block;min-width:0}
11
+ .micromag-media-gallery-partials-navbar-container{max-width:100%;max-width:320px;padding:.5rem;position:relative}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-inner{-ms-flex-align:start;-ms-flex-pack:center;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:center;width:100%}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-mediaPreview{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;display:block;justify-content:center;margin-right:5px;width:80px}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-mediaPreview img{display:block;max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-mediaPreview .micromag-media-gallery-partials-navbar-thumbnail{margin-right:0!important}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-mediaLabel{display:block;min-width:0}
12
12
  .micromag-media-gallery-container .micromag-media-gallery-mediaMetadata,.micromag-media-gallery-container.micromag-media-gallery-metadataOpened .micromag-media-gallery-gallery{left:0;position:absolute;top:0;width:100%}.micromag-media-gallery-container{position:relative}.micromag-media-gallery-container .micromag-media-gallery-content{overflow:hidden;position:relative;width:100%}.micromag-media-gallery-container .micromag-media-gallery-gallery,.micromag-media-gallery-container .micromag-media-gallery-mediaMetadata{-webkit-transition:-webkit-transform .2s ease-out;transition:-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out;transition:transform .2s ease-out;transition:transform .2s ease-out,-webkit-transform .2s ease-out}.micromag-media-gallery-container .micromag-media-gallery-mediaMetadata{-webkit-transform:translate(100%);-ms-transform:translate(100%);transform:translate(100%)}.micromag-media-gallery-container .micromag-media-gallery-loading{display:block;margin:.5rem auto}.micromag-media-gallery-container.micromag-media-gallery-metadataOpened .micromag-media-gallery-gallery{-webkit-transform:translate(-100%);-ms-transform:translate(-100%);transform:translate(-100%)}.micromag-media-gallery-container.micromag-media-gallery-metadataOpened .micromag-media-gallery-mediaMetadata{position:static;-webkit-transform:translate(0);-ms-transform:translate(0);transform:translate(0);width:auto}
package/es/index.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
2
2
  import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
3
- import _objectSpread from '@babel/runtime/helpers/objectSpread2';
4
3
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
5
4
  import classNames from 'classnames';
6
5
  import isArray from 'lodash/isArray';
@@ -20,6 +19,7 @@ import { faTimesCircle } from '@fortawesome/free-solid-svg-icons/faTimesCircle';
20
19
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
21
20
  import uniqBy from 'lodash/uniqBy';
22
21
  import prettyBytes from 'pretty-bytes';
22
+ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
23
23
  import { faChevronLeft } from '@fortawesome/free-solid-svg-icons/faChevronLeft';
24
24
  import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
25
25
  import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
@@ -204,12 +204,13 @@ function Gallery(_ref) {
204
204
  Gallery.propTypes = propTypes$a;
205
205
  Gallery.defaultProps = defaultProps$a;
206
206
 
207
- var styles$9 = {"container":"micromag-media-gallery-partials-media-metadata-container","image":"micromag-media-gallery-partials-media-metadata-image","video":"micromag-media-gallery-partials-media-metadata-video","player":"micromag-media-gallery-partials-media-metadata-player","audio":"micromag-media-gallery-partials-media-metadata-audio"};
207
+ var styles$9 = {"container":"micromag-media-gallery-partials-media-metadata-container","image":"micromag-media-gallery-partials-media-metadata-image","video":"micromag-media-gallery-partials-media-metadata-video","player":"micromag-media-gallery-partials-media-metadata-player","audio":"micromag-media-gallery-partials-media-metadata-audio","placeholder":"micromag-media-gallery-partials-media-metadata-placeholder"};
208
208
 
209
209
  var propTypes$9 = {
210
210
  media: PropTypes.media,
211
211
  tags: PropTypes.tags,
212
212
  onClickClose: PropTypes$1.func,
213
+ onClickSave: PropTypes$1.func,
213
214
  onClickDelete: PropTypes$1.func,
214
215
  className: PropTypes$1.string
215
216
  };
@@ -217,6 +218,7 @@ var defaultProps$9 = {
217
218
  media: null,
218
219
  tags: [],
219
220
  onClickClose: null,
221
+ onClickSave: null,
220
222
  onClickDelete: null,
221
223
  className: null
222
224
  };
@@ -224,6 +226,7 @@ function MediaMetadata(_ref) {
224
226
  var media = _ref.media,
225
227
  allTags = _ref.tags,
226
228
  onClickClose = _ref.onClickClose,
229
+ onClickSave = _ref.onClickSave,
227
230
  onClickDelete = _ref.onClickDelete,
228
231
  className = _ref.className;
229
232
  var _ref2 = media || {},
@@ -317,31 +320,49 @@ function MediaMetadata(_ref) {
317
320
  }).then(function () {
318
321
  setChanged(false);
319
322
  setSaveState(null);
320
- if (onClickClose !== null) {
321
- onClickClose();
323
+ if (onClickSave !== null) {
324
+ onClickSave();
322
325
  }
323
326
  })["catch"](function () {
324
327
  setSaveState(false);
325
328
  });
326
- }, [mediaId, name, tags, description, metadata, update, onClickClose, setChanged, setSaveState]);
329
+ }, [mediaId, name, tags, description, metadata, update, onClickSave, onClickClose, setChanged, setSaveState]);
327
330
  var _useState11 = useState(null),
328
331
  _useState12 = _slicedToArray(_useState11, 2),
329
332
  deletedState = _useState12[0],
330
333
  setDeletedState = _useState12[1];
334
+ var _useState13 = useState(null),
335
+ _useState14 = _slicedToArray(_useState13, 2),
336
+ confirmation = _useState14[0],
337
+ setConfirmation = _useState14[1];
331
338
  useEffect(function () {
332
339
  setDeletedState(null);
333
- }, [mediaId]);
340
+ setConfirmation(null);
341
+ }, [mediaId, setDeletedState, setConfirmation]);
334
342
  var onDelete = useCallback(function () {
335
- return deleteMedia(mediaId).then(function () {
336
- setChanged(false);
337
- setDeletedState(true);
338
- if (onClickDelete !== null) {
339
- onClickDelete(mediaId);
343
+ return deleteMedia(mediaId, confirmation !== null).then(function (response) {
344
+ var _ref7 = response || {},
345
+ state = _ref7.state,
346
+ _ref7$items = _ref7.items,
347
+ items = _ref7$items === void 0 ? [] : _ref7$items;
348
+ if (state === 'needs_confirmation') {
349
+ setConfirmation(items);
350
+ } else {
351
+ setChanged(false);
352
+ setDeletedState(true);
353
+ setConfirmation(null);
354
+ if (onClickDelete !== null) {
355
+ onClickDelete(mediaId);
356
+ }
340
357
  }
341
358
  })["catch"](function () {
342
359
  setDeletedState(false);
343
360
  });
344
- }, [mediaId, deleteMedia, onClickClose]);
361
+ }, [mediaId, confirmation, deleteMedia, onClickClose, setDeletedState, setConfirmation]);
362
+ var onCancelDelete = useCallback(function () {
363
+ setConfirmation(null);
364
+ setDeletedState(null);
365
+ }, [setConfirmation, setDeletedState]);
345
366
  useEffect(function () {
346
367
  if (media !== null) {
347
368
  setTags(mediaTags);
@@ -373,11 +394,13 @@ function MediaMetadata(_ref) {
373
394
  className: styles$9.player,
374
395
  controls: true,
375
396
  src: url
376
- })) : null, type !== 'video' ? /*#__PURE__*/React.createElement("img", {
397
+ })) : null, type !== 'video' && thumbnail !== null ? /*#__PURE__*/React.createElement("img", {
377
398
  src: thumbnail,
378
399
  className: styles$9.image,
379
400
  alt: filename
380
- }) : null), /*#__PURE__*/React.createElement("div", {
401
+ }) : /*#__PURE__*/React.createElement("div", {
402
+ className: styles$9.placeholder
403
+ })), /*#__PURE__*/React.createElement("div", {
381
404
  className: "p-2"
382
405
  }, /*#__PURE__*/React.createElement("div", {
383
406
  className: "tags mb-4"
@@ -555,17 +578,56 @@ function MediaMetadata(_ref) {
555
578
  className: "col"
556
579
  }, /*#__PURE__*/React.createElement("small", null, user.name)))) : null), /*#__PURE__*/React.createElement("div", {
557
580
  className: "py-3"
581
+ }, confirmation !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
582
+ className: "pt-1 text-danger"
583
+ }, /*#__PURE__*/React.createElement(FormattedMessage, {
584
+ id: "2FD6tj",
585
+ defaultMessage: [{
586
+ "type": 0,
587
+ "value": "This media is used by the following documents:"
588
+ }]
589
+ })), /*#__PURE__*/React.createElement("ul", null, confirmation.map(function (it) {
590
+ return /*#__PURE__*/React.createElement("li", {
591
+ className: "text-danger"
592
+ }, it);
593
+ })), /*#__PURE__*/React.createElement("p", {
594
+ className: "pt-1 text-danger"
595
+ }, /*#__PURE__*/React.createElement(FormattedMessage, {
596
+ id: "wy2g+x",
597
+ defaultMessage: [{
598
+ "type": 0,
599
+ "value": "Are you sure you want to continue?"
600
+ }]
601
+ }))) : null, /*#__PURE__*/React.createElement("div", {
602
+ className: "d-flex"
558
603
  }, /*#__PURE__*/React.createElement(Button, {
604
+ className: "me-2",
559
605
  theme: "danger",
560
606
  outline: true,
561
607
  onClick: onDelete
562
- }, /*#__PURE__*/React.createElement(FormattedMessage, {
608
+ }, confirmation !== null ? /*#__PURE__*/React.createElement(FormattedMessage, {
609
+ id: "rkn2jO",
610
+ defaultMessage: [{
611
+ "type": 0,
612
+ "value": "Confirm and delete media"
613
+ }]
614
+ }) : /*#__PURE__*/React.createElement(FormattedMessage, {
563
615
  id: "/KQ87r",
564
616
  defaultMessage: [{
565
617
  "type": 0,
566
618
  "value": "Delete media"
567
619
  }]
568
- })), deletedState === false ? /*#__PURE__*/React.createElement("p", {
620
+ })), confirmation !== null ? /*#__PURE__*/React.createElement(Button, {
621
+ theme: "primary",
622
+ outline: true,
623
+ onClick: onCancelDelete
624
+ }, /*#__PURE__*/React.createElement(FormattedMessage, {
625
+ id: "Xb6r3F",
626
+ defaultMessage: [{
627
+ "type": 0,
628
+ "value": "Cancel"
629
+ }]
630
+ })) : null), deletedState === false ? /*#__PURE__*/React.createElement("p", {
569
631
  className: "pt-1 text-danger"
570
632
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
571
633
  id: "rqbRV2",
@@ -1234,7 +1296,7 @@ function ActiveFilters(_ref) {
1234
1296
  ActiveFilters.propTypes = propTypes$2;
1235
1297
  ActiveFilters.defaultProps = defaultProps$2;
1236
1298
 
1237
- var styles$1 = {"container":"micromag-media-gallery-partials-navbar-container","inner":"micromag-media-gallery-partials-navbar-inner","mediaPreview":"micromag-media-gallery-partials-navbar-mediaPreview","mediaLabel":"micromag-media-gallery-partials-navbar-mediaLabel"};
1299
+ var styles$1 = {"container":"micromag-media-gallery-partials-navbar-container","inner":"micromag-media-gallery-partials-navbar-inner","mediaPreview":"micromag-media-gallery-partials-navbar-mediaPreview","thumbnail":"micromag-media-gallery-partials-navbar-thumbnail","mediaLabel":"micromag-media-gallery-partials-navbar-mediaLabel"};
1238
1300
 
1239
1301
  var propTypes$1 = {
1240
1302
  types: PropTypes$1.arrayOf(PropTypes$1.string),
@@ -1445,19 +1507,18 @@ function Navbar(_ref) {
1445
1507
  }, /*#__PURE__*/React.createElement("div", {
1446
1508
  className: classNames([styles$1.inner])
1447
1509
  }, media === null ? /*#__PURE__*/React.createElement("div", {
1448
- className: classNames(['list-group-item rounded w-100 mw-100 navbar-text d-flex align-items-center justify-content-between mb-2', {
1449
- 'border border-dark py-1 px-1': selectedMedia !== null
1510
+ className: classNames(['list-group-item rounded w-100 mw-100 navbar-text mb-2', {
1511
+ 'border border-dark bg-dark py-2 px-2': selectedMedia !== null
1450
1512
  }])
1451
- }, selectedMedia !== null ? /*#__PURE__*/React.createElement(Button, {
1452
- className: classNames([styles$1.mediaLabel, 'd-flex px-0 py-0 me-1 align-items-center border-0']),
1453
- onClick: function onClick() {
1454
- return onClickItemInfo(selectedMedia);
1455
- },
1456
- theme: "primary",
1457
- outline: true
1513
+ }, selectedMedia !== null ? /*#__PURE__*/React.createElement("div", {
1514
+ className: ""
1515
+ }, /*#__PURE__*/React.createElement("div", {
1516
+ className: "d-flex align-items-center mb-2 overflow-hidden"
1458
1517
  }, /*#__PURE__*/React.createElement(Media, {
1459
1518
  className: styles$1.mediaPreview,
1460
- thumbnail: selectedMedia === null || selectedMedia === void 0 ? void 0 : selectedMedia.thumbnail_url
1519
+ thumbnailClassName: styles$1.thumbnail,
1520
+ thumbnail: selectedMedia === null || selectedMedia === void 0 ? void 0 : selectedMedia.thumbnail_url,
1521
+ thumbnailAlign: "center"
1461
1522
  }), /*#__PURE__*/React.createElement("span", {
1462
1523
  className: classNames([styles$1.mediaLabel, 'd-inline-block', 'text-truncate', 'mx-1', 'me-2'])
1463
1524
  }, selectedMedia.name || /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -1466,36 +1527,64 @@ function Navbar(_ref) {
1466
1527
  "type": 0,
1467
1528
  "value": "[no title]"
1468
1529
  }]
1469
- }))) : /*#__PURE__*/React.createElement(Button, {
1470
- className: "w-100",
1471
- theme: "primary",
1530
+ }))), /*#__PURE__*/React.createElement("div", {
1531
+ className: "d-flex w-100 align-content-center justify-content-between"
1532
+ }, /*#__PURE__*/React.createElement(Button, {
1533
+ onClick: function onClick() {
1534
+ return onClickItemInfo(selectedMedia);
1535
+ },
1536
+ theme: "secondary",
1537
+ size: "sm",
1538
+ iconPosition: "right",
1472
1539
  icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
1473
- icon: faPlus
1540
+ icon: faInfoCircle
1474
1541
  }),
1475
- onClick: onClickAdd,
1542
+ outline: true
1543
+ }, /*#__PURE__*/React.createElement(FormattedMessage, {
1544
+ id: "iCf/MP",
1545
+ defaultMessage: [{
1546
+ "type": 0,
1547
+ "value": "Edit"
1548
+ }]
1549
+ })), /*#__PURE__*/React.createElement(Button, {
1550
+ theme: "secondary",
1551
+ size: "sm",
1552
+ outline: true,
1553
+ iconPosition: "right",
1554
+ icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
1555
+ icon: faTimes
1556
+ }),
1557
+ onClick: onClickRemove,
1476
1558
  title: intl.formatMessage({
1477
- id: "Tt4jN1",
1559
+ id: "UG3SXh",
1478
1560
  defaultMessage: [{
1479
1561
  "type": 0,
1480
- "value": "Add"
1562
+ "value": "Remove"
1481
1563
  }]
1482
1564
  })
1483
- }, /*#__PURE__*/React.createElement("span", {
1484
- className: "ps-2"
1485
- }, uploadMessage)), selectedMedia === null ? null : /*#__PURE__*/React.createElement(Button, {
1565
+ }, /*#__PURE__*/React.createElement(FormattedMessage, {
1566
+ id: "8TbpT7",
1567
+ defaultMessage: [{
1568
+ "type": 0,
1569
+ "value": "Remove"
1570
+ }]
1571
+ })))) : /*#__PURE__*/React.createElement(Button, {
1572
+ className: "w-100",
1486
1573
  theme: "primary",
1487
1574
  icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
1488
- icon: faTimes
1575
+ icon: faPlus
1489
1576
  }),
1490
- onClick: onClickRemove,
1577
+ onClick: onClickAdd,
1491
1578
  title: intl.formatMessage({
1492
- id: "UG3SXh",
1579
+ id: "Tt4jN1",
1493
1580
  defaultMessage: [{
1494
1581
  "type": 0,
1495
- "value": "Remove"
1582
+ "value": "Add"
1496
1583
  }]
1497
1584
  })
1498
- })) : null, !withoutSource && media === null && sources !== null && sources.length > 1 ? /*#__PURE__*/React.createElement("div", {
1585
+ }, /*#__PURE__*/React.createElement("span", {
1586
+ className: "ps-2"
1587
+ }, uploadMessage))) : null, !withoutSource && media === null && sources !== null && sources.length > 1 ? /*#__PURE__*/React.createElement("div", {
1499
1588
  className: "mb-2 d-flex w-100 align-items-center flex-nowrap"
1500
1589
  }, /*#__PURE__*/React.createElement(DropdownSection, {
1501
1590
  items: sources,
@@ -1626,34 +1715,39 @@ function MediaGallery(_ref) {
1626
1715
  }, 500);
1627
1716
  setFiltersValue(value);
1628
1717
  }, [setFiltersValue, setQueryValue, throttle]);
1718
+ var _useState5 = useState(initialMedias),
1719
+ _useState6 = _slicedToArray(_useState5, 2),
1720
+ defaultItems = _useState6[0],
1721
+ setDefaultItems = _useState6[1];
1629
1722
 
1630
1723
  // Items
1631
- var _useMedias = useMedias(queryValue, 1, 30, _objectSpread({}, initialMedias !== null ? {
1632
- items: initialMedias
1633
- } : null)),
1634
- loadedMedias = _useMedias.allMedias,
1724
+ var _useMedias = useMedias(queryValue, 1, 30, {
1725
+ pages: defaultItems
1726
+ }),
1727
+ loadedMedias = _useMedias.items,
1635
1728
  _useMedias$loading = _useMedias.loading,
1636
1729
  loading = _useMedias$loading === void 0 ? false : _useMedias$loading,
1637
1730
  _useMedias$loadNextPa = _useMedias.loadNextPage,
1638
1731
  loadNextPage = _useMedias$loadNextPa === void 0 ? null : _useMedias$loadNextPa,
1639
1732
  _useMedias$allLoaded = _useMedias.allLoaded,
1640
- allLoaded = _useMedias$allLoaded === void 0 ? false : _useMedias$allLoaded;
1733
+ allLoaded = _useMedias$allLoaded === void 0 ? false : _useMedias$allLoaded,
1734
+ reset = _useMedias.reset;
1641
1735
 
1642
1736
  // Temporary type filter
1643
- var _useState5 = useState([]),
1644
- _useState6 = _slicedToArray(_useState5, 2),
1645
- addedMedias = _useState6[0],
1646
- setAddedMedias = _useState6[1];
1737
+ var _useState7 = useState([]),
1738
+ _useState8 = _slicedToArray(_useState7, 2),
1739
+ addedMedias = _useState8[0],
1740
+ setAddedMedias = _useState8[1];
1647
1741
  var medias = useMemo(function () {
1648
1742
  var allMedias = [].concat(_toConsumableArray(addedMedias), _toConsumableArray(loadedMedias || []));
1649
1743
  return allMedias.length > 0 ? allMedias : null;
1650
1744
  }, [loadedMedias, addedMedias]);
1651
1745
 
1652
1746
  // Medias
1653
- var _useState7 = useState(null),
1654
- _useState8 = _slicedToArray(_useState7, 2),
1655
- metadataMedia = _useState8[0],
1656
- setMetadataMedia = _useState8[1];
1747
+ var _useState9 = useState(null),
1748
+ _useState10 = _slicedToArray(_useState9, 2),
1749
+ metadataMedia = _useState10[0],
1750
+ setMetadataMedia = _useState10[1];
1657
1751
  var onClickItem = useCallback(function (media) {
1658
1752
  var _ref3 = media || {},
1659
1753
  _ref3$id = _ref3.id,
@@ -1676,18 +1770,15 @@ function MediaGallery(_ref) {
1676
1770
  onClickMedia(null);
1677
1771
  }
1678
1772
  }, [isPicker, setMetadataMedia, onClickMedia]);
1679
- var refresh = useCallback(function () {
1680
- // TODO: refactor useItems to enable this
1681
- // setPageNumber(1);
1682
- // setQueryValue({ ...defaultFilters, ...queryValue });
1683
- }, [defaultFilters, queryValue, setQueryValue]);
1684
1773
  var onClickItemInfo = useCallback(function (media) {
1685
1774
  return setMetadataMedia(media);
1686
1775
  }, [setMetadataMedia]);
1687
1776
  var onMetadataClickClose = useCallback(function () {
1688
1777
  setMetadataMedia(null);
1689
- refresh();
1690
- }, [refresh, setMetadataMedia]);
1778
+ }, [setMetadataMedia]);
1779
+ var onMetadataClickSave = useCallback(function () {
1780
+ reset();
1781
+ }, [reset]);
1691
1782
  var onMetadataClickDelete = useCallback(function () {
1692
1783
  var mediaId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
1693
1784
  var _ref5 = selectedMedia || {},
@@ -1695,33 +1786,25 @@ function MediaGallery(_ref) {
1695
1786
  selectedId = _ref5$id === void 0 ? null : _ref5$id;
1696
1787
  if (mediaId !== null && mediaId === selectedId && onClickMedia !== null) {
1697
1788
  onClickMedia(null);
1698
- } else {
1699
- setMetadataMedia(null);
1700
1789
  }
1701
- refresh();
1702
- }, [refresh, setMetadataMedia, selectedMedia]);
1790
+ setMetadataMedia(null);
1791
+ reset();
1792
+ }, [setMetadataMedia, selectedMedia]);
1703
1793
 
1704
- // console.log(loadedMedias);
1705
1794
  // Navigation
1706
1795
  var onClickBack = useCallback(function () {
1707
- return setMetadataMedia(null);
1708
- }, [setMetadataMedia]);
1709
-
1710
- // Reset all filters except source
1711
- // const onClickCancel = useCallback(
1712
- // () => setFiltersValue({ ...defaultFilters, source: filtersValue.source || null }),
1713
- // [defaultFilters, filtersValue, setFiltersValue],
1714
- // );
1796
+ setMetadataMedia(null);
1797
+ }, [setMetadataMedia, setDefaultItems, setQueryValue]);
1715
1798
 
1716
1799
  // Upload modal
1717
- var _useState9 = useState(false),
1718
- _useState10 = _slicedToArray(_useState9, 2),
1719
- uploading = _useState10[0],
1720
- setUploading = _useState10[1];
1721
1800
  var _useState11 = useState(false),
1722
1801
  _useState12 = _slicedToArray(_useState11, 2),
1723
- uploadModalOpened = _useState12[0],
1724
- setUploadModalOpened = _useState12[1];
1802
+ uploading = _useState12[0],
1803
+ setUploading = _useState12[1];
1804
+ var _useState13 = useState(false),
1805
+ _useState14 = _slicedToArray(_useState13, 2),
1806
+ uploadModalOpened = _useState14[0],
1807
+ setUploadModalOpened = _useState14[1];
1725
1808
  var _useMediaCreate = useMediaCreate(),
1726
1809
  createMedia = _useMediaCreate.create;
1727
1810
  var onClickAdd = useCallback(function () {
@@ -1792,6 +1875,7 @@ function MediaGallery(_ref) {
1792
1875
  media: metadataMedia,
1793
1876
  tags: tags,
1794
1877
  onClickClose: onMetadataClickClose,
1878
+ onClickSave: onMetadataClickSave,
1795
1879
  onClickDelete: onMetadataClickDelete
1796
1880
  }))), /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(UploadModal, {
1797
1881
  type: type === 'video' ? videoTypes : type,
package/lib/index.js CHANGED
@@ -2,7 +2,6 @@
2
2
 
3
3
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
4
4
  var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
5
- var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
6
5
  var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
7
6
  var classNames = require('classnames');
8
7
  var isArray = require('lodash/isArray');
@@ -22,6 +21,7 @@ var faTimesCircle = require('@fortawesome/free-solid-svg-icons/faTimesCircle');
22
21
  var reactFontawesome = require('@fortawesome/react-fontawesome');
23
22
  var uniqBy = require('lodash/uniqBy');
24
23
  var prettyBytes = require('pretty-bytes');
24
+ var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
25
25
  var faChevronLeft = require('@fortawesome/free-solid-svg-icons/faChevronLeft');
26
26
  var faPlus = require('@fortawesome/free-solid-svg-icons/faPlus');
27
27
  var faTimes = require('@fortawesome/free-solid-svg-icons/faTimes');
@@ -33,7 +33,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
33
33
 
34
34
  var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
35
35
  var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
36
- var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
37
36
  var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
38
37
  var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
39
38
  var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);
@@ -41,6 +40,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
41
40
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
42
41
  var uniqBy__default = /*#__PURE__*/_interopDefaultLegacy(uniqBy);
43
42
  var prettyBytes__default = /*#__PURE__*/_interopDefaultLegacy(prettyBytes);
43
+ var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
44
44
  var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
45
45
 
46
46
  var middleEllipsis = function middleEllipsis(string, maxLength) {
@@ -220,12 +220,13 @@ function Gallery(_ref) {
220
220
  Gallery.propTypes = propTypes$a;
221
221
  Gallery.defaultProps = defaultProps$a;
222
222
 
223
- var styles$9 = {"container":"micromag-media-gallery-partials-media-metadata-container","image":"micromag-media-gallery-partials-media-metadata-image","video":"micromag-media-gallery-partials-media-metadata-video","player":"micromag-media-gallery-partials-media-metadata-player","audio":"micromag-media-gallery-partials-media-metadata-audio"};
223
+ var styles$9 = {"container":"micromag-media-gallery-partials-media-metadata-container","image":"micromag-media-gallery-partials-media-metadata-image","video":"micromag-media-gallery-partials-media-metadata-video","player":"micromag-media-gallery-partials-media-metadata-player","audio":"micromag-media-gallery-partials-media-metadata-audio","placeholder":"micromag-media-gallery-partials-media-metadata-placeholder"};
224
224
 
225
225
  var propTypes$9 = {
226
226
  media: core.PropTypes.media,
227
227
  tags: core.PropTypes.tags,
228
228
  onClickClose: PropTypes__default["default"].func,
229
+ onClickSave: PropTypes__default["default"].func,
229
230
  onClickDelete: PropTypes__default["default"].func,
230
231
  className: PropTypes__default["default"].string
231
232
  };
@@ -233,6 +234,7 @@ var defaultProps$9 = {
233
234
  media: null,
234
235
  tags: [],
235
236
  onClickClose: null,
237
+ onClickSave: null,
236
238
  onClickDelete: null,
237
239
  className: null
238
240
  };
@@ -240,6 +242,7 @@ function MediaMetadata(_ref) {
240
242
  var media = _ref.media,
241
243
  allTags = _ref.tags,
242
244
  onClickClose = _ref.onClickClose,
245
+ onClickSave = _ref.onClickSave,
243
246
  onClickDelete = _ref.onClickDelete,
244
247
  className = _ref.className;
245
248
  var _ref2 = media || {},
@@ -333,31 +336,49 @@ function MediaMetadata(_ref) {
333
336
  }).then(function () {
334
337
  setChanged(false);
335
338
  setSaveState(null);
336
- if (onClickClose !== null) {
337
- onClickClose();
339
+ if (onClickSave !== null) {
340
+ onClickSave();
338
341
  }
339
342
  })["catch"](function () {
340
343
  setSaveState(false);
341
344
  });
342
- }, [mediaId, name, tags, description, metadata, update, onClickClose, setChanged, setSaveState]);
345
+ }, [mediaId, name, tags, description, metadata, update, onClickSave, onClickClose, setChanged, setSaveState]);
343
346
  var _useState11 = React.useState(null),
344
347
  _useState12 = _slicedToArray__default["default"](_useState11, 2),
345
348
  deletedState = _useState12[0],
346
349
  setDeletedState = _useState12[1];
350
+ var _useState13 = React.useState(null),
351
+ _useState14 = _slicedToArray__default["default"](_useState13, 2),
352
+ confirmation = _useState14[0],
353
+ setConfirmation = _useState14[1];
347
354
  React.useEffect(function () {
348
355
  setDeletedState(null);
349
- }, [mediaId]);
356
+ setConfirmation(null);
357
+ }, [mediaId, setDeletedState, setConfirmation]);
350
358
  var onDelete = React.useCallback(function () {
351
- return deleteMedia(mediaId).then(function () {
352
- setChanged(false);
353
- setDeletedState(true);
354
- if (onClickDelete !== null) {
355
- onClickDelete(mediaId);
359
+ return deleteMedia(mediaId, confirmation !== null).then(function (response) {
360
+ var _ref7 = response || {},
361
+ state = _ref7.state,
362
+ _ref7$items = _ref7.items,
363
+ items = _ref7$items === void 0 ? [] : _ref7$items;
364
+ if (state === 'needs_confirmation') {
365
+ setConfirmation(items);
366
+ } else {
367
+ setChanged(false);
368
+ setDeletedState(true);
369
+ setConfirmation(null);
370
+ if (onClickDelete !== null) {
371
+ onClickDelete(mediaId);
372
+ }
356
373
  }
357
374
  })["catch"](function () {
358
375
  setDeletedState(false);
359
376
  });
360
- }, [mediaId, deleteMedia, onClickClose]);
377
+ }, [mediaId, confirmation, deleteMedia, onClickClose, setDeletedState, setConfirmation]);
378
+ var onCancelDelete = React.useCallback(function () {
379
+ setConfirmation(null);
380
+ setDeletedState(null);
381
+ }, [setConfirmation, setDeletedState]);
361
382
  React.useEffect(function () {
362
383
  if (media !== null) {
363
384
  setTags(mediaTags);
@@ -389,11 +410,13 @@ function MediaMetadata(_ref) {
389
410
  className: styles$9.player,
390
411
  controls: true,
391
412
  src: url
392
- })) : null, type !== 'video' ? /*#__PURE__*/React__default["default"].createElement("img", {
413
+ })) : null, type !== 'video' && thumbnail !== null ? /*#__PURE__*/React__default["default"].createElement("img", {
393
414
  src: thumbnail,
394
415
  className: styles$9.image,
395
416
  alt: filename
396
- }) : null), /*#__PURE__*/React__default["default"].createElement("div", {
417
+ }) : /*#__PURE__*/React__default["default"].createElement("div", {
418
+ className: styles$9.placeholder
419
+ })), /*#__PURE__*/React__default["default"].createElement("div", {
397
420
  className: "p-2"
398
421
  }, /*#__PURE__*/React__default["default"].createElement("div", {
399
422
  className: "tags mb-4"
@@ -571,17 +594,56 @@ function MediaMetadata(_ref) {
571
594
  className: "col"
572
595
  }, /*#__PURE__*/React__default["default"].createElement("small", null, user.name)))) : null), /*#__PURE__*/React__default["default"].createElement("div", {
573
596
  className: "py-3"
597
+ }, confirmation !== null ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("p", {
598
+ className: "pt-1 text-danger"
599
+ }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
600
+ id: "2FD6tj",
601
+ defaultMessage: [{
602
+ "type": 0,
603
+ "value": "This media is used by the following documents:"
604
+ }]
605
+ })), /*#__PURE__*/React__default["default"].createElement("ul", null, confirmation.map(function (it) {
606
+ return /*#__PURE__*/React__default["default"].createElement("li", {
607
+ className: "text-danger"
608
+ }, it);
609
+ })), /*#__PURE__*/React__default["default"].createElement("p", {
610
+ className: "pt-1 text-danger"
611
+ }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
612
+ id: "wy2g+x",
613
+ defaultMessage: [{
614
+ "type": 0,
615
+ "value": "Are you sure you want to continue?"
616
+ }]
617
+ }))) : null, /*#__PURE__*/React__default["default"].createElement("div", {
618
+ className: "d-flex"
574
619
  }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
620
+ className: "me-2",
575
621
  theme: "danger",
576
622
  outline: true,
577
623
  onClick: onDelete
578
- }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
624
+ }, confirmation !== null ? /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
625
+ id: "rkn2jO",
626
+ defaultMessage: [{
627
+ "type": 0,
628
+ "value": "Confirm and delete media"
629
+ }]
630
+ }) : /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
579
631
  id: "/KQ87r",
580
632
  defaultMessage: [{
581
633
  "type": 0,
582
634
  "value": "Delete media"
583
635
  }]
584
- })), deletedState === false ? /*#__PURE__*/React__default["default"].createElement("p", {
636
+ })), confirmation !== null ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
637
+ theme: "primary",
638
+ outline: true,
639
+ onClick: onCancelDelete
640
+ }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
641
+ id: "Xb6r3F",
642
+ defaultMessage: [{
643
+ "type": 0,
644
+ "value": "Cancel"
645
+ }]
646
+ })) : null), deletedState === false ? /*#__PURE__*/React__default["default"].createElement("p", {
585
647
  className: "pt-1 text-danger"
586
648
  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
587
649
  id: "rqbRV2",
@@ -1250,7 +1312,7 @@ function ActiveFilters(_ref) {
1250
1312
  ActiveFilters.propTypes = propTypes$2;
1251
1313
  ActiveFilters.defaultProps = defaultProps$2;
1252
1314
 
1253
- var styles$1 = {"container":"micromag-media-gallery-partials-navbar-container","inner":"micromag-media-gallery-partials-navbar-inner","mediaPreview":"micromag-media-gallery-partials-navbar-mediaPreview","mediaLabel":"micromag-media-gallery-partials-navbar-mediaLabel"};
1315
+ var styles$1 = {"container":"micromag-media-gallery-partials-navbar-container","inner":"micromag-media-gallery-partials-navbar-inner","mediaPreview":"micromag-media-gallery-partials-navbar-mediaPreview","thumbnail":"micromag-media-gallery-partials-navbar-thumbnail","mediaLabel":"micromag-media-gallery-partials-navbar-mediaLabel"};
1254
1316
 
1255
1317
  var propTypes$1 = {
1256
1318
  types: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
@@ -1461,19 +1523,18 @@ function Navbar(_ref) {
1461
1523
  }, /*#__PURE__*/React__default["default"].createElement("div", {
1462
1524
  className: classNames__default["default"]([styles$1.inner])
1463
1525
  }, media === null ? /*#__PURE__*/React__default["default"].createElement("div", {
1464
- className: classNames__default["default"](['list-group-item rounded w-100 mw-100 navbar-text d-flex align-items-center justify-content-between mb-2', {
1465
- 'border border-dark py-1 px-1': selectedMedia !== null
1526
+ className: classNames__default["default"](['list-group-item rounded w-100 mw-100 navbar-text mb-2', {
1527
+ 'border border-dark bg-dark py-2 px-2': selectedMedia !== null
1466
1528
  }])
1467
- }, selectedMedia !== null ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
1468
- className: classNames__default["default"]([styles$1.mediaLabel, 'd-flex px-0 py-0 me-1 align-items-center border-0']),
1469
- onClick: function onClick() {
1470
- return onClickItemInfo(selectedMedia);
1471
- },
1472
- theme: "primary",
1473
- outline: true
1529
+ }, selectedMedia !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
1530
+ className: ""
1531
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
1532
+ className: "d-flex align-items-center mb-2 overflow-hidden"
1474
1533
  }, /*#__PURE__*/React__default["default"].createElement(components.Media, {
1475
1534
  className: styles$1.mediaPreview,
1476
- thumbnail: selectedMedia === null || selectedMedia === void 0 ? void 0 : selectedMedia.thumbnail_url
1535
+ thumbnailClassName: styles$1.thumbnail,
1536
+ thumbnail: selectedMedia === null || selectedMedia === void 0 ? void 0 : selectedMedia.thumbnail_url,
1537
+ thumbnailAlign: "center"
1477
1538
  }), /*#__PURE__*/React__default["default"].createElement("span", {
1478
1539
  className: classNames__default["default"]([styles$1.mediaLabel, 'd-inline-block', 'text-truncate', 'mx-1', 'me-2'])
1479
1540
  }, selectedMedia.name || /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
@@ -1482,36 +1543,64 @@ function Navbar(_ref) {
1482
1543
  "type": 0,
1483
1544
  "value": "[no title]"
1484
1545
  }]
1485
- }))) : /*#__PURE__*/React__default["default"].createElement(components.Button, {
1486
- className: "w-100",
1487
- theme: "primary",
1546
+ }))), /*#__PURE__*/React__default["default"].createElement("div", {
1547
+ className: "d-flex w-100 align-content-center justify-content-between"
1548
+ }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
1549
+ onClick: function onClick() {
1550
+ return onClickItemInfo(selectedMedia);
1551
+ },
1552
+ theme: "secondary",
1553
+ size: "sm",
1554
+ iconPosition: "right",
1488
1555
  icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
1489
- icon: faPlus.faPlus
1556
+ icon: faInfoCircle.faInfoCircle
1490
1557
  }),
1491
- onClick: onClickAdd,
1558
+ outline: true
1559
+ }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1560
+ id: "iCf/MP",
1561
+ defaultMessage: [{
1562
+ "type": 0,
1563
+ "value": "Edit"
1564
+ }]
1565
+ })), /*#__PURE__*/React__default["default"].createElement(components.Button, {
1566
+ theme: "secondary",
1567
+ size: "sm",
1568
+ outline: true,
1569
+ iconPosition: "right",
1570
+ icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
1571
+ icon: faTimes.faTimes
1572
+ }),
1573
+ onClick: onClickRemove,
1492
1574
  title: intl.formatMessage({
1493
- id: "Tt4jN1",
1575
+ id: "UG3SXh",
1494
1576
  defaultMessage: [{
1495
1577
  "type": 0,
1496
- "value": "Add"
1578
+ "value": "Remove"
1497
1579
  }]
1498
1580
  })
1499
- }, /*#__PURE__*/React__default["default"].createElement("span", {
1500
- className: "ps-2"
1501
- }, uploadMessage)), selectedMedia === null ? null : /*#__PURE__*/React__default["default"].createElement(components.Button, {
1581
+ }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1582
+ id: "8TbpT7",
1583
+ defaultMessage: [{
1584
+ "type": 0,
1585
+ "value": "Remove"
1586
+ }]
1587
+ })))) : /*#__PURE__*/React__default["default"].createElement(components.Button, {
1588
+ className: "w-100",
1502
1589
  theme: "primary",
1503
1590
  icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
1504
- icon: faTimes.faTimes
1591
+ icon: faPlus.faPlus
1505
1592
  }),
1506
- onClick: onClickRemove,
1593
+ onClick: onClickAdd,
1507
1594
  title: intl.formatMessage({
1508
- id: "UG3SXh",
1595
+ id: "Tt4jN1",
1509
1596
  defaultMessage: [{
1510
1597
  "type": 0,
1511
- "value": "Remove"
1598
+ "value": "Add"
1512
1599
  }]
1513
1600
  })
1514
- })) : null, !withoutSource && media === null && sources !== null && sources.length > 1 ? /*#__PURE__*/React__default["default"].createElement("div", {
1601
+ }, /*#__PURE__*/React__default["default"].createElement("span", {
1602
+ className: "ps-2"
1603
+ }, uploadMessage))) : null, !withoutSource && media === null && sources !== null && sources.length > 1 ? /*#__PURE__*/React__default["default"].createElement("div", {
1515
1604
  className: "mb-2 d-flex w-100 align-items-center flex-nowrap"
1516
1605
  }, /*#__PURE__*/React__default["default"].createElement(DropdownSection, {
1517
1606
  items: sources,
@@ -1642,34 +1731,39 @@ function MediaGallery(_ref) {
1642
1731
  }, 500);
1643
1732
  setFiltersValue(value);
1644
1733
  }, [setFiltersValue, setQueryValue, throttle]);
1734
+ var _useState5 = React.useState(initialMedias),
1735
+ _useState6 = _slicedToArray__default["default"](_useState5, 2),
1736
+ defaultItems = _useState6[0],
1737
+ setDefaultItems = _useState6[1];
1645
1738
 
1646
1739
  // Items
1647
- var _useMedias = data.useMedias(queryValue, 1, 30, _objectSpread__default["default"]({}, initialMedias !== null ? {
1648
- items: initialMedias
1649
- } : null)),
1650
- loadedMedias = _useMedias.allMedias,
1740
+ var _useMedias = data.useMedias(queryValue, 1, 30, {
1741
+ pages: defaultItems
1742
+ }),
1743
+ loadedMedias = _useMedias.items,
1651
1744
  _useMedias$loading = _useMedias.loading,
1652
1745
  loading = _useMedias$loading === void 0 ? false : _useMedias$loading,
1653
1746
  _useMedias$loadNextPa = _useMedias.loadNextPage,
1654
1747
  loadNextPage = _useMedias$loadNextPa === void 0 ? null : _useMedias$loadNextPa,
1655
1748
  _useMedias$allLoaded = _useMedias.allLoaded,
1656
- allLoaded = _useMedias$allLoaded === void 0 ? false : _useMedias$allLoaded;
1749
+ allLoaded = _useMedias$allLoaded === void 0 ? false : _useMedias$allLoaded,
1750
+ reset = _useMedias.reset;
1657
1751
 
1658
1752
  // Temporary type filter
1659
- var _useState5 = React.useState([]),
1660
- _useState6 = _slicedToArray__default["default"](_useState5, 2),
1661
- addedMedias = _useState6[0],
1662
- setAddedMedias = _useState6[1];
1753
+ var _useState7 = React.useState([]),
1754
+ _useState8 = _slicedToArray__default["default"](_useState7, 2),
1755
+ addedMedias = _useState8[0],
1756
+ setAddedMedias = _useState8[1];
1663
1757
  var medias = React.useMemo(function () {
1664
1758
  var allMedias = [].concat(_toConsumableArray__default["default"](addedMedias), _toConsumableArray__default["default"](loadedMedias || []));
1665
1759
  return allMedias.length > 0 ? allMedias : null;
1666
1760
  }, [loadedMedias, addedMedias]);
1667
1761
 
1668
1762
  // Medias
1669
- var _useState7 = React.useState(null),
1670
- _useState8 = _slicedToArray__default["default"](_useState7, 2),
1671
- metadataMedia = _useState8[0],
1672
- setMetadataMedia = _useState8[1];
1763
+ var _useState9 = React.useState(null),
1764
+ _useState10 = _slicedToArray__default["default"](_useState9, 2),
1765
+ metadataMedia = _useState10[0],
1766
+ setMetadataMedia = _useState10[1];
1673
1767
  var onClickItem = React.useCallback(function (media) {
1674
1768
  var _ref3 = media || {},
1675
1769
  _ref3$id = _ref3.id,
@@ -1692,18 +1786,15 @@ function MediaGallery(_ref) {
1692
1786
  onClickMedia(null);
1693
1787
  }
1694
1788
  }, [isPicker, setMetadataMedia, onClickMedia]);
1695
- var refresh = React.useCallback(function () {
1696
- // TODO: refactor useItems to enable this
1697
- // setPageNumber(1);
1698
- // setQueryValue({ ...defaultFilters, ...queryValue });
1699
- }, [defaultFilters, queryValue, setQueryValue]);
1700
1789
  var onClickItemInfo = React.useCallback(function (media) {
1701
1790
  return setMetadataMedia(media);
1702
1791
  }, [setMetadataMedia]);
1703
1792
  var onMetadataClickClose = React.useCallback(function () {
1704
1793
  setMetadataMedia(null);
1705
- refresh();
1706
- }, [refresh, setMetadataMedia]);
1794
+ }, [setMetadataMedia]);
1795
+ var onMetadataClickSave = React.useCallback(function () {
1796
+ reset();
1797
+ }, [reset]);
1707
1798
  var onMetadataClickDelete = React.useCallback(function () {
1708
1799
  var mediaId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
1709
1800
  var _ref5 = selectedMedia || {},
@@ -1711,33 +1802,25 @@ function MediaGallery(_ref) {
1711
1802
  selectedId = _ref5$id === void 0 ? null : _ref5$id;
1712
1803
  if (mediaId !== null && mediaId === selectedId && onClickMedia !== null) {
1713
1804
  onClickMedia(null);
1714
- } else {
1715
- setMetadataMedia(null);
1716
1805
  }
1717
- refresh();
1718
- }, [refresh, setMetadataMedia, selectedMedia]);
1806
+ setMetadataMedia(null);
1807
+ reset();
1808
+ }, [setMetadataMedia, selectedMedia]);
1719
1809
 
1720
- // console.log(loadedMedias);
1721
1810
  // Navigation
1722
1811
  var onClickBack = React.useCallback(function () {
1723
- return setMetadataMedia(null);
1724
- }, [setMetadataMedia]);
1725
-
1726
- // Reset all filters except source
1727
- // const onClickCancel = useCallback(
1728
- // () => setFiltersValue({ ...defaultFilters, source: filtersValue.source || null }),
1729
- // [defaultFilters, filtersValue, setFiltersValue],
1730
- // );
1812
+ setMetadataMedia(null);
1813
+ }, [setMetadataMedia, setDefaultItems, setQueryValue]);
1731
1814
 
1732
1815
  // Upload modal
1733
- var _useState9 = React.useState(false),
1734
- _useState10 = _slicedToArray__default["default"](_useState9, 2),
1735
- uploading = _useState10[0],
1736
- setUploading = _useState10[1];
1737
1816
  var _useState11 = React.useState(false),
1738
1817
  _useState12 = _slicedToArray__default["default"](_useState11, 2),
1739
- uploadModalOpened = _useState12[0],
1740
- setUploadModalOpened = _useState12[1];
1818
+ uploading = _useState12[0],
1819
+ setUploading = _useState12[1];
1820
+ var _useState13 = React.useState(false),
1821
+ _useState14 = _slicedToArray__default["default"](_useState13, 2),
1822
+ uploadModalOpened = _useState14[0],
1823
+ setUploadModalOpened = _useState14[1];
1741
1824
  var _useMediaCreate = data.useMediaCreate(),
1742
1825
  createMedia = _useMediaCreate.create;
1743
1826
  var onClickAdd = React.useCallback(function () {
@@ -1808,6 +1891,7 @@ function MediaGallery(_ref) {
1808
1891
  media: metadataMedia,
1809
1892
  tags: tags,
1810
1893
  onClickClose: onMetadataClickClose,
1894
+ onClickSave: onMetadataClickSave,
1811
1895
  onClickDelete: onMetadataClickDelete
1812
1896
  }))), /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(components.UploadModal, {
1813
1897
  type: type === 'video' ? videoTypes : type,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/media-gallery",
3
- "version": "0.3.331",
3
+ "version": "0.3.332",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -59,8 +59,8 @@
59
59
  "@fortawesome/fontawesome-svg-core": "^1.2.32",
60
60
  "@fortawesome/free-solid-svg-icons": "^5.15.1",
61
61
  "@fortawesome/react-fontawesome": "^0.1.13",
62
- "@micromag/core": "^0.3.329",
63
- "@micromag/data": "^0.3.329",
62
+ "@micromag/core": "^0.3.332",
63
+ "@micromag/data": "^0.3.332",
64
64
  "bootstrap": "5.2.0-beta1",
65
65
  "change-case": "^4.1.2",
66
66
  "classnames": "^2.2.6",
@@ -73,5 +73,5 @@
73
73
  "publishConfig": {
74
74
  "access": "public"
75
75
  },
76
- "gitHead": "9207986f3af466a62c38ecc9e79cd88f8616668f"
76
+ "gitHead": "61fe137d589629d05127be69b667fc62f8ca1d18"
77
77
  }