@micromag/media-gallery 0.3.329 → 0.3.331

package/assets/css/styles.css

@@ -1,4 +1,4 @@
-.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}
+.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}
 
 .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}
 .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}

package/es/index.js

@@ -39,7 +39,7 @@ var middleEllipsis = function middleEllipsis(string, maxLength) {
   return "".concat(string.substring(0, midpoint - lstrip), "...").concat(string.substring(midpoint + rstrip));
 };
 
-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"};
+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"};
 
 var propTypes$b = {
   item: PropTypes.media,
@@ -48,7 +48,8 @@ var propTypes$b = {
   withInfoButton: PropTypes$1.bool,
   className: PropTypes$1.string,
   onClick: PropTypes$1.func,
-  onClickInfo: PropTypes$1.func
+  onClickInfo: PropTypes$1.func,
+  onClickRemove: PropTypes$1.func
 };
 var defaultProps$b = {
   item: null,
@@ -57,7 +58,8 @@ var defaultProps$b = {
   withInfoButton: false,
   className: null,
   onClick: null,
-  onClickInfo: null
+  onClickInfo: null,
+  onClickRemove: null
 };
 var GalleryItem = function GalleryItem(_ref) {
   var item = _ref.item,
@@ -66,7 +68,8 @@ var GalleryItem = function GalleryItem(_ref) {
     withInfoButton = _ref.withInfoButton,
     className = _ref.className,
     onClick = _ref.onClick,
-    onClickInfo = _ref.onClickInfo;
+    onClickInfo = _ref.onClickInfo,
+    onClickRemove = _ref.onClickRemove;
   var type = item.type,
     _item$thumbnail_url = item.thumbnail_url,
     thumbnail = _item$thumbnail_url === void 0 ? null : _item$thumbnail_url,
@@ -80,8 +83,8 @@ var GalleryItem = function GalleryItem(_ref) {
   }
   return /*#__PURE__*/React.createElement(Card, {
     image: /*#__PURE__*/React.createElement("button", {
-      type: "button",
       className: classNames(['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-start', 'bg-dark', 'text-black', styles$b.imageButton]),
+      type: "button",
       onClick: onClick
     }, /*#__PURE__*/React.createElement("div", {
       className: classNames(['card-img-top', styles$b.image]),
@@ -96,8 +99,10 @@ var GalleryItem = function GalleryItem(_ref) {
     }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
       icon: faInfoCircle,
       className: styles$b.icon
-    })) : null, selected ? /*#__PURE__*/React.createElement("div", {
-      className: classNames(['text-danger', styles$b.closeIcon])
+    })) : null, selected ? /*#__PURE__*/React.createElement(Button, {
+      className: classNames(['text-danger', styles$b.closeButton]),
+      onClick: onClickRemove,
+      withoutStyle: true
     }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
       icon: faTimesCircle,
       className: styles$b.icon
@@ -132,7 +137,8 @@ var propTypes$a = {
   selectedFirst: PropTypes$1.bool,
   className: PropTypes$1.string,
   onClickItem: PropTypes$1.func,
-  onClickItemInfo: PropTypes$1.func
+  onClickItemInfo: PropTypes$1.func,
+  onClickRemoveItem: PropTypes$1.func
 };
 var defaultProps$a = {
   items: null,
@@ -142,7 +148,8 @@ var defaultProps$a = {
   selectedFirst: false,
   className: null,
   onClickItem: null,
-  onClickItemInfo: null
+  onClickItemInfo: null,
+  onClickRemoveItem: null
 };
 function Gallery(_ref) {
   var items = _ref.items,
@@ -152,7 +159,8 @@ function Gallery(_ref) {
     selectedFirst = _ref.selectedFirst,
     className = _ref.className,
     onClickItem = _ref.onClickItem,
-    onClickItemInfo = _ref.onClickItemInfo;
+    onClickItemInfo = _ref.onClickItemInfo,
+    onClickRemoveItem = _ref.onClickRemoveItem;
   var _useDimensionObserver = useDimensionObserver(),
     ref = _useDimensionObserver.ref,
     width = _useDimensionObserver.width;
@@ -186,6 +194,9 @@ function Gallery(_ref) {
       onClickInfo: onClickItemInfo !== null ? function () {
         return onClickItemInfo(item);
       } : null,
+      onClickRemove: onClickRemoveItem !== null ? function () {
+        onClickRemoveItem();
+      } : null,
       withInfoButton: withInfoButton
     }));
   })));
@@ -199,18 +210,21 @@ var propTypes$9 = {
   media: PropTypes.media,
   tags: PropTypes.tags,
   onClickClose: PropTypes$1.func,
+  onClickDelete: PropTypes$1.func,
   className: PropTypes$1.string
 };
 var defaultProps$9 = {
   media: null,
   tags: [],
   onClickClose: null,
+  onClickDelete: null,
   className: null
 };
 function MediaMetadata(_ref) {
   var media = _ref.media,
     allTags = _ref.tags,
     onClickClose = _ref.onClickClose,
+    onClickDelete = _ref.onClickDelete,
     className = _ref.className;
   var _ref2 = media || {},
     mediaId = _ref2.id,
@@ -291,6 +305,10 @@ function MediaMetadata(_ref) {
     setDescription(val);
     setChanged(true);
   }, [tags, setDescription, setChanged]);
+  var _useState9 = useState(null),
+    _useState10 = _slicedToArray(_useState9, 2),
+    saveState = _useState10[0],
+    setSaveState = _useState10[1];
   var onSave = useCallback(function () {
     return update(mediaId, {
       name: name,
@@ -298,15 +316,18 @@ function MediaMetadata(_ref) {
       description: description
     }).then(function () {
       setChanged(false);
+      setSaveState(null);
       if (onClickClose !== null) {
         onClickClose();
       }
+    })["catch"](function () {
+      setSaveState(false);
     });
-  }, [mediaId, name, tags, description, metadata, update, onClickClose]);
-  var _useState9 = useState(null),
-    _useState10 = _slicedToArray(_useState9, 2),
-    deletedState = _useState10[0],
-    setDeletedState = _useState10[1];
+  }, [mediaId, name, tags, description, metadata, update, onClickClose, setChanged, setSaveState]);
+  var _useState11 = useState(null),
+    _useState12 = _slicedToArray(_useState11, 2),
+    deletedState = _useState12[0],
+    setDeletedState = _useState12[1];
   useEffect(function () {
     setDeletedState(null);
   }, [mediaId]);
@@ -314,8 +335,8 @@ function MediaMetadata(_ref) {
     return deleteMedia(mediaId).then(function () {
       setChanged(false);
       setDeletedState(true);
-      if (onClickClose !== null) {
-        onClickClose();
+      if (onClickDelete !== null) {
+        onClickDelete(mediaId);
       }
     })["catch"](function () {
       setDeletedState(false);
@@ -418,6 +439,14 @@ function MediaMetadata(_ref) {
       "type": 0,
       "value": "Save"
     }]
+  })) : null, saveState === false ? /*#__PURE__*/React.createElement("p", {
+    className: "pt-1 text-danger"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "DYjRd/",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Sorry, this media could not be saved."
+    }]
   })) : null), /*#__PURE__*/React.createElement("h6", null, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "c9VwT/",
     defaultMessage: [{
@@ -539,10 +568,10 @@ function MediaMetadata(_ref) {
   })), deletedState === false ? /*#__PURE__*/React.createElement("p", {
     className: "pt-1 text-danger"
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "k+edUi",
+    id: "rqbRV2",
     defaultMessage: [{
       "type": 0,
-      "value": "Sorry, this media is in use and could not be deleted."
+      "value": "Sorry, this media could not be deleted."
     }]
   })) : null)));
 }
