@micromag/media-gallery 0.3.519 → 0.3.521

package/es/index.js

@@ -153,32 +153,38 @@ var defaultFields = [{
   type: 'text',
   component: 'text'
 }, {
-  name: 'description',
-  label: /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "ygNvmz",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Description"
-    }]
-  }),
-  type: 'text',
-  component: 'text'
-}, {
-  name: 'tags',
-  label: /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "IOVper",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Tags"
-    }]
-  }),
-  type: 'array',
-  component: 'select',
-  requestUrl: '/api/medias/tags',
-  optionLabelPath: 'name',
-  optionValuePath: 'id',
-  multiple: true,
-  paginated: false
+  id: 'metadata',
+  component: 'fields',
+  name: 'metadata',
+  fields: [{
+    name: 'description',
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "ygNvmz",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Description"
+      }]
+    }),
+    type: 'text',
+    component: 'text'
+  }, {
+    name: 'tags',
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "IOVper",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Tags"
+      }]
+    }),
+    type: 'array',
+    component: 'select',
+    requestUrl: '/api/medias/tags',
+    optionLabelPath: 'name',
+    optionValuePath: 'name',
+    // Uses taggable
+    multiple: true,
+    paginated: false
+  }]
 }, {
   id: 'jobs',
   component: 'jobs',
@@ -347,19 +353,23 @@ function filters() {
       value: 'audio'
     }],
     multiple: true
-  },
-  // TODO: fix this on micromag.ca
-  // {
-  //     id: 'authors',
-  //     component: 'select',
-  //     name: 'authors',
-  //     placeholder: <FormattedMessage defaultMessage="Authors" description="Filter label" />,
-  //     requestUrl: route('medias.authors') || '/api/medias/authors',
-  //     itemLabelPath: 'name',
-  //     itemValuePath: 'id',
-  //     multiple: true,
-  // },
-  {
+  }, {
+    id: 'authors',
+    component: 'select',
+    name: 'authors',
+    placeholder: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "7oXkoj",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Authors"
+      }]
+    }),
+    requestUrl: route('medias.authors') || '/api/medias/authors',
+    itemLabelPath: 'name',
+    itemValuePath: 'id',
+    multiple: true,
+    paginated: false
+  }, {
     id: 'tags',
     component: 'select',
     name: 'tags',
@@ -374,7 +384,7 @@ function filters() {
     itemLabelPath: 'name',
     itemValuePath: 'id',
     multiple: true,
-    paginated: true
+    paginated: false
   }, {
     id: 'source',
     component: 'toggle',
@@ -459,6 +469,7 @@ function MediaGallery(_ref) {
         var _api$medias2;
         return (_api$medias2 = api.medias).get.apply(_api$medias2, arguments);
       },
+      // Change this
       find: function find() {
         var _api$medias3;
         return (_api$medias3 = api.medias).find.apply(_api$medias3, arguments);
@@ -478,19 +489,37 @@ function MediaGallery(_ref) {
       trash: function trash() {
         var _api$medias7;
         return (_api$medias7 = api.medias)["delete"].apply(_api$medias7, arguments);
-      }
+      } // Change this
     };
   }, [api]);
-  var partialFilters = filters$1 || filters() || [];
+
+  // Upload
   var _useMediaCreate = useMediaCreate(),
     createMedia = _useMediaCreate.create;
