@micromag/media-gallery 0.3.331 → 0.3.333

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 +3 -3
  2. package/es/index.js +170 -85
  3. package/lib/index.js +171 -86
  4. package/package.json +4 -4
package/assets/css/styles.css CHANGED
@@ -1,6 +1,6 @@
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}
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-selected{border:1px solid #a13dff}.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:260px;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';
@@ -39,7 +39,7 @@ var middleEllipsis = function middleEllipsis(string, maxLength) {
39
39
  return "".concat(string.substring(0, midpoint - lstrip), "...").concat(string.substring(midpoint + rstrip));
40
40
  };
41
41
 
42
- var styles$b = {"container":"micromag-media-gallery-items-gallery-item-container","imageButton":"micromag-media-gallery-items-gallery-item-imageButton","image":"micromag-media-gallery-items-gallery-item-image","icon":"micromag-media-gallery-items-gallery-item-icon","footer":"micromag-media-gallery-items-gallery-item-footer","label":"micromag-media-gallery-items-gallery-item-label","infoButton":"micromag-media-gallery-items-gallery-item-infoButton","closeButton":"micromag-media-gallery-items-gallery-item-closeButton"};
42
+ var styles$b = {"container":"micromag-media-gallery-items-gallery-item-container","selected":"micromag-media-gallery-items-gallery-item-selected","imageButton":"micromag-media-gallery-items-gallery-item-imageButton","image":"micromag-media-gallery-items-gallery-item-image","icon":"micromag-media-gallery-items-gallery-item-icon","footer":"micromag-media-gallery-items-gallery-item-footer","label":"micromag-media-gallery-items-gallery-item-label","infoButton":"micromag-media-gallery-items-gallery-item-infoButton","closeButton":"micromag-media-gallery-items-gallery-item-closeButton"};
43
43
 
44
44
  var propTypes$b = {
45
45
  item: PropTypes.media,
@@ -62,6 +62,7 @@ var defaultProps$b = {
62
62
  onClickRemove: null
63
63
  };
64
64
  var GalleryItem = function GalleryItem(_ref) {
65
+ var _ref2;
65
66
  var item = _ref.item,
66
67
  width = _ref.width,
67
68
  selected = _ref.selected,
@@ -118,8 +119,8 @@ var GalleryItem = function GalleryItem(_ref) {
118
119
  }, /*#__PURE__*/React.createElement("small", null, title), size !== null ? /*#__PURE__*/React.createElement("small", {
119
120
  className: "text-muted ms-1"
120
121
  }, size) : null)),
121
- theme: selected ? 'primary' : null,
122
- className: classNames([styles$b.container, _defineProperty({}, className, className !== null)]),
122
+ theme: selected ? null : null,
123
+ className: classNames([styles$b.container, (_ref2 = {}, _defineProperty(_ref2, styles$b.selected, selected), _defineProperty(_ref2, className, className !== null), _ref2)]),
123
124
  footerClassName: classNames(['p-1', styles$b.footer]),
124
125
  onClickFooter: onClick
125
126
  });
@@ -174,7 +175,7 @@ function Gallery(_ref) {
174
175
  return items;
175
176
  }, [selectedFirst, selectedItem, items]);