@@ -857,7 +886,8 @@ var Search = function Search(_ref) {
     className: "btn",
     onClick: onClickSearchIcon
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: loading ? faSpinner : faSearch
+    icon: loading ? faSpinner : faSearch,
+    spin: loading
   })), /*#__PURE__*/React.createElement("input", {
     className: classNames([styles$7.input, 'form-control', {
       'bg-light': !!value,
@@ -866,10 +896,10 @@ var Search = function Search(_ref) {
     type: "text",
     value: value || '',
     placeholder: intl.formatMessage({
-      id: "FFBsfJ",
+      id: "n/SxMs",
       defaultMessage: [{
         "type": 0,
-        "value": "Search medias..."
+        "value": "Search medias"
       }]
     }),
     onChange: onSearchChange,
@@ -1547,7 +1577,7 @@ var defaultProps = {
   onClearMedia: null
 };
 function MediaGallery(_ref) {
-  var _ref3;
+  var _ref6;
   var type = _ref.type,
     source = _ref.source,
     isPicker = _ref.isPicker,
@@ -1625,10 +1655,25 @@ function MediaGallery(_ref) {
     metadataMedia = _useState8[0],
     setMetadataMedia = _useState8[1];
   var onClickItem = useCallback(function (media) {
+    var _ref3 = media || {},
+      _ref3$id = _ref3.id,
+      mediaId = _ref3$id === void 0 ? null : _ref3$id;
+    var _ref4 = selectedMedia || {},
+      _ref4$id = _ref4.id,
+      selectedId = _ref4$id === void 0 ? null : _ref4$id;
+    var different = mediaId !== selectedId;
     if (!isPicker) {
       setMetadataMedia(media);
     } else if (onClickMedia !== null) {
-      onClickMedia(media);
+      if (different) {
+        onClickMedia(media);
+      }
+    }
+  }, [isPicker, setMetadataMedia, onClickMedia, selectedMedia]);
+  var onClickRemoveItem = useCallback(function () {
+    setMetadataMedia(null);
+    if (onClickMedia !== null) {
+      onClickMedia(null);
     }
   }, [isPicker, setMetadataMedia, onClickMedia]);
   var refresh = useCallback(function () {
@@ -1643,6 +1688,19 @@ function MediaGallery(_ref) {
     setMetadataMedia(null);
     refresh();
   }, [refresh, setMetadataMedia]);
+  var onMetadataClickDelete = useCallback(function () {
+    var mediaId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    var _ref5 = selectedMedia || {},
+      _ref5$id = _ref5.id,
+      selectedId = _ref5$id === void 0 ? null : _ref5$id;
+    if (mediaId !== null && mediaId === selectedId && onClickMedia !== null) {
+      onClickMedia(null);
+    } else {
+      setMetadataMedia(null);
+    }
+    refresh();
+  }, [refresh, setMetadataMedia, selectedMedia]);
+
   // console.log(loadedMedias);
   // Navigation
   var onClickBack = useCallback(function () {
@@ -1680,7 +1738,7 @@ function MediaGallery(_ref) {
     return setUploadModalOpened(false);
   }, [setUploadModalOpened]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, (_ref3 = {}, _defineProperty(_ref3, styles.metadataOpened, metadataMedia !== null), _defineProperty(_ref3, className, className), _ref3)])
+    className: classNames([styles.container, (_ref6 = {}, _defineProperty(_ref6, styles.metadataOpened, metadataMedia !== null), _defineProperty(_ref6, className, className), _ref6)])
   }, /*#__PURE__*/React.createElement(Navbar, {
     types: isArray(type) ? type : [type],
     filters: filtersValue,
@@ -1711,7 +1769,8 @@ function MediaGallery(_ref) {
     withInfoButton: isPicker,
     isSmall: isSmall,
     onClickItem: onClickItem,
-    onClickItemInfo: onClickItemInfo
+    onClickItemInfo: onClickItemInfo,
+    onClickRemoveItem: onClickRemoveItem
   }) : null, !allLoaded ? /*#__PURE__*/React.createElement("div", {
     className: "w-100 mb-2"
   }, loading || uploading ? /*#__PURE__*/React.createElement(Spinner, {
@@ -1732,7 +1791,8 @@ function MediaGallery(_ref) {
   }, /*#__PURE__*/React.createElement(MediaMetadata, {
     media: metadataMedia,
     tags: tags,
-    onClickClose: onMetadataClickClose
+    onClickClose: onMetadataClickClose,
+    onClickDelete: onMetadataClickDelete
   }))), /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(UploadModal, {
     type: type === 'video' ? videoTypes : type,
     opened: uploadModalOpened,

package/lib/index.js

@@ -55,7 +55,7 @@ var middleEllipsis = function middleEllipsis(string, maxLength) {
   return "".concat(string.substring(0, midpoint - lstrip), "...").concat(string.substring(midpoint + rstrip));
 };
 
-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"};
+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"};
 
 var propTypes$b = {
   item: core.PropTypes.media,
@@ -64,7 +64,8 @@ var propTypes$b = {
   withInfoButton: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string,
   onClick: PropTypes__default["default"].func,
-  onClickInfo: PropTypes__default["default"].func
+  onClickInfo: PropTypes__default["default"].func,
+  onClickRemove: PropTypes__default["default"].func
 };
 var defaultProps$b = {
   item: null,
@@ -73,7 +74,8 @@ var defaultProps$b = {
   withInfoButton: false,
   className: null,
   onClick: null,
-  onClickInfo: null
+  onClickInfo: null,
+  onClickRemove: null
 };
 var GalleryItem = function GalleryItem(_ref) {
   var item = _ref.item,
@@ -82,7 +84,8 @@ var GalleryItem = function GalleryItem(_ref) {
     withInfoButton = _ref.withInfoButton,
     className = _ref.className,
     onClick = _ref.onClick,
-    onClickInfo = _ref.onClickInfo;
+    onClickInfo = _ref.onClickInfo,
+    onClickRemove = _ref.onClickRemove;
   var type = item.type,
     _item$thumbnail_url = item.thumbnail_url,
     thumbnail = _item$thumbnail_url === void 0 ? null : _item$thumbnail_url,
@@ -96,8 +99,8 @@ var GalleryItem = function GalleryItem(_ref) {
   }
   return /*#__PURE__*/React__default["default"].createElement(components.Card, {
     image: /*#__PURE__*/React__default["default"].createElement("button", {
-      type: "button",
       className: classNames__default["default"](['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-start', 'bg-dark', 'text-black', styles$b.imageButton]),
+      type: "button",
       onClick: onClick
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: classNames__default["default"](['card-img-top', styles$b.image]),
@@ -112,8 +115,10 @@ var GalleryItem = function GalleryItem(_ref) {
     }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
       icon: faInfoCircle.faInfoCircle,
       className: styles$b.icon
-    })) : null, selected ? /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classNames__default["default"](['text-danger', styles$b.closeIcon])
+    })) : null, selected ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
+      className: classNames__default["default"](['text-danger', styles$b.closeButton]),
+      onClick: onClickRemove,
+      withoutStyle: true
     }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
       icon: faTimesCircle.faTimesCircle,
       className: styles$b.icon
@@ -148,7 +153,8 @@ var propTypes$a = {
   selectedFirst: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string,
   onClickItem: PropTypes__default["default"].func,
-  onClickItemInfo: PropTypes__default["default"].func
+  onClickItemInfo: PropTypes__default["default"].func,
+  onClickRemoveItem: PropTypes__default["default"].func
 };
 var defaultProps$a = {
   items: null,
@@ -158,7 +164,8 @@ var defaultProps$a = {
   selectedFirst: false,
   className: null,
   onClickItem: null,
-  onClickItemInfo: null
+  onClickItemInfo: null,
+  onClickRemoveItem: null
 };
 function Gallery(_ref) {
   var items = _ref.items,
@@ -168,7 +175,8 @@ function Gallery(_ref) {
     selectedFirst = _ref.selectedFirst,
     className = _ref.className,
     onClickItem = _ref.onClickItem,
-    onClickItemInfo = _ref.onClickItemInfo;
+    onClickItemInfo = _ref.onClickItemInfo,
+    onClickRemoveItem = _ref.onClickRemoveItem;
   var _useDimensionObserver = hooks.useDimensionObserver(),
     ref = _useDimensionObserver.ref,
     width = _useDimensionObserver.width;
@@ -202,6 +210,9 @@ function Gallery(_ref) {
       onClickInfo: onClickItemInfo !== null ? function () {
         return onClickItemInfo(item);
       } : null,
+      onClickRemove: onClickRemoveItem !== null ? function () {
+        onClickRemoveItem();
+      } : null,
       withInfoButton: withInfoButton
     }));
   })));
@@ -215,18 +226,21 @@ var propTypes$9 = {
   media: core.PropTypes.media,
   tags: core.PropTypes.tags,
   onClickClose: PropTypes__default["default"].func,
+  onClickDelete: PropTypes__default["default"].func,
   className: PropTypes__default["default"].string
 };
 var defaultProps$9 = {
   media: null,
   tags: [],
   onClickClose: null,
+  onClickDelete: null,
   className: null
 };
 function MediaMetadata(_ref) {
   var media = _ref.media,
     allTags = _ref.tags,
     onClickClose = _ref.onClickClose,
+    onClickDelete = _ref.onClickDelete,
     className = _ref.className;
   var _ref2 = media || {},
     mediaId = _ref2.id,
@@ -307,6 +321,10 @@ function MediaMetadata(_ref) {
     setDescription(val);
     setChanged(true);
   }, [tags, setDescription, setChanged]);
+  var _useState9 = React.useState(null),
+    _useState10 = _slicedToArray__default["default"](_useState9, 2),
+    saveState = _useState10[0],
+    setSaveState = _useState10[1];
   var onSave = React.useCallback(function () {
     return update(mediaId, {
       name: name,
@@ -314,15 +332,18 @@ function MediaMetadata(_ref) {
       description: description
     }).then(function () {
       setChanged(false);
+      setSaveState(null);
       if (onClickClose !== null) {
         onClickClose();
       }
+    })["catch"](function () {
+      setSaveState(false);
     });
-  }, [mediaId, name, tags, description, metadata, update, onClickClose]);
-  var _useState9 = React.useState(null),
-    _useState10 = _slicedToArray__default["default"](_useState9, 2),
-    deletedState = _useState10[0],
-    setDeletedState = _useState10[1];
+  }, [mediaId, name, tags, description, metadata, update, onClickClose, setChanged, setSaveState]);
+  var _useState11 = React.useState(null),
+    _useState12 = _slicedToArray__default["default"](_useState11, 2),
+    deletedState = _useState12[0],
+    setDeletedState = _useState12[1];
   React.useEffect(function () {
     setDeletedState(null);
   }, [mediaId]);
@@ -330,8 +351,8 @@ function MediaMetadata(_ref) {
     return deleteMedia(mediaId).then(function () {
       setChanged(false);
       setDeletedState(true);
-      if (onClickClose !== null) {
-        onClickClose();
+      if (onClickDelete !== null) {
+        onClickDelete(mediaId);
       }
     })["catch"](function () {
       setDeletedState(false);
@@ -434,6 +455,14 @@ function MediaMetadata(_ref) {
       "type": 0,
       "value": "Save"
     }]
+  })) : null, saveState === false ? /*#__PURE__*/React__default["default"].createElement("p", {
+    className: "pt-1 text-danger"
+  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+    id: "DYjRd/",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Sorry, this media could not be saved."
+    }]
   })) : null), /*#__PURE__*/React__default["default"].createElement("h6", null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
     id: "c9VwT/",
     defaultMessage: [{
@@ -555,10 +584,10 @@ function MediaMetadata(_ref) {
   })), deletedState === false ? /*#__PURE__*/React__default["default"].createElement("p", {
     className: "pt-1 text-danger"
   }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
-    id: "k+edUi",
+    id: "rqbRV2",
     defaultMessage: [{
       "type": 0,
-      "value": "Sorry, this media is in use and could not be deleted."
+      "value": "Sorry, this media could not be deleted."
     }]
   })) : null)));
 }
