@micromag/media-gallery 0.3.330 → 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 +3 -3
  2. package/es/index.js +230 -104
  3. package/lib/index.js +231 -105
  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-closeIcon,.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}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-closeIcon .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-infoButton{left:0}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-closeIcon{pointer-events:none;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-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';
@@ -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","closeIcon":"micromag-media-gallery-items-gallery-item-closeIcon"};
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"};
43
43
 
44
44
  var propTypes$b = {
45
45
  item: PropTypes.media,
@@ -48,7 +48,8 @@ var propTypes$b = {
48
48
  withInfoButton: PropTypes$1.bool,
49
49
  className: PropTypes$1.string,
50
50
  onClick: PropTypes$1.func,
51
- onClickInfo: PropTypes$1.func
51
+ onClickInfo: PropTypes$1.func,
52
+ onClickRemove: PropTypes$1.func
52
53
  };
53
54
  var defaultProps$b = {
54
55
  item: null,
@@ -57,7 +58,8 @@ var defaultProps$b = {
57
58
  withInfoButton: false,
58
59
  className: null,
59
60
  onClick: null,
60
- onClickInfo: null
61
+ onClickInfo: null,
62
+ onClickRemove: null
61
63
  };
62
64
  var GalleryItem = function GalleryItem(_ref) {
63
65
  var item = _ref.item,
@@ -66,7 +68,8 @@ var GalleryItem = function GalleryItem(_ref) {
66
68
  withInfoButton = _ref.withInfoButton,
67
69
  className = _ref.className,
68
70
  onClick = _ref.onClick,
69
- onClickInfo = _ref.onClickInfo;
71
+ onClickInfo = _ref.onClickInfo,
72
+ onClickRemove = _ref.onClickRemove;
70
73
  var type = item.type,
71
74
  _item$thumbnail_url = item.thumbnail_url,
72
75
  thumbnail = _item$thumbnail_url === void 0 ? null : _item$thumbnail_url,
@@ -80,8 +83,8 @@ var GalleryItem = function GalleryItem(_ref) {
80
83
  }
81
84
  return /*#__PURE__*/React.createElement(Card, {
82
85
  image: /*#__PURE__*/React.createElement("button", {
83
- type: "button",
84
86
  className: classNames(['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-start', 'bg-dark', 'text-black', styles$b.imageButton]),
87
+ type: "button",
85
88
  onClick: onClick
86
89
  }, /*#__PURE__*/React.createElement("div", {
87
90
  className: classNames(['card-img-top', styles$b.image]),
@@ -96,8 +99,10 @@ var GalleryItem = function GalleryItem(_ref) {
96
99
  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
97
100
  icon: faInfoCircle,
98
101
  className: styles$b.icon
99
- })) : null, selected ? /*#__PURE__*/React.createElement("div", {
100
- className: classNames(['text-danger', styles$b.closeIcon])
102
+ })) : null, selected ? /*#__PURE__*/React.createElement(Button, {
103
+ className: classNames(['text-danger', styles$b.closeButton]),
104
+ onClick: onClickRemove,
105
+ withoutStyle: true
101
106
  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
102
107
  icon: faTimesCircle,
103
108
  className: styles$b.icon
@@ -132,7 +137,8 @@ var propTypes$a = {
132
137
  selectedFirst: PropTypes$1.bool,
133
138
  className: PropTypes$1.string,
134
139
  onClickItem: PropTypes$1.func,
135
- onClickItemInfo: PropTypes$1.func
140
+ onClickItemInfo: PropTypes$1.func,
141
+ onClickRemoveItem: PropTypes$1.func
136
142
  };
137
143
  var defaultProps$a = {
138
144
  items: null,
@@ -142,7 +148,8 @@ var defaultProps$a = {
142
148
  selectedFirst: false,
143
149
  className: null,
144
150
  onClickItem: null,
145
- onClickItemInfo: null
151
+ onClickItemInfo: null,
152
+ onClickRemoveItem: null
146
153
  };
147
154
  function Gallery(_ref) {
148
155
  var items = _ref.items,
@@ -152,7 +159,8 @@ function Gallery(_ref) {
152
159
  selectedFirst = _ref.selectedFirst,
153
160
  className = _ref.className,
154
161
  onClickItem = _ref.onClickItem,
155
- onClickItemInfo = _ref.onClickItemInfo;
162
+ onClickItemInfo = _ref.onClickItemInfo,
163
+ onClickRemoveItem = _ref.onClickRemoveItem;
156
164
  var _useDimensionObserver = useDimensionObserver(),
157
165
  ref = _useDimensionObserver.ref,
158
166
  width = _useDimensionObserver.width;
@@ -186,6 +194,9 @@ function Gallery(_ref) {
186
194
  onClickInfo: onClickItemInfo !== null ? function () {
187
195
  return onClickItemInfo(item);
188
196
  } : null,
197
+ onClickRemove: onClickRemoveItem !== null ? function () {
198
+ onClickRemoveItem();
199
+ } : null,
189
200
  withInfoButton: withInfoButton
190
201
  }));
191
202
  })));
@@ -193,12 +204,13 @@ function Gallery(_ref) {
193
204
  Gallery.propTypes = propTypes$a;
194
205
  Gallery.defaultProps = defaultProps$a;
195
206
 
196
- 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"};
197
208
 
198
209
  var propTypes$9 = {
199
210
  media: PropTypes.media,
200
211
  tags: PropTypes.tags,
201
212
  onClickClose: PropTypes$1.func,
213
+ onClickSave: PropTypes$1.func,
202
214
  onClickDelete: PropTypes$1.func,
203
215
  className: PropTypes$1.string
204
216
  };
@@ -206,6 +218,7 @@ var defaultProps$9 = {
206
218
  media: null,
207
219
  tags: [],
208
220
  onClickClose: null,
221
+ onClickSave: null,
209
222
  onClickDelete: null,
210
223
  className: null
211
224
  };
@@ -213,6 +226,7 @@ function MediaMetadata(_ref) {
213
226
  var media = _ref.media,
214
227
  allTags = _ref.tags,
215
228
  onClickClose = _ref.onClickClose,
229
+ onClickSave = _ref.onClickSave,
216
230
  onClickDelete = _ref.onClickDelete,
217
231
  className = _ref.className;
218
232
  var _ref2 = media || {},
@@ -294,6 +308,10 @@ function MediaMetadata(_ref) {
294
308
  setDescription(val);
295
309
  setChanged(true);
296
310
  }, [tags, setDescription, setChanged]);
311
+ var _useState9 = useState(null),
312
+ _useState10 = _slicedToArray(_useState9, 2),
313
+ saveState = _useState10[0],
314
+ setSaveState = _useState10[1];
297
315
  var onSave = useCallback(function () {
298
316
  return update(mediaId, {
299
317
  name: name,
@@ -301,29 +319,50 @@ function MediaMetadata(_ref) {
301
319
  description: description
302
320
  }).then(function () {
303
321
  setChanged(false);
304
- if (onClickClose !== null) {
305
- onClickClose();
322
+ setSaveState(null);
323
+ if (onClickSave !== null) {
324
+ onClickSave();
306
325
  }
326
+ })["catch"](function () {
327
+ setSaveState(false);
307
328
  });
308
- }, [mediaId, name, tags, description, metadata, update, onClickClose]);
309
- var _useState9 = useState(null),
310
- _useState10 = _slicedToArray(_useState9, 2),
311
- deletedState = _useState10[0],
312
- setDeletedState = _useState10[1];
329
+ }, [mediaId, name, tags, description, metadata, update, onClickSave, onClickClose, setChanged, setSaveState]);
330
+ var _useState11 = useState(null),
331
+ _useState12 = _slicedToArray(_useState11, 2),
332
+ deletedState = _useState12[0],
333
+ setDeletedState = _useState12[1];
334
+ var _useState13 = useState(null),
335
+ _useState14 = _slicedToArray(_useState13, 2),
336
+ confirmation = _useState14[0],
337
+ setConfirmation = _useState14[1];
313
338
  useEffect(function () {
314
339
  setDeletedState(null);
315
- }, [mediaId]);
340
+ setConfirmation(null);
341
+ }, [mediaId, setDeletedState, setConfirmation]);
316
342
  var onDelete = useCallback(function () {
317
- return deleteMedia(mediaId).then(function () {
318
- setChanged(false);
319
- setDeletedState(true);
320
- if (onClickDelete !== null) {
321
- 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
+ }
322
357
  }
323
358
  })["catch"](function () {
324
359
  setDeletedState(false);
325
360
  });
326
- }, [mediaId, deleteMedia, onClickClose]);
361
+ }, [mediaId, confirmation, deleteMedia, onClickClose, setDeletedState, setConfirmation]);
362
+ var onCancelDelete = useCallback(function () {
363
+ setConfirmation(null);
364
+ setDeletedState(null);
365
+ }, [setConfirmation, setDeletedState]);
327
366
  useEffect(function () {
328
367
  if (media !== null) {
329
368
  setTags(mediaTags);
@@ -355,11 +394,13 @@ function MediaMetadata(_ref) {
355
394
  className: styles$9.player,
356
395
  controls: true,
357
396
  src: url
358
- })) : null, type !== 'video' ? /*#__PURE__*/React.createElement("img", {
397
+ })) : null, type !== 'video' && thumbnail !== null ? /*#__PURE__*/React.createElement("img", {
359
398
  src: thumbnail,
360
399
  className: styles$9.image,
361
400
  alt: filename
362
- }) : null), /*#__PURE__*/React.createElement("div", {
401
+ }) : /*#__PURE__*/React.createElement("div", {
402
+ className: styles$9.placeholder
403
+ })), /*#__PURE__*/React.createElement("div", {
363
404
  className: "p-2"
364
405
  }, /*#__PURE__*/React.createElement("div", {
365
406
  className: "tags mb-4"
@@ -421,6 +462,14 @@ function MediaMetadata(_ref) {
421
462
  "type": 0,
422
463
  "value": "Save"
423
464
  }]
465
+ })) : null, saveState === false ? /*#__PURE__*/React.createElement("p", {
466
+ className: "pt-1 text-danger"
467
+ }, /*#__PURE__*/React.createElement(FormattedMessage, {
468
+ id: "DYjRd/",
469
+ defaultMessage: [{
470
+ "type": 0,
471
+ "value": "Sorry, this media could not be saved."
472
+ }]
424
473
  })) : null), /*#__PURE__*/React.createElement("h6", null, /*#__PURE__*/React.createElement(FormattedMessage, {
425
474
  id: "c9VwT/",
426
475
  defaultMessage: [{
@@ -529,17 +578,56 @@ function MediaMetadata(_ref) {
529
578
  className: "col"
530
579
  }, /*#__PURE__*/React.createElement("small", null, user.name)))) : null), /*#__PURE__*/React.createElement("div", {
531
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"
532
603
  }, /*#__PURE__*/React.createElement(Button, {
604
+ className: "me-2",
533
605
  theme: "danger",
534
606
  outline: true,
535
607
  onClick: onDelete
536
- }, /*#__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, {
537
615
  id: "/KQ87r",
538
616
  defaultMessage: [{
539
617
  "type": 0,
540
618
  "value": "Delete media"
541
619
  }]
542
- })), 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", {
543
631
  className: "pt-1 text-danger"
544
632
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
545
633
  id: "rqbRV2",
@@ -870,10 +958,10 @@ var Search = function Search(_ref) {
870
958
  type: "text",
871
959
  value: value || '',
872
960
  placeholder: intl.formatMessage({
873
- id: "FFBsfJ",
961
+ id: "n/SxMs",
874
962
  defaultMessage: [{
875
963
  "type": 0,
876
- "value": "Search medias..."
964
+ "value": "Search medias"
877
965
  }]
878
966
  }),
879
967
  onChange: onSearchChange,
@@ -1208,7 +1296,7 @@ function ActiveFilters(_ref) {
1208
1296
  ActiveFilters.propTypes = propTypes$2;
1209
1297
  ActiveFilters.defaultProps = defaultProps$2;
1210
1298
 
1211
- 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"};
1212
1300
 
1213
1301
  var propTypes$1 = {
1214
1302
  types: PropTypes$1.arrayOf(PropTypes$1.string),
@@ -1419,19 +1507,18 @@ function Navbar(_ref) {
1419
1507
  }, /*#__PURE__*/React.createElement("div", {
1420
1508
  className: classNames([styles$1.inner])
1421
1509
  }, media === null ? /*#__PURE__*/React.createElement("div", {
1422
- className: classNames(['list-group-item rounded w-100 mw-100 navbar-text d-flex align-items-center justify-content-between mb-2', {
1423
- '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
1424
1512
  }])
1425
- }, selectedMedia !== null ? /*#__PURE__*/React.createElement(Button, {
1426
- className: classNames([styles$1.mediaLabel, 'd-flex px-0 py-0 me-1 align-items-center border-0']),
1427
- onClick: function onClick() {
1428
- return onClickItemInfo(selectedMedia);
1429
- },
1430
- theme: "primary",
1431
- 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"
1432
1517
  }, /*#__PURE__*/React.createElement(Media, {
1433
1518
  className: styles$1.mediaPreview,
1434
- 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"
1435
1522
  }), /*#__PURE__*/React.createElement("span", {
1436
1523
  className: classNames([styles$1.mediaLabel, 'd-inline-block', 'text-truncate', 'mx-1', 'me-2'])
1437
1524
  }, selectedMedia.name || /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -1440,36 +1527,64 @@ function Navbar(_ref) {
1440
1527
  "type": 0,
1441
1528
  "value": "[no title]"
1442
1529
  }]
1443
- }))) : /*#__PURE__*/React.createElement(Button, {
1444
- className: "w-100",
1445
- 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",
1446
1539
  icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
1447
- icon: faPlus
1540
+ icon: faInfoCircle
1448
1541
  }),
1449
- 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,
1450
1558
  title: intl.formatMessage({
1451
- id: "Tt4jN1",
1559
+ id: "UG3SXh",
1452
1560
  defaultMessage: [{
1453
1561
  "type": 0,
1454
- "value": "Add"
1562
+ "value": "Remove"
1455
1563
  }]
1456
1564
  })
1457
- }, /*#__PURE__*/React.createElement("span", {
1458
- className: "ps-2"
1459
- }, 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",
1460
1573
  theme: "primary",
1461
1574
  icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
1462
- icon: faTimes
1575
+ icon: faPlus
1463
1576
  }),
