@micromag/media-gallery 0.3.512 → 0.3.514

package/es/index.js

@@ -7,22 +7,16 @@ 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 { 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
@@ -171,6 +165,19 @@ var defaultFields = [{
   }),
   type: 'text',
   component: 'text'
+}, {
+  name: 'tags',
+  label: /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "IOVper",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Tags"
+    }]
+  }),
+  type: 'array',
+  component: 'select'
+  // requestUrl: route('medias.tags') || '/api/medias/tags',
+  //     itemLabelPath: 'name',
 }, {
   id: 'custom_field',
   component: 'custom_field',
@@ -366,7 +373,7 @@ function filters() {
           "value": "This micromag"
         }]
       }),
-      value: 'document'
+      value: 'document-'
     }]
   }, {
     id: 'authors',
@@ -404,8 +411,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])
@@ -451,9 +457,9 @@ function MediaGallery(_ref) {
     columns = _ref.columns,
     isPicker = _ref.isPicker,
     multiple = _ref.multiple,
-    initialMedias = _ref.medias,
-    buttons = _ref.buttons,
-    className = _ref.className,
+    initialMedias = _ref.medias;
+    _ref.buttons;
+    var className = _ref.className,
     onChange = _ref.onChange;
   var api = useApi();
   var mediasApi = useMemo(function () {
@@ -495,14 +501,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(),
@@ -549,10 +555,37 @@ function MediaGallery(_ref) {
     if (addedMedias === null || addedMedias.length === 0) {
       return value;
     }
-    console.log('finalValue', addedMedias);
+    console.log('addedMedias', addedMedias);
+    if (!multiple) {
+      var _ref3 = addedMedias || [],
+        _ref4 = _slicedToArray(_ref3, 1),
+        _ref4$ = _ref4[0],
+        firstMedia = _ref4$ === void 0 ? null : _ref4$;
+      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 +593,7 @@ function MediaGallery(_ref) {
     api: mediasApi,
     value: finalValue,
     theme: "dark",
-    types: types,
+    types: finalTypes,
     query: finalQuery,
     multiple: multiple,
     items: initialMedias,
@@ -568,7 +601,7 @@ function MediaGallery(_ref) {
     fields: fields,
     columns: columns,
     onChange: onChange,
-    buttons: buttons,
+    buttons: finalButtons,
     buttonsClassName: "ms-xl-auto",
     withStickySelection: true
   }) : /*#__PURE__*/React.createElement(MediasBrowserContainer, {
@@ -576,18 +609,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: 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,16 @@ 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 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
@@ -173,6 +167,19 @@ var defaultFields = [{
   }),
   type: 'text',
   component: 'text'
+}, {
+  name: 'tags',
+  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "IOVper",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Tags"
+    }]
+  }),
+  type: 'array',
+  component: 'select'
+  // requestUrl: route('medias.tags') || '/api/medias/tags',
+  //     itemLabelPath: 'name',
 }, {
   id: 'custom_field',
   component: 'custom_field',
@@ -406,7 +413,7 @@ function filters() {
           "value": "This micromag"
         }]
       }),
-      value: 'document'
+      value: 'document-'
     }]
   }, {
     id: 'authors',
@@ -444,8 +451,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])
@@ -491,9 +497,9 @@ function MediaGallery(_ref) {
     columns = _ref.columns,
     isPicker = _ref.isPicker,
     multiple = _ref.multiple,
-    initialMedias = _ref.medias,
-    buttons = _ref.buttons,
-    className = _ref.className,
+    initialMedias = _ref.medias;
+    _ref.buttons;
+    var className = _ref.className,
     onChange = _ref.onChange;
   var api = data.useApi();
   var mediasApi = React.useMemo(function () {
@@ -535,14 +541,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(),
@@ -589,10 +595,37 @@ function MediaGallery(_ref) {
     if (addedMedias === null || addedMedias.length === 0) {
       return value;
     }
-    console.log('finalValue', addedMedias);
+    console.log('addedMedias', addedMedias);
+    if (!multiple) {
+      var _ref3 = addedMedias || [],
+        _ref4 = _slicedToArray(_ref3, 1),
+        _ref4$ = _ref4[0],
+        firstMedia = _ref4$ === void 0 ? null : _ref4$;
+      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 +633,7 @@ function MediaGallery(_ref) {
     api: mediasApi,
     value: finalValue,
     theme: "dark",
-    types: types,
+    types: finalTypes,
     query: finalQuery,
     multiple: multiple,
     items: initialMedias,
@@ -608,7 +641,7 @@ function MediaGallery(_ref) {
     fields: fields,
     columns: columns,
     onChange: onChange,
-    buttons: buttons,
+    buttons: finalButtons,
     buttonsClassName: "ms-xl-auto",
     withStickySelection: true
   }) : /*#__PURE__*/React.createElement(medias.MediasBrowserContainer, {
@@ -616,18 +649,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: 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.514",
     "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": "40bbf8d97c0d912ce8be3c8caa2c70e117286fc2"
 }