@micromag/media-gallery 0.3.335 → 0.3.338

package/es/index.js

@@ -210,6 +210,7 @@ var styles$9 = {"container":"micromag-media-gallery-partials-media-metadata-cont
 var propTypes$9 = {
   media: PropTypes.media,
   tags: PropTypes.tags,
+  onChange: PropTypes$1.func,
   onClickClose: PropTypes$1.func,
   onClickSave: PropTypes$1.func,
   onClickDelete: PropTypes$1.func,
@@ -218,6 +219,7 @@ var propTypes$9 = {
 var defaultProps$9 = {
   media: null,
   tags: [],
+  onChange: null,
   onClickClose: null,
   onClickSave: null,
   onClickDelete: null,
@@ -226,6 +228,7 @@ var defaultProps$9 = {
 function MediaMetadata(_ref) {
   var media = _ref.media,
     allTags = _ref.tags,
+    onChange = _ref.onChange,
     onClickClose = _ref.onClickClose,
     onClickSave = _ref.onClickSave,
     onClickDelete = _ref.onClickDelete,
@@ -320,16 +323,19 @@ function MediaMetadata(_ref) {
       name: name,
       tags: tags,
       description: description
-    }).then(function () {
+    }).then(function (response) {
       setChanged(false);
       setSaveState(null);
       if (onClickSave !== null) {
         onClickSave();
       }
+      if (onChange !== null) {
+        onChange(response);
+      }
     })["catch"](function () {
       setSaveState(false);
     });
-  }, [mediaId, name, tags, description, metadata, update, onClickSave, onClickClose, setChanged, setSaveState]);
+  }, [mediaId, name, tags, description, metadata, update, onChange, onClickSave, onClickClose, setChanged, setSaveState]);
   var _useState11 = useState(null),
     _useState12 = _slicedToArray(_useState11, 2),
     deletedState = _useState12[0],
@@ -1653,6 +1659,7 @@ var propTypes = {
   selectedMedia: PropTypes.media,
   className: PropTypes$1.string,
   navbarClassName: PropTypes$1.string,
+  onChange: PropTypes$1.func,
   onClickMedia: PropTypes$1.func,
   onClearMedia: PropTypes$1.func
 };
@@ -1668,11 +1675,12 @@ var defaultProps = {
   selectedMedia: null,
   className: null,
   navbarClassName: null,
+  onChange: null,
   onClickMedia: null,
   onClearMedia: null
 };
 function MediaGallery(_ref) {
-  var _ref6;
+  var _ref8;
   var type = _ref.type,
     source = _ref.source,
     isPicker = _ref.isPicker,
@@ -1684,6 +1692,7 @@ function MediaGallery(_ref) {
     selectedMedia = _ref.selectedMedia,
     className = _ref.className,
     navbarClassName = _ref.navbarClassName,
+    onChange = _ref.onChange,
     onClickMedia = _ref.onClickMedia,
     onClearMedia = _ref.onClearMedia;
   var intl = useIntl();
@@ -1782,9 +1791,6 @@ function MediaGallery(_ref) {
   var onMetadataClickClose = useCallback(function () {
     setMetadataMedia(null);
   }, [setMetadataMedia]);
-  var onMetadataClickSave = useCallback(function () {
-    reset();
-  }, [reset]);
   var onMetadataClickDelete = useCallback(function () {
     var mediaId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
     var _ref5 = selectedMedia || {},
@@ -1795,7 +1801,24 @@ function MediaGallery(_ref) {
     }
     setMetadataMedia(null);
     reset();
-  }, [setMetadataMedia, selectedMedia]);
+  }, [setMetadataMedia, onClickMedia, reset, selectedMedia]);
+  var onMetadataChange = useCallback(function (val) {
+    setMetadataMedia(val);
+    var _ref6 = val || {},
+      _ref6$id = _ref6.id,
+      mediaId = _ref6$id === void 0 ? null : _ref6$id;
+    var _ref7 = selectedMedia || {},
+      _ref7$id = _ref7.id,
+      selectedId = _ref7$id === void 0 ? null : _ref7$id;
+    if (onChange !== null && mediaId === selectedId) {
+      onChange(val);
+    }
+  }, [setMetadataMedia, selectedMedia, onChange]);
+  useEffect(function () {
+    if (metadataMedia !== null) {
+      window.scrollTo(0, 0);
+    }
+  }, [metadataMedia]);
 
   // Navigation
   var onClickBack = useCallback(function () {
@@ -1827,7 +1850,7 @@ function MediaGallery(_ref) {
     return setUploadModalOpened(false);
   }, [setUploadModalOpened]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, (_ref6 = {}, _defineProperty(_ref6, styles.metadataOpened, metadataMedia !== null), _defineProperty(_ref6, className, className), _ref6)])
+    className: classNames([styles.container, (_ref8 = {}, _defineProperty(_ref8, styles.metadataOpened, metadataMedia !== null), _defineProperty(_ref8, className, className), _ref8)])
   }, /*#__PURE__*/React.createElement(Navbar, {
     types: isArray(type) ? type : [type],
     filters: filtersValue,
@@ -1880,8 +1903,10 @@ function MediaGallery(_ref) {
   }, /*#__PURE__*/React.createElement(MediaMetadata, {
     media: metadataMedia,
     tags: tags,
-    onClickClose: onMetadataClickClose,
-    onClickSave: onMetadataClickSave,
+    onChange: onMetadataChange,
+    onClickClose: onMetadataClickClose
+    // onClickSave={onMetadataClickSave}
+    ,
     onClickDelete: onMetadataClickDelete
   }))), /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(UploadModal, {
     type: type === 'video' ? videoTypes : type,

package/lib/index.js

@@ -226,6 +226,7 @@ var styles$9 = {"container":"micromag-media-gallery-partials-media-metadata-cont
 var propTypes$9 = {
   media: core.PropTypes.media,
   tags: core.PropTypes.tags,
+  onChange: PropTypes__default["default"].func,
   onClickClose: PropTypes__default["default"].func,
   onClickSave: PropTypes__default["default"].func,
   onClickDelete: PropTypes__default["default"].func,
@@ -234,6 +235,7 @@ var propTypes$9 = {
 var defaultProps$9 = {
   media: null,
   tags: [],
+  onChange: null,
   onClickClose: null,
   onClickSave: null,
   onClickDelete: null,
@@ -242,6 +244,7 @@ var defaultProps$9 = {
 function MediaMetadata(_ref) {
   var media = _ref.media,
     allTags = _ref.tags,
+    onChange = _ref.onChange,
     onClickClose = _ref.onClickClose,
     onClickSave = _ref.onClickSave,
     onClickDelete = _ref.onClickDelete,
@@ -336,16 +339,19 @@ function MediaMetadata(_ref) {
       name: name,
       tags: tags,
       description: description
-    }).then(function () {
+    }).then(function (response) {
       setChanged(false);
       setSaveState(null);
       if (onClickSave !== null) {
         onClickSave();
       }
+      if (onChange !== null) {
+        onChange(response);
+      }
     })["catch"](function () {
       setSaveState(false);
     });
-  }, [mediaId, name, tags, description, metadata, update, onClickSave, onClickClose, setChanged, setSaveState]);
+  }, [mediaId, name, tags, description, metadata, update, onChange, onClickSave, onClickClose, setChanged, setSaveState]);
   var _useState11 = React.useState(null),
     _useState12 = _slicedToArray__default["default"](_useState11, 2),
     deletedState = _useState12[0],
@@ -1669,6 +1675,7 @@ var propTypes = {
   selectedMedia: core.PropTypes.media,
   className: PropTypes__default["default"].string,
   navbarClassName: PropTypes__default["default"].string,
+  onChange: PropTypes__default["default"].func,
   onClickMedia: PropTypes__default["default"].func,
   onClearMedia: PropTypes__default["default"].func
 };
@@ -1684,11 +1691,12 @@ var defaultProps = {
   selectedMedia: null,
   className: null,
   navbarClassName: null,
+  onChange: null,
   onClickMedia: null,
   onClearMedia: null
 };
 function MediaGallery(_ref) {
-  var _ref6;
+  var _ref8;
   var type = _ref.type,
     source = _ref.source,
     isPicker = _ref.isPicker,
@@ -1700,6 +1708,7 @@ function MediaGallery(_ref) {
     selectedMedia = _ref.selectedMedia,
     className = _ref.className,
     navbarClassName = _ref.navbarClassName,
+    onChange = _ref.onChange,
     onClickMedia = _ref.onClickMedia,
     onClearMedia = _ref.onClearMedia;
   var intl = reactIntl.useIntl();
@@ -1798,9 +1807,6 @@ function MediaGallery(_ref) {
   var onMetadataClickClose = React.useCallback(function () {
     setMetadataMedia(null);
   }, [setMetadataMedia]);
-  var onMetadataClickSave = React.useCallback(function () {
-    reset();
-  }, [reset]);
   var onMetadataClickDelete = React.useCallback(function () {
     var mediaId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
     var _ref5 = selectedMedia || {},
@@ -1811,7 +1817,24 @@ function MediaGallery(_ref) {
     }
     setMetadataMedia(null);
     reset();
-  }, [setMetadataMedia, selectedMedia]);
+  }, [setMetadataMedia, onClickMedia, reset, selectedMedia]);
+  var onMetadataChange = React.useCallback(function (val) {
+    setMetadataMedia(val);
+    var _ref6 = val || {},
+      _ref6$id = _ref6.id,
+      mediaId = _ref6$id === void 0 ? null : _ref6$id;
+    var _ref7 = selectedMedia || {},
+      _ref7$id = _ref7.id,
+      selectedId = _ref7$id === void 0 ? null : _ref7$id;
+    if (onChange !== null && mediaId === selectedId) {
+      onChange(val);
+    }
+  }, [setMetadataMedia, selectedMedia, onChange]);
+  React.useEffect(function () {
+    if (metadataMedia !== null) {
+      window.scrollTo(0, 0);
+    }
+  }, [metadataMedia]);
 
   // Navigation
   var onClickBack = React.useCallback(function () {
@@ -1843,7 +1866,7 @@ function MediaGallery(_ref) {
     return setUploadModalOpened(false);
   }, [setUploadModalOpened]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles.container, (_ref6 = {}, _defineProperty__default["default"](_ref6, styles.metadataOpened, metadataMedia !== null), _defineProperty__default["default"](_ref6, className, className), _ref6)])
+    className: classNames__default["default"]([styles.container, (_ref8 = {}, _defineProperty__default["default"](_ref8, styles.metadataOpened, metadataMedia !== null), _defineProperty__default["default"](_ref8, className, className), _ref8)])
   }, /*#__PURE__*/React__default["default"].createElement(Navbar, {
     types: isArray__default["default"](type) ? type : [type],
     filters: filtersValue,
@@ -1896,8 +1919,10 @@ function MediaGallery(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(MediaMetadata, {
     media: metadataMedia,
     tags: tags,
-    onClickClose: onMetadataClickClose,
-    onClickSave: onMetadataClickSave,
+    onChange: onMetadataChange,
+    onClickClose: onMetadataClickClose
+    // onClickSave={onMetadataClickSave}
+    ,
     onClickDelete: onMetadataClickDelete
   }))), /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(components.UploadModal, {
     type: type === 'video' ? videoTypes : type,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/media-gallery",
-    "version": "0.3.335",
+    "version": "0.3.338",
     "description": "",
     "keywords": [
         "javascript"
@@ -60,7 +60,7 @@
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.13",
         "@micromag/core": "^0.3.332",
-        "@micromag/data": "^0.3.335",
+        "@micromag/data": "^0.3.338",
         "bootstrap": "5.2.0-beta1",
         "change-case": "^4.1.2",
         "classnames": "^2.2.6",
@@ -73,5 +73,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "2d4617589f6091803cee6d5614c61297bba3bdc6"
+    "gitHead": "07fe87efa3938e96be918c8e568925414232742c"
 }