1464
- onClick: onClickRemove,
1577
+ onClick: onClickAdd,
1465
1578
  title: intl.formatMessage({
1466
- id: "UG3SXh",
1579
+ id: "Tt4jN1",
1467
1580
  defaultMessage: [{
1468
1581
  "type": 0,
1469
- "value": "Remove"
1582
+ "value": "Add"
1470
1583
  }]
1471
1584
  })
1472
- })) : 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", {
1473
1588
  className: "mb-2 d-flex w-100 align-items-center flex-nowrap"
1474
1589
  }, /*#__PURE__*/React.createElement(DropdownSection, {
1475
1590
  items: sources,
@@ -1551,7 +1666,7 @@ var defaultProps = {
1551
1666
  onClearMedia: null
1552
1667
  };
1553
1668
  function MediaGallery(_ref) {
1554
- var _ref4;
1669
+ var _ref6;
1555
1670
  var type = _ref.type,
1556
1671
  source = _ref.source,
1557
1672
  isPicker = _ref.isPicker,
@@ -1600,87 +1715,96 @@ function MediaGallery(_ref) {
1600
1715
  }, 500);
1601
1716
  setFiltersValue(value);
1602
1717
  }, [setFiltersValue, setQueryValue, throttle]);
1718
+ var _useState5 = useState(initialMedias),
1719
+ _useState6 = _slicedToArray(_useState5, 2),
1720
+ defaultItems = _useState6[0],
1721
+ setDefaultItems = _useState6[1];
1603
1722
 
