@panneau/medias 3.0.177 → 3.0.179

package/assets/css/styles.css

@@ -1 +1 @@
-.panneau-medias-mediasBrowser{--bs-input-color:var(--bs-body-bg)}.panneau-medias-mediaFrame{aspect-ratio:1/1;margin-bottom:10px;position:relative}.panneau-medias-playButton{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
+.panneau-medias-mediaFrame{aspect-ratio:1/1;margin-bottom:10px;position:relative}.panneau-medias-playButton{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}

package/es/index.js

@@ -69,7 +69,8 @@ var useMedias = function useMedias() {
   var api = useMediasApi();
   var trashed = useMemo(function () {
     var _ref = opts || {},
-      trashedOpt = _ref.trashed;
+      _ref$trashed = _ref.trashed,
+      trashedOpt = _ref$trashed === void 0 ? false : _ref$trashed;
     return trashedOpt;
   }, [opts]);
   var finalQuery = useMemo(function () {
@@ -191,7 +192,7 @@ var useMediaTrash = function useMediaTrash() {
 };
 var useMediaTrash$1 = useMediaTrash;
 
-var styles = {"mediasBrowser":"panneau-medias-mediasBrowser","mediaFrame":"panneau-medias-mediaFrame","playButton":"panneau-medias-playButton"};
+var styles = {"mediaFrame":"panneau-medias-mediaFrame","playButton":"panneau-medias-playButton"};
 
 var propTypes$8 = {
   value: PropTypes.shape({
@@ -560,13 +561,18 @@ var propTypes$6 = {
   media: PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   }),
+  fields: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  })),
   children: PropTypes.node.isRequired
 };
 var defaultProps$6 = {
-  media: null
+  media: null,
+  fields: null
 };
 function MediasFormProvider(_ref) {
   var providedMedia = _ref.media,
+    providedFields = _ref.fields,
     children = _ref.children;
   var _useState = useState(providedMedia),
     _useState2 = _slicedToArray(_useState, 2),
@@ -575,9 +581,10 @@ function MediasFormProvider(_ref) {
   var values = useMemo(function () {
     return {
       media: media,
-      setMedia: setMedia
+      setMedia: setMedia,
+      fields: providedFields
     };
-  }, [media, setMedia]);
+  }, [media, setMedia, providedFields]);
   return /*#__PURE__*/React.createElement(MediasFormContext.Provider, {
     value: values
   }, children);
@@ -967,11 +974,11 @@ function MediasBrowser(_ref) {
       onLayoutChange(newLayout);
     }
   }, [setLayout]);
-
-  // const [currentMedia, setCurrentMedia] = useState(null);
   var _useMediasForm = useMediasForm(),
     currentMedia = _useMediasForm.media,
-    setCurrentMedia = _useMediasForm.setMedia;
+    setCurrentMedia = _useMediasForm.setMedia,
+    _useMediasForm$fields = _useMediasForm.fields,
+    mediaFormFields = _useMediasForm$fields === void 0 ? null : _useMediasForm$fields;
   var onOpenMedia = useCallback(function (media) {
     setCurrentMedia(media);
   }, [setCurrentMedia]);
@@ -1058,7 +1065,7 @@ function MediasBrowser(_ref) {
     return items;
   }, [items, page, allItems, withStickySelection, extraItems]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.mediasBrowser, className])
+    className: className
   }, currentMedia !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "mt-2 mb-4"
   }, /*#__PURE__*/React.createElement(Button, {
@@ -1073,7 +1080,7 @@ function MediasBrowser(_ref) {
     }]
   }))), /*#__PURE__*/React.createElement(MediaForm, {
     value: currentMedia,
-    fields: fields,
+    fields: mediaFormFields || fields,
     onChange: setCurrentMedia,
     onSave: onSaveMedia,
     onClose: onCloseMedia,
@@ -1289,51 +1296,63 @@ function MediasPicker(_ref) {
 MediasPicker.propTypes = propTypes$4;
 MediasPicker.defaultProps = defaultProps$4;
 
-var _excluded$3 = ["api", "media"];
+var _excluded$3 = ["api", "media", "fields"];
 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
+  media: null,
+  fields: 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(MediasFormProvider, {
-    media: media
+    media: media,
+    fields: fields
   }, /*#__PURE__*/React.createElement(MediasBrowser, props)));
 }
 MediasBrowserContainer.propTypes = propTypes$3;
 MediasBrowserContainer.defaultProps = defaultProps$3;
 
-var _excluded$2 = ["api", "media", "onChange"];
+var _excluded$2 = ["api", "media", "fields", "onChange"];
 var propTypes$2 = {
   api: apiPropTypes,
   media: PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   }),