-  var onUpload = useCallback(function (newMedias) {
-    console.log('newMedias', newMedias);
-    Promise.all(newMedias.map(createMedia)).then(function (newAddedMedias) {
-      console.log('not uploading anymore', newAddedMedias);
+  var onMediaUploaded = useCallback(function (newMedias) {
+    return Promise.all(newMedias.map(createMedia)).then(function (newAddedMedias) {
       return newAddedMedias;
     });
   }, [createMedia]);
+  var fileTypes = useMemo(function () {
+    if (isArray(types)) {
+      return types.map(function (t) {
+        return ['image', 'video', 'audio'].indexOf(t) !== -1 ? "".concat(t, "/*") : null;
+      }).filter(function (t) {
+        return t !== null;
+      });
+    }
+    return ['image', 'video', 'audio'].indexOf(types) !== -1 ? ["".concat(types, "/*")] : null;
+  }, [types]);
+  var uppyConfig = useMemo(function () {
+    return {
+      // sources, - uppy sources -
+      allowedFileTypes: fileTypes !== null && fileTypes.length > 0 ? fileTypes : null
+    };
+  }, [fileTypes]);
+
+  // Filters
+  var partialFilters = filters$1 || filters() || [];
   var finalFilters = useMemo(function () {
     return partialFilters.map(function (filter) {
       var _ref3 = filter || {},
@@ -524,7 +553,19 @@ function MediaGallery(_ref) {
     var partialTypes = !isArray(types) ? [types] : types;
     return types === 'video' ? videoTypes : partialTypes;
   }, [types]);
-  console.log('value', value);
+  var finalOnChange = useCallback(function (newMedias) {
+    if (multiple) {
+      onChange(newMedias || []);
+    } else if (isArray(newMedias)) {
+      var _ref4 = newMedias || [],
+        _ref5 = _slicedToArray(_ref4, 1),
+        _ref5$ = _ref5[0],
+        firstMedia = _ref5$ === void 0 ? null : _ref5$;
+      onChange(firstMedia || null);
+    } else {
+      onChange(newMedias || null);
+    }
+  }, [onChange, multiple]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, _defineProperty({}, className, className)])
   }, isPicker ? /*#__PURE__*/React.createElement(MediasPickerContainer, {
@@ -539,8 +580,9 @@ function MediaGallery(_ref) {
     fields: fields,
     columns: columns,
     multiple: multiple,
-    onChange: onChange,
-    onUpload: onUpload,
+    onChange: finalOnChange,
+    uppyConfig: uppyConfig,
+    onMediaUploaded: onMediaUploaded,
     onMediaFormOpen: onMediaFormOpen,
     onMediaFormClose: onMediaFormClose,
     withStickySelection: true
@@ -555,7 +597,8 @@ function MediaGallery(_ref) {
     filters: finalFilters,
     fields: fields,
     columns: columns,
-    onUpload: onUpload,
+    uppyConfig: uppyConfig,
+    onMediaUploaded: onMediaUploaded,
     withStickySelection: true
   }));
 }

package/lib/index.js

@@ -155,32 +155,38 @@ var defaultFields = [{
   type: 'text',
   component: 'text'
 }, {
-  name: 'description',
-  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "ygNvmz",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Description"
-    }]
-  }),
-  type: 'text',
-  component: 'text'
-}, {
-  name: 'tags',
-  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "IOVper",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Tags"
-    }]
-  }),
-  type: 'array',
-  component: 'select',
-  requestUrl: '/api/medias/tags',
-  optionLabelPath: 'name',
-  optionValuePath: 'id',
-  multiple: true,
-  paginated: false
+  id: 'metadata',
+  component: 'fields',
+  name: 'metadata',
+  fields: [{
+    name: 'description',
+    label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+      id: "ygNvmz",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Description"
+      }]
+    }),
+    type: 'text',
+    component: 'text'
+  }, {
+    name: 'tags',
+    label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+      id: "IOVper",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Tags"
+      }]
+    }),
+    type: 'array',
+    component: 'select',
+    requestUrl: '/api/medias/tags',
+    optionLabelPath: 'name',
+    optionValuePath: 'name',
+    // Uses taggable
+    multiple: true,
+    paginated: false
+  }]
 }, {
   id: 'jobs',
   component: 'jobs',
@@ -387,19 +393,23 @@ function filters() {
       value: 'audio'
     }],
     multiple: true
-  },
-  // TODO: fix this on micromag.ca
-  // {
-  //     id: 'authors',
-  //     component: 'select',
-  //     name: 'authors',
-  //     placeholder: <FormattedMessage defaultMessage="Authors" description="Filter label" />,
-  //     requestUrl: route('medias.authors') || '/api/medias/authors',
-  //     itemLabelPath: 'name',
-  //     itemValuePath: 'id',
-  //     multiple: true,
-  // },
-  {
+  }, {
+    id: 'authors',
+    component: 'select',
+    name: 'authors',
+    placeholder: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+      id: "7oXkoj",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Authors"
+      }]
+    }),
+    requestUrl: route('medias.authors') || '/api/medias/authors',
+    itemLabelPath: 'name',
+    itemValuePath: 'id',
+    multiple: true,
+    paginated: false
+  }, {
     id: 'tags',
     component: 'select',
     name: 'tags',
@@ -414,7 +424,7 @@ function filters() {
     itemLabelPath: 'name',
     itemValuePath: 'id',
     multiple: true,
-    paginated: true
+    paginated: false
   }, {
     id: 'source',
     component: 'toggle',
@@ -499,6 +509,7 @@ function MediaGallery(_ref) {
         var _api$medias2;
         return (_api$medias2 = api.medias).get.apply(_api$medias2, arguments);
       },
+      // Change this
       find: function find() {
         var _api$medias3;
         return (_api$medias3 = api.medias).find.apply(_api$medias3, arguments);
@@ -518,19 +529,37 @@ function MediaGallery(_ref) {
       trash: function trash() {
         var _api$medias7;
         return (_api$medias7 = api.medias)["delete"].apply(_api$medias7, arguments);
-      }
+      } // Change this
     };
   }, [api]);