1604
1723
  // Items
1605
- var _useMedias = useMedias(queryValue, 1, 30, _objectSpread({}, initialMedias !== null ? {
1606
- items: initialMedias
1607
- } : null)),
1608
- loadedMedias = _useMedias.allMedias,
1724
+ var _useMedias = useMedias(queryValue, 1, 30, {
1725
+ pages: defaultItems
1726
+ }),
1727
+ loadedMedias = _useMedias.items,
1609
1728
  _useMedias$loading = _useMedias.loading,
1610
1729
  loading = _useMedias$loading === void 0 ? false : _useMedias$loading,
1611
1730
  _useMedias$loadNextPa = _useMedias.loadNextPage,
1612
1731
  loadNextPage = _useMedias$loadNextPa === void 0 ? null : _useMedias$loadNextPa,
1613
1732
  _useMedias$allLoaded = _useMedias.allLoaded,
1614
- allLoaded = _useMedias$allLoaded === void 0 ? false : _useMedias$allLoaded;
1733
+ allLoaded = _useMedias$allLoaded === void 0 ? false : _useMedias$allLoaded,
1734
+ reset = _useMedias.reset;
1615
1735
 
1616
1736
  // Temporary type filter
1617
- var _useState5 = useState([]),
1618
- _useState6 = _slicedToArray(_useState5, 2),
1619
- addedMedias = _useState6[0],
1620
- setAddedMedias = _useState6[1];
1737
+ var _useState7 = useState([]),
1738
+ _useState8 = _slicedToArray(_useState7, 2),
1739
+ addedMedias = _useState8[0],
1740
+ setAddedMedias = _useState8[1];
1621
1741
  var medias = useMemo(function () {
1622
1742
  var allMedias = [].concat(_toConsumableArray(addedMedias), _toConsumableArray(loadedMedias || []));
1623
1743
  return allMedias.length > 0 ? allMedias : null;
1624
1744
  }, [loadedMedias, addedMedias]);
1625
1745
 
1626
1746
  // Medias
