@panneau/medias 3.0.169 → 3.0.171

package/es/index.js

@@ -20,7 +20,6 @@ import Icon from '@panneau/element-icon';
 import MediaCard from '@panneau/element-media-card';
 import Pagination from '@panneau/element-pagination';
 import Table from '@panneau/element-table';
-import UploadField from '@panneau/field-upload';
 import Filters from '@panneau/filter-filters';
 import { useItems, useData, useApi } from '@panneau/data';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
@@ -268,6 +267,7 @@ var defaultFields = [{
     }]
   }),
   isList: true,
+  hideWithoutValue: true,
   fields: [{
     id: 'user',
     label: /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -309,6 +309,7 @@ var defaultFields = [{
     }]
   }),
   isList: true,
+  hideWithoutValue: true,
   fields: [{
     id: 'format',
     label: /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -696,6 +697,10 @@ var defaultColumns = [{
 ];
 
 var defaultFilters = [{
+  id: 'search',
+  component: 'search',
+  name: 'search'
+}, {
   id: 'types',
   component: 'select',
   name: 'types',
@@ -744,7 +749,8 @@ var defaultFilters = [{
     value: 'document'
   }],
   multiple: true
-},
+}
+
 // {
 //     id: 'author',
 //     component: 'select',
@@ -763,20 +769,16 @@ var defaultFilters = [{
 //     itemLabelPath: 'label',
 //     multiple: true,
 // },
-{
-  id: 'search',
-  component: 'search',
-  name: 'search'
-}];
+];
 
 var _excluded$5 = ["page", "count"],
   _excluded2 = ["types"];
 var propTypes$5 = {
   items: PropTypes$1.medias,
   types: PropTypes.arrayOf(PropTypes.string),
-  uploadButton: PropTypes.shape({
-    value: PropTypes.oneOfType([PropTypes$1.medias, PropTypes$1.media])
-  }),
+  // uploadButton: PropTypes.shape({
+  //     value: PropTypes.oneOfType([PanneauPropTypes.medias, PanneauPropTypes.media]),
+  // }),
   buttons: PropTypes$1.buttons,
   filters: PropTypes$1.filters,
   columns: PropTypes$1.tableColumns,
@@ -798,7 +800,6 @@ var propTypes$5 = {
 var defaultProps$5 = {
   items: null,
   types: null,
-  uploadButton: null,
   buttons: null,
   filters: defaultFilters,
   columns: defaultColumns,
@@ -831,7 +832,6 @@ function MediasBrowser(_ref) {
   var initialItems = _ref.items,
     types = _ref.types,
     baseUrl = _ref.baseUrl,
-    uploadButton = _ref.uploadButton,
     buttons = _ref.buttons,
     filters = _ref.filters,
     columns = _ref.columns,
@@ -901,7 +901,7 @@ function MediasBrowser(_ref) {
       onItemsChange(items);
     }
   }, [items, onItemsChange]);
-  var _useState3 = useState(initialLayout || 'grid'),
+  var _useState3 = useState(initialLayout || 'table'),
     _useState4 = _slicedToArray(_useState3, 2),
     layout = _useState4[0],
     setLayout = _useState4[1];
@@ -925,7 +925,9 @@ function MediasBrowser(_ref) {
   var onCloseMedia = useCallback(function () {
     setCurrentMedia(null);
   }, [setCurrentMedia]);
-  var onChangeMedia = useCallback(function () {
+
+  // TODO: context for this?
+  useCallback(function () {
     var media = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
     onSelectItems(media);
     onQueryReset();
@@ -982,10 +984,7 @@ function MediasBrowser(_ref) {
     onChange: setCurrentMedia,
     onSave: onSaveMedia,
     onClose: onCloseMedia
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
-    items: buttons,
-    className: "mb-2"
-  }) : null, filters !== null ? /*#__PURE__*/React.createElement(Filters, {
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, filters !== null ? /*#__PURE__*/React.createElement(Filters, {
     className: "mt-0 pt-0",
     value: query,
     clearValue: types !== null ? queryWithoutTypes : null,
@@ -993,18 +992,15 @@ function MediasBrowser(_ref) {
     onChange: onQueryChange,
     onReset: onQueryReset,
     theme: theme
-  }, uploadButton !== null ? /*#__PURE__*/React.createElement(UploadField, Object.assign({
-    className: "w-auto mb-2",
-    onChange: onChangeMedia,
-    withButton: true,
-    withoutMedia: true
-  }, uploadButton)) : null) : null, filters === null && uploadButton !== null ? /*#__PURE__*/React.createElement("div", {
+  }, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
+    items: buttons,
+    className: "ms-xl-auto"
+  }) : null) : null, filters === null && buttons !== null ? /*#__PURE__*/React.createElement("div", {
     className: "mt-2 mb-2"
-  }, /*#__PURE__*/React.createElement(UploadField, Object.assign({
-    onChange: onChangeMedia,
-    withButton: true,
-    withoutMedia: true
-  }, uploadButton))) : null, /*#__PURE__*/React.createElement("div", {
+  }, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
+    items: buttons,
+    className: "ms-xl-auto"
+  }) : null) : null, /*#__PURE__*/React.createElement("div", {
     className: classNames(['d-flex', 'mt-1', 'mb-3', {
       'justify-content-between': hasLayouts,
       'justify-content-end': !hasLayouts
@@ -1029,7 +1025,11 @@ function MediasBrowser(_ref) {
     componentProps: {
       className: 'd-flex w-100',
       cardClassName: 'flex-grow-1',
-      vertical: true
+      vertical: true,
+      selectable: onSelectItem !== null,
+      onClickDescription: function onClickDescription(it) {
+        onOpenMedia(it);
+      }
     }
   }, tableProps, {
     items: items || [],
@@ -1066,13 +1066,12 @@ function MediasBrowser(_ref) {
 MediasBrowser.propTypes = propTypes$5;
 MediasBrowser.defaultProps = defaultProps$5;
 
-var _excluded$4 = ["items", "value", "types", "uploadButton", "onChange", "onConfirm", "onClose", "multiple", "withoutButtons", "tableProps", "className"];
+var _excluded$4 = ["items", "value", "types", "onChange", "onConfirm", "onClose", "multiple", "withoutButtons", "tableProps", "className"];
 var propTypes$4 = {
   // eslint-disable-next-line react/forbid-prop-types
   items: PropTypes.arrayOf(PropTypes.shape({})),
   value: PropTypes.arrayOf(PropTypes.shape({})),
   types: PropTypes.arrayOf(PropTypes.string),
-  uploadButton: PropTypes.shape({}),
   onChange: PropTypes.func.isRequired,
   onConfirm: PropTypes.func.isRequired,
   onClose: PropTypes.func,
@@ -1087,7 +1086,6 @@ var defaultProps$4 = {
   items: null,
   value: null,
   types: null,
-  uploadButton: null,
   onClose: null,
   multiple: false,
   withoutButtons: false,
@@ -1098,7 +1096,6 @@ function MediasPicker(_ref) {
   var initialItems = _ref.items,
     initialSelectedItems = _ref.value,
     types = _ref.types,
-    uploadButton = _ref.uploadButton,
     onChange = _ref.onChange,
     onConfirm = _ref.onConfirm,
     onClose = _ref.onClose,
@@ -1135,15 +1132,18 @@ function MediasPicker(_ref) {
       onConfirm(selectedItems);
     }
   }, [selectedItems, onConfirm]);
-  var finalUploadButton = useMemo(function () {
-    return _objectSpread(_objectSpread(_objectSpread({}, uploadButton || null), types !== null ? {
-      types: types
-    } : null), {}, {
-      allowMultipleUploads: multiple,
-      maxNumberOfFiles: multiple ? 10 : 0,
-      value: selectedItems
-    });
-  }, [uploadButton, selectedItems, multiple]);
+
+  // const finalUploadButton = useMemo(
+  //     () => ({
+  //         ...(uploadButton || null),
+  //         ...(types !== null ? { types } : null),
+  //         allowMultipleUploads: multiple,
+  //         maxNumberOfFiles: multiple ? 10 : 0,
+  //         value: selectedItems,
+  //     }),
+  //     [uploadButton, selectedItems, multiple],
+  // );
+
   return /*#__PURE__*/React.createElement("div", {
     className: className
   }, /*#__PURE__*/React.createElement(MediasBrowser, Object.assign({
@@ -1161,7 +1161,6 @@ function MediasPicker(_ref) {
     onItemsChange: onItemsChange,
     selectedCount: selectedCount,
     onClearSelected: onClearSelected,
-    uploadButton: finalUploadButton,
     types: types
   }, props)), multiple && !withoutButtons && currentMedia === null ? /*#__PURE__*/React.createElement("div", {
     className: "d-flex w-100 align-items-end justify-content-end mt-3"

package/lib/index.js

@@ -22,7 +22,6 @@ var Icon = require('@panneau/element-icon');
 var MediaCard = require('@panneau/element-media-card');
 var Pagination = require('@panneau/element-pagination');
 var Table = require('@panneau/element-table');
-var UploadField = require('@panneau/field-upload');
 var Filters = require('@panneau/filter-filters');
 var data = require('@panneau/data');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
@@ -270,6 +269,7 @@ var defaultFields = [{
     }]
   }),
   isList: true,
+  hideWithoutValue: true,
   fields: [{
     id: 'user',
     label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
@@ -311,6 +311,7 @@ var defaultFields = [{
     }]
   }),
   isList: true,
+  hideWithoutValue: true,
   fields: [{
     id: 'format',
     label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
@@ -698,6 +699,10 @@ var defaultColumns = [{
 ];
 
 var defaultFilters = [{
+  id: 'search',
+  component: 'search',
+  name: 'search'
+}, {
   id: 'types',
   component: 'select',
   name: 'types',
@@ -746,7 +751,8 @@ var defaultFilters = [{
     value: 'document'
   }],
   multiple: true
-},
+}
+
 // {
 //     id: 'author',
 //     component: 'select',
@@ -765,20 +771,16 @@ var defaultFilters = [{
 //     itemLabelPath: 'label',
 //     multiple: true,
 // },
-{
-  id: 'search',
-  component: 'search',
-  name: 'search'
-}];
+];
 
 var _excluded$5 = ["page", "count"],
   _excluded2 = ["types"];
 var propTypes$5 = {
   items: core.PropTypes.medias,
   types: PropTypes.arrayOf(PropTypes.string),
-  uploadButton: PropTypes.shape({
-    value: PropTypes.oneOfType([core.PropTypes.medias, core.PropTypes.media])
-  }),
+  // uploadButton: PropTypes.shape({
+  //     value: PropTypes.oneOfType([PanneauPropTypes.medias, PanneauPropTypes.media]),
+  // }),
   buttons: core.PropTypes.buttons,
   filters: core.PropTypes.filters,
   columns: core.PropTypes.tableColumns,
@@ -800,7 +802,6 @@ var propTypes$5 = {
 var defaultProps$5 = {
   items: null,
   types: null,
-  uploadButton: null,
   buttons: null,
   filters: defaultFilters,
   columns: defaultColumns,
@@ -833,7 +834,6 @@ function MediasBrowser(_ref) {
   var initialItems = _ref.items,
     types = _ref.types,
     baseUrl = _ref.baseUrl,
-    uploadButton = _ref.uploadButton,
     buttons = _ref.buttons,
     filters = _ref.filters,
     columns = _ref.columns,
@@ -903,7 +903,7 @@ function MediasBrowser(_ref) {
       onItemsChange(items);
     }
   }, [items, onItemsChange]);
-  var _useState3 = React.useState(initialLayout || 'grid'),
+  var _useState3 = React.useState(initialLayout || 'table'),
     _useState4 = _slicedToArray(_useState3, 2),
     layout = _useState4[0],
     setLayout = _useState4[1];
@@ -927,7 +927,9 @@ function MediasBrowser(_ref) {
   var onCloseMedia = React.useCallback(function () {
     setCurrentMedia(null);
   }, [setCurrentMedia]);
-  var onChangeMedia = React.useCallback(function () {
+
+  // TODO: context for this?
+  React.useCallback(function () {
     var media = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
     onSelectItems(media);
     onQueryReset();
@@ -984,10 +986,7 @@ function MediasBrowser(_ref) {
     onChange: setCurrentMedia,
     onSave: onSaveMedia,
     onClose: onCloseMedia
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
-    items: buttons,
-    className: "mb-2"
-  }) : null, filters !== null ? /*#__PURE__*/React.createElement(Filters, {
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, filters !== null ? /*#__PURE__*/React.createElement(Filters, {
     className: "mt-0 pt-0",
     value: query,
     clearValue: types !== null ? queryWithoutTypes : null,
@@ -995,18 +994,15 @@ function MediasBrowser(_ref) {
     onChange: onQueryChange,
     onReset: onQueryReset,
     theme: theme
-  }, uploadButton !== null ? /*#__PURE__*/React.createElement(UploadField, Object.assign({
-    className: "w-auto mb-2",
-    onChange: onChangeMedia,
-    withButton: true,
-    withoutMedia: true
-  }, uploadButton)) : null) : null, filters === null && uploadButton !== null ? /*#__PURE__*/React.createElement("div", {
+  }, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
+    items: buttons,
+    className: "ms-xl-auto"
+  }) : null) : null, filters === null && buttons !== null ? /*#__PURE__*/React.createElement("div", {
     className: "mt-2 mb-2"
-  }, /*#__PURE__*/React.createElement(UploadField, Object.assign({
-    onChange: onChangeMedia,
-    withButton: true,
-    withoutMedia: true
-  }, uploadButton))) : null, /*#__PURE__*/React.createElement("div", {
+  }, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
+    items: buttons,
+    className: "ms-xl-auto"
+  }) : null) : null, /*#__PURE__*/React.createElement("div", {
     className: classNames(['d-flex', 'mt-1', 'mb-3', {
       'justify-content-between': hasLayouts,
       'justify-content-end': !hasLayouts
@@ -1031,7 +1027,11 @@ function MediasBrowser(_ref) {
     componentProps: {
       className: 'd-flex w-100',
       cardClassName: 'flex-grow-1',
-      vertical: true
+      vertical: true,
+      selectable: onSelectItem !== null,
+      onClickDescription: function onClickDescription(it) {
+        onOpenMedia(it);
+      }
     }
   }, tableProps, {
     items: items || [],
@@ -1068,13 +1068,12 @@ function MediasBrowser(_ref) {
 MediasBrowser.propTypes = propTypes$5;
 MediasBrowser.defaultProps = defaultProps$5;
 
-var _excluded$4 = ["items", "value", "types", "uploadButton", "onChange", "onConfirm", "onClose", "multiple", "withoutButtons", "tableProps", "className"];
+var _excluded$4 = ["items", "value", "types", "onChange", "onConfirm", "onClose", "multiple", "withoutButtons", "tableProps", "className"];
 var propTypes$4 = {
   // eslint-disable-next-line react/forbid-prop-types
   items: PropTypes.arrayOf(PropTypes.shape({})),
   value: PropTypes.arrayOf(PropTypes.shape({})),
   types: PropTypes.arrayOf(PropTypes.string),
-  uploadButton: PropTypes.shape({}),
   onChange: PropTypes.func.isRequired,
   onConfirm: PropTypes.func.isRequired,
   onClose: PropTypes.func,
@@ -1089,7 +1088,6 @@ var defaultProps$4 = {
   items: null,
   value: null,
   types: null,
-  uploadButton: null,
   onClose: null,
   multiple: false,
   withoutButtons: false,
@@ -1100,7 +1098,6 @@ function MediasPicker(_ref) {
   var initialItems = _ref.items,
     initialSelectedItems = _ref.value,
     types = _ref.types,
-    uploadButton = _ref.uploadButton,
     onChange = _ref.onChange,
     onConfirm = _ref.onConfirm,
     onClose = _ref.onClose,
@@ -1137,15 +1134,18 @@ function MediasPicker(_ref) {
       onConfirm(selectedItems);
     }
   }, [selectedItems, onConfirm]);
-  var finalUploadButton = React.useMemo(function () {
-    return _objectSpread(_objectSpread(_objectSpread({}, uploadButton || null), types !== null ? {
-      types: types
-    } : null), {}, {
-      allowMultipleUploads: multiple,
-      maxNumberOfFiles: multiple ? 10 : 0,
-      value: selectedItems
-    });
-  }, [uploadButton, selectedItems, multiple]);
+
+  // const finalUploadButton = useMemo(
+  //     () => ({
+  //         ...(uploadButton || null),
+  //         ...(types !== null ? { types } : null),
+  //         allowMultipleUploads: multiple,
+  //         maxNumberOfFiles: multiple ? 10 : 0,
+  //         value: selectedItems,
+  //     }),
+  //     [uploadButton, selectedItems, multiple],
+  // );
+
   return /*#__PURE__*/React.createElement("div", {
     className: className
   }, /*#__PURE__*/React.createElement(MediasBrowser, Object.assign({
@@ -1163,7 +1163,6 @@ function MediasPicker(_ref) {
     onItemsChange: onItemsChange,
     selectedCount: selectedCount,
     onClearSelected: onClearSelected,
-    uploadButton: finalUploadButton,
     types: types
   }, props)), multiple && !withoutButtons && currentMedia === null ? /*#__PURE__*/React.createElement("div", {
     className: "d-flex w-100 align-items-end justify-content-end mt-3"

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/medias",
-    "version": "3.0.169",
+    "version": "3.0.171",
     "description": "",
     "keywords": [
         "javascript"
@@ -54,13 +54,12 @@
         "@panneau/element-form-status": "^3.0.169",
         "@panneau/element-grid": "^3.0.169",
         "@panneau/element-icon": "^3.0.169",
-        "@panneau/element-media-card": "^3.0.169",
+        "@panneau/element-media-card": "^3.0.171",
         "@panneau/element-media-player": "^3.0.169",
         "@panneau/element-media-preview": "^3.0.169",
         "@panneau/element-pagination": "^3.0.169",
-        "@panneau/element-table": "^3.0.169",
-        "@panneau/field-upload": "^3.0.169",
-        "@panneau/filter-filters": "^3.0.169",
+        "@panneau/element-table": "^3.0.170",
+        "@panneau/filter-filters": "^3.0.171",
         "classnames": "^2.5.1",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -69,5 +68,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "a8f4fe4f0b0593485d40e97542c32742242919d4"
+    "gitHead": "38e041e7659ef78ddbec9da1232c1456366c2040"
 }