@micromag/media-gallery 0.3.509 → 0.3.512

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/es/index.js +316 -24
  2. package/lib/index.js +316 -24
  3. package/package.json +9 -9
package/es/index.js CHANGED
@@ -3,19 +3,294 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
3
3
  import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
4
4
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
5
5
  import classNames from 'classnames';
6
+ import isArray from 'lodash/isArray';
6
7
  import PropTypes from 'prop-types';
7
8
  import React, { useMemo, useState, useCallback } from 'react';
8
9
  import { createPortal } from 'react-dom';
9
- import { QueryProvider } from '@panneau/data';
10
- import DisplaysProvider from '@panneau/displays';
11
- import FieldsProvider from '@panneau/fields';
12
- import FiltersProvider from '@panneau/filters';
13
10
  import { MediasPickerContainer, MediasBrowserContainer } from '@panneau/medias';
14
11
  import { PropTypes as PropTypes$1 } from '@micromag/core';
15
12
  import { UploadModal } from '@micromag/core/components';
16
13
  import { useApi, useMediaCreate } from '@micromag/data';
17
- import { useUrlGenerator } from '@folklore/routes';
18
14
  import { FormattedMessage } from 'react-intl';
15
+ import { useUrlGenerator } from '@folklore/routes';
16
+
17
+ var defaultColumns = [{
18
+ id: 'image',
19
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
20
+ id: "UbxbKP",
21
+ defaultMessage: [{
22
+ "type": 0,
23
+ "value": "Preview"
24
+ }]
25
+ }),
26
+ component: 'image',
27
+ path: 'thumbnail_url',
28
+ sortable: false
29
+ }, {
30
+ id: 'name',
31
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
32
+ id: "WX83V9",
33
+ defaultMessage: [{
34
+ "type": 0,
35
+ "value": "File name"
36
+ }]
37
+ }),
38
+ component: 'text-description',
39
+ path: 'name',
40
+ descriptionPath: 'type',
41
+ descriptionValues: {
42
+ image: /*#__PURE__*/React.createElement(FormattedMessage, {
43
+ id: "AwDQvD",
44
+ defaultMessage: [{
45
+ "type": 0,
46
+ "value": "Image"
47
+ }]
48
+ }),
49
+ video: /*#__PURE__*/React.createElement(FormattedMessage, {
50
+ id: "mQiyAm",
51
+ defaultMessage: [{
52
+ "type": 0,
53
+ "value": "Video"
54
+ }]
55
+ }),
56
+ audio: /*#__PURE__*/React.createElement(FormattedMessage, {
57
+ id: "XnyI69",
58
+ defaultMessage: [{
59
+ "type": 0,
60
+ "value": "Audio"
61
+ }]
62
+ }),
63
+ document: /*#__PURE__*/React.createElement(FormattedMessage, {
64
+ id: "1dqmFw",
65
+ defaultMessage: [{
66
+ "type": 0,
67
+ "value": "Document"
68
+ }]
69
+ })
70
+ },
71
+ sortable: true
72
+ }, {
73
+ id: 'dimensions',
74
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
75
+ id: "eCe9ZY",
76
+ defaultMessage: [{
77
+ "type": 0,
78
+ "value": "Dimensions"
79
+ }]
80
+ }),
81
+ component: 'unit',
82
+ format: 'dimensions',
83
+ path: 'metadata'
84
+ }, {
85
+ id: 'size',
86
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
87
+ id: "c3hu9o",
88
+ defaultMessage: [{
89
+ "type": 0,
90
+ "value": "Size"
91
+ }]
92
+ }),
93
+ component: 'unit',
94
+ format: 'bytes',
95
+ path: 'metadata.size'
96
+ }, {
97
+ id: 'duration',
98
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
99
+ id: "002oWQ",
100
+ defaultMessage: [{
101
+ "type": 0,
102
+ "value": "Duration"
103
+ }]
104
+ }),
105
+ component: 'unit',
106
+ format: 'duration',
107
+ path: 'metadata.duration'
108
+ },
109
+ // {
110
+ // id: 'author',
111
+ // label: <FormattedMessage defaultMessage="Added by" description="Field name" />,
112
+ // component: 'avatar',
113
+ // path: 'metadata.author',
114
+ // namePath: 'name',
115
+ // withoutName: true,
116
+ // },
117
+ {
118
+ id: 'created_at',
119
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
120
+ id: "OzYWZz",
121
+ defaultMessage: [{
122
+ "type": 0,
123
+ "value": "Created at"
124
+ }]
125
+ }),
126
+ component: 'date',
127
+ path: 'created_at',
128
+ format: 'yyyy-MM-dd hh:ss',
129
+ sortable: true
130
+ }, {
131
+ id: 'actions',
132
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
133
+ id: "rtwfuZ",
134
+ defaultMessage: [{
135
+ "type": 0,
136
+ "value": "Actions"
137
+ }]
138
+ }),
139
+ actions: ['edit', 'delete']
140
+ // component: ItemActions,
141
+ // label: 'Edit',
142
+ // url: '/edit/1',
143
+ }
144
+ // {
145
+ // id: 'status',
146
+ // label: <FormattedMessage defaultMessage="Status" description="Field name" />,
147
+ // component: 'text',
148
+ // path: 'metadata.status',
149
+ // },
150
+ ];
151
+
152
+ var defaultFields = [{
153
+ name: 'name',
154
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
155
+ id: "WX83V9",
156
+ defaultMessage: [{
157
+ "type": 0,
158
+ "value": "File name"
159
+ }]
160
+ }),
161
+ type: 'text',
162
+ component: 'text'
163
+ }, {
164
+ name: 'description',
165
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
166
+ id: "ygNvmz",
167
+ defaultMessage: [{
168
+ "type": 0,
169
+ "value": "Description"
170
+ }]
171
+ }),
172
+ type: 'text',
173
+ component: 'text'
174
+ }, {
175
+ id: 'custom_field',
176
+ component: 'custom_field',
177
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
178
+ id: "BjSp56",
179
+ defaultMessage: [{
180
+ "type": 0,
181
+ "value": "Test custom field"
182
+ }]
183
+ })
184
+ }, {
185
+ id: 'info',
186
+ component: 'fields',
187
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
188
+ id: "3RT69u",
189
+ defaultMessage: [{
190
+ "type": 0,
191
+ "value": "Informations"
192
+ }]
193
+ }),
194
+ isList: true,
195
+ hideWithoutValue: true,
196
+ fields: [{
197
+ id: 'user',
198
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
199
+ id: "yByaBh",
200
+ defaultMessage: [{
201
+ "type": 0,
202
+ "value": "Added by"
203
+ }]
204
+ }),
205
+ type: 'display',
206
+ display: 'avatar',
207
+ name: 'user',
208
+ horizontal: true
209
+ }, {
210
+ id: 'created_at',
211
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
212
+ id: "PN+75e",
213
+ defaultMessage: [{
214
+ "type": 0,
215
+ "value": "Created at"
216
+ }]
217
+ }),
218
+ type: 'display',
219
+ display: 'date',
220
+ name: 'created_at',
221
+ format: 'yyyy-MM-dd hh:ss',
222
+ horizontal: true
223
+ }]
224
+ }, {
225
+ id: 'technical',
226
+ component: 'fields',
227
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
228
+ id: "xKUOLG",
229
+ defaultMessage: [{
230
+ "type": 0,
231
+ "value": "Technical details"
232
+ }]
233
+ }),
234
+ isList: true,
235
+ hideWithoutValue: true,
236
+ fields: [{
237
+ id: 'format',
238
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
239
+ id: "JuxiUN",
240
+ defaultMessage: [{
241
+ "type": 0,
242
+ "value": "Format"
243
+ }]
244
+ }),
245
+ type: 'display',
246
+ display: 'unit',
247
+ format: 'format',
248
+ name: 'format',
249
+ horizontal: true
250
+ }, {
251
+ id: 'dimensions',
252
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
253
+ id: "rmJBin",
254
+ defaultMessage: [{
255
+ "type": 0,
256
+ "value": "Dimensions"
257
+ }]
258
+ }),
259
+ type: 'display',
260
+ display: 'unit',
261
+ format: 'dimensions',
262
+ name: 'metadata',
263
+ horizontal: true
264
+ }, {
265
+ id: 'size',
266
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
267
+ id: "g2CRt5",
268
+ defaultMessage: [{
269
+ "type": 0,
270
+ "value": "Size"
271
+ }]
272
+ }),
273
+ type: 'display',
274
+ display: 'unit',
275
+ format: 'bytes',
276
+ name: 'metadata.size',
277
+ horizontal: true
278
+ }, {
279
+ id: 'duration',
280
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
281
+ id: "wU++NJ",
282
+ defaultMessage: [{
283
+ "type": 0,
284
+ "value": "Duration"
285
+ }]
286
+ }),
287
+ type: 'display',
288
+ display: 'unit',
289
+ format: 'duration',
290
+ name: 'metadata.duration',
291
+ horizontal: true
292
+ }]
293
+ }];
19
294
 
