@panneau/medias 3.0.140 → 3.0.143

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.
@@ -0,0 +1 @@
1
+ .panneau-medias-mediaFrame{bottom:0;left:0;position:absolute;right:0;top:0}.panneau-medias-playButton{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
package/es/index.js CHANGED
@@ -4,8 +4,10 @@ import PropTypes from 'prop-types';
4
4
  import _objectSpread from '@babel/runtime/helpers/objectSpread2';
5
5
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
6
6
  import classNames from 'classnames';
7
+ import { FormattedMessage } from 'react-intl';
7
8
  import { PropTypes as PropTypes$1 } from '@panneau/core';
8
- import { useQuery, useItemSelection } from '@panneau/core/hooks';
9
+ import { useForm, useQuery, useItemSelection } from '@panneau/core/hooks';
10
+ import Button from '@panneau/element-button';
9
11
  import Buttons from '@panneau/element-buttons';
10
12
  import Grid from '@panneau/element-grid';
11
13
  import Icon from '@panneau/element-icon';
@@ -13,10 +15,13 @@ import MediaCard from '@panneau/element-media-card';
13
15
  import Pagination from '@panneau/element-pagination';
14
16
  import Table from '@panneau/element-table';
15
17
  import Filters from '@panneau/filter-filters';
16
- import { FormattedMessage } from 'react-intl';
18
+ import _defineProperty from '@babel/runtime/helpers/defineProperty';
19
+ import { useDisplaysComponentsManager, useFieldComponent, usePanneauResource } from '@panneau/core/contexts';
20
+ import Form from '@panneau/element-form';
21
+ import MediaPlayer from '@panneau/element-media-player';
22
+ import MediaPreview from '@panneau/element-media-preview';
23
+ import { get } from 'lodash';
17
24
  import { useItems, useData, useApi } from '@panneau/data';
18
- import Button from '@panneau/element-button';
19
- import { usePanneauResource } from '@panneau/core/contexts';
20
25
  import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
21
26
 
22
27
  /* eslint-disable react/jsx-props-no-spreading */
@@ -31,11 +36,11 @@ var apiPropTypes = PropTypes.shape({
31
36
  update: PropTypes.func.isRequired,
32
37
  "delete": PropTypes.func.isRequired
33
38
  });
34
- var propTypes$5 = {
39
+ var propTypes$8 = {
35
40
  api: apiPropTypes,
36
41
  children: PropTypes.node.isRequired
37
42
  };
38
- var defaultProps$5 = {
43
+ var defaultProps$8 = {
39
44
  api: null
40
45
  };
41
46
  function MediasApiProvider(_ref) {
@@ -49,10 +54,10 @@ function MediasApiProvider(_ref) {
49
54
  value: api
50
55
  }, children);
51
56
  }
52
- MediasApiProvider.propTypes = propTypes$5;
53
- MediasApiProvider.defaultProps = defaultProps$5;
57
+ MediasApiProvider.propTypes = propTypes$8;
58
+ MediasApiProvider.defaultProps = defaultProps$8;
54
59
 
55
- var _excluded$6 = ["items", "pageItems"];
60
+ var _excluded$7 = ["items", "pageItems"];
56
61
  var useMedias = function useMedias() {
57
62
  var query = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
58
63
  var page = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
@@ -70,7 +75,7 @@ var useMedias = function useMedias() {
70
75
  }, opts)),
71
76
  items = _useItems.items,
72
77
  pageItems = _useItems.pageItems,
73
- request = _objectWithoutProperties(_useItems, _excluded$6);
78
+ request = _objectWithoutProperties(_useItems, _excluded$7);
74
79
  return _objectSpread({
75
80
  medias: page !== null ? pageItems : items,
76
81
  allMedias: items
@@ -106,7 +111,7 @@ var useMediasRecent = function useMediasRecent(opts) {
106
111
  };
107
112
  var useMediasRecent$1 = useMediasRecent;
108
113
 
109
- var _excluded$5 = ["data"];
114
+ var _excluded$6 = ["data"];
110
115
  var useMedia = function useMedia(id, opts) {
111
116
  var api = useMediasApi();
112
117
  var loader = useCallback(function () {
@@ -114,7 +119,7 @@ var useMedia = function useMedia(id, opts) {
114
119
  }, [api, id]);
115
120
  var _useData = useData(loader, opts),
116
121
  data = _useData.data,
117
- request = _objectWithoutProperties(_useData, _excluded$5);
122
+ request = _objectWithoutProperties(_useData, _excluded$6);
118
123
  return _objectSpread({
119
124
  story: data
120
125
  }, request);
@@ -161,6 +166,456 @@ var useMediaUpdate = function useMediaUpdate() {
161
166
  };
162
167
  var useMediaUpdate$1 = useMediaUpdate;
163
168
 
169
+ var useMediaDestroy = function useMediaDestroy() {
170
+ var _useState = useState(false),
171
+ _useState2 = _slicedToArray(_useState, 2),
172
+ loading = _useState2[0],
173
+ setLoading = _useState2[1];
174
+ var api = useMediasApi();
175
+ var destroy = useCallback(function (id, data) {
176
+ setLoading(true);
177
+ return api["delete"](id, data).then(function (response) {
178
+ setLoading(false);
179
+ return response;
180
+ });
181
+ }, [api, setLoading]);
182
+ return {
183
+ destroy: destroy,
184
+ loading: loading
185
+ };
186
+ };
187
+
188
+ var styles = {"mediaFrame":"panneau-medias-mediaFrame","playButton":"panneau-medias-playButton"};
189
+
190
+ var propTypes$7 = {
191
+ value: PropTypes.shape({
192
+ id: PropTypes.string,
193
+ type: PropTypes.string
194
+ }),
195
+ className: PropTypes.string
196
+ };
197
+ var defaultProps$7 = {
198
+ value: null,
199
+ className: null
200
+ };
201
+ function MediaFrame(_ref) {
202
+ var value = _ref.value,
203
+ className = _ref.className;
204
+ var _useState = useState(false),
205
+ _useState2 = _slicedToArray(_useState, 2),
206
+ showPlayer = _useState2[0],
207
+ setShowPlayer = _useState2[1];
208
+ var _ref2 = value || {},
209
+ _ref2$type = _ref2.type,
210
+ type = _ref2$type === void 0 ? null : _ref2$type;
211
+ var onClick = useCallback(function () {
212
+ setShowPlayer(!showPlayer);
213
+ }, [showPlayer, setShowPlayer]);
214
+ return /*#__PURE__*/React.createElement("div", {
215
+ className: classNames([className, _defineProperty({}, className, className != null)])
216
+ }, showPlayer ? /*#__PURE__*/React.createElement(MediaPlayer, {
217
+ value: value
218
+ }) : /*#__PURE__*/React.createElement(MediaPreview, {
219
+ value: value,
220
+ width: "100%"
221
+ }), /*#__PURE__*/React.createElement("div", {
222
+ className: styles.playButton
223
+ }, !showPlayer && (type === 'video' || type === 'embed' || type === 'audio') ? /*#__PURE__*/React.createElement(Button, {
224
+ className: "rounded-circle",
225
+ theme: "secondary",
226
+ onClick: onClick,
227
+ icon: "play-fill"
228
+ }) : null));
229
+ }
230
+ MediaFrame.propTypes = propTypes$7;
231
+ MediaFrame.defaultProps = defaultProps$7;
232
+
233
+ var _excluded$5 = ["label", "path", "component"];
234
+ var propTypes$6 = {
235
+ value: PropTypes.shape({
236
+ metadata: PropTypes.shape({}),
237
+ user: PropTypes.shape({}),
238
+ createdAt: PropTypes.string
239
+ }),
240
+ sections: PropTypes.arrayOf(PropTypes.shape({
241
+ title: PropTypes.node,
242
+ items: PropTypes.arrayOf(PropTypes.shape({})) // displays
243
+ })),
244
+ displays: PropTypes.arrayOf(PropTypes.shape({
245
+ section: PropTypes.string
246
+ })),
247
+ className: PropTypes.string
248
+ };
249
+ var defaultProps$6 = {
250
+ value: null,
251
+ sections: null,
252
+ displays: null,
253
+ className: null
254
+ };
255
+ function MediaMetadata(_ref) {
256
+ var sections = _ref.sections,
257
+ displays = _ref.displays,
258
+ value = _ref.value,
259
+ className = _ref.className;
260
+ var displayComponents = useDisplaysComponentsManager();
261
+ var finalSections = useMemo(function () {
262
+ var displaysWithoutSection = (displays || []).filter(function (_ref2) {
263
+ var _ref2$section = _ref2.section,
264
+ section = _ref2$section === void 0 ? null : _ref2$section;
265
+ return section === null;
266
+ });
267
+ return (sections || []).map(function (_ref3) {
268
+ var _ref3$id = _ref3.id,
269
+ id = _ref3$id === void 0 ? null : _ref3$id,
270
+ _ref3$title = _ref3.title,
271
+ title = _ref3$title === void 0 ? null : _ref3$title;
272
+ return {
273
+ id: id,
274
+ title: title,
275
+ items: (displays || []).filter(function (_ref4) {
276
+ var _ref4$section = _ref4.section,
277
+ section = _ref4$section === void 0 ? null : _ref4$section;
278
+ return section === id;
279
+ })
280
+ };
281
+ }).concat({
282
+ title: null,
283
+ items: displaysWithoutSection
284
+ });
285
+ }, [sections, displays]);
286
+ return /*#__PURE__*/React.createElement("div", {
287
+ className: classNames(['px-2', _defineProperty({}, className, className !== null)])
288
+ }, (finalSections || []).map(function (_ref6, i) {
289
+ var _ref6$title = _ref6.title,
290
+ title = _ref6$title === void 0 ? null : _ref6$title,
291
+ _ref6$items = _ref6.items,
292
+ items = _ref6$items === void 0 ? [] : _ref6$items;
293
+ return /*#__PURE__*/React.createElement("div", {
294
+ className: "mb-5",
295
+ key: "section-".concat(i + 1)
296
+ }, title !== null ? /*#__PURE__*/React.createElement("h6", {
297
+ className: "px-1"
298
+ }, title) : null, /*#__PURE__*/React.createElement("ul", {
299
+ className: "list-group list-group-flush"
300
+ }, (items || []).map(function (_ref7, index) {
301
+ var label = _ref7.label,
302
+ path = _ref7.path,
303
+ _ref7$component = _ref7.component,
304
+ component = _ref7$component === void 0 ? null : _ref7$component,
305
+ props = _objectWithoutProperties(_ref7, _excluded$5);
306
+ var Component = displayComponents.getComponent(component || 'text');
307
+ var itemValue = get(value, path, null);
308
+ return Component !== null && itemValue !== null ? /*#__PURE__*/React.createElement("li", {
309
+ className: classNames(['row', 'd-flex', 'align-items-center', 'justify-content-between', 'p-1', 'border-secondary-1', 'border-1', 'border-bottom', 'text-small', {
310
+ 'border-top': index === 0
311
+ }]),
312
+ key: "item-".concat(index + 1)
313
+ }, /*#__PURE__*/React.createElement("div", {
314
+ className: "col-auto"
315
+ }, label), /*#__PURE__*/React.createElement("div", {
316
+ className: "col-auto align-right"
317
+ }, /*#__PURE__*/React.createElement(Component, Object.assign({}, props, {
318
+ value: itemValue
319
+ })))) : null;
320
+ })));
321
+ }));
322
+ }
323
+ MediaMetadata.propTypes = propTypes$6;
324
+ MediaMetadata.defaultProps = defaultProps$6;
325
+
326
+ var defaultFields = [
327
+ // { name: 'type', label: 'Type', type: 'string', component: 'text', disabled: true },
328
+ {
329
+ name: 'name',
330
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
331
+ id: "WX83V9",
332
+ defaultMessage: [{
333
+ "type": 0,
334
+ "value": "File name"
335
+ }]
336
+ }),
337
+ type: 'text',
338
+ component: 'text'
339
+ }, {
340
+ name: 'description',
341
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
342
+ id: "ygNvmz",
343
+ defaultMessage: [{
344
+ "type": 0,
345
+ "value": "Description"
346
+ }]
347
+ }),
348
+ type: 'text',
349
+ component: 'text'
350
+ }
351
+ // {
352
+ // name: 'url',
353
+ // label: <FormattedMessage defaultMessage="URL" description="Field name" />,
354
+ // type: 'text',
355
+ // component: 'url',
356
+ // },
357
+ // {
358
+ // name: 'thumbnail_url',
359
+ // label: <FormattedMessage defaultMessage="Thumbnail URL" description="Field name" />,
360
+ // type: 'text',
361
+ // component: 'url',
362
+ // },
363
+ ];
364
+
365
+ var defaultDisplays = [{
366
+ id: 'user',
367
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
368
+ id: "yByaBh",
369
+ defaultMessage: [{
370
+ "type": 0,
371
+ "value": "Added by"
372
+ }]
373
+ }),
374
+ component: 'avatar',
375
+ path: 'user',
376
+ section: 'info'
377
+ }, {
378
+ id: 'created_at',
379
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
380
+ id: "PN+75e",
381
+ defaultMessage: [{
382
+ "type": 0,
383
+ "value": "Created at"
384
+ }]
385
+ }),
386
+ component: 'date',
387
+ path: 'created_at',
388
+ format: 'yyyy-MM-dd hh:ss',
389
+ section: 'info'
390
+ }, {
391
+ id: 'format',
392
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
393
+ id: "JuxiUN",
394
+ defaultMessage: [{
395
+ "type": 0,
396
+ "value": "Format"
397
+ }]
398
+ }),
399
+ component: 'unit',
400
+ format: 'format',
401
+ path: 'format',
402
+ section: 'technical'
403
+ }, {
404
+ id: 'dimensions',
405
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
406
+ id: "rmJBin",
407
+ defaultMessage: [{
408
+ "type": 0,
409
+ "value": "Dimensions"
410
+ }]
411
+ }),
412
+ component: 'unit',
413
+ format: 'dimensions',
414
+ path: 'metadata',
415
+ section: 'technical'
416
+ }, {
417
+ id: 'size',
418
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
419
+ id: "g2CRt5",
420
+ defaultMessage: [{
421
+ "type": 0,
422
+ "value": "Size"
423
+ }]
424
+ }),
425
+ component: 'unit',
426
+ format: 'bytes',
427
+ path: 'metadata.size',
428
+ section: 'technical'
429
+ }, {
430
+ id: 'duration',
431
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
432
+ id: "wU++NJ",
433
+ defaultMessage: [{
434
+ "type": 0,
435
+ "value": "Duration"
436
+ }]
437
+ }),
438
+ component: 'unit',
439
+ format: 'duration',
440
+ path: 'metadata.duration',
441
+ section: 'technical'
442
+ }];
443
+
444
+ var defaultSections = [{
445
+ id: 'info',
446
+ title: /*#__PURE__*/React.createElement(FormattedMessage, {
447
+ id: "3RT69u",
448
+ defaultMessage: [{
449
+ "type": 0,
450
+ "value": "Informations"
451
+ }]
452
+ })
453
+ }, {
454
+ id: 'technical',
455
+ title: /*#__PURE__*/React.createElement(FormattedMessage, {
456
+ id: "xKUOLG",
457
+ defaultMessage: [{
458
+ "type": 0,
459
+ "value": "Technical details"
460
+ }]
461
+ })
462
+ }];
463
+
464
+ var propTypes$5 = {
465
+ value: PropTypes.shape({
466
+ id: PropTypes.string
467
+ }),
468
+ fields: PropTypes.arrayOf(PropTypes.shape({
469
+ name: PropTypes.string
470
+ })),
471
+ sections: PropTypes.arrayOf(PropTypes.shape({
472
+ id: PropTypes.string,
473
+ title: PropTypes.string
474
+ })),
475
+ displays: PropTypes.arrayOf(PropTypes.shape({
476
+ name: PropTypes.string
477
+ })),
478
+ onChange: PropTypes.func.isRequired,
479
+ onConfirm: PropTypes.func.isRequired,
480
+ onDelete: PropTypes.func,
481
+ onClose: PropTypes.func,
482
+ className: PropTypes.string
483
+ };
484
+ var defaultProps$5 = {
485
+ value: null,
486
+ fields: defaultFields,
487
+ sections: defaultSections,
488
+ displays: defaultDisplays,
489
+ onClose: null,
490
+ onDelete: null,
491
+ className: null
492
+ };
493
+ function MediaForm(_ref) {
494
+ var initialValue = _ref.value,
495
+ initialFields = _ref.fields,
496
+ sections = _ref.sections,
497
+ displays = _ref.displays,
498
+ onChange = _ref.onChange,
499
+ onConfirm = _ref.onConfirm,
500
+ onDelete = _ref.onDelete,
501
+ onClose = _ref.onClose,
502
+ className = _ref.className;
503
+ var FieldsComponent = useFieldComponent('fields');
504
+ var _useMediaUpdate = useMediaUpdate$1(),
505
+ update = _useMediaUpdate.update,
506
+ updating = _useMediaUpdate.loading;
507
+ var _useMediaDestroy = useMediaDestroy(),
508
+ destroy = _useMediaDestroy.destroy,
509
+ destroying = _useMediaDestroy.loading;
510
+ var _useState = useState(false),
511
+ _useState2 = _slicedToArray(_useState, 2);
512
+ _useState2[0];
513
+ var setChanged = _useState2[1];
514
+ var disabled = updating || destroying || initialValue === null;
515
+ var _ref2 = initialValue || {},
516
+ _ref2$name = _ref2.name,
517
+ name = _ref2$name === void 0 ? null : _ref2$name,
518
+ _ref2$type = _ref2.type,
519
+ type = _ref2$type === void 0 ? null : _ref2$type;
520
+ var onChangeMedia = useCallback(function (newValue) {
521
+ if (onChange !== null) {
522
+ onChange(newValue);
523
+ }
524
+ setChanged(true);
525
+ }, [onChange, setChanged]);
526
+ var onMediaSaved = useCallback(function (newValue) {
527
+ if (onConfirm !== null) {
528
+ onConfirm(newValue);
529
+ }
530
+ setChanged(false);
531
+ }, [onChange, setChanged]);
532
+ var onDeleteMedia = useCallback(function () {
533
+ // Destroy
534
+ if (onClose !== null) {
535
+ onClose();
536
+ }
537
+ if (onDelete !== null) {
538
+ onDelete();
539
+ }
540
+ setChanged(false);
541
+ }, [destroy, setChanged]);
542
+ var postForm = useCallback(function (action, data) {
543
+ return initialValue !== null ? update(initialValue.id, data) : new Promise();
544
+ }, [initialValue, update]);
545
+ var _useForm = useForm({
546
+ fields: initialFields,
547
+ postForm: postForm,
548
+ onComplete: onMediaSaved,
549
+ value: initialValue,
550
+ setValue: onChange
551
+ }),
552
+ value = _useForm.value,
553
+ setValue = _useForm.setValue,
554
+ fields = _useForm.fields;
555
+ _useForm.onSubmit;
556
+ _useForm.status;
557
+ _useForm.generalError;
558
+ _useForm.errors;
559
+ return /*#__PURE__*/React.createElement("div", {
560
+ className: classNames(['text-body', _defineProperty({}, className, className !== null)])
561
+ }, /*#__PURE__*/React.createElement("div", {
562
+ className: "d-flex w-100 justify-content-between mb-2 pb-2 border-bottom"
563
+ }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", {
564
+ className: "d-inline"
565
+ }, name), /*#__PURE__*/React.createElement("span", {
566
+ className: "mx-2"
567
+ }, type)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
568
+ className: "me-2",
569
+ theme: "danger",
570
+ onClick: onDeleteMedia
571
+ }, /*#__PURE__*/React.createElement(FormattedMessage, {
572
+ id: "Bhu3B2",
573
+ defaultMessage: [{
574
+ "type": 0,
575
+ "value": "Delete"
576
+ }]
577
+ })), onConfirm !== null ? /*#__PURE__*/React.createElement(Button, {
578
+ theme: "primary",
579
+ onClick: onConfirm
580
+ }, /*#__PURE__*/React.createElement(FormattedMessage, {
581
+ id: "R1HYj0",
582
+ defaultMessage: [{
583
+ "type": 0,
584
+ "value": "Save"
585
+ }]
586
+ })) : null)), /*#__PURE__*/React.createElement("div", {
587
+ className: "row"
588
+ }, /*#__PURE__*/React.createElement("div", {
589
+ className: "col-md-6"
590
+ }, /*#__PURE__*/React.createElement("div", {
591
+ className: "position-relative w-100",
592
+ style: {
593
+ height: 400
594
+ }
595
+ }, /*#__PURE__*/React.createElement("div", {
596
+ className: styles.mediaFrame
597
+ }, /*#__PURE__*/React.createElement(MediaFrame, {
598
+ value: value
599
+ })))), /*#__PURE__*/React.createElement("div", {
600
+ className: "col-md-6"
601
+ }, /*#__PURE__*/React.createElement(Form, {
602
+ onChange: onChangeMedia,
603
+ withoutActions: true
604
+ }, /*#__PURE__*/React.createElement(FieldsComponent, {
605
+ fields: fields,
606
+ value: value,
607
+ onChange: setValue,
608
+ disabled: disabled
609
+ })), /*#__PURE__*/React.createElement(MediaMetadata, {
610
+ className: "mt-5",
611
+ value: value,
612
+ sections: sections,
613
+ displays: displays
614
+ }))));
615
+ }
616
+ MediaForm.propTypes = propTypes$5;
617
+ MediaForm.defaultProps = defaultProps$5;
618
+
164
619
  var defaultColumns = [{
165
620
  id: 'image',
166
621
  label: /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -358,20 +813,20 @@ var defaultFilters = [{
358
813
  name: 'search'
359
814
  }];
360
815
 
361
- var styles = {};
362
-
363
816
  var _excluded$4 = ["page", "count"];
364
817
  var propTypes$4 = {
365
818
  items: PropTypes$1.medias,
819
+ buttons: PropTypes$1.buttons,
366
820
  filters: PropTypes$1.filters,
367
821
  columns: PropTypes$1.tableColumns,
368
822
  query: PropTypes.shape({}),
369
823
  baseUrl: PropTypes.string,
370
- // fields: PanneauPropTypes.fields,
824
+ fields: PropTypes$1.fields,
371
825
  layout: PropTypes.string,
372
826
  layouts: PropTypes.arrayOf(PropTypes.shape({})),
373
827
  theme: PropTypes.string,
374
828
  tableProps: PropTypes.bool,
829
+ onSelectItem: PropTypes.func,
375
830
  onItemsChange: PropTypes.func,
376
831
  selectedCount: PropTypes.number,
377
832
  onClearSelected: PropTypes.func,
@@ -379,9 +834,10 @@ var propTypes$4 = {
379
834
  };
380
835
  var defaultProps$4 = {
381
836
  items: null,
837
+ buttons: null,
382
838
  filters: defaultFilters,
383
839
  columns: defaultColumns,
384
- // fields: null,
840
+ fields: defaultFields,
385
841
  query: null,
386
842
  baseUrl: null,
387
843
  layout: 'table',
@@ -398,6 +854,7 @@ var defaultProps$4 = {
398
854
  }],
399
855
  theme: null,
400
856
  tableProps: null,
857
+ onSelectItem: null,
401
858
  onItemsChange: null,
402
859
  selectedCount: null,
403
860
  onClearSelected: null,
@@ -406,6 +863,7 @@ var defaultProps$4 = {
406
863
  function MediasBrowser(_ref) {
407
864
  var initialItems = _ref.items,
408
865
  baseUrl = _ref.baseUrl,
866
+ buttons = _ref.buttons,
409
867
  filters = _ref.filters,
410
868
  columns = _ref.columns,
411
869
  initialQuery = _ref.query,
@@ -413,6 +871,7 @@ function MediasBrowser(_ref) {
413
871
  layouts = _ref.layouts,
414
872
  theme = _ref.theme,
415
873
  tableProps = _ref.tableProps,
874
+ onSelectItem = _ref.onSelectItem,
416
875
  onItemsChange = _ref.onItemsChange,
417
876
  selectedCount = _ref.selectedCount,
418
877
  onClearSelected = _ref.onClearSelected,
@@ -452,7 +911,9 @@ function MediasBrowser(_ref) {
452
911
  lastPage = _useMedias.lastPage,
453
912
  total = _useMedias.total;
454
913
  useEffect(function () {
455
- onItemsChange(items);
914
+ if (onItemsChange !== null) {
915
+ onItemsChange(items);
916
+ }
456
917
  }, [items, onItemsChange]);
457
918
  var _useState = useState(initialLayout || 'grid'),
458
919
  _useState2 = _slicedToArray(_useState, 2),
@@ -464,6 +925,16 @@ function MediasBrowser(_ref) {
464
925
  var onClickLayout = useCallback(function (lay) {
465
926
  setLayout(lay);
466
927
  }, [setLayout]);
928
+ var _useState3 = useState(null),
929
+ _useState4 = _slicedToArray(_useState3, 2),
930
+ media = _useState4[0],
931
+ setMedia = _useState4[1];
932
+ var onOpenMedia = useCallback(function (currentMedia) {
933
+ setMedia(currentMedia);
934
+ }, [setMedia]);
935
+ var onCloseMedia = useCallback(function () {
936
+ setMedia(null);
937
+ }, [setMedia]);
467
938
  var pagination = /*#__PURE__*/React.createElement(Pagination, {
468
939
  page: page,
469
940
  lastPage: lastPage,
@@ -480,13 +951,32 @@ function MediasBrowser(_ref) {
480
951
  });
481
952
  return /*#__PURE__*/React.createElement("div", {
482
953
  className: classNames([styles.container, className])
483
- }, /*#__PURE__*/React.createElement(Filters, {
954
+ }, media !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
955
+ className: "mt-2 mb-4"
956
+ }, /*#__PURE__*/React.createElement(Button, {
957
+ theme: "primary",
958
+ outline: true,
959
+ onClick: onCloseMedia,
960
+ icon: "arrow-left"
961
+ }, /*#__PURE__*/React.createElement(FormattedMessage, {
962
+ id: "ac4218",
963
+ defaultMessage: [{
964
+ "type": 0,
965
+ "value": "Back to files"
966
+ }]
967
+ }))), /*#__PURE__*/React.createElement(MediaForm, {
968
+ value: media,
969
+ onClose: onCloseMedia
970
+ })) : /*#__PURE__*/React.createElement(React.Fragment, null, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
971
+ items: buttons,
972
+ className: "mb-2"
973
+ }) : null, filters !== null ? /*#__PURE__*/React.createElement(Filters, {
484
974
  value: query,
485
975
  filters: filters,
486
976
  onChange: onQueryChange,
487
977
  onReset: onQueryReset,
488
978
  theme: theme
489
- }), /*#__PURE__*/React.createElement("div", {
979
+ }) : null, /*#__PURE__*/React.createElement("div", {
490
980
  className: classNames(['d-flex', 'mt-1', 'mb-3', {
491
981
  'justify-content-between': hasLayouts,
492
982
  'justify-content-end': !hasLayouts
@@ -505,21 +995,29 @@ function MediasBrowser(_ref) {
505
995
  });
506
996
  })
507
997
  }) : null, pagination), layout === 'grid' ? /*#__PURE__*/React.createElement(Grid, Object.assign({}, tableProps, {
998
+ size: "xsmall",
508
999
  items: items || [],
509
1000
  component: MediaCard,
510
1001
  componentProps: {
511
1002
  className: 'd-flex w-100',
512
- cardClassName: 'flex-grow-1'
1003
+ cardClassName: 'flex-grow-1',
1004
+ vertical: true
1005
+ },
1006
+ onSelectItem: onSelectItem !== null ? onSelectItem : function (it) {
1007
+ return onOpenMedia(it);
513
1008
  }
514
- })) : /*#__PURE__*/React.createElement(Table, Object.assign({}, tableProps, {
1009
+ })) : null, layout === 'table' ? /*#__PURE__*/React.createElement(Table, Object.assign({}, tableProps, {
515
1010
  columns: columns,
516
1011
  items: items,
517
1012
  displayPlaceholder: /*#__PURE__*/React.createElement("span", {
518
1013
  className: "text-secondary text-opacity-75"
519
- }, "\u2014")
520
- })), /*#__PURE__*/React.createElement("div", {
1014
+ }, "\u2014"),
1015
+ onSelectItem: onSelectItem !== null ? onSelectItem : function (it) {
1016
+ return onOpenMedia(it);
1017
+ }
1018
+ })) : null, /*#__PURE__*/React.createElement("div", {
521
1019
  className: classNames(['d-flex', 'mt-3', 'mb-1', 'justify-content-end'])
522
- }, pagination));
1020
+ }, pagination)));
523
1021
  }
