@micromag/media-gallery 0.3.328 → 0.3.330

package/es/index.js

@@ -11,7 +11,7 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import { PropTypes } from '@micromag/core';
 import { Card, Button, Media, Spinner, UploadModal } from '@micromag/core/components';
 import { useFieldComponent, useStory } from '@micromag/core/contexts';
-import { useMediaUpdate, useMediasRecentSearches, useMediaTags, useMediaAuthors, useMedias, useMediaCreate } from '@micromag/data';
+import { useMediaUpdate, useMediaDelete, useMediasRecentSearches, useMediaTags, useMediaAuthors, useMedias, useMediaCreate } from '@micromag/data';
 import { useDimensionObserver } from '@micromag/core/hooks';
 import { faHeadphonesAlt } from '@fortawesome/free-solid-svg-icons/faHeadphonesAlt';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons/faInfoCircle';
@@ -20,7 +20,6 @@ import { faTimesCircle } from '@fortawesome/free-solid-svg-icons/faTimesCircle';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import uniqBy from 'lodash/uniqBy';
 import prettyBytes from 'pretty-bytes';
-import { useMediaDelete } from '@micromag/data/src/hooks';
 import { faChevronLeft } from '@fortawesome/free-solid-svg-icons/faChevronLeft';
 import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
 import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
@@ -200,18 +199,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,
@@ -315,8 +317,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);
@@ -540,10 +542,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)));
 }
@@ -858,7 +860,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,
@@ -1214,7 +1217,9 @@ var propTypes$1 = {
   selectedMedia: PropTypes.media,
   storyId: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number]),
   tags: PropTypes.tags,
-  authors: PropTypes.authors,
+  authors: PropTypes$1.arrayOf(PropTypes$1.shape({
+    name: PropTypes$1.string
+  })),
   loading: PropTypes$1.bool,
   withoutSource: PropTypes$1.bool,
   withoutType: PropTypes$1.bool,
@@ -1546,7 +1551,7 @@ var defaultProps = {
   onClearMedia: null
 };
 function MediaGallery(_ref) {
-  var _ref3;
+  var _ref4;
   var type = _ref.type,
     source = _ref.source,
     isPicker = _ref.isPicker,
@@ -1642,6 +1647,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 _ref3 = selectedMedia || {},
+      _ref3$id = _ref3.id,
+      selectedId = _ref3$id === void 0 ? null : _ref3$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 () {
@@ -1679,7 +1697,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, (_ref4 = {}, _defineProperty(_ref4, styles.metadataOpened, metadataMedia !== null), _defineProperty(_ref4, className, className), _ref4)])
   }, /*#__PURE__*/React.createElement(Navbar, {
     types: isArray(type) ? type : [type],
     filters: filtersValue,
@@ -1731,7 +1749,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

@@ -22,7 +22,6 @@ var faTimesCircle = require('@fortawesome/free-solid-svg-icons/faTimesCircle');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
 var uniqBy = require('lodash/uniqBy');
 var prettyBytes = require('pretty-bytes');
-var hooks$1 = require('@micromag/data/src/hooks');
 var faChevronLeft = require('@fortawesome/free-solid-svg-icons/faChevronLeft');
 var faPlus = require('@fortawesome/free-solid-svg-icons/faPlus');
 var faTimes = require('@fortawesome/free-solid-svg-icons/faTimes');
@@ -216,18 +215,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,
@@ -259,7 +261,7 @@ function MediaMetadata(_ref) {
     mediaTags = _ref3$tags === void 0 ? [] : _ref3$tags;
   var _useMediaUpdate = data.useMediaUpdate(),
     update = _useMediaUpdate.update;
-  var _useMediaDelete = hooks$1.useMediaDelete(),
+  var _useMediaDelete = data.useMediaDelete(),
     deleteMedia = _useMediaDelete.deleteMedia;
   var getOptionLabel = React.useCallback(function (_ref4) {
     var name = _ref4.name;
@@ -331,8 +333,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);
@@ -556,10 +558,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)));
 }
@@ -874,7 +876,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,
@@ -1230,7 +1233,9 @@ var propTypes$1 = {
   selectedMedia: core.PropTypes.media,
   storyId: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
   tags: core.PropTypes.tags,
-  authors: core.PropTypes.authors,
+  authors: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
+    name: PropTypes__default["default"].string
+  })),
   loading: PropTypes__default["default"].bool,
   withoutSource: PropTypes__default["default"].bool,
   withoutType: PropTypes__default["default"].bool,
@@ -1562,7 +1567,7 @@ var defaultProps = {
   onClearMedia: null
 };
 function MediaGallery(_ref) {
-  var _ref3;
+  var _ref4;
   var type = _ref.type,
     source = _ref.source,
     isPicker = _ref.isPicker,
@@ -1658,6 +1663,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 _ref3 = selectedMedia || {},
+      _ref3$id = _ref3.id,
+      selectedId = _ref3$id === void 0 ? null : _ref3$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 () {
@@ -1695,7 +1713,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, (_ref4 = {}, _defineProperty__default["default"](_ref4, styles.metadataOpened, metadataMedia !== null), _defineProperty__default["default"](_ref4, className, className), _ref4)])
   }, /*#__PURE__*/React__default["default"].createElement(Navbar, {
     types: isArray__default["default"](type) ? type : [type],
     filters: filtersValue,
@@ -1747,7 +1765,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.328",
+    "version": "0.3.330",
     "description": "",
     "keywords": [
         "javascript"
@@ -59,8 +59,8 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.13",
-        "@micromag/core": "^0.3.325",
-        "@micromag/data": "^0.3.328",
+        "@micromag/core": "^0.3.329",
+        "@micromag/data": "^0.3.329",
         "bootstrap": "5.2.0-beta1",
         "change-case": "^4.1.2",
         "classnames": "^2.2.6",
@@ -73,5 +73,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "b7eb67478bab9d9f94212b13db3e2e653566fb35"
+    "gitHead": "4ee3638ac45e97004ea24ddefa27e3b1f369efc9"
 }