20
295
  function filters() {
21
296
  var route = useUrlGenerator();
@@ -91,40 +366,39 @@ function filters() {
91
366
  "value": "This micromag"
92
367
  }]
93
368
  }),
94
- value: 'video'
369
+ value: 'document'
95
370
  }]
96
371
  }, {
97
372
  id: 'authors',
98
373
  component: 'select',
99
374
  name: 'authors',
100
375
  placeholder: /*#__PURE__*/React.createElement(FormattedMessage, {
101
- id: "skmuWU",
376
+ id: "7oXkoj",
102
377
  defaultMessage: [{
103
378
  "type": 0,
104
- "value": "Author"
379
+ "value": "Authors"
105
380
  }]
106
381
  }),
107
382
  requestUrl: route('medias.authors') || '/api/medias/authors',
108
383
  itemLabelPath: 'name',
384
+ itemValuePath: 'id',
109
385
  multiple: true
110
386
  }, {
111
387
  id: 'tags',
112
388
  component: 'select',
113
389
  name: 'tags',
114
390
  placeholder: /*#__PURE__*/React.createElement(FormattedMessage, {
115
- id: "hnLSrX",
391
+ id: "9mXl24",
116
392
  defaultMessage: [{
117
393
  "type": 0,
118
- "value": "Tag"
394
+ "value": "Tags"
119
395
  }]
120
396
  }),
121
- requestUrl: route('medias.tags.get') || '/api/medias/tags',
397
+ requestUrl: route('medias.tags') || '/api/medias/tags',
122
398
  itemLabelPath: 'name',
123
399
  itemValuePath: 'id',
124
400
  multiple: true,
125
- // requestQuery: { page: 1 },
126
401
  paginated: true
127
- // options: null,
128
402
  }];
