@panneau/medias 3.0.185 → 3.0.187

package/es/index.js

@@ -815,8 +815,10 @@ var propTypes$5 = {
   layouts: PropTypes.arrayOf(PropTypes.shape({})),
   theme: PropTypes.string,
   onUpload: PropTypes.func,
-  onItemsChange: PropTypes.func,
+  // onItemsChange: PropTypes.func,
   onLayoutChange: PropTypes.func,
+  onMediaFormOpen: PropTypes.func,
+  onMediaFormClose: PropTypes.func,
   selectable: PropTypes.bool,
   selectedItems: PropTypes.arrayOf(PropTypes.shape({})),
   onSelectionChange: PropTypes.func,
@@ -851,8 +853,10 @@ var defaultProps$5 = {
   }],
   theme: null,
   onUpload: null,
-  onItemsChange: null,
+  // onItemsChange: null,
   onLayoutChange: null,
+  onMediaFormOpen: null,
+  onMediaFormClose: null,
   selectable: null,
   selectedItems: null,
   onSelectionChange: null,
@@ -877,8 +881,9 @@ function MediasBrowser(_ref) {
     layouts = _ref.layouts,
     theme = _ref.theme,
     onUpload = _ref.onUpload,
-    onItemsChange = _ref.onItemsChange,
     onLayoutChange = _ref.onLayoutChange,
+    onMediaFormOpen = _ref.onMediaFormOpen,
+    onMediaFormClose = _ref.onMediaFormClose,
     selectable = _ref.selectable,
     selectedItems = _ref.selectedItems,
     onSelectionChange = _ref.onSelectionChange,
@@ -961,11 +966,12 @@ function MediasBrowser(_ref) {
     reload = _useMedias.reload;
 
   // For picker
-  useEffect(function () {
-    if (onItemsChange !== null) {
-      onItemsChange(items);
-    }
-  }, [items, onItemsChange]);
+  // useEffect(() => {
+  //     if (onItemsChange !== null) {
+  //         onItemsChange(items);
+  //     }
+  // }, [items, onItemsChange]);
+
   var _useState5 = useState(initialLayout || 'table'),
     _useState6 = _slicedToArray(_useState5, 2),
     layout = _useState6[0],
@@ -982,6 +988,14 @@ function MediasBrowser(_ref) {
   var _useMedia = useMedia(),
     currentMedia = _useMedia.media,
     setCurrentMedia = _useMedia.setMedia;
+  useEffect(function () {
+    if (currentMedia !== null && onMediaFormOpen !== null) {
+      onMediaFormOpen();
+    }
+    if (currentMedia === null && onMediaFormClose !== null) {
+      onMediaFormClose();
+    }
+  }, [currentMedia]);
   var onOpenMedia = useCallback(function (media) {
     setCurrentMedia(media);
   }, [setCurrentMedia]);
@@ -992,21 +1006,25 @@ function MediasBrowser(_ref) {
     setCurrentMedia(null);
     updateItem(item);
   }, [setCurrentMedia, updateItem]);
-  var onMediaUploaded = useCallback(function (medias) {
+  var onMediaUploaded = 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) {
         if (onSelectionChange !== null) {
           onSelectionChange(newMedias);
+          onQueryReset();
           reload();
         }
       });
     }
     if (onSelectionChange !== null) {
       onSelectionChange(rawMedias);
+      onQueryReset();
       reload();
     }
-  }, [onUpload]);
+  }, [onUpload, reload, onQueryReset, onSelectionChange]);
   var pagination = /*#__PURE__*/React.createElement(Pagination, {
     page: page,
     lastPage: lastPage,
@@ -1100,7 +1118,7 @@ function MediasBrowser(_ref) {
     }]
   }))), /*#__PURE__*/React.createElement(MediaForm, {
     value: currentMedia,
-    fields: mediaFormFields || fields,
+    fields: fields,
     onChange: setCurrentMedia,
     onSave: onSaveMedia,
     onClose: onCloseMedia,
@@ -1198,45 +1216,27 @@ function MediasBrowser(_ref) {
 MediasBrowser.propTypes = propTypes$5;
 MediasBrowser.defaultProps = defaultProps$5;
 
-var _excluded$4 = ["items", "value", "onSelectionChange", "multipleSelection", "types", "onChange", "onClose", "withoutButtons", "className"];
-
-// import { useMediasForm } from './MediasFormContext';
-
+var _excluded$4 = ["items", "value", "onChange", "multiple", "className"];
 var propTypes$4 = {
-  // eslint-disable-next-line react/forbid-prop-types
   items: PropTypes.arrayOf(PropTypes.shape({})),
   value: PropTypes.arrayOf(PropTypes.shape({})),
-  onSelectionChange: PropTypes.func,
-  multipleSelection: PropTypes.bool,
-  types: PropTypes.arrayOf(PropTypes.string),
+  multiple: PropTypes.bool,
   onChange: PropTypes.func.isRequired,
-  onClose: PropTypes.func,
-  withoutButtons: PropTypes.bool,
   className: PropTypes.string
 };
 var defaultProps$4 = {
   items: null,
   value: null,
-  onSelectionChange: null,
-  multipleSelection: false,
-  types: null,
-  onClose: null,
-  withoutButtons: false,
+  multiple: false,
   className: null
 };
 function MediasPicker(_ref) {
   var initialItems = _ref.items,
     initialSelectedItems = _ref.value,
-    parentOnSelectionChange = _ref.onSelectionChange,
-    multipleSelection = _ref.multipleSelection,
-    types = _ref.types;
-    _ref.onChange;
-    _ref.onClose;
-    _ref.withoutButtons;
-    var className = _ref.className,
+    onChange = _ref.onChange,
+    multiple = _ref.multiple,
+    className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$4);
-  // const { media: currentMedia } = useMediasForm();
-
   var _useState = useState(initialSelectedItems || null),
     _useState2 = _slicedToArray(_useState, 2),
     selectedItems = _useState2[0],
@@ -1244,24 +1244,16 @@ function MediasPicker(_ref) {
   var onSelectionChange = useCallback(function (newSelection) {
     setSelectedItems(newSelection);
   }, [setSelectedItems]);
+
   // Sync from the top
   useEffect(function () {
     setSelectedItems(initialSelectedItems);
   }, [initialSelectedItems, setSelectedItems]);
   useEffect(function () {
-    if (parentOnSelectionChange !== null) {
-      parentOnSelectionChange(selectedItems);
+    if (onChange !== null) {
+      onChange(selectedItems);
     }
-  }, [selectedItems, parentOnSelectionChange]);
-
-  // const onConfirmSelection = useCallback(() => {
-  //     if (onChange !== null) {
-  //         onChange(selectedItems || null);
-  //     }
-  // }, [selectedItems, onChange]);
-
-  // const empty = selectedItems === null || (isArray(selectedItems) && selectedItems.length === 0);
-
+  }, [selectedItems, onChange]);
   return /*#__PURE__*/React.createElement("div", {
     className: className
   }, /*#__PURE__*/React.createElement(MediasBrowser, Object.assign({
@@ -1270,13 +1262,7 @@ function MediasPicker(_ref) {
     selectable: true,
     selectedItems: selectedItems,
     onSelectionChange: onSelectionChange,
-    multipleSelection: multipleSelection,
-    types: types
-    // extraItems={
-    //     !multiple && initialSelectedItems !== null
-    //         ? [initialSelectedItems]
-    //         : initialSelectedItems
-    // }
+    multipleSelection: multiple
   }, props)));
 }
 MediasPicker.propTypes = propTypes$4;

package/lib/index.js

@@ -817,8 +817,10 @@ var propTypes$5 = {
   layouts: PropTypes.arrayOf(PropTypes.shape({})),
   theme: PropTypes.string,
   onUpload: PropTypes.func,
-  onItemsChange: PropTypes.func,
+  // onItemsChange: PropTypes.func,
   onLayoutChange: PropTypes.func,
+  onMediaFormOpen: PropTypes.func,
+  onMediaFormClose: PropTypes.func,
   selectable: PropTypes.bool,
   selectedItems: PropTypes.arrayOf(PropTypes.shape({})),
   onSelectionChange: PropTypes.func,
@@ -853,8 +855,10 @@ var defaultProps$5 = {
   }],
   theme: null,
   onUpload: null,
-  onItemsChange: null,
+  // onItemsChange: null,
   onLayoutChange: null,
+  onMediaFormOpen: null,
+  onMediaFormClose: null,
   selectable: null,
   selectedItems: null,
   onSelectionChange: null,
@@ -879,8 +883,9 @@ function MediasBrowser(_ref) {
     layouts = _ref.layouts,
     theme = _ref.theme,
     onUpload = _ref.onUpload,
-    onItemsChange = _ref.onItemsChange,
     onLayoutChange = _ref.onLayoutChange,
+    onMediaFormOpen = _ref.onMediaFormOpen,
+    onMediaFormClose = _ref.onMediaFormClose,
     selectable = _ref.selectable,
     selectedItems = _ref.selectedItems,
     onSelectionChange = _ref.onSelectionChange,
@@ -963,11 +968,12 @@ function MediasBrowser(_ref) {
     reload = _useMedias.reload;
 
   // For picker
-  React.useEffect(function () {
-    if (onItemsChange !== null) {
-      onItemsChange(items);
-    }
-  }, [items, onItemsChange]);
+  // useEffect(() => {
+  //     if (onItemsChange !== null) {
+  //         onItemsChange(items);
+  //     }
+  // }, [items, onItemsChange]);
+
   var _useState5 = React.useState(initialLayout || 'table'),
     _useState6 = _slicedToArray(_useState5, 2),
     layout = _useState6[0],
@@ -984,6 +990,14 @@ function MediasBrowser(_ref) {
   var _useMedia = useMedia(),
     currentMedia = _useMedia.media,
     setCurrentMedia = _useMedia.setMedia;
+  React.useEffect(function () {
+    if (currentMedia !== null && onMediaFormOpen !== null) {
+      onMediaFormOpen();
+    }
+    if (currentMedia === null && onMediaFormClose !== null) {
+      onMediaFormClose();
+    }
+  }, [currentMedia]);
   var onOpenMedia = React.useCallback(function (media) {
     setCurrentMedia(media);
   }, [setCurrentMedia]);
@@ -994,21 +1008,25 @@ function MediasBrowser(_ref) {
     setCurrentMedia(null);
     updateItem(item);
   }, [setCurrentMedia, updateItem]);
-  var onMediaUploaded = React.useCallback(function (medias) {
+  var onMediaUploaded = 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) {
         if (onSelectionChange !== null) {
           onSelectionChange(newMedias);
+          onQueryReset();
           reload();
         }
       });
     }
     if (onSelectionChange !== null) {
       onSelectionChange(rawMedias);
+      onQueryReset();
       reload();
     }
-  }, [onUpload]);
+  }, [onUpload, reload, onQueryReset, onSelectionChange]);
   var pagination = /*#__PURE__*/React.createElement(Pagination, {
     page: page,
     lastPage: lastPage,
@@ -1102,7 +1120,7 @@ function MediasBrowser(_ref) {
     }]
   }))), /*#__PURE__*/React.createElement(MediaForm, {
     value: currentMedia,
-    fields: mediaFormFields || fields,
+    fields: fields,
     onChange: setCurrentMedia,
     onSave: onSaveMedia,
     onClose: onCloseMedia,
@@ -1200,45 +1218,27 @@ function MediasBrowser(_ref) {
 MediasBrowser.propTypes = propTypes$5;
 MediasBrowser.defaultProps = defaultProps$5;
 
-var _excluded$4 = ["items", "value", "onSelectionChange", "multipleSelection", "types", "onChange", "onClose", "withoutButtons", "className"];
-
-// import { useMediasForm } from './MediasFormContext';
-
+var _excluded$4 = ["items", "value", "onChange", "multiple", "className"];
 var propTypes$4 = {
-  // eslint-disable-next-line react/forbid-prop-types
   items: PropTypes.arrayOf(PropTypes.shape({})),
   value: PropTypes.arrayOf(PropTypes.shape({})),
-  onSelectionChange: PropTypes.func,
-  multipleSelection: PropTypes.bool,
-  types: PropTypes.arrayOf(PropTypes.string),
+  multiple: PropTypes.bool,
   onChange: PropTypes.func.isRequired,
-  onClose: PropTypes.func,
-  withoutButtons: PropTypes.bool,
   className: PropTypes.string
 };
 var defaultProps$4 = {
   items: null,
   value: null,
-  onSelectionChange: null,
-  multipleSelection: false,
-  types: null,
-  onClose: null,
-  withoutButtons: false,
+  multiple: false,
   className: null
 };
 function MediasPicker(_ref) {
   var initialItems = _ref.items,
     initialSelectedItems = _ref.value,
-    parentOnSelectionChange = _ref.onSelectionChange,
-    multipleSelection = _ref.multipleSelection,
-    types = _ref.types;
-    _ref.onChange;
-    _ref.onClose;
-    _ref.withoutButtons;
-    var className = _ref.className,
+    onChange = _ref.onChange,
+    multiple = _ref.multiple,
+    className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$4);
-  // const { media: currentMedia } = useMediasForm();
-
   var _useState = React.useState(initialSelectedItems || null),
     _useState2 = _slicedToArray(_useState, 2),
     selectedItems = _useState2[0],
@@ -1246,24 +1246,16 @@ function MediasPicker(_ref) {
   var onSelectionChange = React.useCallback(function (newSelection) {
     setSelectedItems(newSelection);
   }, [setSelectedItems]);
+
   // Sync from the top
   React.useEffect(function () {
     setSelectedItems(initialSelectedItems);
   }, [initialSelectedItems, setSelectedItems]);
   React.useEffect(function () {
-    if (parentOnSelectionChange !== null) {
-      parentOnSelectionChange(selectedItems);
+    if (onChange !== null) {
+      onChange(selectedItems);
     }
-  }, [selectedItems, parentOnSelectionChange]);
-
-  // const onConfirmSelection = useCallback(() => {
-  //     if (onChange !== null) {
-  //         onChange(selectedItems || null);
-  //     }
-  // }, [selectedItems, onChange]);
-
-  // const empty = selectedItems === null || (isArray(selectedItems) && selectedItems.length === 0);
-
+  }, [selectedItems, onChange]);
   return /*#__PURE__*/React.createElement("div", {
     className: className
   }, /*#__PURE__*/React.createElement(MediasBrowser, Object.assign({
@@ -1272,13 +1264,7 @@ function MediasPicker(_ref) {
     selectable: true,
     selectedItems: selectedItems,
     onSelectionChange: onSelectionChange,
-    multipleSelection: multipleSelection,
-    types: types
-    // extraItems={
-    //     !multiple && initialSelectedItems !== null
-    //         ? [initialSelectedItems]
-    //         : initialSelectedItems
-    // }
+    multipleSelection: multiple
   }, props)));
 }
 MediasPicker.propTypes = propTypes$4;

package/package.json

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