@micromag/media-gallery 0.3.538 → 0.3.540

package/assets/css/styles.css

@@ -0,0 +1 @@
+.micromag-media-gallery-new-media-gallery-container .micromag-media-gallery-new-media-gallery-browser{--bs-input-color:hsla(0,0%,100%,.07)!important}

package/es/index.js

@@ -0,0 +1,605 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+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, useCallback, useState } from 'react';
+import { MediasPickerContainer, MediasBrowserContainer } from '@panneau/medias';
+import { PropTypes as PropTypes$1 } from '@micromag/core';
+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: null,
+  component: 'image',
+  path: 'thumbnail_url',
+  sortable: false
+}, {
+  id: 'name',
+  label: /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "WX83V9",
+    defaultMessage: [{
+      "type": 0,
+      "value": "File name"
+    }]
+  }),
+  component: 'text-description',
+  path: 'name',
+  descriptionPath: 'type',
+  descriptionValues: {
+    image: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "AwDQvD",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Image"
+      }]
+    }),
+    video: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "mQiyAm",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Video"
+      }]
+    }),
+    audio: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "XnyI69",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Audio"
+      }]
+    }),
+    document: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "1dqmFw",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Document"
+      }]
+    })
+  },
+  sortable: true
+}, {
+  id: 'dimensions',
+  label: /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "eCe9ZY",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Dimensions"
+    }]
+  }),
+  component: 'unit',
+  format: 'dimensions',
+  path: 'metadata'
+}, {
+  id: 'size',
+  label: /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "c3hu9o",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Size"
+    }]
+  }),
+  component: 'unit',
+  format: 'bytes',
+  path: 'metadata.size'
+}, {
+  id: 'duration',
+  label: /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "002oWQ",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Duration"
+    }]
+  }),
+  component: 'unit',
+  format: 'duration',
+  path: 'metadata.duration'
+},
+// {
+//     id: 'author',
+//     label: <FormattedMessage defaultMessage="Added by" description="Field name" />,
+//     component: 'avatar',
+//     path: 'metadata.author',
+//     namePath: 'name',
+//     withoutName: true,
+// },
+{
+  id: 'created_at',
+  label: /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "OzYWZz",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Created at"
+    }]
+  }),
+  component: 'date',
+  path: 'created_at',
+  format: 'yyyy-MM-dd hh:ss',
+  sortable: true
+}, {
+  id: 'actions',
+  label: /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "rtwfuZ",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Actions"
+    }]
+  }),
+  actions: ['edit', 'delete']
+  // component: ItemActions,
+  // label: 'Edit',
+  // url: '/edit/1',
+}
+// {
+//     id: 'status',
+//     label: <FormattedMessage defaultMessage="Status" description="Field name" />,
+//     component: 'text',
+//     path: 'metadata.status',
+// },
+];
+
+var defaultFields = [{
+  name: 'name',
+  label: /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "WX83V9",
+    defaultMessage: [{
+      "type": 0,
+      "value": "File name"
+    }]
+  }),
+  type: 'text',
+  component: 'text'
+}, {
+  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: 'id',
+    // Uses taggable so change the logic here
+    valueIsOption: true,
+    multiple: true,
+    paginated: false
+    // creatable: true, // TODO
+  }]
+}, {
+  id: 'info',
+  component: 'fields',
+  label: /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "3RT69u",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Informations"
+    }]
+  }),
+  isList: true,
+  hideWithoutValue: true,
+  fields: [{
+    id: 'user',
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "yByaBh",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Added by"
+      }]
+    }),
+    type: 'display',
+    display: 'avatar',
+    name: 'user',
+    horizontal: true
+  }, {
+    id: 'created_at',
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "PN+75e",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Created at"
+      }]
+    }),
+    type: 'display',
+    display: 'date',
+    name: 'created_at',
+    format: 'yyyy-MM-dd hh:ss',
+    horizontal: true
+  }]
+}, {
+  id: 'technical',
+  component: 'fields',
+  label: /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "xKUOLG",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Technical details"
+    }]
+  }),
+  isList: true,
+  hideWithoutValue: true,
+  fields: [{
+    id: 'format',
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "JuxiUN",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Format"
+      }]
+    }),
+    type: 'display',
+    display: 'unit',
+    format: 'format',
+    name: 'format',
+    horizontal: true
+  }, {
+    id: 'dimensions',
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "rmJBin",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Dimensions"
+      }]
+    }),
+    type: 'display',
+    display: 'unit',
+    format: 'dimensions',
+    name: 'metadata',
+    horizontal: true
+  }, {
+    id: 'size',
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "g2CRt5",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Size"
+      }]
+    }),
+    type: 'display',
+    display: 'unit',
+    format: 'bytes',
+    name: 'metadata.size',
+    horizontal: true
+  }, {
+    id: 'duration',
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "wU++NJ",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Duration"
+      }]
+    }),
+    type: 'display',
+    display: 'unit',
+    format: 'duration',
+    name: 'metadata.duration',
+    horizontal: true
+  }]
+}];
+
+function filters() {
+  var route = useUrlGenerator();
+  return [{
+    id: 'search',
+    component: 'search',
+    name: 'search',
+    width: 152
+  }, {
+    id: 'types',
+    component: 'select',
+    name: 'types',
+    placeholder: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "9/t5wK",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Type"
+      }]
+    }),
+    options: [{
+      label: /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "yHAmDD",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Image"
+        }]
+      }),
+      value: 'image'
+    }, {
+      label: /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "xSERPA",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Video"
+        }]
+      }),
+      value: 'video'
+    }, {
+      label: /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "yQRtgx",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Audio"
+        }]
+      }),
+      value: 'audio'
+    }],
+    multiple: true
+  }, {
+    id: 'authors',
+    component: 'select',
+    name: 'authors',
+    placeholder: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "7oXkoj",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Authors"
+      }]
+    }),
+    requestUrl: route('medias.authors') || '/medias/authors',
+    itemLabelPath: 'name',
+    itemValuePath: 'id',
+    multiple: true,
+    paginated: false
+  }, {
+    id: 'tags',
+    component: 'select',
+    name: 'tags',
+    placeholder: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "9mXl24",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Tags"
+      }]
+    }),
+    requestUrl: route('medias.tags') || '/medias/tags',
+    itemLabelPath: 'name',
+    itemValuePath: 'id',
+    multiple: true,
+    paginated: false
+  }, {
+    id: 'source',
+    component: 'radios',
+    name: 'source',
+    options: [{
+      label: 'Tous les micromags',
+      value: 'all'
+    }, {
+      label: 'Ce micromag',
+      value: 'document-'
+    }]
+  }];
+}
+
+var styles = {"container":"micromag-media-gallery-new-media-gallery-container","browser":"micromag-media-gallery-new-media-gallery-browser"};
+
+var propTypes = {
+  value: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  }),
+  types: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  source: PropTypes.string,
+  filters: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string
+  })),
+  fields: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string
+  })),
+  columns: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string
+  })),
+  isPicker: PropTypes.bool,
+  multiple: PropTypes.bool,
+  medias: PropTypes$1.medias,
+  onChange: PropTypes.func,
+  onMediaFormOpen: PropTypes.func,
+  onMediaFormClose: PropTypes.func,
+  className: PropTypes.string
+};
+var defaultProps = {
+  value: null,
+  types: null,
+  source: 'all',
+  filters: null,
+  fields: defaultFields,
+  columns: defaultColumns,
+  isPicker: false,
+  multiple: false,
+  medias: null,
+  onChange: null,
+  onMediaFormOpen: null,
+  onMediaFormClose: null,
+  className: null
+};
+function MediaGallery(_ref) {
+  var value = _ref.value,
+    types = _ref.types,
+    source = _ref.source,
+    filters$1 = _ref.filters,
+    fields = _ref.fields,
+    columns = _ref.columns,
+    isPicker = _ref.isPicker,
+    multiple = _ref.multiple,
+    initialMedias = _ref.medias,
+    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;
+  var mediasApi = useMemo(function () {
+    return {
+      get: function get() {
+        var _api$medias;
+        return (_api$medias = api.medias).get.apply(_api$medias, arguments);
+      },
+      getTrashed: function getTrashed() {
+        var _api$medias2;
+        return (_api$medias2 = api.medias).getTrashed.apply(_api$medias2, arguments);
+      },
+      find: function find() {
+        var _api$medias3;
+        return (_api$medias3 = api.medias).find.apply(_api$medias3, arguments);
+      },
+      create: function create() {
+        var _api$medias4;
+        return (_api$medias4 = api.medias).create.apply(_api$medias4, arguments);
+      },
+      update: function update() {
+        var _api$medias5;
+        return (_api$medias5 = api.medias).update.apply(_api$medias5, arguments);
+      },
+      "delete": function _delete() {
+        var _api$medias6;
+        return (_api$medias6 = api.medias).forceDelete.apply(_api$medias6, arguments);
+      },
+      trash: function trash() {
+        var _api$medias7;
+        return (_api$medias7 = api.medias)["delete"].apply(_api$medias7, arguments);
+      }
+    };
+  }, [api]);
+
+  // Upload
+  var _useMediaCreate = useMediaCreate(),
+    createMedia = _useMediaCreate.create;
+  var onMediaUploaded = useCallback(function (newMedias) {
+    return Promise.all(newMedias.map(createMedia)).then(function (newAddedMedias) {
+      return newAddedMedias;
+    });
+  }, [createMedia]);
+  var fileTypes = useMemo(function () {
+    var finalTypes = [];
+    if (isArray(types)) {
+      finalTypes = types.map(function (t) {
+        return ['image', 'video', 'audio'].indexOf(t) !== -1 ? "".concat(t, "/*") : null;
+      }).filter(function (t) {
+        return t !== null;
+      });
+    }
+    finalTypes = ['image', 'video', 'audio'].indexOf(types) !== -1 ? ["".concat(types, "/*")] : null;
+    if (finalTypes !== null && isArray(finalTypes) && finalTypes.indexOf('video/*') !== -1) {
+      finalTypes.push('image/gif');
+    }
+    return finalTypes;
+  }, [types]);
+  var uppyConfig = useMemo(function () {
+    return {
+      // set 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 || {},
+        _ref3$id = _ref3.id,
+        id = _ref3$id === void 0 ? null : _ref3$id,
+        _ref3$options = _ref3.options,
+        options = _ref3$options === void 0 ? [] : _ref3$options;
+      if (id === 'source') {
+        if (storyId === null) {
+          return null;
+        }
+        return _objectSpread(_objectSpread({}, filter), {}, {
+          options: (options || []).map(function () {
+            var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+              _ref4$value = _ref4.value,
+              optionValue = _ref4$value === void 0 ? null : _ref4$value,
+              _ref4$label = _ref4.label,
+              label = _ref4$label === void 0 ? null : _ref4$label;
+            return optionValue === 'document-' ? {
+              value: "document-".concat(storyId),
+              label: label
+            } : {
+              value: optionValue,
+              label: label
+            };
+          })
+        });
+      }
+      return filter;
+    }).filter(function (f) {
+      return f !== null;
+    });
+  }, [partialFilters, storyId]);
+  var _useState = useState(source !== null ? {
+      source: source
+    } : null),
+    _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 finalTypes = useMemo(function () {
+    return !isArray(types) && types !== null ? [types] : types;
+  }, [types]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles.container, _defineProperty({}, className, className)])
+  }, isPicker ? /*#__PURE__*/React.createElement(MediasPickerContainer, {
+    className: styles.browser,
+    api: mediasApi,
+    value: value,
+    theme: "dark",
+    types: finalTypes,
+    query: finalQuery,
+    items: initialMedias,
+    filters: finalFilters,
+    fields: fields,
+    columns: columns,
+    multiple: multiple,
+    onChange: onChange,
+    uppyConfig: uppyConfig,
+    onMediaUploaded: onMediaUploaded,
+    onMediaFormOpen: onMediaFormOpen,
+    onMediaFormClose: onMediaFormClose,
+    withStickySelection: true
+  }) : /*#__PURE__*/React.createElement(MediasBrowserContainer, {
+    className: styles.browser,
+    api: mediasApi,
+    value: value,
+    theme: "dark",
+    types: finalTypes,
+    query: finalQuery,
+    items: initialMedias,
+    filters: finalFilters,
+    fields: fields,
+    columns: columns,
+    uppyConfig: uppyConfig,
+    onMediaUploaded: onMediaUploaded,
+    withStickySelection: true,
+    withTrash: true
+  }));
+}
+MediaGallery.propTypes = propTypes;
+MediaGallery.defaultProps = defaultProps;
+
+export { MediaGallery as default };