176
177
  return /*#__PURE__*/React.createElement("div", {
177
- className: classNames([styles$a.container, 'p-2', _defineProperty({}, className, className !== null)]),
178
+ className: classNames([styles$a.container, 'p-2', 'pt-0', _defineProperty({}, className, className !== null)]),
178
179
  ref: ref
179
180
  }, /*#__PURE__*/React.createElement("div", {
180
181
  className: classNames(['row', 'mx-n1', 'row-cols-2', {
@@ -204,12 +205,13 @@ function Gallery(_ref) {
204
205
  Gallery.propTypes = propTypes$a;
205
206
  Gallery.defaultProps = defaultProps$a;
206
207
 
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"};
208
+ 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
209
 
209
210
  var propTypes$9 = {
210
211
  media: PropTypes.media,
211
212
  tags: PropTypes.tags,
212
213
  onClickClose: PropTypes$1.func,
214
+ onClickSave: PropTypes$1.func,
213
215
  onClickDelete: PropTypes$1.func,
214
216
  className: PropTypes$1.string
215
217
  };
@@ -217,6 +219,7 @@ var defaultProps$9 = {
217
219
  media: null,
218
220
  tags: [],
219
221
  onClickClose: null,
222
+ onClickSave: null,
220
223
  onClickDelete: null,
221
224
  className: null
222
225
  };
@@ -224,6 +227,7 @@ function MediaMetadata(_ref) {
224
227
  var media = _ref.media,
225
228
  allTags = _ref.tags,
226
229
  onClickClose = _ref.onClickClose,
230
+ onClickSave = _ref.onClickSave,
227
231
  onClickDelete = _ref.onClickDelete,
228
232
  className = _ref.className;
229
233
  var _ref2 = media || {},
@@ -317,31 +321,49 @@ function MediaMetadata(_ref) {
317
321
  }).then(function () {
318
322
  setChanged(false);
319
323
  setSaveState(null);
320
- if (onClickClose !== null) {
321
- onClickClose();
324
+ if (onClickSave !== null) {
325
+ onClickSave();
322
326
  }
323
327
  })["catch"](function () {
324
328
  setSaveState(false);
325
329
  });
326
- }, [mediaId, name, tags, description, metadata, update, onClickClose, setChanged, setSaveState]);
330
+ }, [mediaId, name, tags, description, metadata, update, onClickSave, onClickClose, setChanged, setSaveState]);
327
331
  var _useState11 = useState(null),
328
332
  _useState12 = _slicedToArray(_useState11, 2),
329
333
  deletedState = _useState12[0],
330
334
  setDeletedState = _useState12[1];
335
+ var _useState13 = useState(null),
336
+ _useState14 = _slicedToArray(_useState13, 2),
337
+ confirmation = _useState14[0],
338
+ setConfirmation = _useState14[1];
331
339
  useEffect(function () {
332
340
  setDeletedState(null);
333
- }, [mediaId]);
341
+ setConfirmation(null);
342
+ }, [mediaId, setDeletedState, setConfirmation]);
334
343
  var onDelete = useCallback(function () {
335
- return deleteMedia(mediaId).then(function () {
336
- setChanged(false);
337
- setDeletedState(true);
338
- if (onClickDelete !== null) {
339
- onClickDelete(mediaId);
344
+ return deleteMedia(mediaId, confirmation !== null).then(function (response) {
345
+ var _ref7 = response || {},
346
+ state = _ref7.state,
347
+ _ref7$items = _ref7.items,
348
+ items = _ref7$items === void 0 ? [] : _ref7$items;
349
+ if (state === 'needs_confirmation') {
350
+ setConfirmation(items);
351
+ } else {
352
+ setChanged(false);
353
+ setDeletedState(true);
354
+ setConfirmation(null);
355
+ if (onClickDelete !== null) {
356
+ onClickDelete(mediaId);
357
+ }
340
358
  }
341
359
  })["catch"](function () {
342
360
  setDeletedState(false);
343
361
  });
344
- }, [mediaId, deleteMedia, onClickClose]);
362
+ }, [mediaId, confirmation, deleteMedia, onClickClose, setDeletedState, setConfirmation]);
363
+ var onCancelDelete = useCallback(function () {
364
+ setConfirmation(null);
365
+ setDeletedState(null);
366
+ }, [setConfirmation, setDeletedState]);
345
367
  useEffect(function () {
346
368
  if (media !== null) {
347
369
  setTags(mediaTags);
@@ -373,11 +395,13 @@ function MediaMetadata(_ref) {
373
395
  className: styles$9.player,
374
396
  controls: true,
375
397
  src: url
376
- })) : null, type !== 'video' ? /*#__PURE__*/React.createElement("img", {
398
+ })) : null, type !== 'video' && thumbnail !== null ? /*#__PURE__*/React.createElement("img", {
377
399
  src: thumbnail,
378
400
  className: styles$9.image,
379
401
  alt: filename
380
- }) : null), /*#__PURE__*/React.createElement("div", {
402
+ }) : /*#__PURE__*/React.createElement("div", {
403
+ className: styles$9.placeholder
404
+ })), /*#__PURE__*/React.createElement("div", {
381
405
  className: "p-2"
382
406
  }, /*#__PURE__*/React.createElement("div", {
383
407
  className: "tags mb-4"
@@ -555,17 +579,56 @@ function MediaMetadata(_ref) {
555
579
  className: "col"
556
580
  }, /*#__PURE__*/React.createElement("small", null, user.name)))) : null), /*#__PURE__*/React.createElement("div", {
557
581
  className: "py-3"
582
+ }, confirmation !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
583
+ className: "pt-1 text-danger"
584
+ }, /*#__PURE__*/React.createElement(FormattedMessage, {
585
+ id: "2FD6tj",
586
+ defaultMessage: [{
587
+ "type": 0,
588
+ "value": "This media is used by the following documents:"
589
+ }]
590
+ })), /*#__PURE__*/React.createElement("ul", null, confirmation.map(function (it) {
591
+ return /*#__PURE__*/React.createElement("li", {
592
+ className: "text-danger"
593
+ }, it);
594
+ })), /*#__PURE__*/React.createElement("p", {
595
+ className: "pt-1 text-danger"
596
+ }, /*#__PURE__*/React.createElement(FormattedMessage, {
597
+ id: "wy2g+x",
598
+ defaultMessage: [{
599
+ "type": 0,
600
+ "value": "Are you sure you want to continue?"
601
+ }]
602
+ }))) : null, /*#__PURE__*/React.createElement("div", {
603
+ className: "d-flex"
558
604
  }, /*#__PURE__*/React.createElement(Button, {
605
+ className: "me-2",
559
606
  theme: "danger",
560
607
  outline: true,
561
608
  onClick: onDelete
562
- }, /*#__PURE__*/React.createElement(FormattedMessage, {
609
+ }, confirmation !== null ? /*#__PURE__*/React.createElement(FormattedMessage, {
610
+ id: "/KQ87r",
611
+ defaultMessage: [{
612
+ "type": 0,
613
+ "value": "Delete media"
614
+ }]
615
+ }) : /*#__PURE__*/React.createElement(FormattedMessage, {
563
616
  id: "/KQ87r",
564
617
  defaultMessage: [{
565
618
  "type": 0,
566
619
  "value": "Delete media"
567
620
  }]
568
- })), deletedState === false ? /*#__PURE__*/React.createElement("p", {
621
+ })), confirmation !== null ? /*#__PURE__*/React.createElement(Button, {
622
+ theme: "primary",
623
+ outline: true,
624
+ onClick: onCancelDelete
625
+ }, /*#__PURE__*/React.createElement(FormattedMessage, {
626
+ id: "Xb6r3F",
627
+ defaultMessage: [{
628
+ "type": 0,
629
+ "value": "Cancel"
630
+ }]
631
+ })) : null), deletedState === false ? /*#__PURE__*/React.createElement("p", {
569
632
  className: "pt-1 text-danger"
570
633
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
571
634
  id: "rqbRV2",
@@ -1234,7 +1297,7 @@ function ActiveFilters(_ref) {
1234
1297
  ActiveFilters.propTypes = propTypes$2;
1235
1298
  ActiveFilters.defaultProps = defaultProps$2;
1236
1299
 
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"};
1300
+ 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
1301
 
1239
1302
  var propTypes$1 = {
1240
1303
  types: PropTypes$1.arrayOf(PropTypes$1.string),
@@ -1445,19 +1508,18 @@ function Navbar(_ref) {
1445
1508
  }, /*#__PURE__*/React.createElement("div", {
1446
1509
  className: classNames([styles$1.inner])
1447
1510
  }, 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
1511
+ className: classNames(['list-group-item rounded w-100 mw-100 navbar-text mb-2', {
1512
+ 'border border-primary bg-dark py-2 px-2': selectedMedia !== null
1450
1513
  }])
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
1514
+ }, selectedMedia !== null ? /*#__PURE__*/React.createElement("div", {
1515
+ className: ""
1516
+ }, /*#__PURE__*/React.createElement("div", {
1517
+ className: "d-flex align-items-center mb-2 overflow-hidden"
1458
1518
  }, /*#__PURE__*/React.createElement(Media, {
1459
1519
  className: styles$1.mediaPreview,
1460
- thumbnail: selectedMedia === null || selectedMedia === void 0 ? void 0 : selectedMedia.thumbnail_url
1520
+ thumbnailClassName: styles$1.thumbnail,
1521
+ thumbnail: selectedMedia === null || selectedMedia === void 0 ? void 0 : selectedMedia.thumbnail_url,
1522
+ thumbnailAlign: "center"
1461
1523
  }), /*#__PURE__*/React.createElement("span", {
1462
1524
  className: classNames([styles$1.mediaLabel, 'd-inline-block', 'text-truncate', 'mx-1', 'me-2'])
1463
1525
  }, selectedMedia.name || /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -1466,36 +1528,64 @@ function Navbar(_ref) {
1466
1528
  "type": 0,
1467
1529
  "value": "[no title]"
1468
1530
  }]
1469
- }))) : /*#__PURE__*/React.createElement(Button, {
1470
- className: "w-100",
1471
- theme: "primary",
1531
+ }))), /*#__PURE__*/React.createElement("div", {
1532
+ className: "d-flex w-100 align-content-center justify-content-between"
1533
+ }, /*#__PURE__*/React.createElement(Button, {
1534
+ onClick: function onClick() {
1535
+ return onClickItemInfo(selectedMedia);
1536
+ },
1537
+ theme: "secondary",
1538
+ size: "sm",
1539
+ iconPosition: "right",
1472
1540
  icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
1473
- icon: faPlus
1541
+ icon: faInfoCircle
1474
1542
  }),
1475
- onClick: onClickAdd,
1543
+ outline: true
1544
+ }, /*#__PURE__*/React.createElement(FormattedMessage, {
1545
+ id: "iCf/MP",
1546
+ defaultMessage: [{
1547
+ "type": 0,
1548
+ "value": "Edit"
1549
+ }]
1550
+ })), /*#__PURE__*/React.createElement(Button, {
1551
+ theme: "secondary",
1552
+ size: "sm",
1553
+ outline: true,
1554
+ iconPosition: "right",
1555
+ icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
1556
+ icon: faTimes
1557
+ }),
1558
+ onClick: onClickRemove,
1476
1559
  title: intl.formatMessage({
1477
- id: "Tt4jN1",
1560
+ id: "UG3SXh",
1478
1561
  defaultMessage: [{
1479
1562
  "type": 0,
1480
- "value": "Add"
1563
+ "value": "Remove"
1481
1564
  }]
1482
1565
  })