+  fields: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  })),
   onChange: PropTypes.func.isRequired
 };
 var defaultProps$2 = {
   api: null,
-  media: null
+  media: null,
+  fields: null
 };
 function MediasPickerContainer(_ref) {
   var api = _ref.api,
     media = _ref.media,
+    fields = _ref.fields,
     onChange = _ref.onChange,
     props = _objectWithoutProperties(_ref, _excluded$2);
   return /*#__PURE__*/React.createElement(MediasApiProvider, {
     api: api
   }, /*#__PURE__*/React.createElement(MediasFormProvider, {
-    media: media
+    media: media,
+    fields: fields
   }, /*#__PURE__*/React.createElement(MediasPicker, Object.assign({}, props, {
     onChange: onChange
   }))));

package/lib/index.js

@@ -71,7 +71,8 @@ var useMedias = function useMedias() {
   var api = useMediasApi();
   var trashed = React.useMemo(function () {
     var _ref = opts || {},
-      trashedOpt = _ref.trashed;
+      _ref$trashed = _ref.trashed,
+      trashedOpt = _ref$trashed === void 0 ? false : _ref$trashed;
     return trashedOpt;
   }, [opts]);
   var finalQuery = React.useMemo(function () {
@@ -193,7 +194,7 @@ var useMediaTrash = function useMediaTrash() {
 };
 var useMediaTrash$1 = useMediaTrash;
 
-var styles = {"mediasBrowser":"panneau-medias-mediasBrowser","mediaFrame":"panneau-medias-mediaFrame","playButton":"panneau-medias-playButton"};
+var styles = {"mediaFrame":"panneau-medias-mediaFrame","playButton":"panneau-medias-playButton"};
 
 var propTypes$8 = {
   value: PropTypes.shape({
@@ -562,13 +563,18 @@ var propTypes$6 = {
   media: PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   }),
+  fields: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  })),
   children: PropTypes.node.isRequired
 };
 var defaultProps$6 = {
-  media: null
+  media: null,
+  fields: null
 };
 function MediasFormProvider(_ref) {
   var providedMedia = _ref.media,
+    providedFields = _ref.fields,
     children = _ref.children;
   var _useState = React.useState(providedMedia),
     _useState2 = _slicedToArray(_useState, 2),
@@ -577,9 +583,10 @@ function MediasFormProvider(_ref) {
   var values = React.useMemo(function () {
     return {
       media: media,
-      setMedia: setMedia
+      setMedia: setMedia,
+      fields: providedFields
     };
-  }, [media, setMedia]);
+  }, [media, setMedia, providedFields]);
   return /*#__PURE__*/React.createElement(MediasFormContext.Provider, {
     value: values
   }, children);
@@ -969,11 +976,11 @@ function MediasBrowser(_ref) {
       onLayoutChange(newLayout);
     }
   }, [setLayout]);
-
-  // const [currentMedia, setCurrentMedia] = useState(null);
   var _useMediasForm = useMediasForm(),
     currentMedia = _useMediasForm.media,
-    setCurrentMedia = _useMediasForm.setMedia;
+    setCurrentMedia = _useMediasForm.setMedia,
+    _useMediasForm$fields = _useMediasForm.fields,
+    mediaFormFields = _useMediasForm$fields === void 0 ? null : _useMediasForm$fields;
   var onOpenMedia = React.useCallback(function (media) {
     setCurrentMedia(media);
   }, [setCurrentMedia]);
@@ -1060,7 +1067,7 @@ function MediasBrowser(_ref) {
     return items;
   }, [items, page, allItems, withStickySelection, extraItems]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.mediasBrowser, className])
+    className: className
   }, currentMedia !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "mt-2 mb-4"
   }, /*#__PURE__*/React.createElement(Button, {
@@ -1075,7 +1082,7 @@ function MediasBrowser(_ref) {
     }]
   }))), /*#__PURE__*/React.createElement(MediaForm, {
     value: currentMedia,
-    fields: fields,
+    fields: mediaFormFields || fields,
     onChange: setCurrentMedia,
     onSave: onSaveMedia,
     onClose: onCloseMedia,
@@ -1291,51 +1298,63 @@ function MediasPicker(_ref) {
 MediasPicker.propTypes = propTypes$4;
 MediasPicker.defaultProps = defaultProps$4;
 
-var _excluded$3 = ["api", "media"];
+var _excluded$3 = ["api", "media", "fields"];
 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
+  media: null,
+  fields: 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(MediasFormProvider, {
-    media: media
+    media: media,
+    fields: fields
   }, /*#__PURE__*/React.createElement(MediasBrowser, props)));
 }
 MediasBrowserContainer.propTypes = propTypes$3;
 MediasBrowserContainer.defaultProps = defaultProps$3;
 
-var _excluded$2 = ["api", "media", "onChange"];
+var _excluded$2 = ["api", "media", "fields", "onChange"];
 var propTypes$2 = {
   api: apiPropTypes,
   media: PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   }),
+  fields: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  })),
   onChange: PropTypes.func.isRequired
 };
 var defaultProps$2 = {
   api: null,
-  media: null
+  media: null,
+  fields: null
 };
 function MediasPickerContainer(_ref) {
   var api = _ref.api,
     media = _ref.media,
+    fields = _ref.fields,
     onChange = _ref.onChange,
     props = _objectWithoutProperties(_ref, _excluded$2);
   return /*#__PURE__*/React.createElement(MediasApiProvider, {
     api: api
   }, /*#__PURE__*/React.createElement(MediasFormProvider, {
-    media: media
+    media: media,
+    fields: fields
   }, /*#__PURE__*/React.createElement(MediasPicker, Object.assign({}, props, {
     onChange: onChange
   }))));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/medias",
-    "version": "3.0.177",
+    "version": "3.0.179",
     "description": "",
     "keywords": [
         "javascript"
@@ -47,7 +47,7 @@
     "dependencies": {
         "@babel/runtime": "^7.12.5",
         "@panneau/core": "^3.0.176",
-        "@panneau/data": "^3.0.176",
+        "@panneau/data": "^3.0.178",
         "@panneau/display-image": "^3.0.177",
         "@panneau/element-button": "^3.0.177",
         "@panneau/element-buttons": "^3.0.177",
@@ -68,5 +68,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "1a019f94f7dd3e0b4403d20718140def529eba97"
+    "gitHead": "b30a47b8b078044365622de3c85911898037c1f3"
 }