@micromag/media-gallery 0.3.509 → 0.3.510

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 +305 -24
  2. package/lib/index.js +305 -24
  3. package/package.json +7 -7
package/es/index.js CHANGED
@@ -3,19 +3,284 @@ 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: 'info',
176
+ component: 'fields',
177
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
178
+ id: "3RT69u",
179
+ defaultMessage: [{
180
+ "type": 0,
181
+ "value": "Informations"
182
+ }]
183
+ }),
184
+ isList: true,
185
+ hideWithoutValue: true,
186
+ fields: [{
187
+ id: 'user',
188
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
189
+ id: "yByaBh",
190
+ defaultMessage: [{
191
+ "type": 0,
192
+ "value": "Added by"
193
+ }]
194
+ }),
195
+ type: 'display',
196
+ display: 'avatar',
197
+ name: 'user',
198
+ horizontal: true
199
+ }, {
200
+ id: 'created_at',
201
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
202
+ id: "PN+75e",
203
+ defaultMessage: [{
204
+ "type": 0,
205
+ "value": "Created at"
206
+ }]
207
+ }),
208
+ type: 'display',
209
+ display: 'date',
210
+ name: 'created_at',
211
+ format: 'yyyy-MM-dd hh:ss',
212
+ horizontal: true
213
+ }]
214
+ }, {
215
+ id: 'technical',
216
+ component: 'fields',
217
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
218
+ id: "xKUOLG",
219
+ defaultMessage: [{
220
+ "type": 0,
221
+ "value": "Technical details"
222
+ }]
223
+ }),
224
+ isList: true,
225
+ hideWithoutValue: true,
226
+ fields: [{
227
+ id: 'format',
228
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
229
+ id: "JuxiUN",
230
+ defaultMessage: [{
231
+ "type": 0,
232
+ "value": "Format"
233
+ }]
234
+ }),
235
+ type: 'display',
236
+ display: 'unit',
237
+ format: 'format',
238
+ name: 'format',
239
+ horizontal: true
240
+ }, {
241
+ id: 'dimensions',
242
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
243
+ id: "rmJBin",
244
+ defaultMessage: [{
245
+ "type": 0,
246
+ "value": "Dimensions"
247
+ }]
248
+ }),
249
+ type: 'display',
250
+ display: 'unit',
251
+ format: 'dimensions',
252
+ name: 'metadata',
253
+ horizontal: true
254
+ }, {
255
+ id: 'size',
256
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
257
+ id: "g2CRt5",
258
+ defaultMessage: [{
259
+ "type": 0,
260
+ "value": "Size"
261
+ }]
262
+ }),
263
+ type: 'display',
264
+ display: 'unit',
265
+ format: 'bytes',
266
+ name: 'metadata.size',
267
+ horizontal: true
268
+ }, {
269
+ id: 'duration',
270
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
271
+ id: "wU++NJ",
272
+ defaultMessage: [{
273
+ "type": 0,
274
+ "value": "Duration"
275
+ }]
276
+ }),
277
+ type: 'display',
278
+ display: 'unit',
279
+ format: 'duration',
280
+ name: 'metadata.duration',
281
+ horizontal: true
282
+ }]
283
+ }];
19
284
 
20
285
  function filters() {
21
286
  var route = useUrlGenerator();
@@ -91,40 +356,39 @@ function filters() {
91
356
  "value": "This micromag"
92
357
  }]
93
358
  }),
94
- value: 'video'
359
+ value: 'document-1'
95
360
  }]
96
361
  }, {
97
362
  id: 'authors',
98
363
  component: 'select',
99
364
  name: 'authors',
100
365
  placeholder: /*#__PURE__*/React.createElement(FormattedMessage, {
101
- id: "skmuWU",
366
+ id: "7oXkoj",
102
367
  defaultMessage: [{
103
368
  "type": 0,
104
- "value": "Author"
369
+ "value": "Authors"
105
370
  }]
106
371
  }),
107
372
  requestUrl: route('medias.authors') || '/api/medias/authors',
108
373
  itemLabelPath: 'name',
374
+ itemValuePath: 'id',
109
375
  multiple: true
110
376
  }, {
111
377
  id: 'tags',
112
378
  component: 'select',
113
379
  name: 'tags',
114
380
  placeholder: /*#__PURE__*/React.createElement(FormattedMessage, {
115
- id: "hnLSrX",
381
+ id: "9mXl24",
116
382
  defaultMessage: [{
117
383
  "type": 0,
118
- "value": "Tag"
384
+ "value": "Tags"
119
385
  }]
120
386
  }),
121
- requestUrl: route('medias.tags.get') || '/api/medias/tags',
387
+ requestUrl: route('medias.tags') || '/api/medias/tags',
122
388
  itemLabelPath: 'name',
123
389
  itemValuePath: 'id',
124
390
  multiple: true,
125
- // requestQuery: { page: 1 },
126
391
  paginated: true
127
- // options: null,
128
392
  }];
