@micromag/media-gallery 0.3.516 → 0.3.518

package/es/index.js

@@ -1,18 +1,15 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import classNames from 'classnames';
 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 React, { useMemo, useCallback, useState } from 'react';
 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 = [{
@@ -308,7 +305,8 @@ function filters() {
   return [{
     id: 'search',
     component: 'search',
-    name: 'search'
+    name: 'search',
+    width: 220
   }, {
     id: 'types',
     component: 'select',
@@ -351,25 +349,15 @@ function filters() {
     multiple: true
   }, {
     id: 'source',
-    component: 'select',
-    placeholder: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "Pc4AD8",
+    component: 'toggle',
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "AX9qes",
       defaultMessage: [{
         "type": 0,
-        "value": "Source"
+        "value": "This micromag"
       }]
     }),
-    name: 'source',
-    options: [{
-      label: /*#__PURE__*/React.createElement(FormattedMessage, {
-        id: "o+7d2z",
-        defaultMessage: [{
-          "type": 0,
-          "value": "All medias"
-        }]
-      }),
-      value: 'all'
-    }]
+    name: 'source'
   },
   // TODO: fix this on micromag.ca
   // {
@@ -422,9 +410,10 @@ var propTypes = {
   isPicker: PropTypes.bool,
   multiple: PropTypes.bool,
   medias: PropTypes$1.medias,
-  buttons: PropTypes.arrayOf(PropTypes.shape({})),
-  className: PropTypes.string,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  onMediaFormOpen: PropTypes.func,
+  onMediaFormClose: PropTypes.func,
+  className: PropTypes.string
 };
 var defaultProps = {
   value: null,
@@ -436,9 +425,10 @@ var defaultProps = {
   isPicker: false,
   multiple: false,
   medias: null,
-  buttons: null,
-  className: null,
-  onChange: null
+  onChange: null,
+  onMediaFormOpen: null,
+  onMediaFormClose: null,
+  className: null
 };
 function MediaGallery(_ref) {
   var value = _ref.value,
@@ -450,15 +440,15 @@ function MediaGallery(_ref) {
     isPicker = _ref.isPicker,
     multiple = _ref.multiple,
     initialMedias = _ref.medias,
-    buttons = _ref.buttons,
-    className = _ref.className,
-    onChange = _ref.onChange;
+    onChange = _ref.onChange,
+    onMediaFormOpen = _ref.onMediaFormOpen,
+    onMediaFormClose = _ref.onMediaFormClose,
+    className = _ref.className;
   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() {
@@ -491,62 +481,27 @@ function MediaGallery(_ref) {
       }
     };
   }, [api]);
-
-  // Upload modal
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    addedMedias = _useState2[0],
-    setAddedMedias = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    uploading = _useState4[0],
-    setUploading = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    uploadModalOpened = _useState6[0],
-    setUploadModalOpened = _useState6[1];
-  var onClickAdd = useCallback(function () {
-    return setUploadModalOpened(true);
-  }, [setUploadModalOpened]);
+  var partialFilters = filters$1 || filters() || [];
   var _useMediaCreate = useMediaCreate(),
     createMedia = _useMediaCreate.create;
-  var onUploadCompleted = useCallback(function (newMedias) {
+  var onUpload = useCallback(function (newMedias) {
     console.log('newMedias', newMedias);
-    setUploading(true);
     Promise.all(newMedias.map(createMedia)).then(function (newAddedMedias) {
       console.log('not uploading anymore', newAddedMedias);
-      setUploading(false);
-      return setAddedMedias([].concat(_toConsumableArray(addedMedias), _toConsumableArray(newAddedMedias)));
+      return newAddedMedias;
     });
-  }, [createMedia, addedMedias, setAddedMedias]);
-  var onUploadRequestClose = useCallback(function () {
-    return setUploadModalOpened(false);
-  }, [setUploadModalOpened]);
-  var partialFilters = filters$1 || filters() || [];
+  }, [createMedia]);
   var finalFilters = useMemo(function () {
     return partialFilters.map(function (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) {
+      if (id === 'source') {
+        if (storyId === null) {
           return null;
         }
         return _objectSpread(_objectSpread({}, filter), {}, {
-          options: finalOptions
+          value: "document-".concat(storyId)
         });
       }
       return filter;
@@ -554,91 +509,55 @@ function MediaGallery(_ref) {
       return f !== null;
     });
   }, [partialFilters, storyId]);
-  var _useState7 = useState(source !== null ? {
+  var _useState = useState(source !== null ? {
       source: source
     } : null),
-    _useState8 = _slicedToArray(_useState7, 2),
-    query = _useState8[0],
-    setQuery = _useState8[1];
+    _useState2 = _slicedToArray(_useState, 2),
+    query = _useState2[0],
+    setQuery = _useState2[1];
   var finalQuery = useMemo(function () {
     setQuery(_objectSpread(_objectSpread({}, query || null), source !== null ? {
       source: source
     } : null));
   }, [source, setQuery]);
-  var finalValue = useMemo(function () {
-    if (addedMedias === null || addedMedias.length === 0) {
-      return value;
-    }
-    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, 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);
+  console.log('value', value);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, _defineProperty({}, className, className)])
   }, isPicker ? /*#__PURE__*/React.createElement(MediasPickerContainer, {
     className: styles.browser,
     api: mediasApi,
-    value: finalValue,
+    value: value,
     theme: "dark",
     types: finalTypes,
     query: finalQuery,
-    multiple: multiple,
     items: initialMedias,
     filters: finalFilters,
     fields: fields,
     columns: columns,
+    multiple: multiple,
     onChange: onChange,
-    buttons: buttons || finalButtons,
-    buttonsClassName: "ms-xl-auto",
+    onUpload: onUpload,
+    onMediaFormOpen: onMediaFormOpen,
+    onMediaFormClose: onMediaFormClose,
     withStickySelection: true
   }) : /*#__PURE__*/React.createElement(MediasBrowserContainer, {
     className: styles.browser,
     api: mediasApi,
-    value: finalValue,
+    value: value,
     theme: "dark",
     types: finalTypes,
     query: finalQuery,
-    multiple: multiple,
     items: initialMedias,
     filters: finalFilters,
     fields: fields,
     columns: columns,
-    buttons: buttons || finalButtons,
-    buttonsClassName: "ms-xl-auto",
+    onUpload: onUpload,
     withStickySelection: true
-  }), /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(UploadModal, {
-    types: finalTypes,
-    opened: uploadModalOpened,
-    onUploaded: onUploadCompleted,
-    onRequestClose: onUploadRequestClose
-  }), document.body));
+  }));
 }
 MediaGallery.propTypes = propTypes;
 MediaGallery.defaultProps = defaultProps;

