@panneau/medias 3.0.162 → 3.0.163

package/es/index.js

@@ -275,9 +275,8 @@ var defaultFields = [{
       }]
     }),
     component: 'display',
-    type: 'avatar',
-    path: 'user',
-    section: 'info'
+    display: 'avatar',
+    name: 'user'
   }, {
     id: 'created_at',
     label: /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -288,56 +287,74 @@ var defaultFields = [{
       }]
     }),
     component: 'display',
-    type: 'date',
-    path: 'created_at',
-    format: 'yyyy-MM-dd hh:ss',
-    section: 'info'
+    display: 'date',
+    name: 'created_at',
+    format: 'yyyy-MM-dd hh:ss'
   }]
-}
-// {
-//     id: 'technical',
-//     component: 'fields',
-//     title: <FormattedMessage defaultMessage="Technical details" description="Field title" />,
-//     fields: [
-//         {
-//             id: 'format',
-//             label: <FormattedMessage defaultMessage="Format" description="Field label" />,
-//             type: 'display',
-//             component: 'unit',
-//             format: 'format',
-//             path: 'format',
-//             section: 'technical',
-//         },
-//         {
-//             id: 'dimensions',
-//             label: <FormattedMessage defaultMessage="Dimensions" description="Field label" />,
-//             type: 'display',
-//             component: 'unit',
-//             format: 'dimensions',
-//             path: 'metadata',
-//             section: 'technical',
-//         },
-//         {
-//             id: 'size',
-//             label: <FormattedMessage defaultMessage="Size" description="Field label" />,
-//             type: 'display',
-//             component: 'unit',
-//             format: 'bytes',
-//             path: 'metadata.size',
-//             section: 'technical',
-//         },
-//         {
-//             id: 'duration',
-//             label: <FormattedMessage defaultMessage="Duration" description="Field label" />,
-//             type: 'display',
-//             component: 'unit',
-//             format: 'duration',
-//             path: 'metadata.duration',
-//             section: 'technical',
-//         },
-//     ],
-// },
-];
+}, {
+  id: 'technical',
+  component: 'fields',
+  title: /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "xKUOLG",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Technical details"
+    }]
+  }),
+  fields: [{
+    id: 'format',
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "JuxiUN",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Format"
+      }]
+    }),
+    type: 'display',
+    display: 'unit',
+    format: 'format',
+    name: 'format'
+  }, {
+    id: 'dimensions',
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "rmJBin",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Dimensions"
+      }]
+    }),
+    type: 'display',
+    display: 'unit',
+    format: 'dimensions',
+    name: 'metadata'
+  }, {
+    id: 'size',
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "g2CRt5",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Size"
+      }]
+    }),
+    type: 'display',
+    display: 'unit',
+    format: 'bytes',
+    name: 'metadata.size'
+  }, {
+    id: 'duration',
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "wU++NJ",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Duration"
+      }]
+    }),
+    type: 'display',
+    display: 'unit',
+    format: 'duration',
+    name: 'metadata.duration'
+  }]
+}];
 
 var propTypes$7 = {
   value: PropTypes.shape({
@@ -346,8 +363,8 @@ var propTypes$7 = {
   fields: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string
   })),
-  onChange: PropTypes.func.isRequired,
-  onSave: PropTypes.func.isRequired,
+  onChange: PropTypes.func,
+  onSave: PropTypes.func,
   onDelete: PropTypes.func,
   onClose: PropTypes.func,
   className: PropTypes.string,
@@ -356,8 +373,10 @@ var propTypes$7 = {
 var defaultProps$7 = {
   value: null,
   fields: defaultFields,
-  onClose: null,
+  onChange: null,
+  onSave: null,
   onDelete: null,
+  onClose: null,
   className: null,
   children: null
 };
@@ -405,13 +424,13 @@ function MediaForm(_ref) {
       _ref3$id = _ref3.id,
       id = _ref3$id === void 0 ? null : _ref3$id;
     destroy(id, initialValue).then(function () {
-      if (onClose !== null) {
-        onClose();
-      }
       if (onDelete !== null) {
         onDelete();
       }
       setChanged(false);
+      if (onClose !== null) {
+        onClose();
+      }
     });
   }, [initialValue, destroy, destroying, setChanged]);
   var postForm = useCallback(function (action, data) {
@@ -433,16 +452,16 @@ function MediaForm(_ref) {
     generalError = _useForm.generalError;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(['text-body', _defineProperty({}, className, className !== null)])
+  }, /*#__PURE__*/React.createElement("nav", {
+    className: "navbar d-flex w-100 align-items-end justify-content-between border-bottom mb-3"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "d-flex w-100 align-items-start justify-content-between mb-3 pb-2 border-bottom"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "d-flex align-items-end justify-content-end mb-0"
+    className: "d-flex align-items-end justify-content-end mb-1"
   }, /*#__PURE__*/React.createElement("h4", {
     className: "d-inline text-break mb-0"
   }, name), /*#__PURE__*/React.createElement("span", {
     className: "mx-2"
   }, type)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
-    className: "me-2 mb-1",
+    className: "me-2 mb-1 mt-1",
     theme: "danger",
     onClick: onDeleteMedia,
     disabled: destroying
@@ -453,7 +472,7 @@ function MediaForm(_ref) {
       "value": "Delete"
     }]
   })), onSave !== null ? /*#__PURE__*/React.createElement(Button, {
-    className: "mb-1",
+    className: "mb-1 mt-1",
     theme: "primary",
     onClick: onSubmit,
     disabled: !changed || updating || destroying
@@ -895,6 +914,10 @@ function MediasBrowser(_ref) {
     onSelectItems(media);
     onQueryReset();
   }, [setCurrentMedia, onQueryReset, onSelectItems]);
+  var onSaveMedia = useCallback(function () {
+    setCurrentMedia(null);
+    onQueryReset();
+  }, [setCurrentMedia, onQueryReset]);
   var pagination = /*#__PURE__*/React.createElement(Pagination, {
     page: page,
     lastPage: lastPage,
@@ -940,6 +963,8 @@ function MediasBrowser(_ref) {
   }))), /*#__PURE__*/React.createElement(MediaForm, {
     value: currentMedia,
     fields: fields,
+    onChange: setCurrentMedia,
+    onSave: onSaveMedia,
     onClose: onCloseMedia
   })) : /*#__PURE__*/React.createElement(React.Fragment, null, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
     items: buttons,
@@ -1274,7 +1299,16 @@ function MediasResourcePicker(_ref) {
   var resourceId = _ref.resource,
     props = _objectWithoutProperties(_ref, _excluded);
   var resource = usePanneauResource(resourceId);
-  // console.log('resource', resource);
+  var _ref2 = resource || {},
+    _ref2$index = _ref2.index,
+    index = _ref2$index === void 0 ? null : _ref2$index,
+    _ref2$fields = _ref2.fields,
+    fields = _ref2$fields === void 0 ? null : _ref2$fields;
+  var _ref3 = index || {},
+    _ref3$filters = _ref3.filters,
+    filters = _ref3$filters === void 0 ? null : _ref3$filters,
+    _ref3$columns = _ref3.columns,
+    columns = _ref3$columns === void 0 ? null : _ref3$columns;
   var api = useApi();
   var mediasApi = useMemo(function () {
     return {
@@ -1317,7 +1351,13 @@ function MediasResourcePicker(_ref) {
   }, [api, resource]);
   return /*#__PURE__*/React.createElement(MediasPickerContainer, Object.assign({
     api: mediasApi
-  }, props));
+  }, filters !== null ? {
+    filters: filters
+  } : null, fields !== null ? {
+    fields: fields
+  } : null, columns !== null ? {
+    columns: columns
+  } : null, props));
 }
 MediasResourcePicker.propTypes = propTypes;
 MediasResourcePicker.defaultProps = defaultProps;