129
393
  }
130
394
 
@@ -141,6 +405,12 @@ var propTypes = {
141
405
  filters: PropTypes.arrayOf(PropTypes.shape({
142
406
  id: PropTypes.string
143
407
  })),
408
+ fields: PropTypes.arrayOf(PropTypes.shape({
409
+ id: PropTypes.string
410
+ })),
411
+ columns: PropTypes.arrayOf(PropTypes.shape({
412
+ id: PropTypes.string
413
+ })),
144
414
  isPicker: PropTypes.bool,
145
415
  multiple: PropTypes.bool,
146
416
  medias: PropTypes$1.medias,
@@ -153,6 +423,8 @@ var defaultProps = {
153
423
  types: null,
154
424
  source: 'all',
155
425
  filters: null,
426
+ fields: defaultFields,
427
+ columns: defaultColumns,
156
428
  isPicker: false,
157
429
  multiple: false,
158
430
  medias: null,
@@ -165,6 +437,8 @@ function MediaGallery(_ref) {
165
437
  types = _ref.types,
166
438
  source = _ref.source,
167
439
  filters$1 = _ref.filters,
440
+ fields = _ref.fields,
441
+ columns = _ref.columns,
168
442
  isPicker = _ref.isPicker,
169
443
  multiple = _ref.multiple,
170
444
  initialMedias = _ref.medias,
@@ -224,6 +498,7 @@ function MediaGallery(_ref) {
224
498
  var _useMediaCreate = useMediaCreate(),
225
499
  createMedia = _useMediaCreate.create;
226
500
  var onUploadCompleted = useCallback(function (newMedias) {
501
+ console.log('newMedias', newMedias);
227
502
  setUploading(true);
228
503
  Promise.all(newMedias.map(createMedia)).then(function (newAddedMedias) {
229
504
  setUploading(false);
@@ -246,7 +521,7 @@ function MediaGallery(_ref) {
246
521
  // return { ...filter, options: tags };
247
522
  // }
248
523
  return filter;
249
- });
524
+ }).concat();
250
525
  }, [partialFilters]);
251
526
  var _useState7 = useState(source !== null ? {
252
527
  source: source
@@ -259,24 +534,28 @@ function MediaGallery(_ref) {
259
534
  source: source
260
535
  } : null));
261
536
  }, [source, setQuery]);
262
-
263
- // const finalValue = useMemo(() => {
264
- // const allMedias = [...addedMedias, ...(value || [])];
265
- // return allMedias.length > 0 ? allMedias : null;
266
- // }, [value, addedMedias]);
267
-
537
+ var finalValue = useMemo(function () {
538
+ if (addedMedias === null || addedMedias.length === 0) {
539
+ return value;
540
+ }
541
+ console.log('finalValue', addedMedias);
542
+ var allMedias = [].concat(_toConsumableArray(addedMedias), _toConsumableArray(isArray(value) ? value || [] : [value]));
543
+ return allMedias.length > 0 ? allMedias : null;
544
+ }, [value, addedMedias]);
268
545
  return /*#__PURE__*/React.createElement("div", {
269
546
  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, {
547
+ }, isPicker ? /*#__PURE__*/React.createElement(MediasPickerContainer, {
271
548
  className: styles.browser,
272
549
  api: mediasApi,
273
- value: value,
550
+ value: finalValue,
274
551
  theme: "dark",
275
552
  types: types,
276
553
  query: finalQuery,
277
554
  multiple: multiple,
278
555
  items: initialMedias,
279
556
  filters: finalFilters,
557
+ fields: fields,
558
+ columns: columns,
280
559
  onChange: onChange,
281
560
  buttons: buttons,
282
561
  buttonsClassName: "ms-xl-auto",
@@ -284,17 +563,19 @@ function MediaGallery(_ref) {
284
563
  }) : /*#__PURE__*/React.createElement(MediasBrowserContainer, {
285
564
  className: styles.browser,
286
565
  api: mediasApi,
287
- value: value,
566
+ value: finalValue,
288
567
  theme: "dark",
289
568
  types: types,
290
569
  query: finalQuery,
291
570
  multiple: multiple,
292
571
  items: initialMedias,
293
572
  filters: finalFilters,
573
+ fields: fields,
574
+ columns: columns,
294
575
  buttons: buttons,
295
576
  buttonsClassName: "ms-xl-auto",
296
577
  withStickySelection: true
297
- }))))), /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(UploadModal, {
578
+ }), /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(UploadModal, {
298
579
  types: types,
299
580
  opened: uploadModalOpened,
300
581
  onUploaded: onUploadCompleted,
package/lib/index.js CHANGED
@@ -5,19 +5,284 @@ 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: 'info',
178
+ component: 'fields',
179
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
180
+ id: "3RT69u",
181
+ defaultMessage: [{
182
+ "type": 0,
183
+ "value": "Informations"
184
+ }]
185
+ }),
186
+ isList: true,
187
+ hideWithoutValue: true,
188
+ fields: [{
189
+ id: 'user',
190
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
191
+ id: "yByaBh",
192
+ defaultMessage: [{
193
+ "type": 0,
194
+ "value": "Added by"
195
+ }]
196
+ }),
197
+ type: 'display',
198
+ display: 'avatar',
199
+ name: 'user',
200
+ horizontal: true
201
+ }, {
202
+ id: 'created_at',
203
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
204
+ id: "PN+75e",
205
+ defaultMessage: [{
206
+ "type": 0,
207
+ "value": "Created at"
208
+ }]
209
+ }),
210
+ type: 'display',
211
+ display: 'date',
212
+ name: 'created_at',
213
+ format: 'yyyy-MM-dd hh:ss',
214
+ horizontal: true
215
+ }]
216
+ }, {
217
+ id: 'technical',
218
+ component: 'fields',
219
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
220
+ id: "xKUOLG",
221
+ defaultMessage: [{
222
+ "type": 0,
223
+ "value": "Technical details"
224
+ }]
225
+ }),
226
+ isList: true,
227
+ hideWithoutValue: true,
228
+ fields: [{
229
+ id: 'format',
230
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
231
+ id: "JuxiUN",
232
+ defaultMessage: [{
233
+ "type": 0,
234
+ "value": "Format"
235
+ }]
236
+ }),
237
+ type: 'display',
238
+ display: 'unit',
239
+ format: 'format',
240
+ name: 'format',
241
+ horizontal: true
242
+ }, {
243
+ id: 'dimensions',
244
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
245
+ id: "rmJBin",
246
+ defaultMessage: [{
247
+ "type": 0,
248
+ "value": "Dimensions"
249
+ }]
250
+ }),
251
+ type: 'display',
252
+ display: 'unit',
253
+ format: 'dimensions',
254
+ name: 'metadata',
255
+ horizontal: true
256
+ }, {
257
+ id: 'size',
258
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
259
+ id: "g2CRt5",
260
+ defaultMessage: [{
261
+ "type": 0,
262
+ "value": "Size"
263
+ }]
264
+ }),
265
+ type: 'display',
266
+ display: 'unit',
267
+ format: 'bytes',
268
+ name: 'metadata.size',
269
+ horizontal: true
270
+ }, {
271
+ id: 'duration',
272
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
273
+ id: "wU++NJ",
274
+ defaultMessage: [{
275
+ "type": 0,
276
+ "value": "Duration"
277
+ }]
278
+ }),
279
+ type: 'display',
280
+ display: 'unit',
281
+ format: 'duration',
282
+ name: 'metadata.duration',
283
+ horizontal: true
284
+ }]
285
+ }];
21
286
 
