@micromag/media-gallery 0.3.544 → 0.3.547

package/es/index.js

@@ -128,7 +128,7 @@ var defaultColumns = [{
       "value": "Actions"
     }]
   }),
-  actions: ['edit', 'delete']
+  actions: ['edit']
   // component: ItemActions,
   // label: 'Edit',
   // url: '/edit/1',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/media-gallery",
-    "version": "0.3.544",
+    "version": "0.3.547",
     "private": false,
     "description": "",
     "keywords": [
@@ -30,11 +30,10 @@
         }
     ],
     "license": "ISC",
-    "main": "lib/index.js",
+    "type": "module",
     "module": "es/index.js",
     "exports": {
         ".": {
-            "require": "./lib/index.js",
             "import": "./es/index.js"
         },
         "./scss/styles": "./scss/styles.scss",
@@ -72,8 +71,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.541",
-        "@micromag/data": "^0.3.541",
+        "@micromag/core": "^0.3.547",
+        "@micromag/data": "^0.3.547",
         "@panneau/medias": "^3.0.163",
         "bootstrap": "^5.3.1",
         "classnames": "^2.2.6",
@@ -87,5 +86,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "839044abe179dae696c44ae463ad8066d95a5bd4"
+    "gitHead": "3c2f5904ce61fcfa61f673c38c2a5ec56e9e2b07"
 }

package/lib/index.js

@@ -1,646 +0,0 @@
-'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, _api$medias7;
-        return typeof api.medias.forceDelete !== 'undefined' ? (_api$medias6 = api.medias).forceDelete.apply(_api$medias6, arguments) : (_api$medias7 = api.medias)["delete"].apply(_api$medias7, arguments);
-      },
-      // TODO: Temporary compat... see how this works
-      trash: function trash() {
-        var _api$medias8;
-        return (_api$medias8 = api.medias)["delete"].apply(_api$medias8, 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 TODO: temporary
-  }));
-}
-MediaGallery.propTypes = propTypes;
-MediaGallery.defaultProps = defaultProps;
-
-module.exports = MediaGallery;