@micromag/media-gallery 0.3.512 → 0.3.515

package/es/index.js

@@ -7,22 +7,17 @@ import isArray from 'lodash/isArray';
 import PropTypes from 'prop-types';
 import React, { useMemo, useState, useCallback } from 'react';
 import { createPortal } from 'react-dom';
+import { FormattedMessage } from 'react-intl';
 import { MediasPickerContainer, MediasBrowserContainer } from '@panneau/medias';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { UploadModal } from '@micromag/core/components';
+import { useStory } from '@micromag/core/contexts';
 import { useApi, useMediaCreate } from '@micromag/data';
-import { FormattedMessage } from 'react-intl';
 import { useUrlGenerator } from '@folklore/routes';
 
 var defaultColumns = [{
   id: 'image',
-  label: /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "UbxbKP",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Preview"
-    }]
-  }),
+  label: null,
   component: 'image',
   path: 'thumbnail_url',
   sortable: false
@@ -172,13 +167,29 @@ var defaultFields = [{
   type: 'text',
   component: 'text'
 }, {
-  id: 'custom_field',
-  component: 'custom_field',
+  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: 'jobs',
+  component: 'jobs',
   label: /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "BjSp56",
+    id: "SrFsAq",
     defaultMessage: [{
       "type": 0,
-      "value": "Test custom field"
+      "value": "Jobs"
     }]
   })
 }, {
@@ -351,39 +362,27 @@ function filters() {
     name: 'source',
     options: [{
       label: /*#__PURE__*/React.createElement(FormattedMessage, {
-        id: "DYxnlo",
+        id: "o+7d2z",
         defaultMessage: [{
           "type": 0,
-          "value": "All"
+          "value": "All medias"
         }]
       }),
       value: 'all'
-    }, {
-      label: /*#__PURE__*/React.createElement(FormattedMessage, {
-        id: "AgH3AR",
-        defaultMessage: [{
-          "type": 0,
-          "value": "This micromag"
-        }]
-      }),
-      value: 'document'
     }]
-  }, {
-    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
-  }, {
+  },
+  // 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: 'tags',
     component: 'select',
     name: 'tags',
@@ -404,8 +403,7 @@ function filters() {
 
 var styles = {"container":"micromag-media-gallery-new-media-gallery-container","browser":"micromag-media-gallery-new-media-gallery-browser"};
 
-// const videoTypes = ['video', 'image/gif'];
-
+var videoTypes = ['video', 'image/gif'];
 var propTypes = {
   value: PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
@@ -456,6 +454,11 @@ function MediaGallery(_ref) {
     className = _ref.className,
     onChange = _ref.onChange;
   var api = useApi();
+  var story = useStory();
+  var _ref2 = story || {},
+    _ref2$id = _ref2.id,
+    storyId = _ref2$id === void 0 ? null : _ref2$id;
+  console.log('storyId', storyId);
   var mediasApi = useMemo(function () {
     return {
       get: function get() {
@@ -495,14 +498,14 @@ function MediaGallery(_ref) {
     addedMedias = _useState2[0],
     setAddedMedias = _useState2[1];
   var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2);
-    _useState4[0];
-    var setUploading = _useState4[1];
+    _useState4 = _slicedToArray(_useState3, 2),
+    uploading = _useState4[0],
+    setUploading = _useState4[1];
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     uploadModalOpened = _useState6[0],
     setUploadModalOpened = _useState6[1];
-  useCallback(function () {
+  var onClickAdd = useCallback(function () {
     return setUploadModalOpened(true);
   }, [setUploadModalOpened]);
   var _useMediaCreate = useMediaCreate(),
@@ -522,18 +525,35 @@ function MediaGallery(_ref) {
   var partialFilters = filters$1 || filters() || [];
   var finalFilters = useMemo(function () {
     return partialFilters.map(function (filter) {
-      var _ref2 = filter || {},
-        _ref2$id = _ref2.id,
-        id = _ref2$id === void 0 ? null : _ref2$id;
-      if (id === 'sources') {
-        return filter;
+      var _ref3 = filter || {},
+        _ref3$id = _ref3.id,
+        id = _ref3$id === void 0 ? null : _ref3$id;
+      if (id === 'source' && storyId !== null) {
+        var _ref4 = filter || {},
+          _ref4$options = _ref4.options,
+          options = _ref4$options === void 0 ? null : _ref4$options;
+        var finalOptions = (options || []).length > 0 ? [].concat(_toConsumableArray(options), [{
+          label: /*#__PURE__*/React.createElement(FormattedMessage, {
+            id: "eiaIIB",
+            defaultMessage: [{
+              "type": 0,
+              "value": "This Micromag"
+            }]
+          }),
+          value: "document-".concat(storyId)
+        }]) : null;
+        if (finalOptions === null) {
+          return null;
+        }
+        return _objectSpread(_objectSpread({}, filter), {}, {
+          options: finalOptions
+        });
       }
-      // if (id === 'tags' && tags !== null) {
-      //     return { ...filter, options: tags };
-      // }
       return filter;
-    }).concat();
-  }, [partialFilters]);
+    }).filter(function (f) {
+      return f !== null;
+    });
+  }, [partialFilters, storyId]);
   var _useState7 = useState(source !== null ? {
       source: source
     } : null),
@@ -549,10 +569,37 @@ function MediaGallery(_ref) {
     if (addedMedias === null || addedMedias.length === 0) {
       return value;
     }
-    console.log('finalValue', addedMedias);
+    console.log('addedMedias', addedMedias);
+    if (!multiple) {
+      var _ref5 = addedMedias || [],
+        _ref6 = _slicedToArray(_ref5, 1),
+        _ref6$ = _ref6[0],
+        firstMedia = _ref6$ === void 0 ? null : _ref6$;
+      return firstMedia || null;
+    }
     var allMedias = [].concat(_toConsumableArray(addedMedias), _toConsumableArray(isArray(value) ? value || [] : [value]));
     return allMedias.length > 0 ? allMedias : null;
-  }, [value, addedMedias]);
+  }, [value, addedMedias, multiple]);
+  var finalButtons = useMemo(function () {
+    return [{
+      id: 'upload',
+      theme: 'primary',
+      label: /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "hrS5Pj",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Upload"
+        }]
+      }),
+      onClick: onClickAdd,
+      disabled: uploading
+    }];
+  }, [onClickAdd, uploading]);
+  var finalTypes = useMemo(function () {
+    var partialTypes = !isArray(types) ? [types] : types;
+    return types === 'video' ? videoTypes : partialTypes;
+  }, [types]);
+  console.log('yesh', uploadModalOpened);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, _defineProperty({}, className, className)])
   }, isPicker ? /*#__PURE__*/React.createElement(MediasPickerContainer, {
@@ -560,7 +607,7 @@ function MediaGallery(_ref) {
     api: mediasApi,
     value: finalValue,
     theme: "dark",
-    types: types,
+    types: finalTypes,
     query: finalQuery,
     multiple: multiple,
     items: initialMedias,
@@ -568,7 +615,7 @@ function MediaGallery(_ref) {
     fields: fields,
     columns: columns,
     onChange: onChange,
-    buttons: buttons,
+    buttons: buttons || finalButtons,
     buttonsClassName: "ms-xl-auto",
     withStickySelection: true
   }) : /*#__PURE__*/React.createElement(MediasBrowserContainer, {
@@ -576,18 +623,18 @@ function MediaGallery(_ref) {
     api: mediasApi,
     value: finalValue,
     theme: "dark",
-    types: types,
+    types: finalTypes,
     query: finalQuery,
     multiple: multiple,
     items: initialMedias,
     filters: finalFilters,
     fields: fields,
     columns: columns,
-    buttons: buttons,
+    buttons: buttons || finalButtons,
     buttonsClassName: "ms-xl-auto",
     withStickySelection: true
   }), /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(UploadModal, {
-    types: types,
+    types: finalTypes,
     opened: uploadModalOpened,
     onUploaded: onUploadCompleted,
     onRequestClose: onUploadRequestClose

package/lib/index.js

@@ -9,22 +9,17 @@ var isArray = require('lodash/isArray');
 var PropTypes = require('prop-types');
 var React = require('react');
 var reactDom = require('react-dom');
+var reactIntl = require('react-intl');
 var medias = require('@panneau/medias');
 var core = require('@micromag/core');
 var components = require('@micromag/core/components');
+var contexts = require('@micromag/core/contexts');
 var data = require('@micromag/data');
-var reactIntl = require('react-intl');
 var pathToRegexp = require('path-to-regexp');
 
 var defaultColumns = [{
   id: 'image',
-  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "UbxbKP",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Preview"
-    }]
-  }),
+  label: null,
   component: 'image',
   path: 'thumbnail_url',
   sortable: false
@@ -174,13 +169,29 @@ var defaultFields = [{
   type: 'text',
   component: 'text'
 }, {
-  id: 'custom_field',
-  component: 'custom_field',
+  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: 'jobs',
+  component: 'jobs',
   label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "BjSp56",
+    id: "SrFsAq",
     defaultMessage: [{
       "type": 0,
-      "value": "Test custom field"
+      "value": "Jobs"
     }]
   })
 }, {
@@ -391,39 +402,27 @@ function filters() {
     name: 'source',
     options: [{
       label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-        id: "DYxnlo",
+        id: "o+7d2z",
         defaultMessage: [{
           "type": 0,
-          "value": "All"
+          "value": "All medias"
         }]
       }),
       value: 'all'
-    }, {
-      label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-        id: "AgH3AR",
-        defaultMessage: [{
-          "type": 0,
-          "value": "This micromag"
-        }]
-      }),
-      value: 'document'
     }]