1483
- }, /*#__PURE__*/React.createElement("span", {
1484
- className: "ps-2"
1485
- }, uploadMessage)), selectedMedia === null ? null : /*#__PURE__*/React.createElement(Button, {
1566
+ }, /*#__PURE__*/React.createElement(FormattedMessage, {
1567
+ id: "8TbpT7",
1568
+ defaultMessage: [{
1569
+ "type": 0,
1570
+ "value": "Remove"
1571
+ }]
1572
+ })))) : /*#__PURE__*/React.createElement(Button, {
1573
+ className: "w-100",
1486
1574
  theme: "primary",
1487
1575
  icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
1488
- icon: faTimes
1576
+ icon: faPlus
1489
1577
  }),
1490
- onClick: onClickRemove,
1578
+ onClick: onClickAdd,
1491
1579
  title: intl.formatMessage({
1492
- id: "UG3SXh",
1580
+ id: "Tt4jN1",
1493
1581
  defaultMessage: [{
1494
1582
  "type": 0,
1495
- "value": "Remove"
1583
+ "value": "Add"
1496
1584
  }]
1497
1585
  })
1498
- })) : null, !withoutSource && media === null && sources !== null && sources.length > 1 ? /*#__PURE__*/React.createElement("div", {
1586
+ }, /*#__PURE__*/React.createElement("span", {
1587
+ className: "ps-2"
1588
+ }, uploadMessage))) : null, !withoutSource && media === null && sources !== null && sources.length > 1 ? /*#__PURE__*/React.createElement("div", {
1499
1589
  className: "mb-2 d-flex w-100 align-items-center flex-nowrap"
1500
1590
  }, /*#__PURE__*/React.createElement(DropdownSection, {
1501
1591
  items: sources,
@@ -1626,34 +1716,39 @@ function MediaGallery(_ref) {
1626
1716
  }, 500);
1627
1717
  setFiltersValue(value);
1628
1718
  }, [setFiltersValue, setQueryValue, throttle]);
1719
+ var _useState5 = useState(initialMedias),
1720
+ _useState6 = _slicedToArray(_useState5, 2),
1721
+ defaultItems = _useState6[0],
1722
+ setDefaultItems = _useState6[1];
1629
1723
 