129
403
  }
130
404
 
@@ -141,6 +415,12 @@ var propTypes = {
141
415
  filters: PropTypes.arrayOf(PropTypes.shape({
142
416
  id: PropTypes.string
143
417
  })),
418
+ fields: PropTypes.arrayOf(PropTypes.shape({
419
+ id: PropTypes.string
420
+ })),
421
+ columns: PropTypes.arrayOf(PropTypes.shape({
422
+ id: PropTypes.string
423
+ })),
144
424
  isPicker: PropTypes.bool,
145
425
  multiple: PropTypes.bool,
146
426
  medias: PropTypes$1.medias,
@@ -153,6 +433,8 @@ var defaultProps = {
153
433
  types: null,
154
434
  source: 'all',
155
435
  filters: null,
436
+ fields: defaultFields,
437
+ columns: defaultColumns,
156
438
  isPicker: false,
157
439
  multiple: false,
158
440
  medias: null,
@@ -165,6 +447,8 @@ function MediaGallery(_ref) {
165
447
  types = _ref.types,
166
448
  source = _ref.source,
167
449
  filters$1 = _ref.filters,
450
+ fields = _ref.fields,
451
+ columns = _ref.columns,
168
452
  isPicker = _ref.isPicker,
169
453
  multiple = _ref.multiple,
170
454
  initialMedias = _ref.medias,
@@ -224,8 +508,10 @@ function MediaGallery(_ref) {
224
508
  var _useMediaCreate = useMediaCreate(),
225
509
  createMedia = _useMediaCreate.create;
226
510
  var onUploadCompleted = useCallback(function (newMedias) {
511
+ console.log('newMedias', newMedias);
227
512
  setUploading(true);
228
513
  Promise.all(newMedias.map(createMedia)).then(function (newAddedMedias) {
514
+ console.log('not uploading anymore', newAddedMedias);
229
515
  setUploading(false);
230
516
  return setAddedMedias([].concat(_toConsumableArray(addedMedias), _toConsumableArray(newAddedMedias)));
231
517
  });
@@ -246,7 +532,7 @@ function MediaGallery(_ref) {
246
532
  // return { ...filter, options: tags };
247
533
  // }
248
534
  return filter;
249
- });
535
+ }).concat();
250
536
  }, [partialFilters]);
251
537
  var _useState7 = useState(source !== null ? {
252
538
  source: source
@@ -259,24 +545,28 @@ function MediaGallery(_ref) {
259
545
  source: source
260
546
  } : null));
261
547
  }, [source, setQuery]);