1627
- var _useState7 = useState(null),
1628
- _useState8 = _slicedToArray(_useState7, 2),
1629
- metadataMedia = _useState8[0],
1630
- setMetadataMedia = _useState8[1];
1747
+ var _useState9 = useState(null),
1748
+ _useState10 = _slicedToArray(_useState9, 2),
1749
+ metadataMedia = _useState10[0],
1750
+ setMetadataMedia = _useState10[1];
1631
1751
  var onClickItem = useCallback(function (media) {
1752
+ var _ref3 = media || {},
1753
+ _ref3$id = _ref3.id,
1754
+ mediaId = _ref3$id === void 0 ? null : _ref3$id;
1755
+ var _ref4 = selectedMedia || {},
1756
+ _ref4$id = _ref4.id,
1757
+ selectedId = _ref4$id === void 0 ? null : _ref4$id;
1758
+ var different = mediaId !== selectedId;
1632
1759
  if (!isPicker) {
1633
1760
  setMetadataMedia(media);
1634
1761
  } else if (onClickMedia !== null) {
1635
- onClickMedia(media);
1762
+ if (different) {
1763
+ onClickMedia(media);
1764
+ }
1765
+ }
1766
+ }, [isPicker, setMetadataMedia, onClickMedia, selectedMedia]);
1767
+ var onClickRemoveItem = useCallback(function () {
1768
+ setMetadataMedia(null);
1769
+ if (onClickMedia !== null) {
1770
+ onClickMedia(null);
1636
1771
  }
1637
1772
  }, [isPicker, setMetadataMedia, onClickMedia]);
1638
- var refresh = useCallback(function () {
1639
- // TODO: refactor useItems to enable this
1640
- // setPageNumber(1);
1641
- // setQueryValue({ ...defaultFilters, ...queryValue });
1642
- }, [defaultFilters, queryValue, setQueryValue]);
1643
1773
  var onClickItemInfo = useCallback(function (media) {
1644
1774
  return setMetadataMedia(media);
1645
1775
  }, [setMetadataMedia]);
1646
1776
  var onMetadataClickClose = useCallback(function () {
1647
1777
  setMetadataMedia(null);
1648
- refresh();
1649
- }, [refresh, setMetadataMedia]);
1778
+ }, [setMetadataMedia]);
1779
+ var onMetadataClickSave = useCallback(function () {
1780
+ reset();
1781
+ }, [reset]);
1650
1782
  var onMetadataClickDelete = useCallback(function () {
1651
1783
  var mediaId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
1652
- var _ref3 = selectedMedia || {},
1653
- _ref3$id = _ref3.id,
1654
- selectedId = _ref3$id === void 0 ? null : _ref3$id;
1784
+ var _ref5 = selectedMedia || {},
1785
+ _ref5$id = _ref5.id,
1786
+ selectedId = _ref5$id === void 0 ? null : _ref5$id;
1655
1787
  if (mediaId !== null && mediaId === selectedId && onClickMedia !== null) {
1656
1788
  onClickMedia(null);
1657
- } else {
1658
- setMetadataMedia(null);
1659
1789
  }
1660
- refresh();
1661
- }, [refresh, setMetadataMedia, selectedMedia]);
1790
+ setMetadataMedia(null);
1791
+ reset();
1792
+ }, [setMetadataMedia, selectedMedia]);
1662
1793
 
1663
- // console.log(loadedMedias);
1664
1794
  // Navigation
1665
1795
  var onClickBack = useCallback(function () {
1666
- return setMetadataMedia(null);
1667
- }, [setMetadataMedia]);
1668
-
1669
- // Reset all filters except source
1670
- // const onClickCancel = useCallback(
1671
- // () => setFiltersValue({ ...defaultFilters, source: filtersValue.source || null }),
1672
- // [defaultFilters, filtersValue, setFiltersValue],
1673
- // );
1796
+ setMetadataMedia(null);
1797
+ }, [setMetadataMedia, setDefaultItems, setQueryValue]);
1674
1798
 
1675
1799
  // Upload modal
1676
- var _useState9 = useState(false),
1677
- _useState10 = _slicedToArray(_useState9, 2),
1678
- uploading = _useState10[0],
1679
- setUploading = _useState10[1];
1680
1800
  var _useState11 = useState(false),
1681
1801
  _useState12 = _slicedToArray(_useState11, 2),
1682
- uploadModalOpened = _useState12[0],
1683
- 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];
1684
1808
  var _useMediaCreate = useMediaCreate(),
1685
1809
  createMedia = _useMediaCreate.create;