22
287
  /* eslint-disable react/jsx-props-no-spreading */
23
288
  var RoutesContext = /*#__PURE__*/React.createContext(null);
@@ -131,40 +396,39 @@ function filters() {
131
396
  "value": "This micromag"
132
397
  }]
133
398
  }),
134
- value: 'video'
399
+ value: 'document-1'
135
400
  }]
136
401
  }, {
137
402
  id: 'authors',
138
403
  component: 'select',
139
404
  name: 'authors',
140
405
  placeholder: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
141
- id: "skmuWU",
406
+ id: "7oXkoj",
142
407
  defaultMessage: [{
143
408
  "type": 0,
144
- "value": "Author"
409
+ "value": "Authors"
145
410
  }]
146
411
  }),
147
412
  requestUrl: route('medias.authors') || '/api/medias/authors',
148
413
  itemLabelPath: 'name',
414
+ itemValuePath: 'id',
149
415
  multiple: true
150
416
  }, {
151
417
  id: 'tags',
152
418
  component: 'select',
153
419
  name: 'tags',
154
420
  placeholder: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
155
- id: "hnLSrX",
421
+ id: "9mXl24",
156
422
  defaultMessage: [{
157
423
  "type": 0,
158
- "value": "Tag"
424
+ "value": "Tags"
159
425
  }]
160
426
  }),
161
- requestUrl: route('medias.tags.get') || '/api/medias/tags',
427
+ requestUrl: route('medias.tags') || '/api/medias/tags',
162
428
  itemLabelPath: 'name',
163
429
  itemValuePath: 'id',
164
430
  multiple: true,
165
- // requestQuery: { page: 1 },
166
431
  paginated: true
167
- // options: null,
168
432
  }];
169
433
  }
170
434
 