package/lib/index.js

@@ -1,20 +1,17 @@
 'use strict';
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var classNames = require('classnames');
 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 = [{
@@ -348,7 +345,8 @@ function filters() {
   return [{
     id: 'search',
     component: 'search',
-    name: 'search'
+    name: 'search',
+    width: 220
   }, {
     id: 'types',
     component: 'select',
@@ -391,25 +389,15 @@ function filters() {
     multiple: true
   }, {
     id: 'source',
-    component: 'select',
-    placeholder: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "Pc4AD8",
+    component: 'toggle',
+    label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+      id: "AX9qes",
       defaultMessage: [{
         "type": 0,
-        "value": "Source"
+        "value": "This micromag"
       }]
     }),
-    name: 'source',
-    options: [{
-      label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-        id: "o+7d2z",
-        defaultMessage: [{
-          "type": 0,
-          "value": "All medias"
-        }]
-      }),
-      value: 'all'
-    }]
+    name: 'source'
   },
   // TODO: fix this on micromag.ca
   // {
@@ -462,9 +450,10 @@ var propTypes = {
   isPicker: PropTypes.bool,
   multiple: PropTypes.bool,
   medias: core.PropTypes.medias,
-  buttons: PropTypes.arrayOf(PropTypes.shape({})),
-  className: PropTypes.string,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  onMediaFormOpen: PropTypes.func,
+  onMediaFormClose: PropTypes.func,
+  className: PropTypes.string
 };
 var defaultProps = {
   value: null,
@@ -476,9 +465,10 @@ var defaultProps = {
   isPicker: false,
   multiple: false,
   medias: null,
-  buttons: null,
-  className: null,
-  onChange: null
+  onChange: null,
+  onMediaFormOpen: null,
+  onMediaFormClose: null,
+  className: null
 };
 function MediaGallery(_ref) {
   var value = _ref.value,
@@ -490,15 +480,15 @@ function MediaGallery(_ref) {
     isPicker = _ref.isPicker,
     multiple = _ref.multiple,
     initialMedias = _ref.medias,
-    buttons = _ref.buttons,
-    className = _ref.className,
-    onChange = _ref.onChange;
+    onChange = _ref.onChange,
+    onMediaFormOpen = _ref.onMediaFormOpen,
+    onMediaFormClose = _ref.onMediaFormClose,
+    className = _ref.className;
   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() {
@@ -531,62 +521,27 @@ function MediaGallery(_ref) {
       }
     };
   }, [api]);
-
-  // Upload modal
-  var _useState = React.useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    addedMedias = _useState2[0],
-    setAddedMedias = _useState2[1];
-  var _useState3 = React.useState(false),
-    _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];
-  var onClickAdd = React.useCallback(function () {
-    return setUploadModalOpened(true);
-  }, [setUploadModalOpened]);
+  var partialFilters = filters$1 || filters() || [];
   var _useMediaCreate = data.useMediaCreate(),
     createMedia = _useMediaCreate.create;
-  var onUploadCompleted = React.useCallback(function (newMedias) {
+  var onUpload = React.useCallback(function (newMedias) {
     console.log('newMedias', newMedias);
-    setUploading(true);
     Promise.all(newMedias.map(createMedia)).then(function (newAddedMedias) {
       console.log('not uploading anymore', newAddedMedias);
-      setUploading(false);
-      return setAddedMedias([].concat(_toConsumableArray(addedMedias), _toConsumableArray(newAddedMedias)));
+      return newAddedMedias;
     });
-  }, [createMedia, addedMedias, setAddedMedias]);
-  var onUploadRequestClose = React.useCallback(function () {
-    return setUploadModalOpened(false);
-  }, [setUploadModalOpened]);
-  var partialFilters = filters$1 || filters() || [];
+  }, [createMedia]);
   var finalFilters = React.useMemo(function () {
     return partialFilters.map(function (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) {
+      if (id === 'source') {
+        if (storyId === null) {
           return null;
         }
         return _objectSpread(_objectSpread({}, filter), {}, {
-          options: finalOptions
+          value: "document-".concat(storyId)
         });
       }
       return filter;
@@ -594,91 +549,55 @@ function MediaGallery(_ref) {
       return f !== null;
     });
   }, [partialFilters, storyId]);
-  var _useState7 = React.useState(source !== null ? {
+  var _useState = React.useState(source !== null ? {
       source: source
     } : null),
-    _useState8 = _slicedToArray(_useState7, 2),
-    query = _useState8[0],
-    setQuery = _useState8[1];
+    _useState2 = _slicedToArray(_useState, 2),
+    query = _useState2[0],
+    setQuery = _useState2[1];
   var finalQuery = React.useMemo(function () {
     setQuery(_objectSpread(_objectSpread({}, query || null), source !== null ? {
       source: source
     } : null));
   }, [source, setQuery]);
-  var finalValue = React.useMemo(function () {
-    if (addedMedias === null || addedMedias.length === 0) {
-      return value;
-    }
-    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, 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);
+  console.log('value', value);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, _defineProperty({}, className, className)])
   }, isPicker ? /*#__PURE__*/React.createElement(medias.MediasPickerContainer, {
     className: styles.browser,
     api: mediasApi,
-    value: finalValue,
+    value: value,
     theme: "dark",
     types: finalTypes,
     query: finalQuery,
-    multiple: multiple,
     items: initialMedias,
     filters: finalFilters,
     fields: fields,
     columns: columns,
+    multiple: multiple,
     onChange: onChange,
-    buttons: buttons || finalButtons,
-    buttonsClassName: "ms-xl-auto",
+    onUpload: onUpload,
+    onMediaFormOpen: onMediaFormOpen,
+    onMediaFormClose: onMediaFormClose,
     withStickySelection: true
   }) : /*#__PURE__*/React.createElement(medias.MediasBrowserContainer, {
     className: styles.browser,
     api: mediasApi,
-    value: finalValue,
+    value: value,
     theme: "dark",
     types: finalTypes,
     query: finalQuery,
-    multiple: multiple,
     items: initialMedias,
     filters: finalFilters,
     fields: fields,
     columns: columns,
-    buttons: buttons || finalButtons,
-    buttonsClassName: "ms-xl-auto",
+    onUpload: onUpload,
     withStickySelection: true
-  }), /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React.createElement(components.UploadModal, {
-    types: finalTypes,
-    opened: uploadModalOpened,
-    onUploaded: onUploadCompleted,
-    onRequestClose: onUploadRequestClose
-  }), document.body));
+  }));
 }
 MediaGallery.propTypes = propTypes;
 MediaGallery.defaultProps = defaultProps;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/media-gallery",
-    "version": "0.3.516",
+    "version": "0.3.518",
     "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.516",
-        "@micromag/data": "^0.3.516",
+        "@micromag/core": "^0.3.518",
+        "@micromag/data": "^0.3.518",
         "@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": "27d49f1cd9ba3bac90dcd7f20ff053078be20333"
+    "gitHead": "415c0649dd0dd83a47a0407f945c2dee112ebde0"
 }