package/lib/index.js

@@ -0,0 +1,645 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+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 medias = require('@panneau/medias');
+var core = require('@micromag/core');
+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: null,
+  component: 'image',
+  path: 'thumbnail_url',
+  sortable: false
+}, {
+  id: 'name',
+  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "WX83V9",
+    defaultMessage: [{
+      "type": 0,
+      "value": "File name"
+    }]
+  }),
+  component: 'text-description',
+  path: 'name',
+  descriptionPath: 'type',
+  descriptionValues: {
+    image: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+      id: "AwDQvD",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Image"
+      }]
+    }),
+    video: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+      id: "mQiyAm",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Video"
+      }]
+    }),
+    audio: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+      id: "XnyI69",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Audio"
+      }]
+    }),
+    document: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+      id: "1dqmFw",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Document"
+      }]
+    })
+  },
+  sortable: true
+}, {
+  id: 'dimensions',
+  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "eCe9ZY",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Dimensions"
+    }]
+  }),
+  component: 'unit',
+  format: 'dimensions',
+  path: 'metadata'
+}, {
+  id: 'size',
+  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "c3hu9o",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Size"
+    }]
+  }),
+  component: 'unit',
+  format: 'bytes',
+  path: 'metadata.size'
+}, {
+  id: 'duration',
+  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "002oWQ",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Duration"
+    }]
+  }),
+  component: 'unit',
+  format: 'duration',
+  path: 'metadata.duration'
+},
+// {
+//     id: 'author',
+//     label: <FormattedMessage defaultMessage="Added by" description="Field name" />,
+//     component: 'avatar',
+//     path: 'metadata.author',
+//     namePath: 'name',
+//     withoutName: true,
+// },
+{
+  id: 'created_at',
+  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "OzYWZz",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Created at"
+    }]
+  }),
+  component: 'date',
+  path: 'created_at',
+  format: 'yyyy-MM-dd hh:ss',
+  sortable: true
+}, {
+  id: 'actions',
+  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "rtwfuZ",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Actions"
+    }]
+  }),
+  actions: ['edit', 'delete']
+  // component: ItemActions,
+  // label: 'Edit',
+  // url: '/edit/1',
+}
+// {
+//     id: 'status',
+//     label: <FormattedMessage defaultMessage="Status" description="Field name" />,
+//     component: 'text',
+//     path: 'metadata.status',
+// },
+];
+
+var defaultFields = [{
+  name: 'name',
+  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "WX83V9",
+    defaultMessage: [{
+      "type": 0,
+      "value": "File name"
+    }]
+  }),
+  type: 'text',
+  component: 'text'
+}, {
+  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: 'id',
+    // Uses taggable so change the logic here
+    valueIsOption: true,
+    multiple: true,
+    paginated: false
+    // creatable: true, // TODO
+  }]
+}, {
+  id: 'info',
+  component: 'fields',
+  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "3RT69u",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Informations"
+    }]
+  }),
+  isList: true,
+  hideWithoutValue: true,
+  fields: [{
+    id: 'user',
+    label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+      id: "yByaBh",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Added by"
+      }]
+    }),
+    type: 'display',
+    display: 'avatar',
+    name: 'user',
+    horizontal: true
+  }, {
+    id: 'created_at',
+    label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+      id: "PN+75e",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Created at"
+      }]
+    }),
+    type: 'display',
+    display: 'date',
+    name: 'created_at',
+    format: 'yyyy-MM-dd hh:ss',
+    horizontal: true
+  }]
+}, {
+  id: 'technical',
+  component: 'fields',
+  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "xKUOLG",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Technical details"
+    }]
+  }),
+  isList: true,
+  hideWithoutValue: true,
+  fields: [{
+    id: 'format',
+    label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+      id: "JuxiUN",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Format"
+      }]
+    }),
+    type: 'display',
+    display: 'unit',
+    format: 'format',
+    name: 'format',
+    horizontal: true
+  }, {
+    id: 'dimensions',
+    label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+      id: "rmJBin",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Dimensions"
+      }]
+    }),
+    type: 'display',
+    display: 'unit',
+    format: 'dimensions',
+    name: 'metadata',
+    horizontal: true
+  }, {
+    id: 'size',
+    label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+      id: "g2CRt5",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Size"
+      }]
+    }),
+    type: 'display',
+    display: 'unit',
+    format: 'bytes',
+    name: 'metadata.size',
+    horizontal: true
+  }, {
+    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',
+    horizontal: true
+  }]
+}];
+
+/* eslint-disable react/jsx-props-no-spreading */
+var RoutesContext = /*#__PURE__*/React.createContext(null);
+var useRoutesContext = function useRoutesContext() {
+  return React.useContext(RoutesContext);
+};
+({
+  children: PropTypes.node.isRequired,
+  routes: PropTypes.objectOf(PropTypes.string).isRequired,
+  basePath: PropTypes.string
+});
+var compilers = {};
+function generatePath(fullPath, data) {
+  var opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var fullUrlMatches = fullPath.match(/^(https?:\/\/)/);
+  if (typeof compilers[fullPath] === 'undefined') {
+    compilers[fullPath] = pathToRegexp.compile(fullPath.replace(/^(https?:\/\/)/, ''), opts);
+  }
+  var compiler = compilers[fullPath];
+  return fullUrlMatches !== null ? "".concat(fullUrlMatches[1]).concat(compiler(data)) : compiler(data);
+}
+var useUrlGeneratorPathToRepexp = function useUrlGeneratorPathToRepexp() {
+  var _ref2 = useRoutesContext() || {},
+    _ref2$routes = _ref2.routes,
+    routes = _ref2$routes === void 0 ? null : _ref2$routes,
+    _ref2$basePath = _ref2.basePath,
+    basePath = _ref2$basePath === void 0 ? null : _ref2$basePath;
+  var urlGenerator = React.useCallback(function (key, data, opts) {
+    var path = routes !== null ? routes[key] || null : null;
+    if (path === null) {
+      return null;
+    }
+    var url = generatePath(path, data, opts);
+    return basePath !== null ? "".concat(basePath.replace(/\/$/, ''), "/").concat(url.replace(/^\//, '')) : url;
+  }, [routes, basePath]);
+  return urlGenerator;
+};
+var useUrlGeneratorPathToRegexp = useUrlGeneratorPathToRepexp;
+
+function filters() {
+  var route = useUrlGeneratorPathToRegexp();
+  return [{
+    id: 'search',
+    component: 'search',
+    name: 'search',
+    width: 152
+  }, {
+    id: 'types',
+    component: 'select',
+    name: 'types',
+    placeholder: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+      id: "9/t5wK",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Type"
+      }]
+    }),
+    options: [{
+      label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+        id: "yHAmDD",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Image"
+        }]
+      }),
+      value: 'image'
+    }, {
+      label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+        id: "xSERPA",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Video"
+        }]
+      }),
+      value: 'video'
+    }, {
+      label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+        id: "yQRtgx",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Audio"
+        }]
+      }),
+      value: 'audio'
+    }],
+    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') || '/medias/authors',
+    itemLabelPath: 'name',
+    itemValuePath: 'id',
+    multiple: true,
+    paginated: false
+  }, {
+    id: 'tags',
+    component: 'select',
+    name: 'tags',
+    placeholder: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+      id: "9mXl24",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Tags"
+      }]
+    }),
+    requestUrl: route('medias.tags') || '/medias/tags',
+    itemLabelPath: 'name',
+    itemValuePath: 'id',
+    multiple: true,
+    paginated: false
+  }, {
+    id: 'source',
+    component: 'radios',
+    name: 'source',
+    options: [{
+      label: 'Tous les micromags',
+      value: 'all'
+    }, {
+      label: 'Ce micromag',
+      value: 'document-'
+    }]
+  }];
+}
+
+var styles = {"container":"micromag-media-gallery-new-media-gallery-container","browser":"micromag-media-gallery-new-media-gallery-browser"};
+
+var propTypes = {
+  value: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  }),
+  types: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  source: PropTypes.string,
+  filters: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string
+  })),
+  fields: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string
+  })),
+  columns: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string
+  })),
+  isPicker: PropTypes.bool,
+  multiple: PropTypes.bool,
+  medias: core.PropTypes.medias,
+  onChange: PropTypes.func,
+  onMediaFormOpen: PropTypes.func,
+  onMediaFormClose: PropTypes.func,
+  className: PropTypes.string
+};
+var defaultProps = {
+  value: null,
+  types: null,
+  source: 'all',
+  filters: null,
+  fields: defaultFields,
+  columns: defaultColumns,
+  isPicker: false,
+  multiple: false,
+  medias: null,
+  onChange: null,
+  onMediaFormOpen: null,
+  onMediaFormClose: null,
+  className: null
+};
+function MediaGallery(_ref) {
+  var value = _ref.value,
+    types = _ref.types,
+    source = _ref.source,
+    filters$1 = _ref.filters,
+    fields = _ref.fields,
+    columns = _ref.columns,
+    isPicker = _ref.isPicker,
+    multiple = _ref.multiple,
+    initialMedias = _ref.medias,
+    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;
+  var mediasApi = React.useMemo(function () {
+    return {
+      get: function get() {
+        var _api$medias;
+        return (_api$medias = api.medias).get.apply(_api$medias, arguments);
+      },
+      getTrashed: function getTrashed() {
+        var _api$medias2;
+        return (_api$medias2 = api.medias).getTrashed.apply(_api$medias2, arguments);
+      },
+      find: function find() {
+        var _api$medias3;
+        return (_api$medias3 = api.medias).find.apply(_api$medias3, arguments);
+      },
+      create: function create() {
+        var _api$medias4;
+        return (_api$medias4 = api.medias).create.apply(_api$medias4, arguments);
+      },
+      update: function update() {
+        var _api$medias5;
+        return (_api$medias5 = api.medias).update.apply(_api$medias5, arguments);
+      },
+      "delete": function _delete() {
+        var _api$medias6;
+        return (_api$medias6 = api.medias).forceDelete.apply(_api$medias6, arguments);
+      },
+      trash: function trash() {
+        var _api$medias7;
+        return (_api$medias7 = api.medias)["delete"].apply(_api$medias7, arguments);
+      }
+    };
+  }, [api]);
+
+  // Upload
+  var _useMediaCreate = data.useMediaCreate(),
+    createMedia = _useMediaCreate.create;
+  var onMediaUploaded = React.useCallback(function (newMedias) {
+    return Promise.all(newMedias.map(createMedia)).then(function (newAddedMedias) {
+      return newAddedMedias;
+    });
+  }, [createMedia]);
+  var fileTypes = React.useMemo(function () {
+    var finalTypes = [];
+    if (isArray(types)) {
+      finalTypes = types.map(function (t) {
+        return ['image', 'video', 'audio'].indexOf(t) !== -1 ? "".concat(t, "/*") : null;
+      }).filter(function (t) {
+        return t !== null;
+      });
+    }
+    finalTypes = ['image', 'video', 'audio'].indexOf(types) !== -1 ? ["".concat(types, "/*")] : null;
+    if (finalTypes !== null && isArray(finalTypes) && finalTypes.indexOf('video/*') !== -1) {
+      finalTypes.push('image/gif');
+    }
+    return finalTypes;
+  }, [types]);
+  var uppyConfig = React.useMemo(function () {
+    return {
+      // set 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 || {},
+        _ref3$id = _ref3.id,
+        id = _ref3$id === void 0 ? null : _ref3$id,
+        _ref3$options = _ref3.options,
+        options = _ref3$options === void 0 ? [] : _ref3$options;
+      if (id === 'source') {
+        if (storyId === null) {
+          return null;
+        }
+        return _objectSpread(_objectSpread({}, filter), {}, {
+          options: (options || []).map(function () {
+            var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+              _ref4$value = _ref4.value,
+              optionValue = _ref4$value === void 0 ? null : _ref4$value,
+              _ref4$label = _ref4.label,
+              label = _ref4$label === void 0 ? null : _ref4$label;
+            return optionValue === 'document-' ? {
+              value: "document-".concat(storyId),
+              label: label
+            } : {
+              value: optionValue,
+              label: label
+            };
+          })
+        });
+      }
+      return filter;
+    }).filter(function (f) {
+      return f !== null;
+    });
+  }, [partialFilters, storyId]);
+  var _useState = React.useState(source !== null ? {
+      source: source
+    } : null),
+    _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 finalTypes = React.useMemo(function () {
+    return !isArray(types) && types !== null ? [types] : types;
+  }, [types]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles.container, _defineProperty({}, className, className)])
+  }, isPicker ? /*#__PURE__*/React.createElement(medias.MediasPickerContainer, {
+    className: styles.browser,
+    api: mediasApi,
+    value: value,
+    theme: "dark",
+    types: finalTypes,
+    query: finalQuery,
+    items: initialMedias,
+    filters: finalFilters,
+    fields: fields,
+    columns: columns,
+    multiple: multiple,
+    onChange: onChange,
+    uppyConfig: uppyConfig,
+    onMediaUploaded: onMediaUploaded,
+    onMediaFormOpen: onMediaFormOpen,
+    onMediaFormClose: onMediaFormClose,
+    withStickySelection: true
+  }) : /*#__PURE__*/React.createElement(medias.MediasBrowserContainer, {
+    className: styles.browser,
+    api: mediasApi,
+    value: value,
+    theme: "dark",
+    types: finalTypes,
+    query: finalQuery,
+    items: initialMedias,
+    filters: finalFilters,
+    fields: fields,
+    columns: columns,
+    uppyConfig: uppyConfig,
+    onMediaUploaded: onMediaUploaded,
+    withStickySelection: true,
+    withTrash: true
+  }));
+}
+MediaGallery.propTypes = propTypes;
+MediaGallery.defaultProps = defaultProps;
+
+module.exports = MediaGallery;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/media-gallery",
-    "version": "0.3.538",
+    "version": "0.3.540",
     "private": false,
     "description": "",
     "keywords": [
@@ -87,5 +87,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "31e20c8dc474ddeace9c77115d6f6b3232588331"
+    "gitHead": "e29e691314fedb1f950c6d82f407954e225d813b"
 }