@@ -873,7 +902,8 @@ var Search = function Search(_ref) {
     className: "btn",
     onClick: onClickSearchIcon
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: loading ? faSpinner.faSpinner : faSearch.faSearch
+    icon: loading ? faSpinner.faSpinner : faSearch.faSearch,
+    spin: loading
   })), /*#__PURE__*/React__default["default"].createElement("input", {
     className: classNames__default["default"]([styles$7.input, 'form-control', {
       'bg-light': !!value,
@@ -882,10 +912,10 @@ var Search = function Search(_ref) {
     type: "text",
     value: value || '',
     placeholder: intl.formatMessage({
-      id: "FFBsfJ",
+      id: "n/SxMs",
       defaultMessage: [{
         "type": 0,
-        "value": "Search medias..."
+        "value": "Search medias"
       }]
     }),
     onChange: onSearchChange,
@@ -1563,7 +1593,7 @@ var defaultProps = {
   onClearMedia: null
 };
 function MediaGallery(_ref) {
-  var _ref3;
+  var _ref6;
   var type = _ref.type,
     source = _ref.source,
     isPicker = _ref.isPicker,
@@ -1641,10 +1671,25 @@ function MediaGallery(_ref) {
     metadataMedia = _useState8[0],
     setMetadataMedia = _useState8[1];
   var onClickItem = React.useCallback(function (media) {
+    var _ref3 = media || {},
+      _ref3$id = _ref3.id,
+      mediaId = _ref3$id === void 0 ? null : _ref3$id;
+    var _ref4 = selectedMedia || {},
+      _ref4$id = _ref4.id,
+      selectedId = _ref4$id === void 0 ? null : _ref4$id;
+    var different = mediaId !== selectedId;
     if (!isPicker) {
       setMetadataMedia(media);
     } else if (onClickMedia !== null) {
-      onClickMedia(media);
+      if (different) {
+        onClickMedia(media);
+      }
+    }
+  }, [isPicker, setMetadataMedia, onClickMedia, selectedMedia]);
+  var onClickRemoveItem = React.useCallback(function () {
+    setMetadataMedia(null);
+    if (onClickMedia !== null) {
+      onClickMedia(null);
     }
   }, [isPicker, setMetadataMedia, onClickMedia]);
   var refresh = React.useCallback(function () {
@@ -1659,6 +1704,19 @@ function MediaGallery(_ref) {
     setMetadataMedia(null);
     refresh();
   }, [refresh, setMetadataMedia]);
+  var onMetadataClickDelete = React.useCallback(function () {
+    var mediaId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    var _ref5 = selectedMedia || {},
+      _ref5$id = _ref5.id,
+      selectedId = _ref5$id === void 0 ? null : _ref5$id;
+    if (mediaId !== null && mediaId === selectedId && onClickMedia !== null) {
+      onClickMedia(null);
+    } else {
+      setMetadataMedia(null);
+    }
+    refresh();
+  }, [refresh, setMetadataMedia, selectedMedia]);
+
   // console.log(loadedMedias);
   // Navigation
   var onClickBack = React.useCallback(function () {
@@ -1696,7 +1754,7 @@ function MediaGallery(_ref) {
     return setUploadModalOpened(false);
   }, [setUploadModalOpened]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, styles.metadataOpened, metadataMedia !== null), _defineProperty__default["default"](_ref3, className, className), _ref3)])
+    className: classNames__default["default"]([styles.container, (_ref6 = {}, _defineProperty__default["default"](_ref6, styles.metadataOpened, metadataMedia !== null), _defineProperty__default["default"](_ref6, className, className), _ref6)])
   }, /*#__PURE__*/React__default["default"].createElement(Navbar, {
     types: isArray__default["default"](type) ? type : [type],
     filters: filtersValue,
@@ -1727,7 +1785,8 @@ function MediaGallery(_ref) {
     withInfoButton: isPicker,
     isSmall: isSmall,
     onClickItem: onClickItem,
-    onClickItemInfo: onClickItemInfo
+    onClickItemInfo: onClickItemInfo,
+    onClickRemoveItem: onClickRemoveItem
   }) : null, !allLoaded ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "w-100 mb-2"
   }, loading || uploading ? /*#__PURE__*/React__default["default"].createElement(components.Spinner, {
@@ -1748,7 +1807,8 @@ function MediaGallery(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(MediaMetadata, {
     media: metadataMedia,
     tags: tags,
-    onClickClose: onMetadataClickClose
+    onClickClose: onMetadataClickClose,
+    onClickDelete: onMetadataClickDelete
   }))), /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(components.UploadModal, {
     type: type === 'video' ? videoTypes : type,
     opened: uploadModalOpened,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/media-gallery",
-    "version": "0.3.329",
+    "version": "0.3.331",
     "description": "",
     "keywords": [
         "javascript"
@@ -73,5 +73,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "2bfbc2ca564fd104e1df42dfa9314668fe48a000"
+    "gitHead": "9207986f3af466a62c38ecc9e79cd88f8616668f"
 }