@panneau/medias 3.0.204 → 3.0.206

package/es/index.js

@@ -100,7 +100,7 @@ var useMedias = function useMedias() {
 var useMedias$1 = useMedias;
 
 var _excluded$6 = ["data"];
-var useMedia$1 = function useMedia(id, opts) {
+var useMedia = function useMedia(id, opts) {
   var api = useMediasApi();
   var loader = useCallback(function () {
     return api.find(id);
@@ -112,7 +112,7 @@ var useMedia$1 = function useMedia(id, opts) {
     story: data
   }, request);
 };
-var useMedia$2 = useMedia$1;
+var useMedia$1 = useMedia;
 
 var useMediaCreate = function useMediaCreate() {
   var _useState = useState(false),
@@ -194,9 +194,42 @@ var useMediaTrash = function useMediaTrash() {
 };
 var useMediaTrash$1 = useMediaTrash;
 
+var MediaContext = /*#__PURE__*/React.createContext(null);
+var useCurrentMedia = function useCurrentMedia() {
+  return useContext(MediaContext);
+};
+var propTypes$8 = {
+  media: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  }),
+  children: PropTypes.node.isRequired
+};
+var defaultProps$8 = {
+  media: null
+};
+function MediaProvider(_ref) {
+  var providedMedia = _ref.media,
+    children = _ref.children;
+  var _useState = useState(providedMedia),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentMedia = _useState2[0],
+    setCurrentMedia = _useState2[1];
+  var values = useMemo(function () {
+    return {
+      currentMedia: currentMedia,
+      setCurrentMedia: setCurrentMedia
+    };
+  }, [currentMedia, setCurrentMedia]);
+  return /*#__PURE__*/React.createElement(MediaContext.Provider, {
+    value: values
+  }, children);
+}
+MediaProvider.propTypes = propTypes$8;
+MediaProvider.defaultProps = defaultProps$8;
+
 var styles = {"mediaFrame":"panneau-medias-mediaFrame","playButton":"panneau-medias-playButton"};
 
-var propTypes$8 = {
+var propTypes$7 = {
   value: PropTypes.shape({
     id: PropTypes.string,
     type: PropTypes.string
@@ -204,7 +237,7 @@ var propTypes$8 = {
   showPlayer: PropTypes.bool,
   className: PropTypes.string
 };
-var defaultProps$8 = {
+var defaultProps$7 = {
   value: null,
   showPlayer: true,
   className: null
@@ -237,8 +270,8 @@ function MediaFrame(_ref) {
     onClick: type === 'video' || type === 'audio' ? onClick : null
   }));
 }
-MediaFrame.propTypes = propTypes$8;
-MediaFrame.defaultProps = defaultProps$8;
+MediaFrame.propTypes = propTypes$7;
+MediaFrame.defaultProps = defaultProps$7;
 
 var defaultFields = [{
   name: 'name',
@@ -373,7 +406,7 @@ var defaultFields = [{
   }]
 }];
 
-var propTypes$7 = {
+var propTypes$6 = {
   value: PropTypes.shape({
     id: PropTypes.string
   }),
@@ -388,7 +421,7 @@ var propTypes$7 = {
   className: PropTypes.string,
   children: PropTypes.node
 };
-var defaultProps$7 = {
+var defaultProps$6 = {
   value: null,
   fields: defaultFields,
   onChange: null,
@@ -558,41 +591,8 @@ function MediaForm(_ref) {
     status: status
   })) : null)));
 }
-MediaForm.propTypes = propTypes$7;
-MediaForm.defaultProps = defaultProps$7;
-
-var MediaContext = /*#__PURE__*/React.createContext(null);
-var useMedia = function useMedia() {
-  return useContext(MediaContext);
-};
-var propTypes$6 = {
-  media: PropTypes.shape({
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-  }),
-  children: PropTypes.node.isRequired
-};
-var defaultProps$6 = {
-  media: null
-};
-function MediaProvider(_ref) {
-  var providedMedia = _ref.media,
-    children = _ref.children;
-  var _useState = useState(providedMedia),
-    _useState2 = _slicedToArray(_useState, 2),
-    media = _useState2[0],
-    setMedia = _useState2[1];
-  var values = useMemo(function () {
-    return {
-      media: media,
-      setMedia: setMedia
-    };
-  }, [media, setMedia]);
-  return /*#__PURE__*/React.createElement(MediaContext.Provider, {
-    value: values
-  }, children);
-}
-MediaProvider.propTypes = propTypes$6;
-MediaProvider.defaultProps = defaultProps$6;
+MediaForm.propTypes = propTypes$6;
+MediaForm.defaultProps = defaultProps$6;
 
 var defaultColumns = [{
   id: 'image',
@@ -989,9 +989,9 @@ function MediasBrowser(_ref) {
       onLayoutChange(newLayout);
     }
   }, [setLayout]);
-  var _useMedia = useMedia(),
-    currentMedia = _useMedia.media,
-    setCurrentMedia = _useMedia.setMedia;
+  var _useCurrentMedia = useCurrentMedia(),
+    currentMedia = _useCurrentMedia.currentMedia,
+    setCurrentMedia = _useCurrentMedia.setCurrentMedia;
   useEffect(function () {
     if (currentMedia !== null && onMediaFormOpen !== null) {
       onMediaFormOpen();
@@ -1126,13 +1126,13 @@ function MediasBrowser(_ref) {
     }) : columns;
   }, [columns, withTrash, showTrashed]);
   var finalItems = useMemo(function () {
-    if (withStickySelection && (extraItems !== null || selectedItems !== null || uploadedMedias !== null || uploadProcessing === true)) {
+    if (withStickySelection && (extraItems !== null || uploadedMedias !== null || uploadProcessing === true)) {
       return uniqBy([].concat(_toConsumableArray(uploadProcessing ? [{
         id: '-',
         loading: true,
         actionsDisabled: true,
         selectionDisabled: true
-      }] : []), _toConsumableArray(page === 1 ? uploadedMedias || [] : []), _toConsumableArray(page === 1 ? (selectedItems || []).map(function (item) {
+      }] : []), _toConsumableArray(page === 1 ? uploadedMedias || [] : []), _toConsumableArray(page === 1 ? (extraItems || []).map(function (item) {
         var _item$id = item.id,
           itemId = _item$id === void 0 ? null : _item$id;
         return (allItems || []).find(function () {
@@ -1143,18 +1143,7 @@ function MediasBrowser(_ref) {
         }) || item || null;
       }).filter(function (it) {
         return it !== null;
-      }) || [] : []), _toConsumableArray((extraItems || []).map(function (item) {
-        var _item$id2 = item.id,
-          itemId = _item$id2 === void 0 ? null : _item$id2;
-        return (allItems || []).find(function () {
-          var _ref10 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-            _ref10$id = _ref10.id,
-            otherId = _ref10$id === void 0 ? null : _ref10$id;
-          return otherId === itemId;
-        }) || item || null;
-      }).filter(function (it) {
-        return it !== null;
-      })), _toConsumableArray(items || [])), function (it) {
+      }) || [] : []), _toConsumableArray(items || [])), function (it) {
         return it === null || it === void 0 ? void 0 : it.id;
       });
     }
@@ -1253,9 +1242,9 @@ function MediasBrowser(_ref) {
     loaded: loaded,
     actionsProps: {
       getDeletePropsFromItem: function getDeletePropsFromItem() {
-        var _ref11 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-          _ref11$id = _ref11.id,
-          id = _ref11$id === void 0 ? null : _ref11$id;
+        var _ref10 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          _ref10$id = _ref10.id,
+          id = _ref10$id === void 0 ? null : _ref10$id;
         return {
           href: null,
           onClick: function onClick() {
@@ -1302,6 +1291,15 @@ function MediasPicker(_ref) {
     multiple = _ref.multiple,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$4);
+  // Keep the previous selection on top of first page
+  var extraItems = useMemo(function () {
+    if (initialSelectedItems === null) {
+      return null;
+    }
+    return isArray(initialSelectedItems) ? initialSelectedItems : [initialSelectedItems];
+  }, []);
+
+  // Mostly for testing
   var _useState = useState(initialSelectedItems || null),
     _useState2 = _slicedToArray(_useState, 2),
     selectedItems = _useState2[0],
@@ -1327,7 +1325,8 @@ function MediasPicker(_ref) {
     selectable: true,
     selectedItems: selectedItems,
     onSelectionChange: onSelectionChange,
-    multipleSelection: multiple
+    multipleSelection: multiple,
+    extraItems: extraItems
   }, props)));
 }
 MediasPicker.propTypes = propTypes$4;
@@ -1545,4 +1544,4 @@ function MediasResourcePicker(_ref) {
 MediasResourcePicker.propTypes = propTypes;
 MediasResourcePicker.defaultProps = defaultProps;
 
-export { MediaForm, MediasApiProvider, MediasBrowser, MediasBrowserContainer, MediasPicker, MediasPickerContainer, MediasResourceBrowser, MediasResourcePicker, apiPropTypes, defaultColumns as columns, defaultFields as fields, defaultFilters as filters, useMedia$2 as useMedia, useMediaCreate$1 as useMediaCreate, useMediaDelete$1 as useMediaDelete, useMediaTrash$1 as useMediaTrash, useMediaUpdate$1 as useMediaUpdate, useMedias$1 as useMedias, useMediasApi };
+export { MediaForm, MediasApiProvider, MediasBrowser, MediasBrowserContainer, MediasPicker, MediasPickerContainer, MediasResourceBrowser, MediasResourcePicker, apiPropTypes, defaultColumns as columns, defaultFields as fields, defaultFilters as filters, useCurrentMedia, useMedia$1 as useMedia, useMediaCreate$1 as useMediaCreate, useMediaDelete$1 as useMediaDelete, useMediaTrash$1 as useMediaTrash, useMediaUpdate$1 as useMediaUpdate, useMedias$1 as useMedias, useMediasApi };

package/lib/index.js

@@ -102,7 +102,7 @@ var useMedias = function useMedias() {
 var useMedias$1 = useMedias;
 
 var _excluded$6 = ["data"];
-var useMedia$1 = function useMedia(id, opts) {
+var useMedia = function useMedia(id, opts) {
   var api = useMediasApi();
   var loader = React.useCallback(function () {
     return api.find(id);
@@ -114,7 +114,7 @@ var useMedia$1 = function useMedia(id, opts) {
     story: data$1
   }, request);
 };
-var useMedia$2 = useMedia$1;
+var useMedia$1 = useMedia;
 
 var useMediaCreate = function useMediaCreate() {
   var _useState = React.useState(false),
@@ -196,9 +196,42 @@ var useMediaTrash = function useMediaTrash() {
 };
 var useMediaTrash$1 = useMediaTrash;
 
+var MediaContext = /*#__PURE__*/React.createContext(null);
+var useCurrentMedia = function useCurrentMedia() {
+  return React.useContext(MediaContext);
+};
+var propTypes$8 = {
+  media: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  }),
+  children: PropTypes.node.isRequired
+};
+var defaultProps$8 = {
+  media: null
+};
+function MediaProvider(_ref) {
+  var providedMedia = _ref.media,
+    children = _ref.children;
+  var _useState = React.useState(providedMedia),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentMedia = _useState2[0],
+    setCurrentMedia = _useState2[1];
+  var values = React.useMemo(function () {
+    return {
+      currentMedia: currentMedia,
+      setCurrentMedia: setCurrentMedia
+    };
+  }, [currentMedia, setCurrentMedia]);
+  return /*#__PURE__*/React.createElement(MediaContext.Provider, {
+    value: values
+  }, children);
+}
+MediaProvider.propTypes = propTypes$8;
+MediaProvider.defaultProps = defaultProps$8;
+
 var styles = {"mediaFrame":"panneau-medias-mediaFrame","playButton":"panneau-medias-playButton"};
 
-var propTypes$8 = {
+var propTypes$7 = {
   value: PropTypes.shape({
     id: PropTypes.string,
     type: PropTypes.string
@@ -206,7 +239,7 @@ var propTypes$8 = {
   showPlayer: PropTypes.bool,
   className: PropTypes.string
 };
-var defaultProps$8 = {
+var defaultProps$7 = {
   value: null,
   showPlayer: true,
   className: null
@@ -239,8 +272,8 @@ function MediaFrame(_ref) {
     onClick: type === 'video' || type === 'audio' ? onClick : null
   }));
 }
-MediaFrame.propTypes = propTypes$8;
-MediaFrame.defaultProps = defaultProps$8;
+MediaFrame.propTypes = propTypes$7;
+MediaFrame.defaultProps = defaultProps$7;
 
 var defaultFields = [{
   name: 'name',
@@ -375,7 +408,7 @@ var defaultFields = [{
   }]
 }];
 
-var propTypes$7 = {
+var propTypes$6 = {
   value: PropTypes.shape({
     id: PropTypes.string
   }),
@@ -390,7 +423,7 @@ var propTypes$7 = {
   className: PropTypes.string,
   children: PropTypes.node
 };
-var defaultProps$7 = {
+var defaultProps$6 = {
   value: null,
   fields: defaultFields,
   onChange: null,
@@ -560,41 +593,8 @@ function MediaForm(_ref) {
     status: status
   })) : null)));
 }
-MediaForm.propTypes = propTypes$7;
-MediaForm.defaultProps = defaultProps$7;
-
-var MediaContext = /*#__PURE__*/React.createContext(null);
-var useMedia = function useMedia() {
-  return React.useContext(MediaContext);
-};
-var propTypes$6 = {
-  media: PropTypes.shape({
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-  }),
-  children: PropTypes.node.isRequired
-};
-var defaultProps$6 = {
-  media: null
-};
-function MediaProvider(_ref) {
-  var providedMedia = _ref.media,
-    children = _ref.children;
-  var _useState = React.useState(providedMedia),
-    _useState2 = _slicedToArray(_useState, 2),
-    media = _useState2[0],
-    setMedia = _useState2[1];
-  var values = React.useMemo(function () {
-    return {
-      media: media,
-      setMedia: setMedia
-    };
-  }, [media, setMedia]);
-  return /*#__PURE__*/React.createElement(MediaContext.Provider, {
-    value: values
-  }, children);
-}
-MediaProvider.propTypes = propTypes$6;
-MediaProvider.defaultProps = defaultProps$6;
+MediaForm.propTypes = propTypes$6;
+MediaForm.defaultProps = defaultProps$6;
 
 var defaultColumns = [{
   id: 'image',
@@ -991,9 +991,9 @@ function MediasBrowser(_ref) {
       onLayoutChange(newLayout);
     }
   }, [setLayout]);
-  var _useMedia = useMedia(),
-    currentMedia = _useMedia.media,
-    setCurrentMedia = _useMedia.setMedia;
+  var _useCurrentMedia = useCurrentMedia(),
+    currentMedia = _useCurrentMedia.currentMedia,
+    setCurrentMedia = _useCurrentMedia.setCurrentMedia;
   React.useEffect(function () {
     if (currentMedia !== null && onMediaFormOpen !== null) {
       onMediaFormOpen();
@@ -1128,13 +1128,13 @@ function MediasBrowser(_ref) {
     }) : columns;
   }, [columns, withTrash, showTrashed]);
   var finalItems = React.useMemo(function () {
-    if (withStickySelection && (extraItems !== null || selectedItems !== null || uploadedMedias !== null || uploadProcessing === true)) {
+    if (withStickySelection && (extraItems !== null || uploadedMedias !== null || uploadProcessing === true)) {
       return uniqBy([].concat(_toConsumableArray(uploadProcessing ? [{
         id: '-',
         loading: true,
         actionsDisabled: true,
         selectionDisabled: true
-      }] : []), _toConsumableArray(page === 1 ? uploadedMedias || [] : []), _toConsumableArray(page === 1 ? (selectedItems || []).map(function (item) {
+      }] : []), _toConsumableArray(page === 1 ? uploadedMedias || [] : []), _toConsumableArray(page === 1 ? (extraItems || []).map(function (item) {
         var _item$id = item.id,
           itemId = _item$id === void 0 ? null : _item$id;
         return (allItems || []).find(function () {
@@ -1145,18 +1145,7 @@ function MediasBrowser(_ref) {
         }) || item || null;
       }).filter(function (it) {
         return it !== null;
-      }) || [] : []), _toConsumableArray((extraItems || []).map(function (item) {
-        var _item$id2 = item.id,
-          itemId = _item$id2 === void 0 ? null : _item$id2;
-        return (allItems || []).find(function () {
-          var _ref10 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-            _ref10$id = _ref10.id,
-            otherId = _ref10$id === void 0 ? null : _ref10$id;
-          return otherId === itemId;
-        }) || item || null;
-      }).filter(function (it) {
-        return it !== null;
-      })), _toConsumableArray(items || [])), function (it) {
+      }) || [] : []), _toConsumableArray(items || [])), function (it) {
         return it === null || it === void 0 ? void 0 : it.id;
       });
     }
@@ -1255,9 +1244,9 @@ function MediasBrowser(_ref) {
     loaded: loaded,
     actionsProps: {
       getDeletePropsFromItem: function getDeletePropsFromItem() {
-        var _ref11 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-          _ref11$id = _ref11.id,
-          id = _ref11$id === void 0 ? null : _ref11$id;
+        var _ref10 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          _ref10$id = _ref10.id,
+          id = _ref10$id === void 0 ? null : _ref10$id;
         return {
           href: null,
           onClick: function onClick() {
@@ -1304,6 +1293,15 @@ function MediasPicker(_ref) {
     multiple = _ref.multiple,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$4);
+  // Keep the previous selection on top of first page
+  var extraItems = React.useMemo(function () {
+    if (initialSelectedItems === null) {
+      return null;
+    }
+    return isArray(initialSelectedItems) ? initialSelectedItems : [initialSelectedItems];
+  }, []);
+
+  // Mostly for testing
   var _useState = React.useState(initialSelectedItems || null),
     _useState2 = _slicedToArray(_useState, 2),
     selectedItems = _useState2[0],
@@ -1329,7 +1327,8 @@ function MediasPicker(_ref) {
     selectable: true,
     selectedItems: selectedItems,
     onSelectionChange: onSelectionChange,
-    multipleSelection: multiple
+    multipleSelection: multiple,
+    extraItems: extraItems
   }, props)));
 }
 MediasPicker.propTypes = propTypes$4;
@@ -1559,7 +1558,8 @@ exports.apiPropTypes = apiPropTypes;
 exports.columns = defaultColumns;
 exports.fields = defaultFields;
 exports.filters = defaultFilters;
-exports.useMedia = useMedia$2;
+exports.useCurrentMedia = useCurrentMedia;
+exports.useMedia = useMedia$1;
 exports.useMediaCreate = useMediaCreate$1;
 exports.useMediaDelete = useMediaDelete$1;
 exports.useMediaTrash = useMediaTrash$1;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/medias",
-    "version": "3.0.204",
+    "version": "3.0.206",
     "description": "",
     "keywords": [
         "javascript"
@@ -69,5 +69,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "d9693b3e1d6112feb97a0752590c2715024b6789"
+    "gitHead": "793739a25b15e6120a108e4dcfa66a160f18a3b7"
 }