@panneau/medias 3.0.208 → 3.0.210

package/es/index.js

@@ -496,7 +496,20 @@ function MediaForm(_ref) {
     style: {
       maxWidth: '66%'
     }
-  }, /*#__PURE__*/React.createElement("h4", {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "me-3 mb-0"
+  }, /*#__PURE__*/React.createElement(Button, {
+    theme: "secondary",
+    outline: true,
+    onClick: onClose,
+    icon: "arrow-left"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "8NyYTH",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Back"
+    }]
+  }))), /*#__PURE__*/React.createElement("h4", {
     className: "d-inline text-truncate mb-0"
   }, name), /*#__PURE__*/React.createElement("span", {
     className: "mx-2"
@@ -905,9 +918,9 @@ function MediasBrowser(_ref) {
   var baseQuery = useMemo(function () {
     return _objectSpread(_objectSpread({
       count: 12
-    }, initialQuery), {}, {
+    }, initialQuery), types !== null ? {
       types: types
-    });
+    } : null);
   }, [initialQuery, types]);
   var _useQuery = useQuery(baseQuery),
     fullQuery = _useQuery.query,
@@ -937,8 +950,9 @@ function MediasBrowser(_ref) {
   // eslint-disable-next-line no-unused-vars
   var _ref3 = query || {};
     _ref3.types;
-    _ref3.trashed;
-    var queryWithoutTypes = _objectWithoutProperties(_ref3, _excluded2);
+    var _ref3$trashed = _ref3.trashed,
+    trashed = _ref3$trashed === void 0 ? null : _ref3$trashed,
+    queryWithoutTypes = _objectWithoutProperties(_ref3, _excluded2);
   var _useMediaTrash = useMediaTrash$1(),
     mediaTrash = _useMediaTrash.mediaTrash,
     trashing = _useMediaTrash.trashing;
@@ -1067,6 +1081,7 @@ function MediasBrowser(_ref) {
     withPreviousNext: true,
     alwaysShowButtons: true
   });