1630
1724
  // Items
1631
- var _useMedias = useMedias(queryValue, 1, 30, _objectSpread({}, initialMedias !== null ? {
1632
- items: initialMedias
1633
- } : null)),
1634
- loadedMedias = _useMedias.allMedias,
1725
+ var _useMedias = useMedias(queryValue, 1, 30, {
1726
+ pages: defaultItems
1727
+ }),
1728
+ loadedMedias = _useMedias.items,
1635
1729
  _useMedias$loading = _useMedias.loading,
1636
1730
  loading = _useMedias$loading === void 0 ? false : _useMedias$loading,
1637
1731
  _useMedias$loadNextPa = _useMedias.loadNextPage,
1638
1732
  loadNextPage = _useMedias$loadNextPa === void 0 ? null : _useMedias$loadNextPa,
1639
1733
  _useMedias$allLoaded = _useMedias.allLoaded,
1640
- allLoaded = _useMedias$allLoaded === void 0 ? false : _useMedias$allLoaded;
1734
+ allLoaded = _useMedias$allLoaded === void 0 ? false : _useMedias$allLoaded,
1735
+ reset = _useMedias.reset;
1641
1736
 
1642
1737
  // Temporary type filter
1643
- var _useState5 = useState([]),
1644
- _useState6 = _slicedToArray(_useState5, 2),
1645
- addedMedias = _useState6[0],
1646
- setAddedMedias = _useState6[1];
1738
+ var _useState7 = useState([]),
1739
+ _useState8 = _slicedToArray(_useState7, 2),
1740
+ addedMedias = _useState8[0],
1741
+ setAddedMedias = _useState8[1];
1647
1742
  var medias = useMemo(function () {
1648
1743
  var allMedias = [].concat(_toConsumableArray(addedMedias), _toConsumableArray(loadedMedias || []));
1649
1744
  return allMedias.length > 0 ? allMedias : null;
1650
1745
  }, [loadedMedias, addedMedias]);
1651
1746
 
1652
1747
  // Medias
1653
- var _useState7 = useState(null),
1654
- _useState8 = _slicedToArray(_useState7, 2),
1655
- metadataMedia = _useState8[0],
1656
- setMetadataMedia = _useState8[1];
1748
+ var _useState9 = useState(null),
1749
+ _useState10 = _slicedToArray(_useState9, 2),
1750
+ metadataMedia = _useState10[0],
1751
+ setMetadataMedia = _useState10[1];
1657
1752
  var onClickItem = useCallback(function (media) {
1658
1753
  var _ref3 = media || {},
1659
1754
  _ref3$id = _ref3.id,
@@ -1676,18 +1771,15 @@ function MediaGallery(_ref) {
1676
1771
  onClickMedia(null);
1677
1772
  }
1678
1773
  }, [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
1774
  var onClickItemInfo = useCallback(function (media) {
1685
1775
  return setMetadataMedia(media);
1686
1776
  }, [setMetadataMedia]);
1687
1777
  var onMetadataClickClose = useCallback(function () {
1688
1778
  setMetadataMedia(null);
1689
- refresh();
1690
- }, [refresh, setMetadataMedia]);
1779
+ }, [setMetadataMedia]);
1780
+ var onMetadataClickSave = useCallback(function () {
1781
+ reset();
1782
+ }, [reset]);
1691
1783
  var onMetadataClickDelete = useCallback(function () {
1692
1784
  var mediaId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
1693
1785
  var _ref5 = selectedMedia || {},
@@ -1695,33 +1787,25 @@ function MediaGallery(_ref) {
1695
1787
  selectedId = _ref5$id === void 0 ? null : _ref5$id;
1696
1788
  if (mediaId !== null && mediaId === selectedId && onClickMedia !== null) {
1697
1789
  onClickMedia(null);
1698
- } else {
1699
- setMetadataMedia(null);
1700
1790
  }
1701
- refresh();
1702
- }, [refresh, setMetadataMedia, selectedMedia]);
1791
+ setMetadataMedia(null);
1792
+ reset();
1793
+ }, [setMetadataMedia, selectedMedia]);
1703
1794
 
1704
- // console.log(loadedMedias);
1705
1795
  // Navigation
1706
1796
  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
- // );
1797
+ setMetadataMedia(null);
1798
+ }, [setMetadataMedia, setDefaultItems, setQueryValue]);
1715
1799
 
1716
1800
  // Upload modal
1717
- var _useState9 = useState(false),
1718
- _useState10 = _slicedToArray(_useState9, 2),
1719
- uploading = _useState10[0],
1720
- setUploading = _useState10[1];
1721
1801
  var _useState11 = useState(false),
1722
1802
  _useState12 = _slicedToArray(_useState11, 2),
1723
- uploadModalOpened = _useState12[0],
1724
- setUploadModalOpened = _useState12[1];
1803
+ uploading = _useState12[0],
1804
+ setUploading = _useState12[1];
1805
+ var _useState13 = useState(false),
1806
+ _useState14 = _slicedToArray(_useState13, 2),
1807
+ uploadModalOpened = _useState14[0],
1808
+ setUploadModalOpened = _useState14[1];
1725
1809
  var _useMediaCreate = useMediaCreate(),
1726
1810
  createMedia = _useMediaCreate.create;