524
1022
  MediasBrowser.propTypes = propTypes$4;
525
1023
  MediasBrowser.defaultProps = defaultProps$4;
@@ -602,6 +1100,7 @@ function MediasPicker(_ref) {
602
1100
  selectedItems: selectedItems,
603
1101
  pageSelected: pageSelected
604
1102
  },
1103
+ onSelectItem: onSelectItem,
605
1104
  onItemsChange: onItemsChange,
606
1105
  selectedCount: selectedCount,
607
1106
  onClearSelected: onClearSelected
@@ -717,4 +1216,4 @@ function MediasResourceBrowser(_ref) {
717
1216
  MediasResourceBrowser.propTypes = propTypes;
718
1217
  MediasResourceBrowser.defaultProps = defaultProps;
719
1218
 
720
- export { MediasApiProvider, MediasBrowser, MediasPicker, MediasPickerContainer, MediasResourceBrowser, apiPropTypes, MediasBrowserContainer as default, useMedia$1 as useMedia, useMediaCreate$1 as useMediaCreate, useMediaUpdate$1 as useMediaUpdate, useMedias$1 as useMedias, useMediasApi, useMediasRecent$1 as useMediasRecentSearches };
1219
+ export { MediaForm, MediasApiProvider, MediasBrowser, MediasPicker, MediasPickerContainer, MediasResourceBrowser, apiPropTypes, MediasBrowserContainer as default, useMedia$1 as useMedia, useMediaCreate$1 as useMediaCreate, useMediaUpdate$1 as useMediaUpdate, useMedias$1 as useMedias, useMediasApi, useMediasRecent$1 as useMediasRecentSearches };