262
-
263
- // const finalValue = useMemo(() => {
264
- // const allMedias = [...addedMedias, ...(value || [])];
265
- // return allMedias.length > 0 ? allMedias : null;
266
- // }, [value, addedMedias]);
267
-
548
+ var finalValue = useMemo(function () {
549
+ if (addedMedias === null || addedMedias.length === 0) {
550
+ return value;
551
+ }
552
+ console.log('finalValue', addedMedias);
553
+ var allMedias = [].concat(_toConsumableArray(addedMedias), _toConsumableArray(isArray(value) ? value || [] : [value]));
554
+ return allMedias.length > 0 ? allMedias : null;
555
+ }, [value, addedMedias]);
268
556
  return /*#__PURE__*/React.createElement("div", {
269
557
  className: classNames([styles.container, _defineProperty({}, className, className)])
270
- }, /*#__PURE__*/React.createElement(QueryProvider, null, /*#__PURE__*/React.createElement(FieldsProvider, null, /*#__PURE__*/React.createElement(DisplaysProvider, null, /*#__PURE__*/React.createElement(FiltersProvider, null, isPicker ? /*#__PURE__*/React.createElement(MediasPickerContainer, {
558
+ }, isPicker ? /*#__PURE__*/React.createElement(MediasPickerContainer, {
271
559
  className: styles.browser,
272
560
  api: mediasApi,
273
- value: value,
561
+ value: finalValue,
274
562
  theme: "dark",
275
563
  types: types,
276
564
  query: finalQuery,
277
565
  multiple: multiple,
278
566
  items: initialMedias,
279
567
  filters: finalFilters,
568
+ fields: fields,
569
+ columns: columns,
280
570
  onChange: onChange,
281
571
  buttons: buttons,
282
572
  buttonsClassName: "ms-xl-auto",
@@ -284,17 +574,19 @@ function MediaGallery(_ref) {
284
574
  }) : /*#__PURE__*/React.createElement(MediasBrowserContainer, {
285
575
  className: styles.browser,
286
576
  api: mediasApi,
287
- value: value,
577
+ value: finalValue,
288
578
  theme: "dark",
289
579
  types: types,
290
580
  query: finalQuery,
291
581
  multiple: multiple,
292
582
  items: initialMedias,
293
583
  filters: finalFilters,
584
+ fields: fields,
585
+ columns: columns,
294
586
  buttons: buttons,
295
587
  buttonsClassName: "ms-xl-auto",
296
588
  withStickySelection: true
297
- }))))), /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(UploadModal, {
589
+ }), /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(UploadModal, {
298
590
  types: types,
299
591
  opened: uploadModalOpened,
300
592
  onUploaded: onUploadCompleted,
package/lib/index.js CHANGED
@@ -5,19 +5,294 @@ var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
5
5
  var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
6
6
  var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
7
7
  var classNames = require('classnames');
8
+ var isArray = require('lodash/isArray');
8
9
  var PropTypes = require('prop-types');
9
10
  var React = require('react');
10
11
  var reactDom = require('react-dom');
11
- var data$1 = require('@panneau/data');
12
- var DisplaysProvider = require('@panneau/displays');
13
- var FieldsProvider = require('@panneau/fields');
14
- var FiltersProvider = require('@panneau/filters');
15
12
  var medias = require('@panneau/medias');
16
13
  var core = require('@micromag/core');
17
14
  var components = require('@micromag/core/components');
18
15
  var data = require('@micromag/data');
19
- var pathToRegexp = require('path-to-regexp');
20
16
  var reactIntl = require('react-intl');
17
+ var pathToRegexp = require('path-to-regexp');
18
+
19
+ var defaultColumns = [{
20
+ id: 'image',
21
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
22
+ id: "UbxbKP",
23
+ defaultMessage: [{
24
+ "type": 0,
25
+ "value": "Preview"
26
+ }]
27
+ }),
28
+ component: 'image',
29
+ path: 'thumbnail_url',
30
+ sortable: false
31
+ }, {
32
+ id: 'name',
33
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
34
+ id: "WX83V9",
35
+ defaultMessage: [{
36
+ "type": 0,
37
+ "value": "File name"
38
+ }]
39
+ }),
40
+ component: 'text-description',
41
+ path: 'name',
42
+ descriptionPath: 'type',
43
+ descriptionValues: {
44
+ image: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
45
+ id: "AwDQvD",
46
+ defaultMessage: [{
47
+ "type": 0,
48
+ "value": "Image"
49
+ }]
50
+ }),
51
+ video: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
52
+ id: "mQiyAm",
53
+ defaultMessage: [{
54
+ "type": 0,
55
+ "value": "Video"
56
+ }]
57
+ }),
58
+ audio: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
59
+ id: "XnyI69",
60
+ defaultMessage: [{
61
+ "type": 0,
62
+ "value": "Audio"
63
+ }]
64
+ }),
65
+ document: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
66
+ id: "1dqmFw",
67
+ defaultMessage: [{
68
+ "type": 0,
69
+ "value": "Document"
70
+ }]
71
+ })
72
+ },
73
+ sortable: true
74
+ }, {
75
+ id: 'dimensions',
76
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
77
+ id: "eCe9ZY",
78
+ defaultMessage: [{
79
+ "type": 0,
80
+ "value": "Dimensions"
81
+ }]
82
+ }),
83
+ component: 'unit',
84
+ format: 'dimensions',
85
+ path: 'metadata'
86
+ }, {
87
+ id: 'size',
88
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
89
+ id: "c3hu9o",
90
+ defaultMessage: [{
91
+ "type": 0,
92
+ "value": "Size"
93
+ }]
94
+ }),
95
+ component: 'unit',
96
+ format: 'bytes',
97
+ path: 'metadata.size'
98
+ }, {
99
+ id: 'duration',
100
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
101
+ id: "002oWQ",
102
+ defaultMessage: [{
103
+ "type": 0,
104
+ "value": "Duration"
105
+ }]
106
+ }),
107
+ component: 'unit',
108
+ format: 'duration',
109
+ path: 'metadata.duration'
110
+ },
111
+ // {
112
+ // id: 'author',
113
+ // label: <FormattedMessage defaultMessage="Added by" description="Field name" />,
114
+ // component: 'avatar',
115
+ // path: 'metadata.author',
116
+ // namePath: 'name',
117
+ // withoutName: true,
118
+ // },
119
+ {
120
+ id: 'created_at',
121
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
122
+ id: "OzYWZz",
123
+ defaultMessage: [{
124
+ "type": 0,
125
+ "value": "Created at"
126
+ }]
127
+ }),
128
+ component: 'date',
129
+ path: 'created_at',
130
+ format: 'yyyy-MM-dd hh:ss',
131
+ sortable: true
132
+ }, {
133
+ id: 'actions',
134
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
135
+ id: "rtwfuZ",
136
+ defaultMessage: [{
137
+ "type": 0,
138
+ "value": "Actions"
139
+ }]
140
+ }),
141
+ actions: ['edit', 'delete']
142
+ // component: ItemActions,
143
+ // label: 'Edit',
144
+ // url: '/edit/1',
145
+ }
146
+ // {
147
+ // id: 'status',
148
+ // label: <FormattedMessage defaultMessage="Status" description="Field name" />,
149
+ // component: 'text',
150
+ // path: 'metadata.status',
151
+ // },
152
+ ];
153
+
154
+ var defaultFields = [{
155
+ name: 'name',
156
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
157
+ id: "WX83V9",
158
+ defaultMessage: [{
159
+ "type": 0,
160
+ "value": "File name"
161
+ }]
162
+ }),
163
+ type: 'text',
164
+ component: 'text'
165
+ }, {
166
+ name: 'description',
167
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
168
+ id: "ygNvmz",
169
+ defaultMessage: [{
170
+ "type": 0,
171
+ "value": "Description"
172
+ }]
173
+ }),
174
+ type: 'text',
175
+ component: 'text'
176
+ }, {
177
+ id: 'custom_field',
178
+ component: 'custom_field',
179
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
180
+ id: "BjSp56",
181
+ defaultMessage: [{
182
+ "type": 0,
183
+ "value": "Test custom field"
184
+ }]
185
+ })
186
+ }, {
187
+ id: 'info',
188
+ component: 'fields',
189
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
190
+ id: "3RT69u",
191
+ defaultMessage: [{
192
+ "type": 0,
193
+ "value": "Informations"
194
+ }]
195
+ }),
196
+ isList: true,
197
+ hideWithoutValue: true,
198
+ fields: [{
199
+ id: 'user',
200
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
201
+ id: "yByaBh",
202
+ defaultMessage: [{
203
+ "type": 0,
204
+ "value": "Added by"
205
+ }]
206
+ }),
207
+ type: 'display',
208
+ display: 'avatar',
209
+ name: 'user',
210
+ horizontal: true
211
+ }, {
212
+ id: 'created_at',
213
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
214
+ id: "PN+75e",
215
+ defaultMessage: [{
216
+ "type": 0,
217
+ "value": "Created at"
218
+ }]
219
+ }),
220
+ type: 'display',
221
+ display: 'date',
222
+ name: 'created_at',
223
+ format: 'yyyy-MM-dd hh:ss',
224
+ horizontal: true
225
+ }]
226
+ }, {
227
+ id: 'technical',
228
+ component: 'fields',
229
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
230
+ id: "xKUOLG",
231
+ defaultMessage: [{
232
+ "type": 0,
233
+ "value": "Technical details"
234
+ }]
235
+ }),
236
+ isList: true,
237
+ hideWithoutValue: true,
238
+ fields: [{
239
+ id: 'format',
240
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
241
+ id: "JuxiUN",
242
+ defaultMessage: [{
243
+ "type": 0,
244
+ "value": "Format"
245
+ }]
246
+ }),
247
+ type: 'display',
248
+ display: 'unit',
249
+ format: 'format',
250
+ name: 'format',
251
+ horizontal: true
252
+ }, {
253
+ id: 'dimensions',
254
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
255
+ id: "rmJBin",
256
+ defaultMessage: [{
257
+ "type": 0,
258
+ "value": "Dimensions"
259
+ }]
260
+ }),
261
+ type: 'display',
262
+ display: 'unit',
263
+ format: 'dimensions',
264
+ name: 'metadata',
265
+ horizontal: true
266
+ }, {
267
+ id: 'size',
268
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
269
+ id: "g2CRt5",
270
+ defaultMessage: [{
271
+ "type": 0,
272
+ "value": "Size"
273
+ }]
274
+ }),
275
+ type: 'display',
276
+ display: 'unit',
277
+ format: 'bytes',
278
+ name: 'metadata.size',
279
+ horizontal: true
280
+ }, {
281
+ id: 'duration',
282
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
283
+ id: "wU++NJ",
284
+ defaultMessage: [{
285
+ "type": 0,
286
+ "value": "Duration"
287
+ }]
288
+ }),
289
+ type: 'display',
290
+ display: 'unit',
291
+ format: 'duration',
292
+ name: 'metadata.duration',
293
+ horizontal: true
294
+ }]
295
+ }];
21
296
 