1727
1811
  var onClickAdd = useCallback(function () {
@@ -1792,6 +1876,7 @@ function MediaGallery(_ref) {
1792
1876
  media: metadataMedia,
1793
1877
  tags: tags,
1794
1878
  onClickClose: onMetadataClickClose,
1879
+ onClickSave: onMetadataClickSave,
1795
1880
  onClickDelete: onMetadataClickDelete
1796
1881
  }))), /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(UploadModal, {
1797
1882
  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) {
@@ -55,7 +55,7 @@ var middleEllipsis = function middleEllipsis(string, maxLength) {
55
55
  return "".concat(string.substring(0, midpoint - lstrip), "...").concat(string.substring(midpoint + rstrip));
56
56
  };
57
57
 
58
- var styles$b = {"container":"micromag-media-gallery-items-gallery-item-container","imageButton":"micromag-media-gallery-items-gallery-item-imageButton","image":"micromag-media-gallery-items-gallery-item-image","icon":"micromag-media-gallery-items-gallery-item-icon","footer":"micromag-media-gallery-items-gallery-item-footer","label":"micromag-media-gallery-items-gallery-item-label","infoButton":"micromag-media-gallery-items-gallery-item-infoButton","closeButton":"micromag-media-gallery-items-gallery-item-closeButton"};
58
+ var styles$b = {"container":"micromag-media-gallery-items-gallery-item-container","selected":"micromag-media-gallery-items-gallery-item-selected","imageButton":"micromag-media-gallery-items-gallery-item-imageButton","image":"micromag-media-gallery-items-gallery-item-image","icon":"micromag-media-gallery-items-gallery-item-icon","footer":"micromag-media-gallery-items-gallery-item-footer","label":"micromag-media-gallery-items-gallery-item-label","infoButton":"micromag-media-gallery-items-gallery-item-infoButton","closeButton":"micromag-media-gallery-items-gallery-item-closeButton"};
59
59
 
60
60
  var propTypes$b = {
61
61
  item: core.PropTypes.media,
@@ -78,6 +78,7 @@ var defaultProps$b = {
78
78
  onClickRemove: null
79
79
  };
80
80
  var GalleryItem = function GalleryItem(_ref) {
81
+ var _ref2;
81
82
  var item = _ref.item,
82
83
  width = _ref.width,
83
84
  selected = _ref.selected,
@@ -134,8 +135,8 @@ var GalleryItem = function GalleryItem(_ref) {
134
135
  }, /*#__PURE__*/React__default["default"].createElement("small", null, title), size !== null ? /*#__PURE__*/React__default["default"].createElement("small", {
135
136
  className: "text-muted ms-1"
136
137
  }, size) : null)),
137
- theme: selected ? 'primary' : null,
138
- className: classNames__default["default"]([styles$b.container, _defineProperty__default["default"]({}, className, className !== null)]),
138
+ theme: selected ? null : null,
139
+ className: classNames__default["default"]([styles$b.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$b.selected, selected), _defineProperty__default["default"](_ref2, className, className !== null), _ref2)]),
139
140
  footerClassName: classNames__default["default"](['p-1', styles$b.footer]),
140
141
  onClickFooter: onClick
141
142
  });
@@ -190,7 +191,7 @@ function Gallery(_ref) {
190
191
  return items;
191
192
  }, [selectedFirst, selectedItem, items]);