1686
1810
  var onClickAdd = useCallback(function () {
@@ -1697,7 +1821,7 @@ function MediaGallery(_ref) {
1697
1821
  return setUploadModalOpened(false);
1698
1822
  }, [setUploadModalOpened]);
1699
1823
  return /*#__PURE__*/React.createElement("div", {
1700
- className: classNames([styles.container, (_ref4 = {}, _defineProperty(_ref4, styles.metadataOpened, metadataMedia !== null), _defineProperty(_ref4, className, className), _ref4)])
1824
+ className: classNames([styles.container, (_ref6 = {}, _defineProperty(_ref6, styles.metadataOpened, metadataMedia !== null), _defineProperty(_ref6, className, className), _ref6)])
1701
1825
  }, /*#__PURE__*/React.createElement(Navbar, {
1702
1826
  types: isArray(type) ? type : [type],
1703
1827
  filters: filtersValue,
@@ -1728,7 +1852,8 @@ function MediaGallery(_ref) {
1728
1852
  withInfoButton: isPicker,
1729
1853
  isSmall: isSmall,
1730
1854
  onClickItem: onClickItem,
1731
- onClickItemInfo: onClickItemInfo
1855
+ onClickItemInfo: onClickItemInfo,
1856
+ onClickRemoveItem: onClickRemoveItem
1732
1857
  }) : null, !allLoaded ? /*#__PURE__*/React.createElement("div", {
1733
1858
  className: "w-100 mb-2"
1734
1859
  }, loading || uploading ? /*#__PURE__*/React.createElement(Spinner, {
@@ -1750,6 +1875,7 @@ function MediaGallery(_ref) {
1750
1875
  media: metadataMedia,
1751
1876
  tags: tags,
1752
1877
  onClickClose: onMetadataClickClose,
1878
+ onClickSave: onMetadataClickSave,
1753
1879
  onClickDelete: onMetadataClickDelete
1754
1880
  }))), /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(UploadModal, {
1755
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) {
@@ -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","closeIcon":"micromag-media-gallery-items-gallery-item-closeIcon"};
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"};
59
59
 
60
60
  var propTypes$b = {
61
61
  item: core.PropTypes.media,
@@ -64,7 +64,8 @@ var propTypes$b = {
64
64
  withInfoButton: PropTypes__default["default"].bool,
65
65
  className: PropTypes__default["default"].string,
66
66
  onClick: PropTypes__default["default"].func,
67
- onClickInfo: PropTypes__default["default"].func
67
+ onClickInfo: PropTypes__default["default"].func,
68
+ onClickRemove: PropTypes__default["default"].func
68
69
  };
69
70
  var defaultProps$b = {
70
71
  item: null,
@@ -73,7 +74,8 @@ var defaultProps$b = {
73
74
  withInfoButton: false,
74
75
  className: null,
75
76
  onClick: null,
76
- onClickInfo: null
77
+ onClickInfo: null,
78
+ onClickRemove: null
77
79
  };
78
80
  var GalleryItem = function GalleryItem(_ref) {
79
81
  var item = _ref.item,
@@ -82,7 +84,8 @@ var GalleryItem = function GalleryItem(_ref) {
82
84
  withInfoButton = _ref.withInfoButton,
83
85
  className = _ref.className,
84
86
  onClick = _ref.onClick,
85
- onClickInfo = _ref.onClickInfo;
87
+ onClickInfo = _ref.onClickInfo,
88
+ onClickRemove = _ref.onClickRemove;
86
89
  var type = item.type,
87
90
  _item$thumbnail_url = item.thumbnail_url,
88
91
  thumbnail = _item$thumbnail_url === void 0 ? null : _item$thumbnail_url,
@@ -96,8 +99,8 @@ var GalleryItem = function GalleryItem(_ref) {
96
99
  }
97
100
  return /*#__PURE__*/React__default["default"].createElement(components.Card, {
98
101
  image: /*#__PURE__*/React__default["default"].createElement("button", {
99
- type: "button",
100
102
  className: classNames__default["default"](['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-start', 'bg-dark', 'text-black', styles$b.imageButton]),
103
+ type: "button",
101
104
  onClick: onClick
102
105
  }, /*#__PURE__*/React__default["default"].createElement("div", {
103
106
  className: classNames__default["default"](['card-img-top', styles$b.image]),
@@ -112,8 +115,10 @@ var GalleryItem = function GalleryItem(_ref) {
112
115
  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
113
116
  icon: faInfoCircle.faInfoCircle,
114
117
  className: styles$b.icon
115
- })) : null, selected ? /*#__PURE__*/React__default["default"].createElement("div", {
116
- className: classNames__default["default"](['text-danger', styles$b.closeIcon])
118
+ })) : null, selected ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
119
+ className: classNames__default["default"](['text-danger', styles$b.closeButton]),
120
+ onClick: onClickRemove,
121
+ withoutStyle: true
117
122
  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
118
123
  icon: faTimesCircle.faTimesCircle,
119
124
  className: styles$b.icon
@@ -148,7 +153,8 @@ var propTypes$a = {
148
153
  selectedFirst: PropTypes__default["default"].bool,
149
154
  className: PropTypes__default["default"].string,
150
155
  onClickItem: PropTypes__default["default"].func,
151
- onClickItemInfo: PropTypes__default["default"].func
156
+ onClickItemInfo: PropTypes__default["default"].func,
157
+ onClickRemoveItem: PropTypes__default["default"].func
152
158
  };
153
159
  var defaultProps$a = {
154
160
  items: null,
@@ -158,7 +164,8 @@ var defaultProps$a = {
158
164
  selectedFirst: false,
159
165
  className: null,
160
166
  onClickItem: null,
161
- onClickItemInfo: null
167
+ onClickItemInfo: null,
168
+ onClickRemoveItem: null
162
169
  };
163
170
  function Gallery(_ref) {
164
171
  var items = _ref.items,
@@ -168,7 +175,8 @@ function Gallery(_ref) {
168
175
  selectedFirst = _ref.selectedFirst,
169
176
  className = _ref.className,
170
177
  onClickItem = _ref.onClickItem,
171
- onClickItemInfo = _ref.onClickItemInfo;
178
+ onClickItemInfo = _ref.onClickItemInfo,
179
+ onClickRemoveItem = _ref.onClickRemoveItem;
172
180
  var _useDimensionObserver = hooks.useDimensionObserver(),
173
181
  ref = _useDimensionObserver.ref,
174
182
  width = _useDimensionObserver.width;
@@ -202,6 +210,9 @@ function Gallery(_ref) {
202
210
  onClickInfo: onClickItemInfo !== null ? function () {
203
211
  return onClickItemInfo(item);
204
212
  } : null,
213
+ onClickRemove: onClickRemoveItem !== null ? function () {
214
+ onClickRemoveItem();
215
+ } : null,
205
216
  withInfoButton: withInfoButton
206
217
  }));
207
218
  })));
@@ -209,12 +220,13 @@ function Gallery(_ref) {
209
220
  Gallery.propTypes = propTypes$a;
210
221
  Gallery.defaultProps = defaultProps$a;
211
222
 
212
- 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"};
213
224
 
214
225
  var propTypes$9 = {
215
226
  media: core.PropTypes.media,
216
227
  tags: core.PropTypes.tags,
217
228
  onClickClose: PropTypes__default["default"].func,
229
+ onClickSave: PropTypes__default["default"].func,
218
230
  onClickDelete: PropTypes__default["default"].func,
219
231
  className: PropTypes__default["default"].string
220
232
  };
@@ -222,6 +234,7 @@ var defaultProps$9 = {
222
234
  media: null,
223
235
  tags: [],
224
236
  onClickClose: null,
237
+ onClickSave: null,
225
238
  onClickDelete: null,
226
239
  className: null
227
240
  };
@@ -229,6 +242,7 @@ function MediaMetadata(_ref) {
229
242
  var media = _ref.media,
230
243
  allTags = _ref.tags,
231
244
  onClickClose = _ref.onClickClose,
245
+ onClickSave = _ref.onClickSave,
232
246
  onClickDelete = _ref.onClickDelete,
233
247
  className = _ref.className;
234
248
  var _ref2 = media || {},
@@ -310,6 +324,10 @@ function MediaMetadata(_ref) {
310
324
  setDescription(val);
311
325
  setChanged(true);
312
326
  }, [tags, setDescription, setChanged]);
327
+ var _useState9 = React.useState(null),
328
+ _useState10 = _slicedToArray__default["default"](_useState9, 2),
329
+ saveState = _useState10[0],
330
+ setSaveState = _useState10[1];
313
331
  var onSave = React.useCallback(function () {
314
332
  return update(mediaId, {
315
333
  name: name,
@@ -317,29 +335,50 @@ function MediaMetadata(_ref) {
317
335
  description: description
318
336
  }).then(function () {
319
337
  setChanged(false);
320
- if (onClickClose !== null) {
321
- onClickClose();
338
+ setSaveState(null);
339
+ if (onClickSave !== null) {
340
+ onClickSave();
322
341
  }
342
+ })["catch"](function () {
343
+ setSaveState(false);
323
344
  });
324
- }, [mediaId, name, tags, description, metadata, update, onClickClose]);
325
- var _useState9 = React.useState(null),
326
- _useState10 = _slicedToArray__default["default"](_useState9, 2),
327
- deletedState = _useState10[0],
328
- setDeletedState = _useState10[1];
345
+ }, [mediaId, name, tags, description, metadata, update, onClickSave, onClickClose, setChanged, setSaveState]);
346
+ var _useState11 = React.useState(null),
347
+ _useState12 = _slicedToArray__default["default"](_useState11, 2),
348
+ deletedState = _useState12[0],
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];
329
354
  React.useEffect(function () {
330
355
  setDeletedState(null);
331
- }, [mediaId]);
356
+ setConfirmation(null);
357
+ }, [mediaId, setDeletedState, setConfirmation]);
332
358
  var onDelete = React.useCallback(function () {
333
- return deleteMedia(mediaId).then(function () {
334
- setChanged(false);
335
- setDeletedState(true);
336
- if (onClickDelete !== null) {
337
- 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
+ }
338
373
  }
339
374
  })["catch"](function () {
340
375
  setDeletedState(false);
341
376
  });
342
- }, [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]);
343
382
  React.useEffect(function () {
344
383
  if (media !== null) {
345
384
  setTags(mediaTags);
@@ -371,11 +410,13 @@ function MediaMetadata(_ref) {
371
410
  className: styles$9.player,
372
411
  controls: true,
373
412
  src: url
374
- })) : null, type !== 'video' ? /*#__PURE__*/React__default["default"].createElement("img", {
413
+ })) : null, type !== 'video' && thumbnail !== null ? /*#__PURE__*/React__default["default"].createElement("img", {
375
414
  src: thumbnail,
376
415
  className: styles$9.image,
377
416
  alt: filename
378
- }) : 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", {
379
420
  className: "p-2"
380
421
  }, /*#__PURE__*/React__default["default"].createElement("div", {
381
422
  className: "tags mb-4"
@@ -437,6 +478,14 @@ function MediaMetadata(_ref) {
437
478
  "type": 0,
438
479
  "value": "Save"
439
480
  }]
481
+ })) : null, saveState === false ? /*#__PURE__*/React__default["default"].createElement("p", {
482
+ className: "pt-1 text-danger"
483
+ }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
484
+ id: "DYjRd/",
485
+ defaultMessage: [{
486
+ "type": 0,
487
+ "value": "Sorry, this media could not be saved."
488
+ }]
440
489
  })) : null), /*#__PURE__*/React__default["default"].createElement("h6", null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
441
490
  id: "c9VwT/",
442
491
  defaultMessage: [{
@@ -545,17 +594,56 @@ function MediaMetadata(_ref) {
545
594
  className: "col"
546
595
  }, /*#__PURE__*/React__default["default"].createElement("small", null, user.name)))) : null), /*#__PURE__*/React__default["default"].createElement("div", {
547
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"
548
619
  }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
620
+ className: "me-2",
549
621
  theme: "danger",
550
622
  outline: true,
551
623
  onClick: onDelete
552
- }, /*#__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, {
553
631
  id: "/KQ87r",
554
632
  defaultMessage: [{
555
633
  "type": 0,
556
634
  "value": "Delete media"
557
635
  }]
558
- })), 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", {
559
647
  className: "pt-1 text-danger"
560
648
  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
561
649
  id: "rqbRV2",
@@ -886,10 +974,10 @@ var Search = function Search(_ref) {
886
974
  type: "text",
887
975
  value: value || '',
888
976
  placeholder: intl.formatMessage({
889
- id: "FFBsfJ",
977
+ id: "n/SxMs",
890
978
  defaultMessage: [{
891
979
  "type": 0,
892
- "value": "Search medias..."
980
+ "value": "Search medias"
893
981
  }]
894
982
  }),
895
983
  onChange: onSearchChange,
@@ -1224,7 +1312,7 @@ function ActiveFilters(_ref) {
1224
1312
  ActiveFilters.propTypes = propTypes$2;
1225
1313
  ActiveFilters.defaultProps = defaultProps$2;
1226
1314
 
1227
- 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"};
1228
1316
 
1229
1317
  var propTypes$1 = {
1230
1318
  types: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
@@ -1435,19 +1523,18 @@ function Navbar(_ref) {
1435
1523
  }, /*#__PURE__*/React__default["default"].createElement("div", {
1436
1524
  className: classNames__default["default"]([styles$1.inner])
1437
1525
  }, media === null ? /*#__PURE__*/React__default["default"].createElement("div", {
1438
- className: classNames__default["default"](['list-group-item rounded w-100 mw-100 navbar-text d-flex align-items-center justify-content-between mb-2', {
1439
- '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
1440
1528
  }])
1441
- }, selectedMedia !== null ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
1442
- className: classNames__default["default"]([styles$1.mediaLabel, 'd-flex px-0 py-0 me-1 align-items-center border-0']),
1443
- onClick: function onClick() {
1444
- return onClickItemInfo(selectedMedia);
1445
- },
1446
- theme: "primary",
1447
- 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"
1448
1533
  }, /*#__PURE__*/React__default["default"].createElement(components.Media, {
1449
1534
  className: styles$1.mediaPreview,
1450
- 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"
1451
1538
  }), /*#__PURE__*/React__default["default"].createElement("span", {
1452
1539
  className: classNames__default["default"]([styles$1.mediaLabel, 'd-inline-block', 'text-truncate', 'mx-1', 'me-2'])
1453
1540
  }, selectedMedia.name || /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
@@ -1456,36 +1543,64 @@ function Navbar(_ref) {
1456
1543
  "type": 0,
1457
1544
  "value": "[no title]"
1458
1545
  }]
1459
- }))) : /*#__PURE__*/React__default["default"].createElement(components.Button, {
1460
- className: "w-100",
1461
- 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",
1462
1555
  icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
1463
- icon: faPlus.faPlus
1556
+ icon: faInfoCircle.faInfoCircle
1464
1557
  }),