-  var partialFilters = filters$1 || filters() || [];
+
+  // Upload
   var _useMediaCreate = data.useMediaCreate(),
     createMedia = _useMediaCreate.create;
-  var onUpload = React.useCallback(function (newMedias) {
-    console.log('newMedias', newMedias);
-    Promise.all(newMedias.map(createMedia)).then(function (newAddedMedias) {
-      console.log('not uploading anymore', newAddedMedias);
+  var onMediaUploaded = React.useCallback(function (newMedias) {
+    return Promise.all(newMedias.map(createMedia)).then(function (newAddedMedias) {
       return newAddedMedias;
     });
   }, [createMedia]);
+  var fileTypes = React.useMemo(function () {
+    if (isArray(types)) {
+      return types.map(function (t) {
+        return ['image', 'video', 'audio'].indexOf(t) !== -1 ? "".concat(t, "/*") : null;
+      }).filter(function (t) {
+        return t !== null;
+      });
+    }
+    return ['image', 'video', 'audio'].indexOf(types) !== -1 ? ["".concat(types, "/*")] : null;
+  }, [types]);
+  var uppyConfig = React.useMemo(function () {
+    return {
+      // sources, - uppy sources -
+      allowedFileTypes: fileTypes !== null && fileTypes.length > 0 ? fileTypes : null
+    };
+  }, [fileTypes]);
+
+  // Filters
+  var partialFilters = filters$1 || filters() || [];
   var finalFilters = React.useMemo(function () {
     return partialFilters.map(function (filter) {
       var _ref3 = filter || {},
@@ -564,7 +593,19 @@ function MediaGallery(_ref) {
     var partialTypes = !isArray(types) ? [types] : types;
     return types === 'video' ? videoTypes : partialTypes;
   }, [types]);
-  console.log('value', value);
+  var finalOnChange = React.useCallback(function (newMedias) {
+    if (multiple) {
+      onChange(newMedias || []);
+    } else if (isArray(newMedias)) {
+      var _ref4 = newMedias || [],
+        _ref5 = _slicedToArray(_ref4, 1),
+        _ref5$ = _ref5[0],
+        firstMedia = _ref5$ === void 0 ? null : _ref5$;
+      onChange(firstMedia || null);
+    } else {
+      onChange(newMedias || null);
+    }
+  }, [onChange, multiple]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, _defineProperty({}, className, className)])
   }, isPicker ? /*#__PURE__*/React.createElement(medias.MediasPickerContainer, {
@@ -579,8 +620,9 @@ function MediaGallery(_ref) {
     fields: fields,
     columns: columns,
     multiple: multiple,
-    onChange: onChange,
-    onUpload: onUpload,
+    onChange: finalOnChange,
+    uppyConfig: uppyConfig,
+    onMediaUploaded: onMediaUploaded,
     onMediaFormOpen: onMediaFormOpen,
     onMediaFormClose: onMediaFormClose,
     withStickySelection: true
@@ -595,7 +637,8 @@ function MediaGallery(_ref) {
     filters: finalFilters,
     fields: fields,
     columns: columns,
-    onUpload: onUpload,
+    uppyConfig: uppyConfig,
+    onMediaUploaded: onMediaUploaded,
     withStickySelection: true
   }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/media-gallery",
-    "version": "0.3.519",
+    "version": "0.3.521",
     "private": false,
     "description": "",
     "keywords": [
@@ -72,8 +72,8 @@
         "@fortawesome/fontawesome-svg-core": "^6.5.2",
         "@fortawesome/free-solid-svg-icons": "^6.5.2",
         "@fortawesome/react-fontawesome": "^0.2.0",
-        "@micromag/core": "^0.3.518",
-        "@micromag/data": "^0.3.518",
+        "@micromag/core": "^0.3.520",
+        "@micromag/data": "^0.3.520",
         "@panneau/medias": "^3.0.163",
         "bootstrap": "^5.3.1",
         "classnames": "^2.2.6",
@@ -87,5 +87,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "f353b7a3cec6ea46f26212655127873a4d3e3c08"
+    "gitHead": "231e8620bd6c5077b9df4836c5ab2126001bd7f0"
 }