192
193
  return /*#__PURE__*/React__default["default"].createElement("div", {
193
- className: classNames__default["default"]([styles$a.container, 'p-2', _defineProperty__default["default"]({}, className, className !== null)]),
194
+ className: classNames__default["default"]([styles$a.container, 'p-2', 'pt-0', _defineProperty__default["default"]({}, className, className !== null)]),
194
195
  ref: ref
195
196
  }, /*#__PURE__*/React__default["default"].createElement("div", {
196
197
  className: classNames__default["default"](['row', 'mx-n1', 'row-cols-2', {
@@ -220,12 +221,13 @@ function Gallery(_ref) {
220
221
  Gallery.propTypes = propTypes$a;
221
222
  Gallery.defaultProps = defaultProps$a;
222
223
 
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"};
224
+ 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
225
 
225
226
  var propTypes$9 = {
226
227
  media: core.PropTypes.media,
227
228
  tags: core.PropTypes.tags,
228
229
  onClickClose: PropTypes__default["default"].func,
230
+ onClickSave: PropTypes__default["default"].func,
229
231
  onClickDelete: PropTypes__default["default"].func,
230
232
  className: PropTypes__default["default"].string
231
233
  };
@@ -233,6 +235,7 @@ var defaultProps$9 = {
233
235
  media: null,
234
236
  tags: [],
235
237
  onClickClose: null,
238
+ onClickSave: null,
236
239
  onClickDelete: null,
237
240
  className: null
238
241
  };
@@ -240,6 +243,7 @@ function MediaMetadata(_ref) {
240
243
  var media = _ref.media,
241
244
  allTags = _ref.tags,
242
245
  onClickClose = _ref.onClickClose,
246
+ onClickSave = _ref.onClickSave,
243
247
  onClickDelete = _ref.onClickDelete,
244
248
  className = _ref.className;
245
249
  var _ref2 = media || {},
@@ -333,31 +337,49 @@ function MediaMetadata(_ref) {
333
337
  }).then(function () {
334
338
  setChanged(false);
335
339
  setSaveState(null);
336
- if (onClickClose !== null) {
337
- onClickClose();
340
+ if (onClickSave !== null) {
341
+ onClickSave();
338
342
  }
339
343
  })["catch"](function () {
340
344
  setSaveState(false);
341
345
  });
342
- }, [mediaId, name, tags, description, metadata, update, onClickClose, setChanged, setSaveState]);
346
+ }, [mediaId, name, tags, description, metadata, update, onClickSave, onClickClose, setChanged, setSaveState]);
343
347
  var _useState11 = React.useState(null),
344
348
  _useState12 = _slicedToArray__default["default"](_useState11, 2),
345
349
  deletedState = _useState12[0],
346
350
  setDeletedState = _useState12[1];
351
+ var _useState13 = React.useState(null),
352
+ _useState14 = _slicedToArray__default["default"](_useState13, 2),
353
+ confirmation = _useState14[0],
354
+ setConfirmation = _useState14[1];
347
355
  React.useEffect(function () {
348
356
  setDeletedState(null);
349
- }, [mediaId]);
357
+ setConfirmation(null);
358
+ }, [mediaId, setDeletedState, setConfirmation]);
350
359
  var onDelete = React.useCallback(function () {
351
- return deleteMedia(mediaId).then(function () {
352
- setChanged(false);
353
- setDeletedState(true);
354
- if (onClickDelete !== null) {
355
- onClickDelete(mediaId);
360
+ return deleteMedia(mediaId, confirmation !== null).then(function (response) {
361
+ var _ref7 = response || {},
362
+ state = _ref7.state,
363
+ _ref7$items = _ref7.items,
364
+ items = _ref7$items === void 0 ? [] : _ref7$items;
365
+ if (state === 'needs_confirmation') {
366
+ setConfirmation(items);
367
+ } else {
368
+ setChanged(false);
369
+ setDeletedState(true);
370
+ setConfirmation(null);
371
+ if (onClickDelete !== null) {
372
+ onClickDelete(mediaId);
373
+ }
356
374
  }
357
375
  })["catch"](function () {
358
376
  setDeletedState(false);
359
377
  });
360
- }, [mediaId, deleteMedia, onClickClose]);
378
+ }, [mediaId, confirmation, deleteMedia, onClickClose, setDeletedState, setConfirmation]);
379
+ var onCancelDelete = React.useCallback(function () {
380
+ setConfirmation(null);
381
+ setDeletedState(null);
382
+ }, [setConfirmation, setDeletedState]);
361
383
  React.useEffect(function () {
362
384
  if (media !== null) {
363
385
  setTags(mediaTags);
@@ -389,11 +411,13 @@ function MediaMetadata(_ref) {
389
411
  className: styles$9.player,
390
412
  controls: true,
391
413
  src: url
392
- })) : null, type !== 'video' ? /*#__PURE__*/React__default["default"].createElement("img", {
414
+ })) : null, type !== 'video' && thumbnail !== null ? /*#__PURE__*/React__default["default"].createElement("img", {
393
415
  src: thumbnail,
394
416
  className: styles$9.image,
395
417
  alt: filename
396
- }) : null), /*#__PURE__*/React__default["default"].createElement("div", {
418
+ }) : /*#__PURE__*/React__default["default"].createElement("div", {
419
+ className: styles$9.placeholder
420
+ })), /*#__PURE__*/React__default["default"].createElement("div", {
397
421
  className: "p-2"
398
422
  }, /*#__PURE__*/React__default["default"].createElement("div", {
399
423
  className: "tags mb-4"
@@ -571,17 +595,56 @@ function MediaMetadata(_ref) {
571
595
  className: "col"
572
596
  }, /*#__PURE__*/React__default["default"].createElement("small", null, user.name)))) : null), /*#__PURE__*/React__default["default"].createElement("div", {
573
597
  className: "py-3"
598
+ }, confirmation !== null ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("p", {
599
+ className: "pt-1 text-danger"
600
+ }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
601
+ id: "2FD6tj",
602
+ defaultMessage: [{
603
+ "type": 0,
604
+ "value": "This media is used by the following documents:"
605
+ }]
606
+ })), /*#__PURE__*/React__default["default"].createElement("ul", null, confirmation.map(function (it) {
607
+ return /*#__PURE__*/React__default["default"].createElement("li", {
608
+ className: "text-danger"
609
+ }, it);
610
+ })), /*#__PURE__*/React__default["default"].createElement("p", {
611
+ className: "pt-1 text-danger"
612
+ }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
613
+ id: "wy2g+x",
614
+ defaultMessage: [{
615
+ "type": 0,
616
+ "value": "Are you sure you want to continue?"
617
+ }]
618
+ }))) : null, /*#__PURE__*/React__default["default"].createElement("div", {
619
+ className: "d-flex"
574
620
  }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
621
+ className: "me-2",
575
622
  theme: "danger",
576
623
  outline: true,
577
624
  onClick: onDelete
578
- }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
625
+ }, confirmation !== null ? /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
626
+ id: "/KQ87r",
627
+ defaultMessage: [{
628
+ "type": 0,
629
+ "value": "Delete media"
630
+ }]
631
+ }) : /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
579
632
  id: "/KQ87r",
580
633
  defaultMessage: [{
581
634
  "type": 0,
582
635
  "value": "Delete media"
583
636
  }]