22
297
  /* eslint-disable react/jsx-props-no-spreading */
23
298
  var RoutesContext = /*#__PURE__*/React.createContext(null);
@@ -131,40 +406,39 @@ function filters() {
131
406
  "value": "This micromag"
132
407
  }]
133
408
  }),
134
- value: 'video'
409
+ value: 'document'
135
410
  }]
136
411
  }, {
137
412
  id: 'authors',
138
413
  component: 'select',
139
414
  name: 'authors',
140
415
  placeholder: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
141
- id: "skmuWU",
416
+ id: "7oXkoj",
142
417
  defaultMessage: [{
143
418
  "type": 0,
144
- "value": "Author"
419
+ "value": "Authors"
145
420
  }]
146
421
  }),
147
422
  requestUrl: route('medias.authors') || '/api/medias/authors',
148
423
  itemLabelPath: 'name',
424
+ itemValuePath: 'id',
149
425
  multiple: true
150
426
  }, {
151
427
  id: 'tags',
152
428
  component: 'select',
153
429
  name: 'tags',
154
430
  placeholder: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
155
- id: "hnLSrX",
431
+ id: "9mXl24",
156
432
  defaultMessage: [{
157
433
  "type": 0,
158
- "value": "Tag"
434
+ "value": "Tags"
159
435
  }]
160
436
  }),