@@ -181,6 +445,12 @@ var propTypes = {
181
445
  filters: PropTypes.arrayOf(PropTypes.shape({
182
446
  id: PropTypes.string
183
447
  })),
448
+ fields: PropTypes.arrayOf(PropTypes.shape({
449
+ id: PropTypes.string
450
+ })),
451
+ columns: PropTypes.arrayOf(PropTypes.shape({
452
+ id: PropTypes.string
453
+ })),
184
454
  isPicker: PropTypes.bool,
185
455
  multiple: PropTypes.bool,
186
456
  medias: core.PropTypes.medias,
@@ -193,6 +463,8 @@ var defaultProps = {
193
463
  types: null,
194
464
  source: 'all',
195
465
  filters: null,
466
+ fields: defaultFields,
467
+ columns: defaultColumns,
196
468
  isPicker: false,
197
469
  multiple: false,
198
470
  medias: null,
@@ -205,6 +477,8 @@ function MediaGallery(_ref) {
205
477
  types = _ref.types,
206
478
  source = _ref.source,
207
479
  filters$1 = _ref.filters,
480
+ fields = _ref.fields,
481
+ columns = _ref.columns,
208
482
  isPicker = _ref.isPicker,
209
483
  multiple = _ref.multiple,
210
484
  initialMedias = _ref.medias,
@@ -264,6 +538,7 @@ function MediaGallery(_ref) {
264
538
  var _useMediaCreate = data.useMediaCreate(),
265
539
  createMedia = _useMediaCreate.create;
266
540
  var onUploadCompleted = React.useCallback(function (newMedias) {
541
+ console.log('newMedias', newMedias);
267
542
  setUploading(true);
268
543
  Promise.all(newMedias.map(createMedia)).then(function (newAddedMedias) {
269
544
  setUploading(false);
@@ -286,7 +561,7 @@ function MediaGallery(_ref) {
286
561
  // return { ...filter, options: tags };
287
562
  // }
288
563
  return filter;
289
- });
564
+ }).concat();
290
565
  }, [partialFilters]);
291
566
  var _useState7 = React.useState(source !== null ? {
292
567
  source: source
@@ -299,24 +574,28 @@ function MediaGallery(_ref) {
299
574
  source: source
300
575
  } : null));
301
576
  }, [source, setQuery]);
302
-
303
- // const finalValue = useMemo(() => {
304
- // const allMedias = [...addedMedias, ...(value || [])];
305
- // return allMedias.length > 0 ? allMedias : null;
306
- // }, [value, addedMedias]);
307
-
577
+ var finalValue = React.useMemo(function () {
578
+ if (addedMedias === null || addedMedias.length === 0) {
579
+ return value;
580
+ }
581
+ console.log('finalValue', addedMedias);
582
+ var allMedias = [].concat(_toConsumableArray(addedMedias), _toConsumableArray(isArray(value) ? value || [] : [value]));
583
+ return allMedias.length > 0 ? allMedias : null;
584
+ }, [value, addedMedias]);
308
585
  return /*#__PURE__*/React.createElement("div", {
309
586
  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, {
587
+ }, isPicker ? /*#__PURE__*/React.createElement(medias.MediasPickerContainer, {
311
588
  className: styles.browser,
312
589
  api: mediasApi,
313
- value: value,
590
+ value: finalValue,
314
591
  theme: "dark",
315
592
  types: types,
316
593
  query: finalQuery,
317
594
  multiple: multiple,
318
595
  items: initialMedias,
319
596
  filters: finalFilters,
597
+ fields: fields,
598
+ columns: columns,
320
599
  onChange: onChange,
321
600
  buttons: buttons,
322
601
  buttonsClassName: "ms-xl-auto",
@@ -324,17 +603,19 @@ function MediaGallery(_ref) {
324
603
  }) : /*#__PURE__*/React.createElement(medias.MediasBrowserContainer, {
325
604
  className: styles.browser,
326
605
  api: mediasApi,
327
- value: value,
606
+ value: finalValue,
328
607
  theme: "dark",
329
608
  types: types,
330
609
  query: finalQuery,
331
610
  multiple: multiple,
332
611
  items: initialMedias,
333
612
  filters: finalFilters,
613
+ fields: fields,
614
+ columns: columns,
334
615
  buttons: buttons,
335
616
  buttonsClassName: "ms-xl-auto",
336
617
  withStickySelection: true
337
- }))))), /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React.createElement(components.UploadModal, {
618
+ }), /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React.createElement(components.UploadModal, {
338
619
  types: types,
339
620
  opened: uploadModalOpened,
340
621
  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.510",
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
  },
@@ -69,12 +74,7 @@
69
74
  "@fortawesome/react-fontawesome": "^0.2.0",
70
75
  "@micromag/core": "^0.3.509",
71
76
  "@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",
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": "6758a559b76df2a0f5912ddad0b88b6bd910a2f5"
91
91
  }