@panneau/medias 3.0.187 → 3.0.190

package/es/index.js

@@ -814,8 +814,8 @@ var propTypes$5 = {
   layout: PropTypes.string,
   layouts: PropTypes.arrayOf(PropTypes.shape({})),
   theme: PropTypes.string,
-  onUpload: PropTypes.func,
-  // onItemsChange: PropTypes.func,
+  onMediaUploaded: PropTypes.func,
+  onItemsChange: PropTypes.func,
   onLayoutChange: PropTypes.func,
   onMediaFormOpen: PropTypes.func,
   onMediaFormClose: PropTypes.func,
@@ -852,12 +852,12 @@ var defaultProps$5 = {
     })
   }],
   theme: null,
-  onUpload: null,
-  // onItemsChange: null,
+  onMediaUploaded: null,
+  onItemsChange: null,
   onLayoutChange: null,
   onMediaFormOpen: null,
   onMediaFormClose: null,
-  selectable: null,
+  selectable: false,
   selectedItems: null,
   onSelectionChange: null,
   multipleSelection: false,
@@ -880,7 +880,8 @@ function MediasBrowser(_ref) {
     initialLayout = _ref.layout,
     layouts = _ref.layouts,
     theme = _ref.theme,
-    onUpload = _ref.onUpload,
+    onMediaUploaded = _ref.onMediaUploaded,
+    onItemsChange = _ref.onItemsChange,
     onLayoutChange = _ref.onLayoutChange,
     onMediaFormOpen = _ref.onMediaFormOpen,
     onMediaFormClose = _ref.onMediaFormClose,
@@ -964,14 +965,11 @@ function MediasBrowser(_ref) {
     _useMedias$pages = _useMedias.pages,
     pages = _useMedias$pages === void 0 ? null : _useMedias$pages,
     reload = _useMedias.reload;
-
-  // For picker
-  // useEffect(() => {
-  //     if (onItemsChange !== null) {
-  //         onItemsChange(items);
-  //     }
-  // }, [items, onItemsChange]);
-
+  useEffect(function () {
+    if (onItemsChange !== null) {
+      onItemsChange(items);
+    }
+  }, [items, onItemsChange]);
   var _useState5 = useState(initialLayout || 'table'),
     _useState6 = _slicedToArray(_useState5, 2),
     layout = _useState6[0],
@@ -1006,25 +1004,39 @@ function MediasBrowser(_ref) {
     setCurrentMedia(null);
     updateItem(item);
   }, [setCurrentMedia, updateItem]);
-  var onMediaUploaded = useCallback(function () {
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    uploadedMedias = _useState8[0],
+    setUploadedMedias = _useState8[1];
+  var onUploadComplete = useCallback(function () {
     var medias = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
     if (medias === null) return;
-    var rawMedias = isArray(medias) ? medias : [medias];
-    if (onUpload !== null) {
-      onUpload(rawMedias).then(function (newMedias) {
+    var rawMedias = (isArray(medias) ? medias : [medias]).filter(function (it) {
+      return it !== null;
+    });
+    if (onMediaUploaded !== null) {
+      console.log('rawMedias', rawMedias);
+      onMediaUploaded(rawMedias).then(function (newMedias) {
+        var uploadedNewMedias = (isArray(newMedias) ? [].concat(_toConsumableArray(uploadedMedias || []), _toConsumableArray(newMedias)) : [].concat(_toConsumableArray(uploadedMedias || []), [newMedias])).filter(function (it) {
+          return it !== null;
+        });
+        setUploadedMedias(uploadedNewMedias);
+        console.log('uploaded', uploadedNewMedias, onSelectionChange);
         if (onSelectionChange !== null) {
           onSelectionChange(newMedias);
-          onQueryReset();
+          onQueryReset(); // think about this
           reload();
         }
       });
+    } else {
+      setUploadedMedias(rawMedias);
+      if (onSelectionChange !== null) {
+        onSelectionChange(rawMedias);
+        onQueryReset();
+        reload();
+      }
     }
-    if (onSelectionChange !== null) {
-      onSelectionChange(rawMedias);
-      onQueryReset();
-      reload();
-    }
-  }, [onUpload, reload, onQueryReset, onSelectionChange]);
+  }, [onMediaUploaded, reload, onQueryReset, onSelectionChange, uploadedMedias, setUploadedMedias]);
   var pagination = /*#__PURE__*/React.createElement(Pagination, {
     page: page,
     lastPage: lastPage,
@@ -1080,18 +1092,33 @@ function MediasBrowser(_ref) {
           })
         });
       }
+      if (columnId === 'actions') {
+        // console.log('column', column);
+        var _ref6 = column || {},
+          _ref6$actions = _ref6.actions,
+          actions = _ref6$actions === void 0 ? [] : _ref6$actions;
+        return _objectSpread(_objectSpread({}, column), {}, {
+          actions: (actions || []).reduce(function (acc, action) {
+            if (action === 'delete') {
+              acc.push('restore');
+            }
+            acc.push(action);
+            return acc;
+          }, [])
+        });
+      }
       return column;
     }) : columns;
   }, [columns, withTrash, showTrashed]);
   var finalItems = useMemo(function () {
     if (withStickySelection && extraItems !== null) {
-      return uniqBy([].concat(_toConsumableArray((extraItems || []).map(function (item) {
+      return uniqBy([].concat(_toConsumableArray(page === 1 ? uploadedMedias || [] : []), _toConsumableArray((extraItems || []).map(function (item) {
         var _item$id = item.id,
           itemId = _item$id === void 0 ? null : _item$id;
         return (allItems || []).find(function () {
-          var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-            _ref6$id = _ref6.id,
-            otherId = _ref6$id === void 0 ? null : _ref6$id;
+          var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+            _ref7$id = _ref7.id,
+            otherId = _ref7$id === void 0 ? null : _ref7$id;
           return otherId === itemId;
         }) || item || null;
       }).filter(function (it) {
@@ -1137,7 +1164,7 @@ function MediasBrowser(_ref) {
     withButton: true,
     withoutMedia: true,
     uppyConfig: uppyConfig,
-    onChange: onMediaUploaded
+    onChange: onUploadComplete
   }) : null), /*#__PURE__*/React.createElement("div", {
     className: classNames(['d-flex', 'mt-1', 'mb-3', {
       'justify-content-between': hasLayouts,
@@ -1188,9 +1215,9 @@ function MediasBrowser(_ref) {
     loading: loading,
     actionsProps: {
       getDeletePropsFromItem: function getDeletePropsFromItem() {
-        var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-          _ref7$id = _ref7.id,
-          id = _ref7$id === void 0 ? null : _ref7$id;
+        var _ref8 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          _ref8$id = _ref8.id,
+          id = _ref8$id === void 0 ? null : _ref8$id;
         return {
           href: null,
           onClick: function onClick() {
@@ -1268,31 +1295,25 @@ function MediasPicker(_ref) {
 MediasPicker.propTypes = propTypes$4;
 MediasPicker.defaultProps = defaultProps$4;
 
-var _excluded$3 = ["api", "media", "fields"];
+var _excluded$3 = ["api", "media"];
 var propTypes$3 = {
   api: apiPropTypes,
   media: PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-  }),
-  fields: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-  }))
+  })
 };
 var defaultProps$3 = {
   api: null,
-  media: null,
-  fields: null
+  media: null
 };
 function MediasBrowserContainer(_ref) {
   var api = _ref.api,
     media = _ref.media,
-    fields = _ref.fields,
     props = _objectWithoutProperties(_ref, _excluded$3);
   return /*#__PURE__*/React.createElement(MediasApiProvider, {
     api: api
   }, /*#__PURE__*/React.createElement(MediaProvider, {
-    media: media,
-    fields: fields
+    media: media
   }, /*#__PURE__*/React.createElement(MediasBrowser, props)));
 }
 MediasBrowserContainer.propTypes = propTypes$3;
@@ -1308,7 +1329,8 @@ var propTypes$2 = {
 };
 var defaultProps$2 = {
   api: null,
-  media: null
+  media: null,
+  onChange: null
 };
 function MediasPickerContainer(_ref) {
   var api = _ref.api,

package/lib/index.js

@@ -816,8 +816,8 @@ var propTypes$5 = {
   layout: PropTypes.string,
   layouts: PropTypes.arrayOf(PropTypes.shape({})),
   theme: PropTypes.string,
-  onUpload: PropTypes.func,
-  // onItemsChange: PropTypes.func,
+  onMediaUploaded: PropTypes.func,
+  onItemsChange: PropTypes.func,
   onLayoutChange: PropTypes.func,
   onMediaFormOpen: PropTypes.func,
   onMediaFormClose: PropTypes.func,
@@ -854,12 +854,12 @@ var defaultProps$5 = {
     })
   }],
   theme: null,
-  onUpload: null,
-  // onItemsChange: null,
+  onMediaUploaded: null,
+  onItemsChange: null,
   onLayoutChange: null,
   onMediaFormOpen: null,
   onMediaFormClose: null,
-  selectable: null,
+  selectable: false,
   selectedItems: null,
   onSelectionChange: null,
   multipleSelection: false,
@@ -882,7 +882,8 @@ function MediasBrowser(_ref) {
     initialLayout = _ref.layout,
     layouts = _ref.layouts,
     theme = _ref.theme,
-    onUpload = _ref.onUpload,
+    onMediaUploaded = _ref.onMediaUploaded,
+    onItemsChange = _ref.onItemsChange,
     onLayoutChange = _ref.onLayoutChange,
     onMediaFormOpen = _ref.onMediaFormOpen,
     onMediaFormClose = _ref.onMediaFormClose,
@@ -966,14 +967,11 @@ function MediasBrowser(_ref) {
     _useMedias$pages = _useMedias.pages,
     pages = _useMedias$pages === void 0 ? null : _useMedias$pages,
     reload = _useMedias.reload;
-
-  // For picker
-  // useEffect(() => {
-  //     if (onItemsChange !== null) {
-  //         onItemsChange(items);
-  //     }
-  // }, [items, onItemsChange]);
-
+  React.useEffect(function () {
+    if (onItemsChange !== null) {
+      onItemsChange(items);
+    }
+  }, [items, onItemsChange]);
   var _useState5 = React.useState(initialLayout || 'table'),
     _useState6 = _slicedToArray(_useState5, 2),
     layout = _useState6[0],
@@ -1008,25 +1006,39 @@ function MediasBrowser(_ref) {
     setCurrentMedia(null);
     updateItem(item);
   }, [setCurrentMedia, updateItem]);
-  var onMediaUploaded = React.useCallback(function () {
+  var _useState7 = React.useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    uploadedMedias = _useState8[0],
+    setUploadedMedias = _useState8[1];
+  var onUploadComplete = React.useCallback(function () {
     var medias = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
     if (medias === null) return;
-    var rawMedias = isArray(medias) ? medias : [medias];
-    if (onUpload !== null) {
-      onUpload(rawMedias).then(function (newMedias) {
+    var rawMedias = (isArray(medias) ? medias : [medias]).filter(function (it) {
+      return it !== null;
+    });
+    if (onMediaUploaded !== null) {
+      console.log('rawMedias', rawMedias);
+      onMediaUploaded(rawMedias).then(function (newMedias) {
+        var uploadedNewMedias = (isArray(newMedias) ? [].concat(_toConsumableArray(uploadedMedias || []), _toConsumableArray(newMedias)) : [].concat(_toConsumableArray(uploadedMedias || []), [newMedias])).filter(function (it) {
+          return it !== null;
+        });
+        setUploadedMedias(uploadedNewMedias);
+        console.log('uploaded', uploadedNewMedias, onSelectionChange);
         if (onSelectionChange !== null) {
           onSelectionChange(newMedias);
-          onQueryReset();
+          onQueryReset(); // think about this
           reload();
         }
       });
+    } else {
+      setUploadedMedias(rawMedias);
+      if (onSelectionChange !== null) {
+        onSelectionChange(rawMedias);
+        onQueryReset();
+        reload();
+      }
     }
-    if (onSelectionChange !== null) {
-      onSelectionChange(rawMedias);
-      onQueryReset();
-      reload();
-    }
-  }, [onUpload, reload, onQueryReset, onSelectionChange]);
+  }, [onMediaUploaded, reload, onQueryReset, onSelectionChange, uploadedMedias, setUploadedMedias]);
   var pagination = /*#__PURE__*/React.createElement(Pagination, {
     page: page,
     lastPage: lastPage,
@@ -1082,18 +1094,33 @@ function MediasBrowser(_ref) {
           })
         });
       }
+      if (columnId === 'actions') {
+        // console.log('column', column);
+        var _ref6 = column || {},
+          _ref6$actions = _ref6.actions,
+          actions = _ref6$actions === void 0 ? [] : _ref6$actions;
+        return _objectSpread(_objectSpread({}, column), {}, {
+          actions: (actions || []).reduce(function (acc, action) {
+            if (action === 'delete') {
+              acc.push('restore');
+            }
+            acc.push(action);
+            return acc;
+          }, [])
+        });
+      }
       return column;
     }) : columns;
   }, [columns, withTrash, showTrashed]);
   var finalItems = React.useMemo(function () {
     if (withStickySelection && extraItems !== null) {
-      return uniqBy([].concat(_toConsumableArray((extraItems || []).map(function (item) {
+      return uniqBy([].concat(_toConsumableArray(page === 1 ? uploadedMedias || [] : []), _toConsumableArray((extraItems || []).map(function (item) {
         var _item$id = item.id,
           itemId = _item$id === void 0 ? null : _item$id;
         return (allItems || []).find(function () {
-          var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-            _ref6$id = _ref6.id,
-            otherId = _ref6$id === void 0 ? null : _ref6$id;
+          var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+            _ref7$id = _ref7.id,
+            otherId = _ref7$id === void 0 ? null : _ref7$id;
           return otherId === itemId;
         }) || item || null;
       }).filter(function (it) {
@@ -1139,7 +1166,7 @@ function MediasBrowser(_ref) {
     withButton: true,
     withoutMedia: true,
     uppyConfig: uppyConfig,
-    onChange: onMediaUploaded
+    onChange: onUploadComplete
   }) : null), /*#__PURE__*/React.createElement("div", {
     className: classNames(['d-flex', 'mt-1', 'mb-3', {
       'justify-content-between': hasLayouts,
@@ -1190,9 +1217,9 @@ function MediasBrowser(_ref) {
     loading: loading,
     actionsProps: {
       getDeletePropsFromItem: function getDeletePropsFromItem() {
-        var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-          _ref7$id = _ref7.id,
-          id = _ref7$id === void 0 ? null : _ref7$id;
+        var _ref8 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          _ref8$id = _ref8.id,
+          id = _ref8$id === void 0 ? null : _ref8$id;
         return {
           href: null,
           onClick: function onClick() {
@@ -1270,31 +1297,25 @@ function MediasPicker(_ref) {
 MediasPicker.propTypes = propTypes$4;
 MediasPicker.defaultProps = defaultProps$4;
 
-var _excluded$3 = ["api", "media", "fields"];
+var _excluded$3 = ["api", "media"];
 var propTypes$3 = {
   api: apiPropTypes,
   media: PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-  }),
-  fields: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-  }))
+  })
 };
 var defaultProps$3 = {
   api: null,
-  media: null,
-  fields: null
+  media: null
 };
 function MediasBrowserContainer(_ref) {
   var api = _ref.api,
     media = _ref.media,
-    fields = _ref.fields,
     props = _objectWithoutProperties(_ref, _excluded$3);
   return /*#__PURE__*/React.createElement(MediasApiProvider, {
     api: api
   }, /*#__PURE__*/React.createElement(MediaProvider, {
-    media: media,
-    fields: fields
+    media: media
   }, /*#__PURE__*/React.createElement(MediasBrowser, props)));
 }
 MediasBrowserContainer.propTypes = propTypes$3;
@@ -1310,7 +1331,8 @@ var propTypes$2 = {
 };
 var defaultProps$2 = {
   api: null,
-  media: null
+  media: null,
+  onChange: null
 };
 function MediasPickerContainer(_ref) {
   var api = _ref.api,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/medias",
-    "version": "3.0.187",
+    "version": "3.0.190",
     "description": "",
     "keywords": [
         "javascript"
@@ -46,21 +46,21 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@panneau/core": "^3.0.187",
-        "@panneau/data": "^3.0.187",
-        "@panneau/display-image": "^3.0.187",
-        "@panneau/element-button": "^3.0.187",
-        "@panneau/element-buttons": "^3.0.187",
-        "@panneau/element-form": "^3.0.187",
-        "@panneau/element-form-status": "^3.0.187",
-        "@panneau/element-grid": "^3.0.187",
-        "@panneau/element-icon": "^3.0.187",
-        "@panneau/element-media-card": "^3.0.187",
-        "@panneau/element-media-player": "^3.0.187",
-        "@panneau/element-pagination": "^3.0.187",
-        "@panneau/element-table": "^3.0.187",
-        "@panneau/field-upload": "^3.0.187",
-        "@panneau/filter-filters": "^3.0.187",
+        "@panneau/core": "^3.0.190",
+        "@panneau/data": "^3.0.190",
+        "@panneau/display-image": "^3.0.190",
+        "@panneau/element-button": "^3.0.190",
+        "@panneau/element-buttons": "^3.0.190",
+        "@panneau/element-form": "^3.0.190",
+        "@panneau/element-form-status": "^3.0.190",
+        "@panneau/element-grid": "^3.0.190",
+        "@panneau/element-icon": "^3.0.190",
+        "@panneau/element-media-card": "^3.0.190",
+        "@panneau/element-media-player": "^3.0.190",
+        "@panneau/element-pagination": "^3.0.190",
+        "@panneau/element-table": "^3.0.190",
+        "@panneau/field-upload": "^3.0.190",
+        "@panneau/filter-filters": "^3.0.190",
         "classnames": "^2.5.1",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -69,5 +69,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "659bc65b0123e1d2d5b9aefa6628d49726100747"
+    "gitHead": "ec38fa9c18606a8d5566183b8acf659a894eca0d"
 }