161
- requestUrl: route('medias.tags.get') || '/api/medias/tags',
437
+ requestUrl: route('medias.tags') || '/api/medias/tags',
162
438
  itemLabelPath: 'name',
163
439
  itemValuePath: 'id',
164
440
  multiple: true,
165
- // requestQuery: { page: 1 },
166
441
  paginated: true
167
- // options: null,
168
442
  }];
169
443
  }
170
444
 
@@ -181,6 +455,12 @@ var propTypes = {
181
455
  filters: PropTypes.arrayOf(PropTypes.shape({
182
456
  id: PropTypes.string
183
457
  })),
458
+ fields: PropTypes.arrayOf(PropTypes.shape({
459
+ id: PropTypes.string
460
+ })),
461
+ columns: PropTypes.arrayOf(PropTypes.shape({
462
+ id: PropTypes.string
463
+ })),
184
464
  isPicker: PropTypes.bool,
185
465
  multiple: PropTypes.bool,
186
466
  medias: core.PropTypes.medias,
@@ -193,6 +473,8 @@ var defaultProps = {
193
473
  types: null,
194
474
  source: 'all',
195
475
  filters: null,
476
+ fields: defaultFields,
477
+ columns: defaultColumns,
196
478
  isPicker: false,
197
479
  multiple: false,
198
480
  medias: null,
@@ -205,6 +487,8 @@ function MediaGallery(_ref) {
205
487
  types = _ref.types,
206
488
  source = _ref.source,
207
489
  filters$1 = _ref.filters,
490
+ fields = _ref.fields,
491
+ columns = _ref.columns,
208
492
  isPicker = _ref.isPicker,
209
493
  multiple = _ref.multiple,
210
494
  initialMedias = _ref.medias,
@@ -264,8 +548,10 @@ function MediaGallery(_ref) {
264
548
  var _useMediaCreate = data.useMediaCreate(),
265
549
  createMedia = _useMediaCreate.create;
266
550
  var onUploadCompleted = React.useCallback(function (newMedias) {
551
+ console.log('newMedias', newMedias);
267
552
  setUploading(true);
268
553
  Promise.all(newMedias.map(createMedia)).then(function (newAddedMedias) {
554
+ console.log('not uploading anymore', newAddedMedias);
269
555
  setUploading(false);
270
556
  return setAddedMedias([].concat(_toConsumableArray(addedMedias), _toConsumableArray(newAddedMedias)));
271
557
  });
@@ -286,7 +572,7 @@ function MediaGallery(_ref) {
286
572
  // return { ...filter, options: tags };
287
573
  // }
288
574
  return filter;
289
- });
575
+ }).concat();
290
576
  }, [partialFilters]);
291
577
  var _useState7 = React.useState(source !== null ? {
292
578
  source: source
@@ -299,24 +585,28 @@ function MediaGallery(_ref) {
299
585
  source: source
300
586
  } : null));
301
587
  }, [source, setQuery]);
