@panneau/medias 3.0.172 → 3.0.173

package/es/index.js

@@ -23,7 +23,7 @@ import MediaCard from '@panneau/element-media-card';
 import Pagination from '@panneau/element-pagination';
 import Table from '@panneau/element-table';
 import Filters from '@panneau/filter-filters';
-import { useItems, useData, useApi } from '@panneau/data';
+import { useItemsStore, useData, useApi } from '@panneau/data';
 
 /* eslint-disable react/jsx-props-no-spreading */
 var MediasApiContext = /*#__PURE__*/React.createContext(null);
@@ -60,7 +60,7 @@ function MediasApiProvider(_ref) {
 MediasApiProvider.propTypes = propTypes$9;
 MediasApiProvider.defaultProps = defaultProps$9;
 
-var _excluded$7 = ["items", "pageItems"];
+var _excluded$7 = ["items"];
 var useMedias = function useMedias() {
   var query = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   var page = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
@@ -71,18 +71,18 @@ var useMedias = function useMedias() {
     var requestedPage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
     return api.get(query, requestedPage, count);
   }, [api, query, count]);
-  var _useItems = useItems(_objectSpread({
+  var _useItemsStore = useItemsStore('medias', _objectSpread({
       getPage: page !== null ? getItems : null,
       getItems: page === null ? getItems : null,
-      page: page
+      page: page,
+      count: count,
+      query: query
     }, opts)),
-    items = _useItems.items,
-    pageItems = _useItems.pageItems,
-    request = _objectWithoutProperties(_useItems, _excluded$7);
+    items = _useItemsStore.items,
+    props = _objectWithoutProperties(_useItemsStore, _excluded$7);
   return _objectSpread({
-    medias: page !== null ? pageItems : items,
-    allMedias: items
-  }, request);
+    items: items
+  }, props);
 };
 var useMedias$1 = useMedias;
 
@@ -788,6 +788,7 @@ var propTypes$5 = {
   onLayoutChange: PropTypes.func,
   selectedCount: PropTypes.number,
   onClearSelected: PropTypes.func,
+  withStickySelection: PropTypes.bool,
   className: PropTypes.string,
   buttonsClassName: PropTypes.string
 };
@@ -819,6 +820,7 @@ var defaultProps$5 = {
   onLayoutChange: null,
   selectedCount: null,
   onClearSelected: null,
+  withStickySelection: false,
   className: null,
   buttonsClassName: null
 };
@@ -840,6 +842,7 @@ function MediasBrowser(_ref) {
     onLayoutChange = _ref.onLayoutChange,
     selectedCount = _ref.selectedCount,
     onClearSelected = _ref.onClearSelected,
+    withStickySelection = _ref.withStickySelection,
     className = _ref.className,
     buttonsClassName = _ref.buttonsClassName;
   var _useState = useState(initialItems || null),
@@ -884,10 +887,16 @@ function MediasBrowser(_ref) {
   var _useMedias = useMedias$1(query, page, count, {
       items: baseItems
     }),
-    items = _useMedias.medias,
-    loading = _useMedias.loading,
-    lastPage = _useMedias.lastPage,
-    total = _useMedias.total;
+    items = _useMedias.items,
+    allItems = _useMedias.allItems,
+    _useMedias$loading = _useMedias.loading,
+    loading = _useMedias$loading === void 0 ? false : _useMedias$loading,
+    _useMedias$updateItem = _useMedias.updateItem,
+    updateItem = _useMedias$updateItem === void 0 ? null : _useMedias$updateItem,
+    _useMedias$pagination = _useMedias.pagination,
+    _useMedias$pagination2 = _useMedias$pagination === void 0 ? {} : _useMedias$pagination,
+    lastPage = _useMedias$pagination2.lastPage,
+    total = _useMedias$pagination2.total;
 
   // For picker
   useEffect(function () {
@@ -919,10 +928,10 @@ function MediasBrowser(_ref) {
   var onCloseMedia = useCallback(function () {
     setCurrentMedia(null);
   }, [setCurrentMedia]);
-  var onSaveMedia = useCallback(function () {
+  var onSaveMedia = useCallback(function (item) {
     setCurrentMedia(null);
-    onQueryReset();
-  }, [setCurrentMedia, onQueryReset]);
+    updateItem(item);
+  }, [setCurrentMedia, updateItem]);
   var pagination = /*#__PURE__*/React.createElement(Pagination, {
     page: page,
     lastPage: lastPage,
@@ -951,13 +960,24 @@ function MediasBrowser(_ref) {
     return filters;
   }, [filters, types]);
   var finalItems = useMemo(function () {
-    if (page === 1 && extraItems !== null) {
-      return uniqBy([].concat(_toConsumableArray(extraItems), _toConsumableArray(items || [])), function (it) {
+    if (withStickySelection && extraItems !== null) {
+      return uniqBy([].concat(_toConsumableArray((extraItems || []).map(function (item) {
+        var _item$id = item.id,
+          itemId = _item$id === void 0 ? null : _item$id;
+        return (allItems || []).find(function () {
+          var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+            _ref5$id = _ref5.id,
+            otherId = _ref5$id === void 0 ? null : _ref5$id;
+          return otherId === itemId;
+        }) || item || null;
+      }).filter(function (it) {
+        return it !== null;
+      })), _toConsumableArray(items || [])), function (it) {
         return it === null || it === void 0 ? void 0 : it.id;
       });
     }
     return items;
-  }, [items, page, extraItems]);
+  }, [items, page, allItems, withStickySelection, extraItems]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, className])
   }, currentMedia !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -1096,18 +1116,20 @@ function MediasPicker(_ref) {
     tableProps = _ref.tableProps,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$4);
-  // For selection only
+  var _useMediasForm = useMediasForm(),
+    currentMedia = _useMediasForm.media;
+
+  // For selection
   var _useState = useState(initialItems),
     _useState2 = _slicedToArray(_useState, 2),
-    currentItems = _useState2[0],
+    pageItems = _useState2[0],
     setItems = _useState2[1];
-  var onItemsChange = useCallback(function (pageItems) {
-    setItems(pageItems);
+  var disabled = pageItems === null || pageItems.length < 1;
+  var onItemsChange = useCallback(function (newPageItems) {
+    setItems(newPageItems);
   }, [setItems]);
-  var _useMediasForm = useMediasForm(),
-    currentMedia = _useMediasForm.media;
   var _useItemSelection = useItemSelection({
-      currentItems: currentItems,
+      items: pageItems,
       selectedItems: initialSelectedItems,
       onSelectionChange: onChange,
       multipleSelection: multiple
@@ -1118,7 +1140,6 @@ function MediasPicker(_ref) {
     pageSelected = _useItemSelection.pageSelected,
     selectedCount = _useItemSelection.selectedCount,
     selectedItems = _useItemSelection.selectedItems;
-  var disabled = currentItems === null || currentItems.length < 1;
   var onConfirmSelection = useCallback(function () {
     if (onConfirm !== null) {
       onConfirm(selectedItems);
@@ -1134,13 +1155,14 @@ function MediasPicker(_ref) {
       onSelectPage: onSelectPage,
       selectedItems: selectedItems,
       pageSelected: pageSelected
-    }, tableProps)
-    // items={initialItems} // TODO: fix useItems if using this
+    }, tableProps),
+    items: initialItems // TODO: fix useItems if actually using this
     ,
     onItemsChange: onItemsChange,
     selectedCount: selectedCount,
     onClearSelected: onClearSelected,
-    types: types
+    types: types,
+    extraItems: !multiple && initialSelectedItems !== null ? [initialSelectedItems] : initialSelectedItems
   }, props)), multiple && !withoutButtons && currentMedia === null ? /*#__PURE__*/React.createElement("div", {
     className: "d-flex w-100 align-items-end justify-content-end mt-3"
   }, /*#__PURE__*/React.createElement("div", {

package/lib/index.js

@@ -62,7 +62,7 @@ function MediasApiProvider(_ref) {
 MediasApiProvider.propTypes = propTypes$9;
 MediasApiProvider.defaultProps = defaultProps$9;
 
-var _excluded$7 = ["items", "pageItems"];
+var _excluded$7 = ["items"];
 var useMedias = function useMedias() {
   var query = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   var page = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
@@ -73,18 +73,18 @@ var useMedias = function useMedias() {
     var requestedPage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
     return api.get(query, requestedPage, count);
   }, [api, query, count]);
-  var _useItems = data.useItems(_objectSpread({
+  var _useItemsStore = data.useItemsStore('medias', _objectSpread({
       getPage: page !== null ? getItems : null,
       getItems: page === null ? getItems : null,
-      page: page
+      page: page,
+      count: count,
+      query: query
     }, opts)),
-    items = _useItems.items,
-    pageItems = _useItems.pageItems,
-    request = _objectWithoutProperties(_useItems, _excluded$7);
+    items = _useItemsStore.items,
+    props = _objectWithoutProperties(_useItemsStore, _excluded$7);
   return _objectSpread({
-    medias: page !== null ? pageItems : items,
-    allMedias: items
-  }, request);
+    items: items
+  }, props);
 };
 var useMedias$1 = useMedias;
 
@@ -790,6 +790,7 @@ var propTypes$5 = {
   onLayoutChange: PropTypes.func,
   selectedCount: PropTypes.number,
   onClearSelected: PropTypes.func,
+  withStickySelection: PropTypes.bool,
   className: PropTypes.string,
   buttonsClassName: PropTypes.string
 };
@@ -821,6 +822,7 @@ var defaultProps$5 = {
   onLayoutChange: null,
   selectedCount: null,
   onClearSelected: null,
+  withStickySelection: false,
   className: null,
   buttonsClassName: null
 };
@@ -842,6 +844,7 @@ function MediasBrowser(_ref) {
     onLayoutChange = _ref.onLayoutChange,
     selectedCount = _ref.selectedCount,
     onClearSelected = _ref.onClearSelected,
+    withStickySelection = _ref.withStickySelection,
     className = _ref.className,
     buttonsClassName = _ref.buttonsClassName;
   var _useState = React.useState(initialItems || null),
@@ -886,10 +889,16 @@ function MediasBrowser(_ref) {
   var _useMedias = useMedias$1(query, page, count, {
       items: baseItems
     }),
-    items = _useMedias.medias,
-    loading = _useMedias.loading,
-    lastPage = _useMedias.lastPage,
-    total = _useMedias.total;
+    items = _useMedias.items,
+    allItems = _useMedias.allItems,
+    _useMedias$loading = _useMedias.loading,
+    loading = _useMedias$loading === void 0 ? false : _useMedias$loading,
+    _useMedias$updateItem = _useMedias.updateItem,
+    updateItem = _useMedias$updateItem === void 0 ? null : _useMedias$updateItem,
+    _useMedias$pagination = _useMedias.pagination,
+    _useMedias$pagination2 = _useMedias$pagination === void 0 ? {} : _useMedias$pagination,
+    lastPage = _useMedias$pagination2.lastPage,
+    total = _useMedias$pagination2.total;
 
   // For picker
   React.useEffect(function () {
@@ -921,10 +930,10 @@ function MediasBrowser(_ref) {
   var onCloseMedia = React.useCallback(function () {
     setCurrentMedia(null);
   }, [setCurrentMedia]);
-  var onSaveMedia = React.useCallback(function () {
+  var onSaveMedia = React.useCallback(function (item) {
     setCurrentMedia(null);
-    onQueryReset();
-  }, [setCurrentMedia, onQueryReset]);
+    updateItem(item);
+  }, [setCurrentMedia, updateItem]);
   var pagination = /*#__PURE__*/React.createElement(Pagination, {
     page: page,
     lastPage: lastPage,
@@ -953,13 +962,24 @@ function MediasBrowser(_ref) {
     return filters;
   }, [filters, types]);
   var finalItems = React.useMemo(function () {
-    if (page === 1 && extraItems !== null) {
-      return uniqBy([].concat(_toConsumableArray(extraItems), _toConsumableArray(items || [])), function (it) {
+    if (withStickySelection && extraItems !== null) {
+      return uniqBy([].concat(_toConsumableArray((extraItems || []).map(function (item) {
+        var _item$id = item.id,
+          itemId = _item$id === void 0 ? null : _item$id;
+        return (allItems || []).find(function () {
+          var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+            _ref5$id = _ref5.id,
+            otherId = _ref5$id === void 0 ? null : _ref5$id;
+          return otherId === itemId;
+        }) || item || null;
+      }).filter(function (it) {
+        return it !== null;
+      })), _toConsumableArray(items || [])), function (it) {
         return it === null || it === void 0 ? void 0 : it.id;
       });
     }
     return items;
-  }, [items, page, extraItems]);
+  }, [items, page, allItems, withStickySelection, extraItems]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, className])
   }, currentMedia !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -1098,18 +1118,20 @@ function MediasPicker(_ref) {
     tableProps = _ref.tableProps,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$4);
-  // For selection only
+  var _useMediasForm = useMediasForm(),
+    currentMedia = _useMediasForm.media;
+
+  // For selection
   var _useState = React.useState(initialItems),
     _useState2 = _slicedToArray(_useState, 2),
-    currentItems = _useState2[0],
+    pageItems = _useState2[0],
     setItems = _useState2[1];
-  var onItemsChange = React.useCallback(function (pageItems) {
-    setItems(pageItems);
+  var disabled = pageItems === null || pageItems.length < 1;
+  var onItemsChange = React.useCallback(function (newPageItems) {
+    setItems(newPageItems);
   }, [setItems]);
-  var _useMediasForm = useMediasForm(),
-    currentMedia = _useMediasForm.media;
   var _useItemSelection = hooks.useItemSelection({
-      currentItems: currentItems,
+      items: pageItems,
       selectedItems: initialSelectedItems,
       onSelectionChange: onChange,
       multipleSelection: multiple
@@ -1120,7 +1142,6 @@ function MediasPicker(_ref) {
     pageSelected = _useItemSelection.pageSelected,
     selectedCount = _useItemSelection.selectedCount,
     selectedItems = _useItemSelection.selectedItems;
-  var disabled = currentItems === null || currentItems.length < 1;
   var onConfirmSelection = React.useCallback(function () {
     if (onConfirm !== null) {
       onConfirm(selectedItems);
@@ -1136,13 +1157,14 @@ function MediasPicker(_ref) {
       onSelectPage: onSelectPage,
       selectedItems: selectedItems,
       pageSelected: pageSelected
-    }, tableProps)
-    // items={initialItems} // TODO: fix useItems if using this
+    }, tableProps),
+    items: initialItems // TODO: fix useItems if actually using this
     ,
     onItemsChange: onItemsChange,
     selectedCount: selectedCount,
     onClearSelected: onClearSelected,
-    types: types
+    types: types,
+    extraItems: !multiple && initialSelectedItems !== null ? [initialSelectedItems] : initialSelectedItems
   }, props)), multiple && !withoutButtons && currentMedia === null ? /*#__PURE__*/React.createElement("div", {
     className: "d-flex w-100 align-items-end justify-content-end mt-3"
   }, /*#__PURE__*/React.createElement("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/medias",
-    "version": "3.0.172",
+    "version": "3.0.173",
     "description": "",
     "keywords": [
         "javascript"
@@ -47,7 +47,7 @@
     "dependencies": {
         "@babel/runtime": "^7.12.5",
         "@panneau/core": "^3.0.169",
-        "@panneau/data": "^3.0.169",
+        "@panneau/data": "^3.0.173",
         "@panneau/display-image": "^3.0.172",
         "@panneau/element-button": "^3.0.169",
         "@panneau/element-buttons": "^3.0.169",
@@ -68,5 +68,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "74ada3ded1a27ab2d7008d67790d8431f57c5b0a"
+    "gitHead": "29037e4f0ed74d81586442a76daffcfb6d062200"
 }