1465
- 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,
1466
1574
  title: intl.formatMessage({
1467
- id: "Tt4jN1",
1575
+ id: "UG3SXh",
1468
1576
  defaultMessage: [{
1469
1577
  "type": 0,
1470
- "value": "Add"
1578
+ "value": "Remove"
1471
1579
  }]
1472
1580
  })
1473
- }, /*#__PURE__*/React__default["default"].createElement("span", {
1474
- className: "ps-2"
1475
- }, 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",
1476
1589
  theme: "primary",
1477
1590
  icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
1478
- icon: faTimes.faTimes
1591
+ icon: faPlus.faPlus
1479
1592
  }),
1480
- onClick: onClickRemove,
1593
+ onClick: onClickAdd,
1481
1594
  title: intl.formatMessage({
1482
- id: "UG3SXh",
1595
+ id: "Tt4jN1",
1483
1596
  defaultMessage: [{
1484
1597
  "type": 0,
1485
- "value": "Remove"
1598
+ "value": "Add"
1486
1599
  }]
1487
1600
  })
1488
- })) : 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", {
1489
1604
  className: "mb-2 d-flex w-100 align-items-center flex-nowrap"
1490
1605
  }, /*#__PURE__*/React__default["default"].createElement(DropdownSection, {
1491
1606
  items: sources,
@@ -1567,7 +1682,7 @@ var defaultProps = {
1567
1682
  onClearMedia: null
1568
1683
  };
1569
1684
  function MediaGallery(_ref) {
1570
- var _ref4;
1685
+ var _ref6;
1571
1686
  var type = _ref.type,
1572
1687
  source = _ref.source,
1573
1688
  isPicker = _ref.isPicker,
@@ -1616,87 +1731,96 @@ function MediaGallery(_ref) {
1616
1731
  }, 500);
1617
1732
  setFiltersValue(value);
1618
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];
1619
1738
 
1620
1739
  // Items
1621
- var _useMedias = data.useMedias(queryValue, 1, 30, _objectSpread__default["default"]({}, initialMedias !== null ? {
1622
- items: initialMedias
1623
- } : null)),
1624
- loadedMedias = _useMedias.allMedias,
1740
+ var _useMedias = data.useMedias(queryValue, 1, 30, {
1741
+ pages: defaultItems
1742
+ }),
1743
+ loadedMedias = _useMedias.items,
1625
1744
  _useMedias$loading = _useMedias.loading,
1626
1745
  loading = _useMedias$loading === void 0 ? false : _useMedias$loading,
1627
1746
  _useMedias$loadNextPa = _useMedias.loadNextPage,
1628
1747
  loadNextPage = _useMedias$loadNextPa === void 0 ? null : _useMedias$loadNextPa,
1629
1748
  _useMedias$allLoaded = _useMedias.allLoaded,
1630
- allLoaded = _useMedias$allLoaded === void 0 ? false : _useMedias$allLoaded;
1749
+ allLoaded = _useMedias$allLoaded === void 0 ? false : _useMedias$allLoaded,
1750
+ reset = _useMedias.reset;
1631
1751
 
1632
1752
  // Temporary type filter
1633
- var _useState5 = React.useState([]),
1634
- _useState6 = _slicedToArray__default["default"](_useState5, 2),
1635
- addedMedias = _useState6[0],
1636
- setAddedMedias = _useState6[1];
1753
+ var _useState7 = React.useState([]),
1754
+ _useState8 = _slicedToArray__default["default"](_useState7, 2),
1755
+ addedMedias = _useState8[0],
1756
+ setAddedMedias = _useState8[1];
1637
1757
  var medias = React.useMemo(function () {
1638
1758
  var allMedias = [].concat(_toConsumableArray__default["default"](addedMedias), _toConsumableArray__default["default"](loadedMedias || []));
1639
1759
  return allMedias.length > 0 ? allMedias : null;
1640
1760
  }, [loadedMedias, addedMedias]);
1641
1761
 
1642
1762
  // Medias
1643
- var _useState7 = React.useState(null),
1644
- _useState8 = _slicedToArray__default["default"](_useState7, 2),
1645
- metadataMedia = _useState8[0],
1646
- setMetadataMedia = _useState8[1];
1763
+ var _useState9 = React.useState(null),
1764
+ _useState10 = _slicedToArray__default["default"](_useState9, 2),
1765
+ metadataMedia = _useState10[0],
1766
+ setMetadataMedia = _useState10[1];
1647
1767
  var onClickItem = React.useCallback(function (media) {
1768
+ var _ref3 = media || {},
1769
+ _ref3$id = _ref3.id,
1770
+ mediaId = _ref3$id === void 0 ? null : _ref3$id;
1771
+ var _ref4 = selectedMedia || {},
1772
+ _ref4$id = _ref4.id,
1773
+ selectedId = _ref4$id === void 0 ? null : _ref4$id;
1774
+ var different = mediaId !== selectedId;
1648
1775
  if (!isPicker) {
1649
1776
  setMetadataMedia(media);
1650
1777
  } else if (onClickMedia !== null) {
1651
- onClickMedia(media);
1778
+ if (different) {
1779
+ onClickMedia(media);
1780
+ }
1781
+ }
1782
+ }, [isPicker, setMetadataMedia, onClickMedia, selectedMedia]);
1783
+ var onClickRemoveItem = React.useCallback(function () {
1784
+ setMetadataMedia(null);
1785
+ if (onClickMedia !== null) {
1786
+ onClickMedia(null);
1652
1787
  }
1653
1788
  }, [isPicker, setMetadataMedia, onClickMedia]);
1654
- var refresh = React.useCallback(function () {
1655
- // TODO: refactor useItems to enable this
1656
- // setPageNumber(1);
1657
- // setQueryValue({ ...defaultFilters, ...queryValue });
1658
- }, [defaultFilters, queryValue, setQueryValue]);
1659
1789
  var onClickItemInfo = React.useCallback(function (media) {
1660
1790
  return setMetadataMedia(media);
1661
1791
  }, [setMetadataMedia]);
1662
1792
  var onMetadataClickClose = React.useCallback(function () {
1663
1793
  setMetadataMedia(null);
1664
- refresh();
1665
- }, [refresh, setMetadataMedia]);
1794
+ }, [setMetadataMedia]);
1795
+ var onMetadataClickSave = React.useCallback(function () {
1796
+ reset();
1797
+ }, [reset]);
1666
1798
  var onMetadataClickDelete = React.useCallback(function () {
1667
1799
  var mediaId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
1668
- var _ref3 = selectedMedia || {},
1669
- _ref3$id = _ref3.id,
1670
- selectedId = _ref3$id === void 0 ? null : _ref3$id;
1800
+ var _ref5 = selectedMedia || {},
1801
+ _ref5$id = _ref5.id,
1802
+ selectedId = _ref5$id === void 0 ? null : _ref5$id;
1671
1803
  if (mediaId !== null && mediaId === selectedId && onClickMedia !== null) {
1672
1804
  onClickMedia(null);
1673
- } else {
1674
- setMetadataMedia(null);
1675
1805
  }
1676
- refresh();
1677
- }, [refresh, setMetadataMedia, selectedMedia]);
1806
+ setMetadataMedia(null);
1807
+ reset();
1808
+ }, [setMetadataMedia, selectedMedia]);
1678
1809
 