584
- })), deletedState === false ? /*#__PURE__*/React__default["default"].createElement("p", {
637
+ })), confirmation !== null ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
638
+ theme: "primary",
639
+ outline: true,
640
+ onClick: onCancelDelete
641
+ }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
642
+ id: "Xb6r3F",
643
+ defaultMessage: [{
644
+ "type": 0,
645
+ "value": "Cancel"
646
+ }]
647
+ })) : null), deletedState === false ? /*#__PURE__*/React__default["default"].createElement("p", {
585
648
  className: "pt-1 text-danger"
586
649
  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
587
650
  id: "rqbRV2",
@@ -1250,7 +1313,7 @@ function ActiveFilters(_ref) {
1250
1313
  ActiveFilters.propTypes = propTypes$2;
1251
1314
  ActiveFilters.defaultProps = defaultProps$2;
1252
1315
 
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"};
1316
+ 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
1317
 
1255
1318
  var propTypes$1 = {
1256
1319
  types: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
@@ -1461,19 +1524,18 @@ function Navbar(_ref) {
1461
1524
  }, /*#__PURE__*/React__default["default"].createElement("div", {
1462
1525
  className: classNames__default["default"]([styles$1.inner])
1463
1526
  }, 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
1527
+ className: classNames__default["default"](['list-group-item rounded w-100 mw-100 navbar-text mb-2', {
1528
+ 'border border-primary bg-dark py-2 px-2': selectedMedia !== null
1466
1529
  }])
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
1530
+ }, selectedMedia !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
1531
+ className: ""
1532
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
1533
+ className: "d-flex align-items-center mb-2 overflow-hidden"
1474
1534
  }, /*#__PURE__*/React__default["default"].createElement(components.Media, {
1475
1535
  className: styles$1.mediaPreview,
1476
- thumbnail: selectedMedia === null || selectedMedia === void 0 ? void 0 : selectedMedia.thumbnail_url
1536
+ thumbnailClassName: styles$1.thumbnail,
1537
+ thumbnail: selectedMedia === null || selectedMedia === void 0 ? void 0 : selectedMedia.thumbnail_url,
1538
+ thumbnailAlign: "center"
1477
1539
  }), /*#__PURE__*/React__default["default"].createElement("span", {
1478
1540
  className: classNames__default["default"]([styles$1.mediaLabel, 'd-inline-block', 'text-truncate', 'mx-1', 'me-2'])
1479
1541
  }, selectedMedia.name || /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
@@ -1482,36 +1544,64 @@ function Navbar(_ref) {
1482
1544
  "type": 0,
1483
1545
  "value": "[no title]"
1484
1546
  }]
1485
- }))) : /*#__PURE__*/React__default["default"].createElement(components.Button, {
1486
- className: "w-100",
1487
- theme: "primary",
1547
+ }))), /*#__PURE__*/React__default["default"].createElement("div", {
1548
+ className: "d-flex w-100 align-content-center justify-content-between"
1549
+ }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
1550
+ onClick: function onClick() {
1551
+ return onClickItemInfo(selectedMedia);
1552
+ },
1553
+ theme: "secondary",
1554
+ size: "sm",
1555
+ iconPosition: "right",
1488
1556
  icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
1489
- icon: faPlus.faPlus
1557
+ icon: faInfoCircle.faInfoCircle
1490
1558
  }),
1491
- onClick: onClickAdd,
1559
+ outline: true
1560
+ }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1561
+ id: "iCf/MP",
1562
+ defaultMessage: [{
1563
+ "type": 0,
1564
+ "value": "Edit"
1565
+ }]
1566
+ })), /*#__PURE__*/React__default["default"].createElement(components.Button, {
1567
+ theme: "secondary",
1568
+ size: "sm",
1569
+ outline: true,
1570
+ iconPosition: "right",
1571
+ icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
1572
+ icon: faTimes.faTimes
1573
+ }),
1574
+ onClick: onClickRemove,
1492
1575
  title: intl.formatMessage({
1493
- id: "Tt4jN1",
1576
+ id: "UG3SXh",
1494
1577
  defaultMessage: [{
1495
1578
  "type": 0,
1496
- "value": "Add"
1579
+ "value": "Remove"
1497
1580
  }]
1498
1581
  })
1499
- }, /*#__PURE__*/React__default["default"].createElement("span", {
1500
- className: "ps-2"
1501
- }, uploadMessage)), selectedMedia === null ? null : /*#__PURE__*/React__default["default"].createElement(components.Button, {
1582
+ }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1583
+ id: "8TbpT7",
1584
+ defaultMessage: [{
1585
+ "type": 0,
1586
+ "value": "Remove"
1587
+ }]
1588
+ })))) : /*#__PURE__*/React__default["default"].createElement(components.Button, {
1589
+ className: "w-100",
1502
1590
  theme: "primary",
1503
1591
  icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
1504
- icon: faTimes.faTimes
1592
+ icon: faPlus.faPlus
1505
1593
  }),
1506
- onClick: onClickRemove,
1594
+ onClick: onClickAdd,
1507
1595
  title: intl.formatMessage({
1508
- id: "UG3SXh",
1596
+ id: "Tt4jN1",
1509
1597
  defaultMessage: [{
1510
1598
  "type": 0,
1511
- "value": "Remove"
1599
+ "value": "Add"
1512
1600
  }]
1513
1601
  })
1514
- })) : null, !withoutSource && media === null && sources !== null && sources.length > 1 ? /*#__PURE__*/React__default["default"].createElement("div", {
1602
+ }, /*#__PURE__*/React__default["default"].createElement("span", {
1603
+ className: "ps-2"
1604
+ }, uploadMessage))) : null, !withoutSource && media === null && sources !== null && sources.length > 1 ? /*#__PURE__*/React__default["default"].createElement("div", {
1515
1605
  className: "mb-2 d-flex w-100 align-items-center flex-nowrap"
1516
1606
  }, /*#__PURE__*/React__default["default"].createElement(DropdownSection, {
1517
1607
  items: sources,
@@ -1642,34 +1732,39 @@ function MediaGallery(_ref) {
1642
1732
  }, 500);
1643
1733
  setFiltersValue(value);
1644
1734
  }, [setFiltersValue, setQueryValue, throttle]);
1735
+ var _useState5 = React.useState(initialMedias),
1736
+ _useState6 = _slicedToArray__default["default"](_useState5, 2),
1737
+ defaultItems = _useState6[0],
1738
+ setDefaultItems = _useState6[1];
1645
1739
 
1646
1740
  // Items
1647
- var _useMedias = data.useMedias(queryValue, 1, 30, _objectSpread__default["default"]({}, initialMedias !== null ? {
1648
- items: initialMedias
1649
- } : null)),
1650
- loadedMedias = _useMedias.allMedias,
1741
+ var _useMedias = data.useMedias(queryValue, 1, 30, {
1742
+ pages: defaultItems
1743
+ }),
1744
+ loadedMedias = _useMedias.items,
1651
1745
  _useMedias$loading = _useMedias.loading,
