@panneau/medias 3.0.148 → 3.0.150

package/es/index.js

@@ -1,13 +1,19 @@
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import React, { useContext, useMemo, useCallback, useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { useContext, useMemo, useCallback, useState, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { PropTypes as PropTypes$1 } from '@panneau/core';
+import { useDisplaysComponentsManager, useFieldComponent, usePanneauResource } from '@panneau/core/contexts';
 import { useForm, useQuery, useItemSelection } from '@panneau/core/hooks';
 import Button from '@panneau/element-button';
+import Form from '@panneau/element-form';
+import MediaPlayer from '@panneau/element-media-player';
+import MediaPreview from '@panneau/element-media-preview';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { get } from 'lodash';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import { PropTypes as PropTypes$1 } from '@panneau/core';
 import Buttons from '@panneau/element-buttons';
 import Grid from '@panneau/element-grid';
 import Icon from '@panneau/element-icon';
@@ -15,12 +21,6 @@ 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 _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { useDisplaysComponentsManager, useFieldComponent, usePanneauResource } from '@panneau/core/contexts';
-import Form from '@panneau/element-form';
-import MediaPlayer from '@panneau/element-media-player';
-import MediaPreview from '@panneau/element-media-preview';
-import { get } from 'lodash';
 import { useItems, useData, useApi } from '@panneau/data';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 
@@ -828,6 +828,7 @@ var propTypes$5 = {
   tableProps: PropTypes.bool,
   onSelectItem: PropTypes.func,
   onItemsChange: PropTypes.func,
+  onLayoutChange: PropTypes.func,
   selectedCount: PropTypes.number,
   onClearSelected: PropTypes.func,
   className: PropTypes.string
@@ -856,6 +857,7 @@ var defaultProps$5 = {
   tableProps: null,
   onSelectItem: null,
   onItemsChange: null,
+  onLayoutChange: null,
   selectedCount: null,
   onClearSelected: null,
   className: null
@@ -873,6 +875,7 @@ function MediasBrowser(_ref) {
     tableProps = _ref.tableProps,
     onSelectItem = _ref.onSelectItem,
     onItemsChange = _ref.onItemsChange,
+    onLayoutChange = _ref.onLayoutChange,
     selectedCount = _ref.selectedCount,
     onClearSelected = _ref.onClearSelected,
     className = _ref.className;
@@ -922,8 +925,11 @@ function MediasBrowser(_ref) {
   var hasLayouts = useMemo(function () {
     return layouts !== null && layouts.length > 1;
   }, [layouts]);
-  var onClickLayout = useCallback(function (lay) {
-    setLayout(lay);
+  var onClickLayout = useCallback(function (newLayout) {
+    setLayout(newLayout);
+    if (onLayoutChange !== null) {
+      onLayoutChange(newLayout);
+    }
   }, [setLayout]);
   var _useState3 = useState(null),
     _useState4 = _slicedToArray(_useState3, 2),
@@ -994,24 +1000,28 @@ function MediasBrowser(_ref) {
         className: 'px-3'
       });
     })
-  }) : null, pagination), layout === 'grid' ? /*#__PURE__*/React.createElement(Grid, Object.assign({}, tableProps, {
+  }) : null, pagination), layout === 'grid' ? /*#__PURE__*/React.createElement(Grid, Object.assign({
     size: "xsmall",
-    items: items || [],
+    theme: theme,
     component: MediaCard,
     componentProps: {
       className: 'd-flex w-100',
       cardClassName: 'flex-grow-1',
       vertical: true
-    },
+    }
+  }, tableProps, {
+    items: items || [],
     onSelectItem: onSelectItem !== null ? onSelectItem : function (it) {
       return onOpenMedia(it);
     }
-  })) : null, layout === 'table' ? /*#__PURE__*/React.createElement(Table, Object.assign({}, tableProps, {
+  })) : null, layout === 'table' ? /*#__PURE__*/React.createElement(Table, Object.assign({
+    theme: theme,
     columns: columns,
-    items: items,
     displayPlaceholder: /*#__PURE__*/React.createElement("span", {
       className: "text-secondary text-opacity-75"
-    }, "\u2014"),
+    }, "\u2014")
+  }, tableProps, {
+    items: items,
     onSelectItem: onSelectItem !== null ? onSelectItem : function (it) {
       return onOpenMedia(it);
     }
@@ -1022,25 +1032,8 @@ function MediasBrowser(_ref) {
 MediasBrowser.propTypes = propTypes$5;
 MediasBrowser.defaultProps = defaultProps$5;
 
-var _excluded$4 = ["api"];
+var _excluded$4 = ["value", "selectedItems", "onChange", "onConfirm", "onClose", "multiple", "withoutButtons", "tableProps", "className"];
 var propTypes$4 = {
-  api: apiPropTypes
-};
-var defaultProps$4 = {
-  api: null
-};
-function MediasBrowserContainer(_ref) {
-  var api = _ref.api,
-    props = _objectWithoutProperties(_ref, _excluded$4);
-  return /*#__PURE__*/React.createElement(MediasApiProvider, {
-    api: api
-  }, /*#__PURE__*/React.createElement(MediasBrowser, props));
-}
-MediasBrowserContainer.propTypes = propTypes$4;
-MediasBrowserContainer.defaultProps = defaultProps$4;
-
-var _excluded$3 = ["value", "selectedItems", "onChange", "onConfirm", "onClose", "multiple", "withoutButtons", "className"];
-var propTypes$3 = {
   // eslint-disable-next-line react/forbid-prop-types
   value: PropTypes.arrayOf(PropTypes.shape({})),
   selectedItems: PropTypes.arrayOf(PropTypes.shape({})),
@@ -1049,14 +1042,18 @@ var propTypes$3 = {
   onClose: PropTypes.func,
   multiple: PropTypes.bool,
   withoutButtons: PropTypes.bool,
+  tableProps: PropTypes.shape({
+    theme: PropTypes.string
+  }),
   className: PropTypes.string
 };
-var defaultProps$3 = {
+var defaultProps$4 = {
   value: null,
   selectedItems: null,
   onClose: null,
   multiple: false,
   withoutButtons: false,
+  tableProps: null,
   className: null
 };
 function MediasPicker(_ref) {
@@ -1067,8 +1064,9 @@ function MediasPicker(_ref) {
     onClose = _ref.onClose,
     multiple = _ref.multiple,
     withoutButtons = _ref.withoutButtons,
+    tableProps = _ref.tableProps,
     className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded$3);
+    props = _objectWithoutProperties(_ref, _excluded$4);
   var _useState = useState(value),
     _useState2 = _slicedToArray(_useState, 2),
     items = _useState2[0],
@@ -1092,14 +1090,14 @@ function MediasPicker(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: className
   }, /*#__PURE__*/React.createElement(MediasBrowser, Object.assign({
-    tableProps: {
+    tableProps: _objectSpread({
       selectable: true,
       multipleSelection: multiple,
       onSelectItem: onSelectItem,
       onSelectPage: onSelectPage,
       selectedItems: selectedItems,
       pageSelected: pageSelected
-    },
+    }, tableProps),
     onSelectItem: onSelectItem,
     onItemsChange: onItemsChange,
     selectedCount: selectedCount,
@@ -1134,8 +1132,25 @@ function MediasPicker(_ref) {
     }]
   })))) : null);
 }
-MediasPicker.propTypes = propTypes$3;
-MediasPicker.defaultProps = defaultProps$3;
+MediasPicker.propTypes = propTypes$4;
+MediasPicker.defaultProps = defaultProps$4;
+
+var _excluded$3 = ["api"];
+var propTypes$3 = {
+  api: apiPropTypes
+};
+var defaultProps$3 = {
+  api: null
+};
+function MediasBrowserContainer(_ref) {
+  var api = _ref.api,
+    props = _objectWithoutProperties(_ref, _excluded$3);
+  return /*#__PURE__*/React.createElement(MediasApiProvider, {
+    api: api
+  }, /*#__PURE__*/React.createElement(MediasBrowser, props));
+}
+MediasBrowserContainer.propTypes = propTypes$3;
+MediasBrowserContainer.defaultProps = defaultProps$3;
 
 var _excluded$2 = ["api", "onChange"];
 var propTypes$2 = {
@@ -1274,4 +1289,4 @@ function MediasResourcePicker(_ref) {
 MediasResourcePicker.propTypes = propTypes;
 MediasResourcePicker.defaultProps = defaultProps;
 
-export { MediaForm, MediasApiProvider, MediasBrowser, MediasPicker, MediasPickerContainer, MediasResourceBrowser, MediasResourcePicker, apiPropTypes, defaultColumns as columns, MediasBrowserContainer as default, defaultFields as fields, defaultFilters as filters, defaultDisplays as metadataDisplays, defaultSections as metadataSections, useMedia$1 as useMedia, useMediaCreate$1 as useMediaCreate, useMediaUpdate$1 as useMediaUpdate, useMedias$1 as useMedias, useMediasApi, useMediasRecent$1 as useMediasRecentSearches };
+export { MediaForm, MediasApiProvider, MediasBrowser, MediasBrowserContainer, MediasPicker, MediasPickerContainer, MediasResourceBrowser, MediasResourcePicker, apiPropTypes, defaultColumns as columns, defaultFields as fields, defaultFilters as filters, defaultDisplays as metadataDisplays, defaultSections as metadataSections, useMedia$1 as useMedia, useMediaCreate$1 as useMediaCreate, useMediaUpdate$1 as useMediaUpdate, useMedias$1 as useMedias, useMediasApi, useMediasRecent$1 as useMediasRecentSearches };

package/lib/index.js

@@ -1,17 +1,21 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var React = require('react');
-var PropTypes = require('prop-types');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var classNames = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
 var reactIntl = require('react-intl');
-var core = require('@panneau/core');
+var contexts = require('@panneau/core/contexts');
 var hooks = require('@panneau/core/hooks');
 var Button = require('@panneau/element-button');
+var Form = require('@panneau/element-form');
+var MediaPlayer = require('@panneau/element-media-player');
+var MediaPreview = require('@panneau/element-media-preview');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var lodash = require('lodash');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var core = require('@panneau/core');
 var Buttons = require('@panneau/element-buttons');
 var Grid = require('@panneau/element-grid');
 var Icon = require('@panneau/element-icon');
@@ -19,12 +23,6 @@ var MediaCard = require('@panneau/element-media-card');
 var Pagination = require('@panneau/element-pagination');
 var Table = require('@panneau/element-table');
 var Filters = require('@panneau/filter-filters');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var contexts = require('@panneau/core/contexts');
-var Form = require('@panneau/element-form');
-var MediaPlayer = require('@panneau/element-media-player');
-var MediaPreview = require('@panneau/element-media-preview');
-var lodash = require('lodash');
 var data = require('@panneau/data');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 
@@ -832,6 +830,7 @@ var propTypes$5 = {
   tableProps: PropTypes.bool,
   onSelectItem: PropTypes.func,
   onItemsChange: PropTypes.func,
+  onLayoutChange: PropTypes.func,
   selectedCount: PropTypes.number,
   onClearSelected: PropTypes.func,
   className: PropTypes.string
@@ -860,6 +859,7 @@ var defaultProps$5 = {
   tableProps: null,
   onSelectItem: null,
   onItemsChange: null,
+  onLayoutChange: null,
   selectedCount: null,
   onClearSelected: null,
   className: null
@@ -877,6 +877,7 @@ function MediasBrowser(_ref) {
     tableProps = _ref.tableProps,
     onSelectItem = _ref.onSelectItem,
     onItemsChange = _ref.onItemsChange,
+    onLayoutChange = _ref.onLayoutChange,
     selectedCount = _ref.selectedCount,
     onClearSelected = _ref.onClearSelected,
     className = _ref.className;
@@ -926,8 +927,11 @@ function MediasBrowser(_ref) {
   var hasLayouts = React.useMemo(function () {
     return layouts !== null && layouts.length > 1;
   }, [layouts]);
-  var onClickLayout = React.useCallback(function (lay) {
-    setLayout(lay);
+  var onClickLayout = React.useCallback(function (newLayout) {
+    setLayout(newLayout);
+    if (onLayoutChange !== null) {
+      onLayoutChange(newLayout);
+    }
   }, [setLayout]);
   var _useState3 = React.useState(null),
     _useState4 = _slicedToArray(_useState3, 2),
@@ -998,24 +1002,28 @@ function MediasBrowser(_ref) {
         className: 'px-3'
       });
     })
-  }) : null, pagination), layout === 'grid' ? /*#__PURE__*/React.createElement(Grid, Object.assign({}, tableProps, {
+  }) : null, pagination), layout === 'grid' ? /*#__PURE__*/React.createElement(Grid, Object.assign({
     size: "xsmall",
-    items: items || [],
+    theme: theme,
     component: MediaCard,
     componentProps: {
       className: 'd-flex w-100',
       cardClassName: 'flex-grow-1',
       vertical: true
-    },
+    }
+  }, tableProps, {
+    items: items || [],
     onSelectItem: onSelectItem !== null ? onSelectItem : function (it) {
       return onOpenMedia(it);
     }
-  })) : null, layout === 'table' ? /*#__PURE__*/React.createElement(Table, Object.assign({}, tableProps, {
+  })) : null, layout === 'table' ? /*#__PURE__*/React.createElement(Table, Object.assign({
+    theme: theme,
     columns: columns,
-    items: items,
     displayPlaceholder: /*#__PURE__*/React.createElement("span", {
       className: "text-secondary text-opacity-75"
-    }, "\u2014"),
+    }, "\u2014")
+  }, tableProps, {
+    items: items,
     onSelectItem: onSelectItem !== null ? onSelectItem : function (it) {
       return onOpenMedia(it);
     }
@@ -1026,25 +1034,8 @@ function MediasBrowser(_ref) {
 MediasBrowser.propTypes = propTypes$5;
 MediasBrowser.defaultProps = defaultProps$5;
 
-var _excluded$4 = ["api"];
+var _excluded$4 = ["value", "selectedItems", "onChange", "onConfirm", "onClose", "multiple", "withoutButtons", "tableProps", "className"];
 var propTypes$4 = {
-  api: apiPropTypes
-};
-var defaultProps$4 = {
-  api: null
-};
-function MediasBrowserContainer(_ref) {
-  var api = _ref.api,
-    props = _objectWithoutProperties(_ref, _excluded$4);
-  return /*#__PURE__*/React.createElement(MediasApiProvider, {
-    api: api
-  }, /*#__PURE__*/React.createElement(MediasBrowser, props));
-}
-MediasBrowserContainer.propTypes = propTypes$4;
-MediasBrowserContainer.defaultProps = defaultProps$4;
-
-var _excluded$3 = ["value", "selectedItems", "onChange", "onConfirm", "onClose", "multiple", "withoutButtons", "className"];
-var propTypes$3 = {
   // eslint-disable-next-line react/forbid-prop-types
   value: PropTypes.arrayOf(PropTypes.shape({})),
   selectedItems: PropTypes.arrayOf(PropTypes.shape({})),
@@ -1053,14 +1044,18 @@ var propTypes$3 = {
   onClose: PropTypes.func,
   multiple: PropTypes.bool,
   withoutButtons: PropTypes.bool,
+  tableProps: PropTypes.shape({
+    theme: PropTypes.string
+  }),
   className: PropTypes.string
 };
-var defaultProps$3 = {
+var defaultProps$4 = {
   value: null,
   selectedItems: null,
   onClose: null,
   multiple: false,
   withoutButtons: false,
+  tableProps: null,
   className: null
 };
 function MediasPicker(_ref) {
@@ -1071,8 +1066,9 @@ function MediasPicker(_ref) {
     onClose = _ref.onClose,
     multiple = _ref.multiple,
     withoutButtons = _ref.withoutButtons,
+    tableProps = _ref.tableProps,
     className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded$3);
+    props = _objectWithoutProperties(_ref, _excluded$4);
   var _useState = React.useState(value),
     _useState2 = _slicedToArray(_useState, 2),
     items = _useState2[0],
@@ -1096,14 +1092,14 @@ function MediasPicker(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: className
   }, /*#__PURE__*/React.createElement(MediasBrowser, Object.assign({
-    tableProps: {
+    tableProps: _objectSpread({
       selectable: true,
       multipleSelection: multiple,
       onSelectItem: onSelectItem,
       onSelectPage: onSelectPage,
       selectedItems: selectedItems,
       pageSelected: pageSelected
-    },
+    }, tableProps),
     onSelectItem: onSelectItem,
     onItemsChange: onItemsChange,
     selectedCount: selectedCount,
@@ -1138,8 +1134,25 @@ function MediasPicker(_ref) {
     }]
   })))) : null);
 }
-MediasPicker.propTypes = propTypes$3;
-MediasPicker.defaultProps = defaultProps$3;
+MediasPicker.propTypes = propTypes$4;
+MediasPicker.defaultProps = defaultProps$4;
+
+var _excluded$3 = ["api"];
+var propTypes$3 = {
+  api: apiPropTypes
+};
+var defaultProps$3 = {
+  api: null
+};
+function MediasBrowserContainer(_ref) {
+  var api = _ref.api,
+    props = _objectWithoutProperties(_ref, _excluded$3);
+  return /*#__PURE__*/React.createElement(MediasApiProvider, {
+    api: api
+  }, /*#__PURE__*/React.createElement(MediasBrowser, props));
+}
+MediasBrowserContainer.propTypes = propTypes$3;
+MediasBrowserContainer.defaultProps = defaultProps$3;
 
 var _excluded$2 = ["api", "onChange"];
 var propTypes$2 = {
@@ -1281,13 +1294,13 @@ MediasResourcePicker.defaultProps = defaultProps;
 exports.MediaForm = MediaForm;
 exports.MediasApiProvider = MediasApiProvider;
 exports.MediasBrowser = MediasBrowser;
+exports.MediasBrowserContainer = MediasBrowserContainer;
 exports.MediasPicker = MediasPicker;
 exports.MediasPickerContainer = MediasPickerContainer;
 exports.MediasResourceBrowser = MediasResourceBrowser;
 exports.MediasResourcePicker = MediasResourcePicker;
 exports.apiPropTypes = apiPropTypes;
 exports.columns = defaultColumns;
-exports.default = MediasBrowserContainer;
 exports.fields = defaultFields;
 exports.filters = defaultFilters;
 exports.metadataDisplays = defaultDisplays;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/medias",
-    "version": "3.0.148",
+    "version": "3.0.150",
     "description": "",
     "keywords": [
         "javascript"
@@ -46,19 +46,19 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@panneau/core": "^3.0.146",
-        "@panneau/data": "^3.0.146",
-        "@panneau/element-button": "^3.0.146",
-        "@panneau/element-buttons": "^3.0.146",
-        "@panneau/element-form": "^3.0.146",
-        "@panneau/element-grid": "^3.0.146",
-        "@panneau/element-icon": "^3.0.146",
-        "@panneau/element-media-card": "^3.0.146",
-        "@panneau/element-media-player": "^3.0.146",
-        "@panneau/element-media-preview": "^3.0.146",
-        "@panneau/element-pagination": "^3.0.146",
-        "@panneau/element-table": "^3.0.146",
-        "@panneau/filter-filters": "^3.0.146",
+        "@panneau/core": "^3.0.150",
+        "@panneau/data": "^3.0.150",
+        "@panneau/element-button": "^3.0.150",
+        "@panneau/element-buttons": "^3.0.150",
+        "@panneau/element-form": "^3.0.150",
+        "@panneau/element-grid": "^3.0.150",
+        "@panneau/element-icon": "^3.0.150",
+        "@panneau/element-media-card": "^3.0.150",
+        "@panneau/element-media-player": "^3.0.150",
+        "@panneau/element-media-preview": "^3.0.150",
+        "@panneau/element-pagination": "^3.0.150",
+        "@panneau/element-table": "^3.0.150",
+        "@panneau/filter-filters": "^3.0.150",
         "classnames": "^2.5.1",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -67,5 +67,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "7e5c8242c80e4f4730503dfff989b387971ce0d2"
+    "gitHead": "a871528cf4f2a9a04e62f7920d9ac288e95e6104"
 }