@micromag/media-gallery 0.3.124 → 0.3.126

package/es/index.js

@@ -2,14 +2,14 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import classNames from 'classnames';
+import PropTypes$1 from 'prop-types';
+import React, { useMemo, useCallback, useState, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 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 classNames from 'classnames';
-import PropTypes$1 from 'prop-types';
-import React, { useMemo, useCallback, useState, useEffect, useRef } from 'react';
 import { useResizeObserver } from '@micromag/core/hooks';
 import { faHeadphonesAlt } from '@fortawesome/free-solid-svg-icons/faHeadphonesAlt';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons/faInfoCircle';
@@ -360,7 +360,7 @@ function MediaMetadata(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "tags mb-4"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "form-group"
+    className: "my-3"
   }, /*#__PURE__*/React.createElement("h6", null, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "kBz8vF",
     defaultMessage: [{
@@ -371,7 +371,7 @@ function MediaMetadata(_ref) {
     value: name,
     onChange: onNameChange
   })), /*#__PURE__*/React.createElement("div", {
-    className: "form-group"
+    className: "my-3"
   }, /*#__PURE__*/React.createElement("h6", {
     className: "mb-0"
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -392,7 +392,7 @@ function MediaMetadata(_ref) {
     value: description,
     onChange: onDescriptionChange
   })), /*#__PURE__*/React.createElement("div", {
-    className: "form-group"
+    className: "my-3"
   }, /*#__PURE__*/React.createElement("h6", null, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "4fHMVj",
     defaultMessage: [{
@@ -1154,7 +1154,8 @@ var propTypes$1 = {
   onClickAdd: PropTypes$1.func,
   onClickItem: PropTypes$1.func,
   onClickItemInfo: PropTypes$1.func,
-  // onClickCancel: PropTypes.func, // TODO: still needed?
+  onClickClear: PropTypes$1.func,
+  // TODO: still needed?
   onFocusSearch: PropTypes$1.func,
   onFiltersChange: PropTypes$1.func,
   onClickBack: PropTypes$1.func,
@@ -1172,7 +1173,7 @@ var defaultProps$1 = {
   onClickAdd: null,
   onClickItem: null,
   onClickItemInfo: null,
-  // onClickCancel: null,
+  onClickClear: null,
   onFocusSearch: null,
   onFiltersChange: null,
   onClickBack: null,
@@ -1192,6 +1193,7 @@ function Navbar(_ref) {
       onClickAdd = _ref.onClickAdd,
       onClickItem = _ref.onClickItem,
       onClickItemInfo = _ref.onClickItemInfo,
+      onClickClear = _ref.onClickClear,
       onFocusSearch = _ref.onFocusSearch,
       onFiltersChange = _ref.onFiltersChange,
       onClickBack = _ref.onClickBack;
@@ -1285,6 +1287,13 @@ function Navbar(_ref) {
   var onToggleMenu = useCallback(function () {
     setOpen(!open);
   }, [open, setOpen]);
+  var onClickRemove = useCallback(function () {
+    if (onClickClear !== null) {
+      onClickClear();
+    } else if (onClickItem !== null) {
+      onClickItem(null);
+    }
+  }, [onClickClear, onClickItem]);
   return /*#__PURE__*/React.createElement("nav", {
     className: classNames([styles$5.container, 'navbar', _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement("div", {
@@ -1333,9 +1342,7 @@ function Navbar(_ref) {
     icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
       icon: faTimes
     }),
-    onClick: function onClick() {
-      return onClickItem(selectedMedia);
-    },
+    onClick: onClickRemove,
     title: intl.formatMessage({
       id: "UG3SXh",
       defaultMessage: [{
@@ -1404,7 +1411,8 @@ var propTypes = {
   selectedMedia: PropTypes.media,
   className: PropTypes$1.string,
   navbarClassName: PropTypes$1.string,
-  onClickMedia: PropTypes$1.func
+  onClickMedia: PropTypes$1.func,
+  onClearMedia: PropTypes$1.func
 };
 var defaultProps = {
   type: null,
@@ -1418,7 +1426,8 @@ var defaultProps = {
   selectedMedia: null,
   className: null,
   navbarClassName: null,
-  onClickMedia: null
+  onClickMedia: null,
+  onClearMedia: null
 };
 
 function MediaGallery(_ref) {
@@ -1435,7 +1444,8 @@ function MediaGallery(_ref) {
       selectedMedia = _ref.selectedMedia,
       className = _ref.className,
       navbarClassName = _ref.navbarClassName,
-      onClickMedia = _ref.onClickMedia;
+      onClickMedia = _ref.onClickMedia,
+      onClearMedia = _ref.onClearMedia;
   // Base state for filters
   var defaultFilters = {
     type: type,
@@ -1519,7 +1529,7 @@ function MediaGallery(_ref) {
     return setMetadataMedia(null);
   }, [setMetadataMedia]); // Reset all filters except source
 
-  var onClickCancel = useCallback(function () {
+  useCallback(function () {
     return setFiltersValue(_objectSpread(_objectSpread({}, defaultFilters), {}, {
       source: filtersValue.source || null
     }));
@@ -1562,7 +1572,7 @@ function MediaGallery(_ref) {
     onClickItem: onClickItem,
     onClickItemInfo: onClickItemInfo,
     onClickBack: onClickBack,
-    onClickCancel: onClickCancel,
+    onClickClear: onClearMedia,
     withoutTitle: withoutTitle,
     withoutSource: withoutSource,
     withoutType: withoutType,

package/lib/index.js

@@ -4,14 +4,14 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var classNames = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
 var reactDom = require('react-dom');
 var core = require('@micromag/core');
 var components = require('@micromag/core/components');
 var contexts = require('@micromag/core/contexts');
 var data = require('@micromag/data');
-var classNames = require('classnames');
-var PropTypes = require('prop-types');
-var React = require('react');
 var hooks = require('@micromag/core/hooks');
 var faHeadphonesAlt = require('@fortawesome/free-solid-svg-icons/faHeadphonesAlt');
 var faInfoCircle = require('@fortawesome/free-solid-svg-icons/faInfoCircle');
@@ -375,7 +375,7 @@ function MediaMetadata(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "tags mb-4"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "form-group"
+    className: "my-3"
   }, /*#__PURE__*/React__default["default"].createElement("h6", null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
     id: "kBz8vF",
     defaultMessage: [{
@@ -386,7 +386,7 @@ function MediaMetadata(_ref) {
     value: name,
     onChange: onNameChange
   })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "form-group"
+    className: "my-3"
   }, /*#__PURE__*/React__default["default"].createElement("h6", {
     className: "mb-0"
   }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
@@ -407,7 +407,7 @@ function MediaMetadata(_ref) {
     value: description,
     onChange: onDescriptionChange
   })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "form-group"
+    className: "my-3"
   }, /*#__PURE__*/React__default["default"].createElement("h6", null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
     id: "4fHMVj",
     defaultMessage: [{
@@ -1169,7 +1169,8 @@ var propTypes$1 = {
   onClickAdd: PropTypes__default["default"].func,
   onClickItem: PropTypes__default["default"].func,
   onClickItemInfo: PropTypes__default["default"].func,
-  // onClickCancel: PropTypes.func, // TODO: still needed?
+  onClickClear: PropTypes__default["default"].func,
+  // TODO: still needed?
   onFocusSearch: PropTypes__default["default"].func,
   onFiltersChange: PropTypes__default["default"].func,
   onClickBack: PropTypes__default["default"].func,
@@ -1187,7 +1188,7 @@ var defaultProps$1 = {
   onClickAdd: null,
   onClickItem: null,
   onClickItemInfo: null,
-  // onClickCancel: null,
+  onClickClear: null,
   onFocusSearch: null,
   onFiltersChange: null,
   onClickBack: null,
@@ -1207,6 +1208,7 @@ function Navbar(_ref) {
       onClickAdd = _ref.onClickAdd,
       onClickItem = _ref.onClickItem,
       onClickItemInfo = _ref.onClickItemInfo,
+      onClickClear = _ref.onClickClear,
       onFocusSearch = _ref.onFocusSearch,
       onFiltersChange = _ref.onFiltersChange,
       onClickBack = _ref.onClickBack;
@@ -1300,6 +1302,13 @@ function Navbar(_ref) {
   var onToggleMenu = React.useCallback(function () {
     setOpen(!open);
   }, [open, setOpen]);
+  var onClickRemove = React.useCallback(function () {
+    if (onClickClear !== null) {
+      onClickClear();
+    } else if (onClickItem !== null) {
+      onClickItem(null);
+    }
+  }, [onClickClear, onClickItem]);
   return /*#__PURE__*/React__default["default"].createElement("nav", {
     className: classNames__default["default"]([styles$5.container, 'navbar', _defineProperty__default["default"]({}, className, className !== null)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -1348,9 +1357,7 @@ function Navbar(_ref) {
     icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
       icon: faTimes.faTimes
     }),
-    onClick: function onClick() {
-      return onClickItem(selectedMedia);
-    },
+    onClick: onClickRemove,
     title: intl.formatMessage({
       id: "UG3SXh",
       defaultMessage: [{
@@ -1419,7 +1426,8 @@ var propTypes = {
   selectedMedia: core.PropTypes.media,
   className: PropTypes__default["default"].string,
   navbarClassName: PropTypes__default["default"].string,
-  onClickMedia: PropTypes__default["default"].func
+  onClickMedia: PropTypes__default["default"].func,
+  onClearMedia: PropTypes__default["default"].func
 };
 var defaultProps = {
   type: null,
@@ -1433,7 +1441,8 @@ var defaultProps = {
   selectedMedia: null,
   className: null,
   navbarClassName: null,
-  onClickMedia: null
+  onClickMedia: null,
+  onClearMedia: null
 };
 
 function MediaGallery(_ref) {
@@ -1450,7 +1459,8 @@ function MediaGallery(_ref) {
       selectedMedia = _ref.selectedMedia,
       className = _ref.className,
       navbarClassName = _ref.navbarClassName,
-      onClickMedia = _ref.onClickMedia;
+      onClickMedia = _ref.onClickMedia,
+      onClearMedia = _ref.onClearMedia;
   // Base state for filters
   var defaultFilters = {
     type: type,
@@ -1534,7 +1544,7 @@ function MediaGallery(_ref) {
     return setMetadataMedia(null);
   }, [setMetadataMedia]); // Reset all filters except source
 
-  var onClickCancel = React.useCallback(function () {
+  React.useCallback(function () {
     return setFiltersValue(_objectSpread__default["default"](_objectSpread__default["default"]({}, defaultFilters), {}, {
       source: filtersValue.source || null
     }));
@@ -1577,7 +1587,7 @@ function MediaGallery(_ref) {
     onClickItem: onClickItem,
     onClickItemInfo: onClickItemInfo,
     onClickBack: onClickBack,
-    onClickCancel: onClickCancel,
+    onClickClear: onClearMedia,
     withoutTitle: withoutTitle,
     withoutSource: withoutSource,
     withoutType: withoutType,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/media-gallery",
-    "version": "0.3.124",
+    "version": "0.3.126",
     "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.124",
-        "@micromag/data": "^0.3.124",
+        "@micromag/core": "^0.3.126",
+        "@micromag/data": "^0.3.126",
         "bootstrap": "^5.1.0",
         "change-case": "^4.1.2",
         "classnames": "^2.2.6",
@@ -73,5 +73,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "9050944df1d66cae14e04a771f739e2743894fb8"
+    "gitHead": "079203c5850c4aa771bc4fa1c567d2db1bc3ee3d"
 }