1652
1746
  loading = _useMedias$loading === void 0 ? false : _useMedias$loading,
1653
1747
  _useMedias$loadNextPa = _useMedias.loadNextPage,
1654
1748
  loadNextPage = _useMedias$loadNextPa === void 0 ? null : _useMedias$loadNextPa,
1655
1749
  _useMedias$allLoaded = _useMedias.allLoaded,
1656
- allLoaded = _useMedias$allLoaded === void 0 ? false : _useMedias$allLoaded;
1750
+ allLoaded = _useMedias$allLoaded === void 0 ? false : _useMedias$allLoaded,
1751
+ reset = _useMedias.reset;
1657
1752
 
1658
1753
  // Temporary type filter
1659
- var _useState5 = React.useState([]),
1660
- _useState6 = _slicedToArray__default["default"](_useState5, 2),
1661
- addedMedias = _useState6[0],
1662
- setAddedMedias = _useState6[1];
1754
+ var _useState7 = React.useState([]),
1755
+ _useState8 = _slicedToArray__default["default"](_useState7, 2),
1756
+ addedMedias = _useState8[0],
1757
+ setAddedMedias = _useState8[1];
1663
1758
  var medias = React.useMemo(function () {
1664
1759
  var allMedias = [].concat(_toConsumableArray__default["default"](addedMedias), _toConsumableArray__default["default"](loadedMedias || []));
1665
1760
  return allMedias.length > 0 ? allMedias : null;
1666
1761
  }, [loadedMedias, addedMedias]);
1667
1762
 
1668
1763
  // Medias
1669
- var _useState7 = React.useState(null),
1670
- _useState8 = _slicedToArray__default["default"](_useState7, 2),
1671
- metadataMedia = _useState8[0],
1672
- setMetadataMedia = _useState8[1];
1764
+ var _useState9 = React.useState(null),
1765
+ _useState10 = _slicedToArray__default["default"](_useState9, 2),
1766
+ metadataMedia = _useState10[0],
1767
+ setMetadataMedia = _useState10[1];
1673
1768
  var onClickItem = React.useCallback(function (media) {
1674
1769
  var _ref3 = media || {},
1675
1770
  _ref3$id = _ref3.id,
@@ -1692,18 +1787,15 @@ function MediaGallery(_ref) {
1692
1787
  onClickMedia(null);
1693
1788
  }
1694
1789
  }, [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
1790
  var onClickItemInfo = React.useCallback(function (media) {
1701
1791
  return setMetadataMedia(media);
1702
1792
  }, [setMetadataMedia]);
1703
1793
  var onMetadataClickClose = React.useCallback(function () {
1704
1794
  setMetadataMedia(null);
1705
- refresh();
1706
- }, [refresh, setMetadataMedia]);
1795
+ }, [setMetadataMedia]);
1796
+ var onMetadataClickSave = React.useCallback(function () {
1797
+ reset();
1798
+ }, [reset]);
1707
1799
  var onMetadataClickDelete = React.useCallback(function () {
1708
1800
  var mediaId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
1709
1801
  var _ref5 = selectedMedia || {},
@@ -1711,33 +1803,25 @@ function MediaGallery(_ref) {
1711
1803
  selectedId = _ref5$id === void 0 ? null : _ref5$id;
1712
1804
  if (mediaId !== null && mediaId === selectedId && onClickMedia !== null) {
1713
1805
  onClickMedia(null);
1714
- } else {
1715
- setMetadataMedia(null);
1716
1806
  }
1717
- refresh();
1718
- }, [refresh, setMetadataMedia, selectedMedia]);
1807
+ setMetadataMedia(null);
1808
+ reset();
1809
+ }, [setMetadataMedia, selectedMedia]);
1719
1810
 
1720
- // console.log(loadedMedias);
1721
1811
  // Navigation
1722
1812
  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
- // );
1813
+ setMetadataMedia(null);
1814
+ }, [setMetadataMedia, setDefaultItems, setQueryValue]);
1731
1815
 
1732
1816
  // Upload modal
1733
- var _useState9 = React.useState(false),
1734
- _useState10 = _slicedToArray__default["default"](_useState9, 2),
1735
- uploading = _useState10[0],
1736
- setUploading = _useState10[1];
1737
1817
  var _useState11 = React.useState(false),
1738
1818
  _useState12 = _slicedToArray__default["default"](_useState11, 2),
1739
- uploadModalOpened = _useState12[0],
1740
- setUploadModalOpened = _useState12[1];
1819
+ uploading = _useState12[0],
1820
+ setUploading = _useState12[1];
1821
+ var _useState13 = React.useState(false),
1822
+ _useState14 = _slicedToArray__default["default"](_useState13, 2),
1823
+ uploadModalOpened = _useState14[0],
1824
+ setUploadModalOpened = _useState14[1];
1741
1825
  var _useMediaCreate = data.useMediaCreate(),
1742
1826
  createMedia = _useMediaCreate.create;
1743
1827
  var onClickAdd = React.useCallback(function () {
@@ -1808,6 +1892,7 @@ function MediaGallery(_ref) {
1808
1892
  media: metadataMedia,
1809
1893
  tags: tags,
1810
1894
  onClickClose: onMetadataClickClose,
1895
+ onClickSave: onMetadataClickSave,
1811
1896
  onClickDelete: onMetadataClickDelete
1812
1897
  }))), /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(components.UploadModal, {
1813
1898
  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.333",
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": "2623c05c1b9db8f5d547b39636cee5782e9bc881"
77
77
  }