-  }, {
-    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
-  }, {
+  },
+  // 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: 'tags',
     component: 'select',
     name: 'tags',
@@ -444,8 +443,7 @@ function filters() {
 
 var styles = {"container":"micromag-media-gallery-new-media-gallery-container","browser":"micromag-media-gallery-new-media-gallery-browser"};
 
-// const videoTypes = ['video', 'image/gif'];
-
+var videoTypes = ['video', 'image/gif'];
 var propTypes = {
   value: PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
@@ -496,6 +494,11 @@ function MediaGallery(_ref) {
     className = _ref.className,
     onChange = _ref.onChange;
   var api = data.useApi();
+  var story = contexts.useStory();
+  var _ref2 = story || {},
+    _ref2$id = _ref2.id,
+    storyId = _ref2$id === void 0 ? null : _ref2$id;
+  console.log('storyId', storyId);
   var mediasApi = React.useMemo(function () {
     return {
       get: function get() {
@@ -535,14 +538,14 @@ function MediaGallery(_ref) {
     addedMedias = _useState2[0],
     setAddedMedias = _useState2[1];
   var _useState3 = React.useState(false),
-    _useState4 = _slicedToArray(_useState3, 2);
-    _useState4[0];
-    var setUploading = _useState4[1];
+    _useState4 = _slicedToArray(_useState3, 2),
+    uploading = _useState4[0],
+    setUploading = _useState4[1];
   var _useState5 = React.useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     uploadModalOpened = _useState6[0],
     setUploadModalOpened = _useState6[1];
-  React.useCallback(function () {
+  var onClickAdd = React.useCallback(function () {
     return setUploadModalOpened(true);
   }, [setUploadModalOpened]);
   var _useMediaCreate = data.useMediaCreate(),
@@ -562,18 +565,35 @@ function MediaGallery(_ref) {
   var partialFilters = filters$1 || filters() || [];
   var finalFilters = React.useMemo(function () {
     return partialFilters.map(function (filter) {
-      var _ref2 = filter || {},
-        _ref2$id = _ref2.id,
-        id = _ref2$id === void 0 ? null : _ref2$id;
-      if (id === 'sources') {
-        return filter;
+      var _ref3 = filter || {},
+        _ref3$id = _ref3.id,
+        id = _ref3$id === void 0 ? null : _ref3$id;
+      if (id === 'source' && storyId !== null) {
+        var _ref4 = filter || {},
+          _ref4$options = _ref4.options,
+          options = _ref4$options === void 0 ? null : _ref4$options;
+        var finalOptions = (options || []).length > 0 ? [].concat(_toConsumableArray(options), [{
+          label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+            id: "eiaIIB",
+            defaultMessage: [{
+              "type": 0,
+              "value": "This Micromag"
+            }]
+          }),
+          value: "document-".concat(storyId)
+        }]) : null;
+        if (finalOptions === null) {
+          return null;
+        }
+        return _objectSpread(_objectSpread({}, filter), {}, {
+          options: finalOptions
+        });
       }
-      // if (id === 'tags' && tags !== null) {
-      //     return { ...filter, options: tags };
-      // }
       return filter;
-    }).concat();
-  }, [partialFilters]);
+    }).filter(function (f) {
+      return f !== null;
+    });
+  }, [partialFilters, storyId]);
   var _useState7 = React.useState(source !== null ? {
       source: source
     } : null),
@@ -589,10 +609,37 @@ function MediaGallery(_ref) {
     if (addedMedias === null || addedMedias.length === 0) {
       return value;
     }
-    console.log('finalValue', addedMedias);
+    console.log('addedMedias', addedMedias);
+    if (!multiple) {
+      var _ref5 = addedMedias || [],
+        _ref6 = _slicedToArray(_ref5, 1),
+        _ref6$ = _ref6[0],
+        firstMedia = _ref6$ === void 0 ? null : _ref6$;
+      return firstMedia || null;
+    }
     var allMedias = [].concat(_toConsumableArray(addedMedias), _toConsumableArray(isArray(value) ? value || [] : [value]));
     return allMedias.length > 0 ? allMedias : null;
-  }, [value, addedMedias]);
+  }, [value, addedMedias, multiple]);
+  var finalButtons = React.useMemo(function () {
+    return [{
+      id: 'upload',
+      theme: 'primary',
+      label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+        id: "hrS5Pj",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Upload"
+        }]
+      }),
+      onClick: onClickAdd,
+      disabled: uploading
+    }];
+  }, [onClickAdd, uploading]);
+  var finalTypes = React.useMemo(function () {
+    var partialTypes = !isArray(types) ? [types] : types;
+    return types === 'video' ? videoTypes : partialTypes;
+  }, [types]);
+  console.log('yesh', uploadModalOpened);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, _defineProperty({}, className, className)])
   }, isPicker ? /*#__PURE__*/React.createElement(medias.MediasPickerContainer, {
@@ -600,7 +647,7 @@ function MediaGallery(_ref) {
     api: mediasApi,
     value: finalValue,
     theme: "dark",
-    types: types,
+    types: finalTypes,
     query: finalQuery,
     multiple: multiple,
     items: initialMedias,
@@ -608,7 +655,7 @@ function MediaGallery(_ref) {
     fields: fields,
     columns: columns,
     onChange: onChange,
-    buttons: buttons,
+    buttons: buttons || finalButtons,
     buttonsClassName: "ms-xl-auto",
     withStickySelection: true
   }) : /*#__PURE__*/React.createElement(medias.MediasBrowserContainer, {
@@ -616,18 +663,18 @@ function MediaGallery(_ref) {
     api: mediasApi,
     value: finalValue,
     theme: "dark",
-    types: types,
+    types: finalTypes,
     query: finalQuery,
     multiple: multiple,
     items: initialMedias,
     filters: finalFilters,
     fields: fields,
     columns: columns,
-    buttons: buttons,
+    buttons: buttons || finalButtons,
     buttonsClassName: "ms-xl-auto",
     withStickySelection: true
   }), /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React.createElement(components.UploadModal, {
-    types: types,
+    types: finalTypes,
     opened: uploadModalOpened,
     onUploaded: onUploadCompleted,
     onRequestClose: onUploadRequestClose

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/media-gallery",
-    "version": "0.3.512",
+    "version": "0.3.515",
     "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.512",
-        "@micromag/data": "^0.3.512",
+        "@micromag/core": "^0.3.514",
+        "@micromag/data": "^0.3.514",
         "@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": "23de9c46447bade478129227281870191d4fcc94"
+    "gitHead": "34c550d446b1719075278d17267ad8f4bd68b76b"
 }