@panneau/medias 3.0.182 → 3.0.184

package/es/index.js

@@ -14,6 +14,7 @@ import MediaPlayer from '@panneau/element-media-player';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import isArray from 'lodash/isArray';
 import uniqBy from 'lodash/uniqBy';
 import { PropTypes as PropTypes$1 } from '@panneau/core';
 import Buttons from '@panneau/element-buttons';
@@ -733,7 +734,8 @@ var defaultColumns = [{
 var defaultFilters = [{
   id: 'search',
   component: 'search',
-  name: 'search'
+  name: 'search',
+  width: 220
 }, {
   id: 'types',
   component: 'select',
@@ -818,6 +820,7 @@ var propTypes$5 = {
   layout: PropTypes.string,
   layouts: PropTypes.arrayOf(PropTypes.shape({})),
   theme: PropTypes.string,
+  onUpload: PropTypes.func,
   onItemsChange: PropTypes.func,
   onLayoutChange: PropTypes.func,
   selectable: PropTypes.bool,
@@ -835,7 +838,6 @@ var defaultProps$5 = {
   items: null,
   extraItems: null,
   types: null,
-  buttons: null,
   filters: defaultFilters,
   columns: defaultColumns,
   fields: defaultFields,
@@ -854,6 +856,7 @@ var defaultProps$5 = {
     })
   }],
   theme: null,
+  onUpload: null,
   onItemsChange: null,
   onLayoutChange: null,
   selectable: null,
@@ -879,6 +882,7 @@ function MediasBrowser(_ref) {
     initialLayout = _ref.layout,
     layouts = _ref.layouts,
     theme = _ref.theme,
+    onUpload = _ref.onUpload,
     onItemsChange = _ref.onItemsChange,
     onLayoutChange = _ref.onLayoutChange,
     selectable = _ref.selectable,
@@ -959,7 +963,8 @@ function MediasBrowser(_ref) {
     lastPage = _useMedias$pagination2.lastPage,
     total = _useMedias$pagination2.total,
     _useMedias$pages = _useMedias.pages,
-    pages = _useMedias$pages === void 0 ? null : _useMedias$pages;
+    pages = _useMedias$pages === void 0 ? null : _useMedias$pages,
+    reload = _useMedias.reload;
 
   // For picker
   useEffect(function () {
@@ -995,6 +1000,21 @@ function MediasBrowser(_ref) {
     setCurrentMedia(null);
     updateItem(item);
   }, [setCurrentMedia, updateItem]);
+  var onMediaUploaded = useCallback(function (medias) {
+    var rawMedias = isArray(medias) ? medias : [medias];
+    if (onUpload !== null) {
+      onUpload(rawMedias).then(function (newMedias) {
+        if (onSelectionChange !== null) {
+          onSelectionChange(newMedias);
+          reload();
+        }
+      });
+    }
+    if (onSelectionChange !== null) {
+      onSelectionChange(rawMedias);
+      reload();
+    }
+  }, [onUpload]);
   var pagination = /*#__PURE__*/React.createElement(Pagination, {
     page: page,
     lastPage: lastPage,
@@ -1106,7 +1126,8 @@ function MediasBrowser(_ref) {
     className: "ms-auto w-auto text-nowrap mt-2",
     withButton: true,
     withoutMedia: true,
-    uppyConfig: uppyConfig
+    uppyConfig: uppyConfig,
+    onChange: onMediaUploaded
   }) : null), /*#__PURE__*/React.createElement("div", {
     className: classNames(['d-flex', 'mt-1', 'mb-3', {
       'justify-content-between': hasLayouts,
@@ -1221,20 +1242,10 @@ function MediasPicker(_ref) {
     props = _objectWithoutProperties(_ref, _excluded$4);
   var _useMediasForm = useMediasForm(),
     currentMedia = _useMediasForm.media;
-
-  // For selection
-  var _useState = useState(initialItems),
+  var _useState = useState(initialSelectedItems || null),
     _useState2 = _slicedToArray(_useState, 2),
-    pageItems = _useState2[0],
-    setItems = _useState2[1];
-  var disabled = pageItems === null || pageItems.length < 1;
-  var onItemsChange = useCallback(function (newPageItems) {
-    setItems(newPageItems);
-  }, [setItems]);
-  var _useState3 = useState(initialSelectedItems || null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    selectedItems = _useState4[0],
-    setSelectedItems = _useState4[1];
+    selectedItems = _useState2[0],
+    setSelectedItems = _useState2[1];
   var onSelectionChange = useCallback(function (newSelection) {
     setSelectedItems(newSelection);
   }, [setSelectedItems]);
@@ -1249,9 +1260,10 @@ function MediasPicker(_ref) {
   }, [selectedItems, parentOnSelectionChange]);
   var onConfirmSelection = useCallback(function () {
     if (onChange !== null) {
-      onChange(selectedItems);
+      onChange(selectedItems || null);
     }
   }, [selectedItems, onChange]);
+  var empty = selectedItems === null || isArray(selectedItems) && selectedItems.length === 0;
   return /*#__PURE__*/React.createElement("div", {
     className: className
   }, /*#__PURE__*/React.createElement(MediasBrowser, Object.assign({
@@ -1261,7 +1273,6 @@ function MediasPicker(_ref) {
     selectedItems: selectedItems,
     onSelectionChange: onSelectionChange,
     multipleSelection: multipleSelection,
-    onItemsChange: onItemsChange,
     types: types
     // extraItems={
     //     !multiple && initialSelectedItems !== null
@@ -1287,10 +1298,14 @@ function MediasPicker(_ref) {
     type: "button",
     theme: "primary",
     onClick: onConfirmSelection,
-    disabled: disabled,
-    outline: disabled,
     className: "d-block"
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+  }, empty ? /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "Krgf6j",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Clear selection"
+    }]
+  }) : /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "rvOVCV",
     defaultMessage: [{
       "type": 0,

package/lib/index.js

@@ -16,6 +16,7 @@ var MediaPlayer = require('@panneau/element-media-player');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var isArray = require('lodash/isArray');
 var uniqBy = require('lodash/uniqBy');
 var core = require('@panneau/core');
 var Buttons = require('@panneau/element-buttons');
@@ -735,7 +736,8 @@ var defaultColumns = [{
 var defaultFilters = [{
   id: 'search',
   component: 'search',
-  name: 'search'
+  name: 'search',
+  width: 220
 }, {
   id: 'types',
   component: 'select',
@@ -820,6 +822,7 @@ var propTypes$5 = {
   layout: PropTypes.string,
   layouts: PropTypes.arrayOf(PropTypes.shape({})),
   theme: PropTypes.string,
+  onUpload: PropTypes.func,
   onItemsChange: PropTypes.func,
   onLayoutChange: PropTypes.func,
   selectable: PropTypes.bool,
@@ -837,7 +840,6 @@ var defaultProps$5 = {
   items: null,
   extraItems: null,
   types: null,
-  buttons: null,
   filters: defaultFilters,
   columns: defaultColumns,
   fields: defaultFields,
@@ -856,6 +858,7 @@ var defaultProps$5 = {
     })
   }],
   theme: null,
+  onUpload: null,
   onItemsChange: null,
   onLayoutChange: null,
   selectable: null,
@@ -881,6 +884,7 @@ function MediasBrowser(_ref) {
     initialLayout = _ref.layout,
     layouts = _ref.layouts,
     theme = _ref.theme,
+    onUpload = _ref.onUpload,
     onItemsChange = _ref.onItemsChange,
     onLayoutChange = _ref.onLayoutChange,
     selectable = _ref.selectable,
@@ -961,7 +965,8 @@ function MediasBrowser(_ref) {
     lastPage = _useMedias$pagination2.lastPage,
     total = _useMedias$pagination2.total,
     _useMedias$pages = _useMedias.pages,
-    pages = _useMedias$pages === void 0 ? null : _useMedias$pages;
+    pages = _useMedias$pages === void 0 ? null : _useMedias$pages,
+    reload = _useMedias.reload;
 
   // For picker
   React.useEffect(function () {
@@ -997,6 +1002,21 @@ function MediasBrowser(_ref) {
     setCurrentMedia(null);
     updateItem(item);
   }, [setCurrentMedia, updateItem]);
+  var onMediaUploaded = React.useCallback(function (medias) {
+    var rawMedias = isArray(medias) ? medias : [medias];
+    if (onUpload !== null) {
+      onUpload(rawMedias).then(function (newMedias) {
+        if (onSelectionChange !== null) {
+          onSelectionChange(newMedias);
+          reload();
+        }
+      });
+    }
+    if (onSelectionChange !== null) {
+      onSelectionChange(rawMedias);
+      reload();
+    }
+  }, [onUpload]);
   var pagination = /*#__PURE__*/React.createElement(Pagination, {
     page: page,
     lastPage: lastPage,
@@ -1108,7 +1128,8 @@ function MediasBrowser(_ref) {
     className: "ms-auto w-auto text-nowrap mt-2",
     withButton: true,
     withoutMedia: true,
-    uppyConfig: uppyConfig
+    uppyConfig: uppyConfig,
+    onChange: onMediaUploaded
   }) : null), /*#__PURE__*/React.createElement("div", {
     className: classNames(['d-flex', 'mt-1', 'mb-3', {
       'justify-content-between': hasLayouts,
@@ -1223,20 +1244,10 @@ function MediasPicker(_ref) {
     props = _objectWithoutProperties(_ref, _excluded$4);
   var _useMediasForm = useMediasForm(),
     currentMedia = _useMediasForm.media;
-
-  // For selection
-  var _useState = React.useState(initialItems),
+  var _useState = React.useState(initialSelectedItems || null),
     _useState2 = _slicedToArray(_useState, 2),
-    pageItems = _useState2[0],
-    setItems = _useState2[1];
-  var disabled = pageItems === null || pageItems.length < 1;
-  var onItemsChange = React.useCallback(function (newPageItems) {
-    setItems(newPageItems);
-  }, [setItems]);
-  var _useState3 = React.useState(initialSelectedItems || null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    selectedItems = _useState4[0],
-    setSelectedItems = _useState4[1];
+    selectedItems = _useState2[0],
+    setSelectedItems = _useState2[1];
   var onSelectionChange = React.useCallback(function (newSelection) {
     setSelectedItems(newSelection);
   }, [setSelectedItems]);
@@ -1251,9 +1262,10 @@ function MediasPicker(_ref) {
   }, [selectedItems, parentOnSelectionChange]);
   var onConfirmSelection = React.useCallback(function () {
     if (onChange !== null) {
-      onChange(selectedItems);
+      onChange(selectedItems || null);
     }
   }, [selectedItems, onChange]);
+  var empty = selectedItems === null || isArray(selectedItems) && selectedItems.length === 0;
   return /*#__PURE__*/React.createElement("div", {
     className: className
   }, /*#__PURE__*/React.createElement(MediasBrowser, Object.assign({
@@ -1263,7 +1275,6 @@ function MediasPicker(_ref) {
     selectedItems: selectedItems,
     onSelectionChange: onSelectionChange,
     multipleSelection: multipleSelection,
-    onItemsChange: onItemsChange,
     types: types
     // extraItems={
     //     !multiple && initialSelectedItems !== null
@@ -1289,10 +1300,14 @@ function MediasPicker(_ref) {
     type: "button",
     theme: "primary",
     onClick: onConfirmSelection,
-    disabled: disabled,
-    outline: disabled,
     className: "d-block"
-  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+  }, empty ? /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "Krgf6j",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Clear selection"
+    }]
+  }) : /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
     id: "rvOVCV",
     defaultMessage: [{
       "type": 0,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/medias",
-    "version": "3.0.182",
+    "version": "3.0.184",
     "description": "",
     "keywords": [
         "javascript"
@@ -69,5 +69,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "27626681ce1bcf3e4779ecabeb5d69c58df4d351"
+    "gitHead": "1d2948618d41595e4c6a40a72f1d9f196cf369ef"
 }