+  var hidePagination = loaded && !loading && (items || []).length === 0;
   var finalFilters = useMemo(function () {
     var partialFilters = withTrash ? (filters || []).concat([{
       name: 'trashed',
@@ -1113,7 +1128,11 @@ function MediasBrowser(_ref) {
         return _objectSpread(_objectSpread({}, column), {}, {
           actions: (actions || []).reduce(function (acc, action) {
             if (action === 'delete') {
-              acc.push('restore');
+              acc.push({
+                id: 'restore',
+                component: 'restore',
+                withConfirmation: true
+              });
             }
             acc.push(action);
             return acc;
@@ -1125,6 +1144,10 @@ function MediasBrowser(_ref) {
       return column;
     }) : columns;
   }, [columns, withTrash, showTrashed]);
+  var hasQueryItem = useMemo(function () {
+    var showOnTopQuery = types === null ? query : queryWithoutTypes;
+    return showOnTopQuery !== null && !trashed ? Object.keys(showOnTopQuery).length > 0 : false;
+  }, [types, query, queryWithoutTypes, trashed]);
   var finalItems = useMemo(function () {
     if (withStickySelection && (extraItems !== null || uploadedMedias !== null || uploadProcessing === true)) {
       return uniqBy([].concat(_toConsumableArray(uploadProcessing ? [{
@@ -1132,7 +1155,7 @@ function MediasBrowser(_ref) {
         loading: true,
         actionsDisabled: true,
         selectionDisabled: true
-      }] : []), _toConsumableArray(page === 1 ? uploadedMedias || [] : []), _toConsumableArray(page === 1 ? (extraItems || []).map(function (item) {
+      }] : []), _toConsumableArray(page === 1 && !hasQueryItem ? uploadedMedias || [] : []), _toConsumableArray(page === 1 && !hasQueryItem ? (extraItems || []).map(function (item) {
         var _item$id = item.id,
           itemId = _item$id === void 0 ? null : _item$id;
         return (allItems || []).find(function () {
@@ -1148,29 +1171,23 @@ function MediasBrowser(_ref) {
       });
     }
     return items;
-  }, [items, page, allItems, withStickySelection, extraItems, uploadProcessing]);
+  }, [items, page, allItems, withStickySelection, extraItems, uploadProcessing, hasQueryItem]);
+
+  // const emptyWithSticky = useMemo(
+  //     () => (items || []).length === 0 && (finalItems || []).length > 0,
+  //     [items, finalItems],
+  // );
+
   return /*#__PURE__*/React.createElement("div", {
     className: className
-  }, currentMedia !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "mt-2 mb-0"
-  }, /*#__PURE__*/React.createElement(Button, {
-    theme: "primary",
-    onClick: onCloseMedia,
-    icon: "arrow-left"
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "ac4218",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Back to files"
-    }]
-  }))), /*#__PURE__*/React.createElement(MediaForm, {
+  }, currentMedia !== null ? /*#__PURE__*/React.createElement(MediaForm, {
     value: currentMedia,
     fields: fields,
     onChange: setCurrentMedia,
     onSave: onSaveMedia,
     onClose: onCloseMedia,
     withTrash: withTrash
-  }, formChildren)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }, formChildren) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: classNames(['d-flex', 'justify-content-between'])
   }, filters !== null ? /*#__PURE__*/React.createElement(Filters, {
     value: query,
@@ -1205,10 +1222,10 @@ function MediasBrowser(_ref) {
         onClick: function onClick() {
           return onClickLayout(lay.id);
         },
-        className: 'px-3'
+        className: 'px-3 py-2'
       });
     })
-  }) : null, pagination), layout === 'grid' ? /*#__PURE__*/React.createElement(Grid, {
+  }) : null, !hidePagination ? pagination : /*#__PURE__*/React.createElement("div", null)), layout === 'grid' ? /*#__PURE__*/React.createElement(Grid, {
     size: "small",
     theme: theme,
     component: MediaCard,
@@ -1227,6 +1244,7 @@ function MediasBrowser(_ref) {
     items: finalItems || [],
     loading: loading,
     loaded: loaded
+    // empty={emptyWithSticky}
   }) : null, layout === 'table' ? /*#__PURE__*/React.createElement(Table, {
     theme: theme,
     columns: finalColumns,
@@ -1239,20 +1257,24 @@ function MediasBrowser(_ref) {
     multipleSelection: multipleSelection,
     items: finalItems,
     loading: loading,
-    loaded: loaded,
+    loaded: loaded
+    // empty={emptyWithSticky}
+    ,
     actionsProps: {
       getDeletePropsFromItem: function getDeletePropsFromItem() {
         var _ref10 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
           _ref10$id = _ref10.id,
           id = _ref10$id === void 0 ? null : _ref10$id;
-        return {
+        return _objectSpread({
           href: null,
-          onClick: function onClick() {
-            return !showTrashed && withTrash ? mediaTrash(id) : mediaDelete(id);
-          },
+          withConfirmation: true,
           disabled: trashing || deleting,
           icon: showTrashed ? 'trash-fill' : 'trash'
-        };
+        }, withTrash ? {
+          onClick: function onClick() {
+            return !showTrashed && withTrash ? mediaTrash(id) : mediaDelete(id);
+          }
+        } : null);
       },
       getEditPropsFromItem: function getEditPropsFromItem(it) {
         return {
@@ -1263,9 +1285,9 @@ function MediasBrowser(_ref) {
         };
       }
     }
-  }) : null, /*#__PURE__*/React.createElement("div", {
+  }) : null, !hidePagination ? /*#__PURE__*/React.createElement("div", {
     className: classNames(['d-flex', 'mt-3', 'mb-1', 'justify-content-end'])
-  }, pagination)));
+  }, pagination) : null));
 }
 MediasBrowser.propTypes = propTypes$5;
 MediasBrowser.defaultProps = defaultProps$5;

package/lib/index.js

@@ -498,7 +498,20 @@ function MediaForm(_ref) {
     style: {
       maxWidth: '66%'
     }
-  }, /*#__PURE__*/React.createElement("h4", {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "me-3 mb-0"
+  }, /*#__PURE__*/React.createElement(Button, {
+    theme: "secondary",
+    outline: true,
+    onClick: onClose,
+    icon: "arrow-left"
+  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "8NyYTH",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Back"
+    }]
+  }))), /*#__PURE__*/React.createElement("h4", {
     className: "d-inline text-truncate mb-0"
   }, name), /*#__PURE__*/React.createElement("span", {
     className: "mx-2"
@@ -907,9 +920,9 @@ function MediasBrowser(_ref) {
   var baseQuery = React.useMemo(function () {
     return _objectSpread(_objectSpread({
       count: 12
-    }, initialQuery), {}, {
+    }, initialQuery), types !== null ? {
       types: types
-    });
+    } : null);
   }, [initialQuery, types]);
   var _useQuery = hooks.useQuery(baseQuery),
     fullQuery = _useQuery.query,