package/lib/index.js

@@ -277,9 +277,8 @@ var defaultFields = [{
       }]
     }),
     component: 'display',
-    type: 'avatar',
-    path: 'user',
-    section: 'info'
+    display: 'avatar',
+    name: 'user'
   }, {
     id: 'created_at',
     label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
@@ -290,56 +289,74 @@ var defaultFields = [{
       }]
     }),
     component: 'display',
-    type: 'date',
-    path: 'created_at',
-    format: 'yyyy-MM-dd hh:ss',
-    section: 'info'
+    display: 'date',
+    name: 'created_at',
+    format: 'yyyy-MM-dd hh:ss'
   }]
-}
-// {
-//     id: 'technical',
-//     component: 'fields',
-//     title: <FormattedMessage defaultMessage="Technical details" description="Field title" />,
-//     fields: [
-//         {
-//             id: 'format',
-//             label: <FormattedMessage defaultMessage="Format" description="Field label" />,
-//             type: 'display',
-//             component: 'unit',
-//             format: 'format',
-//             path: 'format',
-//             section: 'technical',
-//         },
-//         {
-//             id: 'dimensions',
-//             label: <FormattedMessage defaultMessage="Dimensions" description="Field label" />,
-//             type: 'display',
-//             component: 'unit',
-//             format: 'dimensions',
-//             path: 'metadata',
-//             section: 'technical',
-//         },
-//         {
-//             id: 'size',
-//             label: <FormattedMessage defaultMessage="Size" description="Field label" />,
-//             type: 'display',
-//             component: 'unit',
-//             format: 'bytes',
-//             path: 'metadata.size',
-//             section: 'technical',
-//         },
-//         {
-//             id: 'duration',
-//             label: <FormattedMessage defaultMessage="Duration" description="Field label" />,
-//             type: 'display',
-//             component: 'unit',
-//             format: 'duration',
-//             path: 'metadata.duration',
-//             section: 'technical',
-//         },
-//     ],
-// },
-];
+}, {
+  id: 'technical',
+  component: 'fields',
+  title: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "xKUOLG",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Technical details"
+    }]
+  }),
+  fields: [{
+    id: 'format',
+    label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+      id: "JuxiUN",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Format"
+      }]
+    }),
+    type: 'display',
+    display: 'unit',
+    format: 'format',
+    name: 'format'
+  }, {
+    id: 'dimensions',
+    label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+      id: "rmJBin",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Dimensions"
+      }]
+    }),
+    type: 'display',
+    display: 'unit',
+    format: 'dimensions',
+    name: 'metadata'
+  }, {
+    id: 'size',
+    label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+      id: "g2CRt5",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Size"
+      }]
+    }),
+    type: 'display',
+    display: 'unit',
+    format: 'bytes',
+    name: 'metadata.size'
+  }, {
+    id: 'duration',
+    label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+      id: "wU++NJ",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Duration"
+      }]
+    }),
+    type: 'display',
+    display: 'unit',
+    format: 'duration',
+    name: 'metadata.duration'
+  }]
+}];
 
 var propTypes$7 = {
   value: PropTypes.shape({
@@ -348,8 +365,8 @@ var propTypes$7 = {
   fields: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string
   })),
-  onChange: PropTypes.func.isRequired,
-  onSave: PropTypes.func.isRequired,
+  onChange: PropTypes.func,
+  onSave: PropTypes.func,
   onDelete: PropTypes.func,
   onClose: PropTypes.func,
   className: PropTypes.string,
@@ -358,8 +375,10 @@ var propTypes$7 = {
 var defaultProps$7 = {
   value: null,
   fields: defaultFields,
-  onClose: null,
+  onChange: null,
+  onSave: null,
   onDelete: null,
+  onClose: null,
   className: null,
   children: null
 };
@@ -407,13 +426,13 @@ function MediaForm(_ref) {
       _ref3$id = _ref3.id,
       id = _ref3$id === void 0 ? null : _ref3$id;
     destroy(id, initialValue).then(function () {
-      if (onClose !== null) {
-        onClose();
-      }
       if (onDelete !== null) {
         onDelete();
       }
       setChanged(false);
+      if (onClose !== null) {
+        onClose();
+      }
     });
   }, [initialValue, destroy, destroying, setChanged]);
   var postForm = React.useCallback(function (action, data) {
@@ -435,16 +454,16 @@ function MediaForm(_ref) {
     generalError = _useForm.generalError;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(['text-body', _defineProperty({}, className, className !== null)])
+  }, /*#__PURE__*/React.createElement("nav", {
+    className: "navbar d-flex w-100 align-items-end justify-content-between border-bottom mb-3"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "d-flex w-100 align-items-start justify-content-between mb-3 pb-2 border-bottom"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "d-flex align-items-end justify-content-end mb-0"
+    className: "d-flex align-items-end justify-content-end mb-1"
   }, /*#__PURE__*/React.createElement("h4", {
     className: "d-inline text-break mb-0"
   }, name), /*#__PURE__*/React.createElement("span", {
     className: "mx-2"
   }, type)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
-    className: "me-2 mb-1",
+    className: "me-2 mb-1 mt-1",
     theme: "danger",
     onClick: onDeleteMedia,
     disabled: destroying
@@ -455,7 +474,7 @@ function MediaForm(_ref) {
       "value": "Delete"
     }]
   })), onSave !== null ? /*#__PURE__*/React.createElement(Button, {
-    className: "mb-1",
+    className: "mb-1 mt-1",
     theme: "primary",
     onClick: onSubmit,
     disabled: !changed || updating || destroying
@@ -897,6 +916,10 @@ function MediasBrowser(_ref) {
     onSelectItems(media);
     onQueryReset();
   }, [setCurrentMedia, onQueryReset, onSelectItems]);
+  var onSaveMedia = React.useCallback(function () {
+    setCurrentMedia(null);
+    onQueryReset();
+  }, [setCurrentMedia, onQueryReset]);
   var pagination = /*#__PURE__*/React.createElement(Pagination, {
     page: page,
     lastPage: lastPage,
@@ -942,6 +965,8 @@ function MediasBrowser(_ref) {
   }))), /*#__PURE__*/React.createElement(MediaForm, {
     value: currentMedia,
     fields: fields,
+    onChange: setCurrentMedia,
+    onSave: onSaveMedia,
     onClose: onCloseMedia
   })) : /*#__PURE__*/React.createElement(React.Fragment, null, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
     items: buttons,
@@ -1276,7 +1301,16 @@ function MediasResourcePicker(_ref) {
   var resourceId = _ref.resource,
     props = _objectWithoutProperties(_ref, _excluded);
   var resource = contexts.usePanneauResource(resourceId);
-  // console.log('resource', resource);
+  var _ref2 = resource || {},
+    _ref2$index = _ref2.index,
+    index = _ref2$index === void 0 ? null : _ref2$index,
+    _ref2$fields = _ref2.fields,
+    fields = _ref2$fields === void 0 ? null : _ref2$fields;
+  var _ref3 = index || {},
+    _ref3$filters = _ref3.filters,
+    filters = _ref3$filters === void 0 ? null : _ref3$filters,
+    _ref3$columns = _ref3.columns,
+    columns = _ref3$columns === void 0 ? null : _ref3$columns;
   var api = data.useApi();
   var mediasApi = React.useMemo(function () {
     return {
@@ -1319,7 +1353,13 @@ function MediasResourcePicker(_ref) {
   }, [api, resource]);
   return /*#__PURE__*/React.createElement(MediasPickerContainer, Object.assign({
     api: mediasApi
-  }, props));
+  }, filters !== null ? {
+    filters: filters
+  } : null, fields !== null ? {
+    fields: fields
+  } : null, columns !== null ? {
+    columns: columns
+  } : null, props));
 }
 MediasResourcePicker.propTypes = propTypes;
 MediasResourcePicker.defaultProps = defaultProps;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/medias",
-    "version": "3.0.162",
+    "version": "3.0.163",
     "description": "",
     "keywords": [
         "javascript"
@@ -52,14 +52,14 @@
         "@panneau/element-buttons": "^3.0.162",
         "@panneau/element-form": "^3.0.162",
         "@panneau/element-form-status": "^3.0.162",
-        "@panneau/element-grid": "^3.0.162",
+        "@panneau/element-grid": "^3.0.163",
         "@panneau/element-icon": "^3.0.162",
         "@panneau/element-media-card": "^3.0.162",
         "@panneau/element-media-player": "^3.0.162",
         "@panneau/element-media-preview": "^3.0.162",
         "@panneau/element-pagination": "^3.0.162",
         "@panneau/element-table": "^3.0.162",
-        "@panneau/field-upload": "^3.0.162",
+        "@panneau/field-upload": "^3.0.163",
         "@panneau/filter-filters": "^3.0.162",
         "classnames": "^2.5.1",
         "lodash": "^4.17.21",
@@ -69,5 +69,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "82936217c80643ad52d9b425a7a8c374d6264d8e"
+    "gitHead": "30b29ec9436fb6ead123625baa0bd1b32d69fcac"
 }