1679
- // console.log(loadedMedias);
1680
1810
  // Navigation
1681
1811
  var onClickBack = React.useCallback(function () {
1682
- return setMetadataMedia(null);
1683
- }, [setMetadataMedia]);
1684
-
1685
- // Reset all filters except source
1686
- // const onClickCancel = useCallback(
1687
- // () => setFiltersValue({ ...defaultFilters, source: filtersValue.source || null }),
1688
- // [defaultFilters, filtersValue, setFiltersValue],
1689
- // );
1812
+ setMetadataMedia(null);
1813
+ }, [setMetadataMedia, setDefaultItems, setQueryValue]);
1690
1814
 
1691
1815
  // Upload modal
1692
- var _useState9 = React.useState(false),
1693
- _useState10 = _slicedToArray__default["default"](_useState9, 2),
1694
- uploading = _useState10[0],
1695
- setUploading = _useState10[1];
1696
1816
  var _useState11 = React.useState(false),
1697
1817
  _useState12 = _slicedToArray__default["default"](_useState11, 2),
1698
- uploadModalOpened = _useState12[0],
1699
- 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];
1700
1824
  var _useMediaCreate = data.useMediaCreate(),
1701
1825
  createMedia = _useMediaCreate.create;
1702
1826
  var onClickAdd = React.useCallback(function () {
@@ -1713,7 +1837,7 @@ function MediaGallery(_ref) {
1713
1837
  return setUploadModalOpened(false);
1714
1838
  }, [setUploadModalOpened]);
1715
1839
  return /*#__PURE__*/React__default["default"].createElement("div", {
1716
- className: classNames__default["default"]([styles.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, styles.metadataOpened, metadataMedia !== null), _defineProperty__default["default"](_ref4, className, className), _ref4)])
1840
+ className: classNames__default["default"]([styles.container, (_ref6 = {}, _defineProperty__default["default"](_ref6, styles.metadataOpened, metadataMedia !== null), _defineProperty__default["default"](_ref6, className, className), _ref6)])
1717
1841
  }, /*#__PURE__*/React__default["default"].createElement(Navbar, {
1718
1842
  types: isArray__default["default"](type) ? type : [type],
1719
1843
  filters: filtersValue,
@@ -1744,7 +1868,8 @@ function MediaGallery(_ref) {
1744
1868
  withInfoButton: isPicker,
1745
1869
  isSmall: isSmall,
1746
1870
  onClickItem: onClickItem,
1747
- onClickItemInfo: onClickItemInfo
1871
+ onClickItemInfo: onClickItemInfo,
1872
+ onClickRemoveItem: onClickRemoveItem
1748
1873
  }) : null, !allLoaded ? /*#__PURE__*/React__default["default"].createElement("div", {
1749
1874
  className: "w-100 mb-2"
1750
1875
  }, loading || uploading ? /*#__PURE__*/React__default["default"].createElement(components.Spinner, {
@@ -1766,6 +1891,7 @@ function MediaGallery(_ref) {
1766
1891
  media: metadataMedia,
1767
1892
  tags: tags,
1768
1893
  onClickClose: onMetadataClickClose,
1894
+ onClickSave: onMetadataClickSave,
1769
1895
  onClickDelete: onMetadataClickDelete
1770
1896
  }))), /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(components.UploadModal, {
1771
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.330",
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": "4ee3638ac45e97004ea24ddefa27e3b1f369efc9"
76
+ "gitHead": "61fe137d589629d05127be69b667fc62f8ca1d18"
77
77
  }