@@ -939,8 +952,9 @@ function MediasBrowser(_ref) {
   // eslint-disable-next-line no-unused-vars
   var _ref3 = query || {};
     _ref3.types;
-    _ref3.trashed;
-    var queryWithoutTypes = _objectWithoutProperties(_ref3, _excluded2);
+    var _ref3$trashed = _ref3.trashed,
+    trashed = _ref3$trashed === void 0 ? null : _ref3$trashed,
+    queryWithoutTypes = _objectWithoutProperties(_ref3, _excluded2);
   var _useMediaTrash = useMediaTrash$1(),
     mediaTrash = _useMediaTrash.mediaTrash,
     trashing = _useMediaTrash.trashing;
@@ -1069,6 +1083,7 @@ function MediasBrowser(_ref) {
     withPreviousNext: true,
     alwaysShowButtons: true
   });
+  var hidePagination = loaded && !loading && (items || []).length === 0;
   var finalFilters = React.useMemo(function () {
     var partialFilters = withTrash ? (filters || []).concat([{
       name: 'trashed',
@@ -1115,7 +1130,11 @@ function MediasBrowser(_ref) {
         return _objectSpread(_objectSpread({}, column), {}, {
           actions: (actions || []).reduce(function (acc, action) {
             if (action === 'delete') {
-              acc.push('restore');
+              acc.push({
+                id: 'restore',
+                component: 'restore',
+                withConfirmation: true
+              });
             }
             acc.push(action);
             return acc;
@@ -1127,6 +1146,10 @@ function MediasBrowser(_ref) {
       return column;
     }) : columns;
   }, [columns, withTrash, showTrashed]);
+  var hasQueryItem = React.useMemo(function () {
+    var showOnTopQuery = types === null ? query : queryWithoutTypes;
+    return showOnTopQuery !== null && !trashed ? Object.keys(showOnTopQuery).length > 0 : false;
+  }, [types, query, queryWithoutTypes, trashed]);
   var finalItems = React.useMemo(function () {
     if (withStickySelection && (extraItems !== null || uploadedMedias !== null || uploadProcessing === true)) {
       return uniqBy([].concat(_toConsumableArray(uploadProcessing ? [{
@@ -1134,7 +1157,7 @@ function MediasBrowser(_ref) {
         loading: true,
         actionsDisabled: true,
         selectionDisabled: true
-      }] : []), _toConsumableArray(page === 1 ? uploadedMedias || [] : []), _toConsumableArray(page === 1 ? (extraItems || []).map(function (item) {
+      }] : []), _toConsumableArray(page === 1 && !hasQueryItem ? uploadedMedias || [] : []), _toConsumableArray(page === 1 && !hasQueryItem ? (extraItems || []).map(function (item) {
         var _item$id = item.id,
           itemId = _item$id === void 0 ? null : _item$id;
         return (allItems || []).find(function () {
@@ -1150,29 +1173,23 @@ function MediasBrowser(_ref) {
       });
     }
     return items;
-  }, [items, page, allItems, withStickySelection, extraItems, uploadProcessing]);
+  }, [items, page, allItems, withStickySelection, extraItems, uploadProcessing, hasQueryItem]);
+
+  // const emptyWithSticky = useMemo(
+  //     () => (items || []).length === 0 && (finalItems || []).length > 0,
+  //     [items, finalItems],
+  // );
+
   return /*#__PURE__*/React.createElement("div", {
     className: className
-  }, currentMedia !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "mt-2 mb-0"
-  }, /*#__PURE__*/React.createElement(Button, {
-    theme: "primary",
-    onClick: onCloseMedia,
-    icon: "arrow-left"
-  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "ac4218",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Back to files"
-    }]
-  }))), /*#__PURE__*/React.createElement(MediaForm, {
+  }, currentMedia !== null ? /*#__PURE__*/React.createElement(MediaForm, {
     value: currentMedia,
     fields: fields,
     onChange: setCurrentMedia,
     onSave: onSaveMedia,
     onClose: onCloseMedia,
     withTrash: withTrash
-  }, formChildren)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }, formChildren) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: classNames(['d-flex', 'justify-content-between'])
   }, filters !== null ? /*#__PURE__*/React.createElement(Filters, {
     value: query,
@@ -1207,10 +1224,10 @@ function MediasBrowser(_ref) {
         onClick: function onClick() {
           return onClickLayout(lay.id);
         },
-        className: 'px-3'
+        className: 'px-3 py-2'
       });
     })
-  }) : null, pagination), layout === 'grid' ? /*#__PURE__*/React.createElement(Grid, {
+  }) : null, !hidePagination ? pagination : /*#__PURE__*/React.createElement("div", null)), layout === 'grid' ? /*#__PURE__*/React.createElement(Grid, {
     size: "small",
     theme: theme,
     component: MediaCard,
@@ -1229,6 +1246,7 @@ function MediasBrowser(_ref) {
     items: finalItems || [],
     loading: loading,
     loaded: loaded
+    // empty={emptyWithSticky}
   }) : null, layout === 'table' ? /*#__PURE__*/React.createElement(Table, {
     theme: theme,
     columns: finalColumns,
@@ -1241,20 +1259,24 @@ function MediasBrowser(_ref) {
     multipleSelection: multipleSelection,
     items: finalItems,
     loading: loading,
-    loaded: loaded,
+    loaded: loaded
+    // empty={emptyWithSticky}
+    ,
     actionsProps: {
       getDeletePropsFromItem: function getDeletePropsFromItem() {
         var _ref10 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
           _ref10$id = _ref10.id,
           id = _ref10$id === void 0 ? null : _ref10$id;
-        return {
+        return _objectSpread({
           href: null,
-          onClick: function onClick() {
-            return !showTrashed && withTrash ? mediaTrash(id) : mediaDelete(id);
-          },
+          withConfirmation: true,
           disabled: trashing || deleting,
           icon: showTrashed ? 'trash-fill' : 'trash'
-        };
+        }, withTrash ? {
+          onClick: function onClick() {
+            return !showTrashed && withTrash ? mediaTrash(id) : mediaDelete(id);
+          }
+        } : null);
       },
       getEditPropsFromItem: function getEditPropsFromItem(it) {
         return {
@@ -1265,9 +1287,9 @@ function MediasBrowser(_ref) {
         };
       }
     }
-  }) : null, /*#__PURE__*/React.createElement("div", {
+  }) : null, !hidePagination ? /*#__PURE__*/React.createElement("div", {
     className: classNames(['d-flex', 'mt-3', 'mb-1', 'justify-content-end'])
-  }, pagination)));
+  }, pagination) : null));
 }
 MediasBrowser.propTypes = propTypes$5;
 MediasBrowser.defaultProps = defaultProps$5;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/medias",