302
-
303
- // const finalValue = useMemo(() => {
304
- // const allMedias = [...addedMedias, ...(value || [])];
305
- // return allMedias.length > 0 ? allMedias : null;
306
- // }, [value, addedMedias]);
307
-
588
+ var finalValue = React.useMemo(function () {
589
+ if (addedMedias === null || addedMedias.length === 0) {
590
+ return value;
591
+ }
592
+ console.log('finalValue', addedMedias);
593
+ var allMedias = [].concat(_toConsumableArray(addedMedias), _toConsumableArray(isArray(value) ? value || [] : [value]));
594
+ return allMedias.length > 0 ? allMedias : null;
595
+ }, [value, addedMedias]);
308
596
  return /*#__PURE__*/React.createElement("div", {
309
597
  className: classNames([styles.container, _defineProperty({}, className, className)])
310
- }, /*#__PURE__*/React.createElement(data$1.QueryProvider, null, /*#__PURE__*/React.createElement(FieldsProvider, null, /*#__PURE__*/React.createElement(DisplaysProvider, null, /*#__PURE__*/React.createElement(FiltersProvider, null, isPicker ? /*#__PURE__*/React.createElement(medias.MediasPickerContainer, {
598
+ }, isPicker ? /*#__PURE__*/React.createElement(medias.MediasPickerContainer, {
311
599
  className: styles.browser,
312
600
  api: mediasApi,
313
- value: value,
601
+ value: finalValue,
314
602
  theme: "dark",
315
603
  types: types,
316
604
  query: finalQuery,
317
605
  multiple: multiple,
318
606
  items: initialMedias,
319
607
  filters: finalFilters,
608
+ fields: fields,
609
+ columns: columns,
320
610
  onChange: onChange,
321
611
  buttons: buttons,
322
612
  buttonsClassName: "ms-xl-auto",
@@ -324,17 +614,19 @@ function MediaGallery(_ref) {
324
614
  }) : /*#__PURE__*/React.createElement(medias.MediasBrowserContainer, {
325
615
  className: styles.browser,
326
616
  api: mediasApi,
327
- value: value,
617
+ value: finalValue,
328
618
  theme: "dark",
329
619
  types: types,
330
620
  query: finalQuery,
331
621
  multiple: multiple,
332
622
  items: initialMedias,
333
623
  filters: finalFilters,
624
+ fields: fields,
625
+ columns: columns,
334
626
  buttons: buttons,
335
627
  buttonsClassName: "ms-xl-auto",
336
628
  withStickySelection: true
337
- }))))), /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React.createElement(components.UploadModal, {
629
+ }), /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React.createElement(components.UploadModal, {
338
630
  types: types,
339
631
  opened: uploadModalOpened,
340
632
  onUploaded: onUploadCompleted,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/media-gallery",
3
- "version": "0.3.509",
3
+ "version": "0.3.512",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -54,6 +54,11 @@
54
54
  "build": "../../scripts/prepare-package.sh --scss"
55
55
  },
56
56
  "devDependencies": {
57
+ "@panneau/data": "^3.0.163",
58
+ "@panneau/displays": "^3.0.163",
59
+ "@panneau/fields": "^3.0.163",
60
+ "@panneau/filters": "^3.0.163",
61
+ "@panneau/uppy": "^3.0.162",
57
62
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
58
63
  "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
59
64
  },
@@ -67,14 +72,9 @@
67
72
  "@fortawesome/fontawesome-svg-core": "^6.5.2",
68
73
  "@fortawesome/free-solid-svg-icons": "^6.5.2",
69
74
  "@fortawesome/react-fontawesome": "^0.2.0",
70
- "@micromag/core": "^0.3.509",
71
- "@micromag/data": "^0.3.509",
72
- "@panneau/data": "^3.0.163",
73
- "@panneau/displays": "^3.0.163",
74
- "@panneau/fields": "^3.0.163",
75
- "@panneau/filters": "^3.0.163",
75
+ "@micromag/core": "^0.3.512",
76
+ "@micromag/data": "^0.3.512",
76
77
  "@panneau/medias": "^3.0.163",
77
- "@panneau/uppy": "^3.0.162",
78
78
  "bootstrap": "^5.3.1",
79
79
  "classnames": "^2.2.6",
80
80
  "lodash": "^4.17.21",
@@ -87,5 +87,5 @@
87
87
  "access": "public",
88
88
  "registry": "https://registry.npmjs.org/"
89
89
  },
90
- "gitHead": "28ca6abf74ab585d218a4918b415b7d0564e5a09"
90
+ "gitHead": "23de9c46447bade478129227281870191d4fcc94"
91
91
  }