-    "version": "3.0.208",
+    "version": "3.0.210",
     "description": "",
     "keywords": [
         "javascript"
@@ -47,19 +47,19 @@
     "dependencies": {
         "@babel/runtime": "^7.12.5",
         "@panneau/core": "^3.0.194",
-        "@panneau/data": "^3.0.208",
+        "@panneau/data": "^3.0.209",
         "@panneau/display-image": "^3.0.201",
         "@panneau/element-button": "^3.0.194",
         "@panneau/element-buttons": "^3.0.194",
         "@panneau/element-form": "^3.0.199",
         "@panneau/element-form-status": "^3.0.194",
-        "@panneau/element-grid": "^3.0.200",
+        "@panneau/element-grid": "^3.0.209",
         "@panneau/element-icon": "^3.0.194",
         "@panneau/element-media-card": "^3.0.201",
-        "@panneau/element-media-player": "^3.0.199",
+        "@panneau/element-media-player": "^3.0.210",
         "@panneau/element-pagination": "^3.0.194",
-        "@panneau/element-table": "^3.0.200",
-        "@panneau/field-upload": "^3.0.208",
+        "@panneau/element-table": "^3.0.210",
+        "@panneau/field-upload": "^3.0.210",
         "@panneau/filter-filters": "^3.0.208",
         "classnames": "^2.5.1",
         "lodash": "^4.17.21",
@@ -69,5 +69,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "784e87ce65299b81ce5f139a676ded4d70f5cfb1"
+    "gitHead": "43a3318fcab6ff8fb8294ad640df584f01a7c156"
 }