@panneau/medias 3.0.140 → 3.0.142

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,406 @@ 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') ? /*#__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 defaultMetadata = [{
234
+ title: /*#__PURE__*/React.createElement(FormattedMessage, {
235
+ id: "3RT69u",
236
+ defaultMessage: [{
237
+ "type": 0,
238
+ "value": "Informations"
239
+ }]
240
+ }),
241
+ items: [{
242
+ id: 'user',
243
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
244
+ id: "yByaBh",
245
+ defaultMessage: [{
246
+ "type": 0,
247
+ "value": "Added by"
248
+ }]
249
+ }),
250
+ component: 'avatar',
251
+ path: 'user'
252
+ }, {
253
+ id: 'created_at',
254
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
255
+ id: "PN+75e",
256
+ defaultMessage: [{
257
+ "type": 0,
258
+ "value": "Created at"
259
+ }]
260
+ }),
261
+ component: 'date',
262
+ path: 'created_at',
263
+ format: 'yyyy-MM-dd hh:ss'
264
+ }]
265
+ }, {
266
+ title: /*#__PURE__*/React.createElement(FormattedMessage, {
267
+ id: "xKUOLG",
268
+ defaultMessage: [{
269
+ "type": 0,
270
+ "value": "Technical details"
271
+ }]
272
+ }),
273
+ items: [{
274
+ id: 'format',
275
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
276
+ id: "JuxiUN",
277
+ defaultMessage: [{
278
+ "type": 0,
279
+ "value": "Format"
280
+ }]
281
+ }),
282
+ component: 'unit',
283
+ format: 'format',
284
+ path: 'format'
285
+ }, {
286
+ id: 'dimensions',
287
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
288
+ id: "rmJBin",
289
+ defaultMessage: [{
290
+ "type": 0,
291
+ "value": "Dimensions"
292
+ }]
293
+ }),
294
+ component: 'unit',
295
+ format: 'dimensions',
296
+ path: 'metadata'
297
+ }, {
298
+ id: 'size',
299
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
300
+ id: "g2CRt5",
301
+ defaultMessage: [{
302
+ "type": 0,
303
+ "value": "Size"
304
+ }]
305
+ }),
306
+ component: 'unit',
307
+ format: 'bytes',
308
+ path: 'metadata.size'
309
+ }, {
310
+ id: 'duration',
311
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
312
+ id: "wU++NJ",
313
+ defaultMessage: [{
314
+ "type": 0,
315
+ "value": "Duration"
316
+ }]
317
+ }),
318
+ component: 'unit',
319
+ format: 'duration',
320
+ path: 'metadata.duration'
321
+ }]
322
+ }];
323
+
324
+ var _excluded$5 = ["label", "path", "component"];
325
+ var propTypes$6 = {
326
+ value: PropTypes.shape({
327
+ metadata: PropTypes.shape({}),
328
+ user: PropTypes.shape({}),
329
+ createdAt: PropTypes.string
330
+ }),
331
+ sections: PropTypes.arrayOf(PropTypes.shape({
332
+ title: PropTypes.node,
333
+ items: PropTypes.arrayOf(PropTypes.shape({})) // displays
334
+ })),
335
+ className: PropTypes.string
336
+ };
337
+ var defaultProps$6 = {
338
+ value: null,
339
+ sections: defaultMetadata,
340
+ className: null
341
+ };
342
+ function MediaMetadata(_ref) {
343
+ var sections = _ref.sections,
344
+ value = _ref.value,
345
+ className = _ref.className;
346
+ var displayComponents = useDisplaysComponentsManager();
347
+ return /*#__PURE__*/React.createElement("div", {
348
+ className: classNames(['px-2', _defineProperty({}, className, className !== null)])
349
+ }, (sections || []).map(function (_ref3, i) {
350
+ var title = _ref3.title,
351
+ items = _ref3.items;
352
+ return /*#__PURE__*/React.createElement("div", {
353
+ className: "mb-5",
354
+ key: "section-".concat(i + 1)
355
+ }, /*#__PURE__*/React.createElement("h6", {
356
+ className: "px-1"
357
+ }, title), /*#__PURE__*/React.createElement("ul", {
358
+ className: "list-group list-group-flush"
359
+ }, (items || []).map(function (_ref4, index) {
360
+ var label = _ref4.label,
361
+ path = _ref4.path,
362
+ _ref4$component = _ref4.component,
363
+ component = _ref4$component === void 0 ? null : _ref4$component,
364
+ props = _objectWithoutProperties(_ref4, _excluded$5);
365
+ var Component = displayComponents.getComponent(component || 'text');
366
+ var itemValue = get(value, path, null);
367
+ return Component !== null && itemValue !== null ? /*#__PURE__*/React.createElement("li", {
368
+ className: classNames(['row', 'd-flex', 'align-items-center', 'justify-content-between', 'p-1', 'border-secondary-1', 'border-1', 'border-bottom', 'text-small', {
369
+ 'border-top': index === 0
370
+ }]),
371
+ key: "item-".concat(index + 1)
372
+ }, /*#__PURE__*/React.createElement("div", {
373
+ className: "col-auto"
374
+ }, label), /*#__PURE__*/React.createElement("div", {
375
+ className: "col-auto align-right"
376
+ }, /*#__PURE__*/React.createElement(Component, Object.assign({}, props, {
377
+ value: itemValue
378
+ })))) : null;
379
+ })));
380
+ }));
381
+ }
382
+ MediaMetadata.propTypes = propTypes$6;
383
+ MediaMetadata.defaultProps = defaultProps$6;
384
+
385
+ var defaultFields = [
386
+ // { name: 'type', label: 'Type', type: 'string', component: 'text', disabled: true },
387
+ {
388
+ name: 'name',
389
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
390
+ id: "WX83V9",
391
+ defaultMessage: [{
392
+ "type": 0,
393
+ "value": "File name"
394
+ }]
395
+ }),
396
+ type: 'text',
397
+ component: 'text'
398
+ }, {
399
+ name: 'description',
400
+ label: /*#__PURE__*/React.createElement(FormattedMessage, {
401
+ id: "ygNvmz",
402
+ defaultMessage: [{
403
+ "type": 0,
404
+ "value": "Description"
405
+ }]
406
+ }),
407
+ type: 'text',
408
+ component: 'text'
409
+ }
410
+ // {
411
+ // name: 'url',
412
+ // label: <FormattedMessage defaultMessage="URL" description="Field name" />,
413
+ // type: 'text',
414
+ // component: 'url',
415
+ // },
416
+ // {
417
+ // name: 'thumbnail_url',
418
+ // label: <FormattedMessage defaultMessage="Thumbnail URL" description="Field name" />,
419
+ // type: 'text',
420
+ // component: 'url',
421
+ // },
422
+ ];
423
+
424
+ var propTypes$5 = {
425
+ value: PropTypes.shape({
426
+ id: PropTypes.string
427
+ }),
428
+ fields: PropTypes.arrayOf(PropTypes.shape({
429
+ name: PropTypes.string
430
+ })),
431
+ displays: PropTypes.arrayOf(PropTypes.shape({
432
+ name: PropTypes.string
433
+ })),
434
+ onChange: PropTypes.func.isRequired,
435
+ onConfirm: PropTypes.func.isRequired,
436
+ onDelete: PropTypes.func,
437
+ onClose: PropTypes.func,
438
+ className: PropTypes.string
439
+ };
440
+ var defaultProps$5 = {
441
+ value: null,
442
+ fields: defaultFields,
443
+ displays: null,
444
+ onClose: null,
445
+ onDelete: null,
446
+ className: null
447
+ };
448
+ function MediaForm(_ref) {
449
+ var initialValue = _ref.value,
450
+ initialFields = _ref.fields,
451
+ displays = _ref.displays,
452
+ onChange = _ref.onChange,
453
+ onConfirm = _ref.onConfirm;
454
+ _ref.onDelete;
455
+ var onClose = _ref.onClose,
456
+ className = _ref.className;
457
+ var FieldsComponent = useFieldComponent('fields');
458
+ var _useMediaUpdate = useMediaUpdate$1(),
459
+ update = _useMediaUpdate.update,
460
+ updating = _useMediaUpdate.loading;
461
+ var _useMediaDestroy = useMediaDestroy(),
462
+ destroy = _useMediaDestroy.destroy,
463
+ destroying = _useMediaDestroy.loading;
464
+ var _useState = useState(false),
465
+ _useState2 = _slicedToArray(_useState, 2);
466
+ _useState2[0];
467
+ var setChanged = _useState2[1];
468
+ var disabled = updating || destroying || initialValue === null;
469
+ var _ref2 = initialValue || {},
470
+ _ref2$name = _ref2.name,
471
+ name = _ref2$name === void 0 ? null : _ref2$name,
472
+ _ref2$type = _ref2.type,
473
+ type = _ref2$type === void 0 ? null : _ref2$type;
474
+ var onChangeMedia = useCallback(function (newValue) {
475
+ if (onChange !== null) {
476
+ onChange(newValue);
477
+ }
478
+ setChanged(true);
479
+ }, [onChange, setChanged]);
480
+ var onMediaSaved = useCallback(function (newValue) {
481
+ if (onConfirm !== null) {
482
+ onConfirm(newValue);
483
+ }
484
+ setChanged(false);
485
+ }, [onChange, setChanged]);
486
+ var onDeleteMedia = useCallback(function () {
487
+ // Destroy
488
+ if (onClose !== null) {
489
+ onClose();
490
+ }
491
+ setChanged(false);
492
+ }, [destroy, setChanged]);
493
+ var postForm = useCallback(function (action, data) {
494
+ return initialValue !== null ? update(initialValue.id, data) : new Promise();
495
+ }, [initialValue, update]);
496
+ var _useForm = useForm({
497
+ fields: initialFields,
498
+ postForm: postForm,
499
+ onComplete: onMediaSaved,
500
+ value: initialValue,
501
+ setValue: onChange
502
+ }),
503
+ value = _useForm.value,
504
+ setValue = _useForm.setValue,
505
+ fields = _useForm.fields;
506
+ _useForm.onSubmit;
507
+ _useForm.status;
508
+ _useForm.generalError;
509
+ _useForm.errors;
510
+ return /*#__PURE__*/React.createElement("div", {
511
+ className: classNames([className, _defineProperty({}, className, className != null)])
512
+ }, /*#__PURE__*/React.createElement("div", {
513
+ className: "d-flex w-100 justify-content-between mb-2 pb-2 border-bottom"
514
+ }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", {
515
+ className: "d-inline"
516
+ }, name), /*#__PURE__*/React.createElement("span", {
517
+ className: "mx-2"
518
+ }, type)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
519
+ className: "me-2",
520
+ theme: "danger",
521
+ onClick: onDeleteMedia
522
+ }, /*#__PURE__*/React.createElement(FormattedMessage, {
523
+ id: "Bhu3B2",
524
+ defaultMessage: [{
525
+ "type": 0,
526
+ "value": "Delete"
527
+ }]
528
+ })), onConfirm !== null ? /*#__PURE__*/React.createElement(Button, {
529
+ theme: "primary",
530
+ onClick: onConfirm
531
+ }, /*#__PURE__*/React.createElement(FormattedMessage, {
532
+ id: "R1HYj0",
533
+ defaultMessage: [{
534
+ "type": 0,
535
+ "value": "Save"
536
+ }]
537
+ })) : null)), /*#__PURE__*/React.createElement("div", {
538
+ className: "row"
539
+ }, /*#__PURE__*/React.createElement("div", {
540
+ className: "col-md-6"
541
+ }, /*#__PURE__*/React.createElement("div", {
542
+ className: "position-relative w-100",
543
+ style: {
544
+ height: 400
545
+ }
546
+ }, /*#__PURE__*/React.createElement("div", {
547
+ className: styles.mediaFrame
548
+ }, /*#__PURE__*/React.createElement(MediaFrame, {
549
+ value: value
550
+ })))), /*#__PURE__*/React.createElement("div", {
551
+ className: "col-md-6"
552
+ }, /*#__PURE__*/React.createElement(Form, {
553
+ onChange: onChangeMedia,
554
+ withoutActions: true
555
+ }, /*#__PURE__*/React.createElement(FieldsComponent, {
556
+ fields: fields,
557
+ value: value,
558
+ onChange: setValue,
559
+ disabled: disabled
560
+ })), /*#__PURE__*/React.createElement(MediaMetadata, {
561
+ className: "mt-5",
562
+ value: value,
563
+ displays: displays
564
+ }))));
565
+ }
566
+ MediaForm.propTypes = propTypes$5;
567
+ MediaForm.defaultProps = defaultProps$5;
568
+
164
569
  var defaultColumns = [{
165
570
  id: 'image',
166
571
  label: /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -358,8 +763,6 @@ var defaultFilters = [{
358
763
  name: 'search'
359
764
  }];
360
765
 
361
- var styles = {};
362
-
363
766
  var _excluded$4 = ["page", "count"];
364
767
  var propTypes$4 = {
365
768
  items: PropTypes$1.medias,
@@ -367,11 +770,12 @@ var propTypes$4 = {
367
770
  columns: PropTypes$1.tableColumns,
368
771
  query: PropTypes.shape({}),
369
772
  baseUrl: PropTypes.string,
370
- // fields: PanneauPropTypes.fields,
773
+ fields: PropTypes$1.fields,
371
774
  layout: PropTypes.string,
372
775
  layouts: PropTypes.arrayOf(PropTypes.shape({})),
373
776
  theme: PropTypes.string,
374
777
  tableProps: PropTypes.bool,
778
+ onSelectItem: PropTypes.func,
375
779
  onItemsChange: PropTypes.func,
376
780
  selectedCount: PropTypes.number,
377
781
  onClearSelected: PropTypes.func,
@@ -381,7 +785,7 @@ var defaultProps$4 = {
381
785
  items: null,
382
786
  filters: defaultFilters,
383
787
  columns: defaultColumns,
384
- // fields: null,
788
+ fields: defaultFields,
385
789
  query: null,
386
790
  baseUrl: null,
387
791
  layout: 'table',
@@ -398,6 +802,7 @@ var defaultProps$4 = {
398
802
  }],
399
803
  theme: null,
400
804
  tableProps: null,
805
+ onSelectItem: null,
401
806
  onItemsChange: null,
402
807
  selectedCount: null,
403
808
  onClearSelected: null,
@@ -413,6 +818,7 @@ function MediasBrowser(_ref) {
413
818
  layouts = _ref.layouts,
414
819
  theme = _ref.theme,
415
820
  tableProps = _ref.tableProps,
821
+ onSelectItem = _ref.onSelectItem,
416
822
  onItemsChange = _ref.onItemsChange,
417
823
  selectedCount = _ref.selectedCount,
418
824
  onClearSelected = _ref.onClearSelected,
@@ -452,7 +858,9 @@ function MediasBrowser(_ref) {
452
858
  lastPage = _useMedias.lastPage,
453
859
  total = _useMedias.total;
454
860
  useEffect(function () {
455
- onItemsChange(items);
861
+ if (onItemsChange !== null) {
862
+ onItemsChange(items);
863
+ }
456
864
  }, [items, onItemsChange]);
457
865
  var _useState = useState(initialLayout || 'grid'),
458
866
  _useState2 = _slicedToArray(_useState, 2),
@@ -464,6 +872,16 @@ function MediasBrowser(_ref) {
464
872
  var onClickLayout = useCallback(function (lay) {
465
873
  setLayout(lay);
466
874
  }, [setLayout]);
875
+ var _useState3 = useState(null),
876
+ _useState4 = _slicedToArray(_useState3, 2),
877
+ media = _useState4[0],
878
+ setMedia = _useState4[1];
879
+ var onOpenMedia = useCallback(function (currentMedia) {
880
+ setMedia(currentMedia);
881
+ }, [setMedia]);
882
+ var onCloseMedia = useCallback(function () {
883
+ setMedia(null);
884
+ }, [setMedia]);
467
885
  var pagination = /*#__PURE__*/React.createElement(Pagination, {
468
886
  page: page,
469
887
  lastPage: lastPage,
@@ -480,7 +898,23 @@ function MediasBrowser(_ref) {
480
898
  });
481
899
  return /*#__PURE__*/React.createElement("div", {
482
900
  className: classNames([styles.container, className])
483
- }, /*#__PURE__*/React.createElement(Filters, {
901
+ }, media !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
902
+ className: "mt-2 mb-4"
903
+ }, /*#__PURE__*/React.createElement(Button, {
904
+ theme: "primary",
905
+ outline: true,
906
+ onClick: onCloseMedia,
907
+ icon: "arrow-left"
908
+ }, /*#__PURE__*/React.createElement(FormattedMessage, {
909
+ id: "ac4218",
910
+ defaultMessage: [{
911
+ "type": 0,
912
+ "value": "Back to files"
913
+ }]
914
+ }))), /*#__PURE__*/React.createElement(MediaForm, {
915
+ value: media,
916
+ onClose: onCloseMedia
917
+ })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Filters, {
484
918
  value: query,
485
919
  filters: filters,
486
920
  onChange: onQueryChange,
@@ -505,21 +939,29 @@ function MediasBrowser(_ref) {
505
939
  });
506
940
  })
507
941
  }) : null, pagination), layout === 'grid' ? /*#__PURE__*/React.createElement(Grid, Object.assign({}, tableProps, {
942
+ size: "xsmall",
508
943
  items: items || [],
509
944
  component: MediaCard,
510
945
  componentProps: {
511
946
  className: 'd-flex w-100',
512
- cardClassName: 'flex-grow-1'
947
+ cardClassName: 'flex-grow-1',
948
+ vertical: true
949
+ },
950
+ onSelectItem: onSelectItem !== null ? onSelectItem : function (it) {
951
+ return onOpenMedia(it);
513
952
  }
514
- })) : /*#__PURE__*/React.createElement(Table, Object.assign({}, tableProps, {
953
+ })) : null, layout === 'table' ? /*#__PURE__*/React.createElement(Table, Object.assign({}, tableProps, {
515
954
  columns: columns,
516
955
  items: items,
517
956
  displayPlaceholder: /*#__PURE__*/React.createElement("span", {
518
957
  className: "text-secondary text-opacity-75"
519
- }, "\u2014")
520
- })), /*#__PURE__*/React.createElement("div", {
958
+ }, "\u2014"),
959
+ onSelectItem: onSelectItem !== null ? onSelectItem : function (it) {
960
+ return onOpenMedia(it);
961
+ }
962
+ })) : null, /*#__PURE__*/React.createElement("div", {
521
963
  className: classNames(['d-flex', 'mt-3', 'mb-1', 'justify-content-end'])
522
- }, pagination));
964
+ }, pagination)));
523
965
  }
524
966
  MediasBrowser.propTypes = propTypes$4;
525
967
  MediasBrowser.defaultProps = defaultProps$4;
@@ -602,6 +1044,7 @@ function MediasPicker(_ref) {
602
1044
  selectedItems: selectedItems,
603
1045
  pageSelected: pageSelected
604
1046
  },
1047
+ onSelectItem: onSelectItem,
605
1048
  onItemsChange: onItemsChange,
606
1049
  selectedCount: selectedCount,
607
1050
  onClearSelected: onClearSelected
@@ -717,4 +1160,4 @@ function MediasResourceBrowser(_ref) {
717
1160
  MediasResourceBrowser.propTypes = propTypes;
718
1161
  MediasResourceBrowser.defaultProps = defaultProps;
719
1162
 
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 };
1163
+ 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 };
package/lib/index.js CHANGED
@@ -8,8 +8,10 @@ var PropTypes = require('prop-types');
8
8
  var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
9
9
  var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
10
10
  var classNames = require('classnames');
11
+ var reactIntl = require('react-intl');
11
12
  var core = require('@panneau/core');
12
13
  var hooks = require('@panneau/core/hooks');
14
+ var Button = require('@panneau/element-button');
13
15
  var Buttons = require('@panneau/element-buttons');
14
16
  var Grid = require('@panneau/element-grid');
15
17
  var Icon = require('@panneau/element-icon');
@@ -17,10 +19,13 @@ var MediaCard = require('@panneau/element-media-card');
17
19
  var Pagination = require('@panneau/element-pagination');
18
20
  var Table = require('@panneau/element-table');
19
21
  var Filters = require('@panneau/filter-filters');
20
- var reactIntl = require('react-intl');
21
- var data = require('@panneau/data');
22
- var Button = require('@panneau/element-button');
22
+ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
23
23
  var contexts = require('@panneau/core/contexts');
24
+ var Form = require('@panneau/element-form');
25
+ var MediaPlayer = require('@panneau/element-media-player');
26
+ var MediaPreview = require('@panneau/element-media-preview');
27
+ var lodash = require('lodash');
28
+ var data = require('@panneau/data');
24
29
  var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
25
30
 
26
31
  /* eslint-disable react/jsx-props-no-spreading */
@@ -35,11 +40,11 @@ var apiPropTypes = PropTypes.shape({
35
40
  update: PropTypes.func.isRequired,
36
41
  "delete": PropTypes.func.isRequired
37
42
  });
38
- var propTypes$5 = {
43
+ var propTypes$8 = {
39
44
  api: apiPropTypes,
40
45
  children: PropTypes.node.isRequired
41
46
  };
42
- var defaultProps$5 = {
47
+ var defaultProps$8 = {
43
48
  api: null
44
49
  };
45
50
  function MediasApiProvider(_ref) {
@@ -53,10 +58,10 @@ function MediasApiProvider(_ref) {
53
58
  value: api
54
59
  }, children);
55
60
  }
56
- MediasApiProvider.propTypes = propTypes$5;
57
- MediasApiProvider.defaultProps = defaultProps$5;
61
+ MediasApiProvider.propTypes = propTypes$8;
62
+ MediasApiProvider.defaultProps = defaultProps$8;
58
63
 
59
- var _excluded$6 = ["items", "pageItems"];
64
+ var _excluded$7 = ["items", "pageItems"];
60
65
  var useMedias = function useMedias() {
61
66
  var query = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
62
67
  var page = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
@@ -74,7 +79,7 @@ var useMedias = function useMedias() {
74
79
  }, opts)),
75
80
  items = _useItems.items,
76
81
  pageItems = _useItems.pageItems,
77
- request = _objectWithoutProperties(_useItems, _excluded$6);
82
+ request = _objectWithoutProperties(_useItems, _excluded$7);
78
83
  return _objectSpread({
79
84
  medias: page !== null ? pageItems : items,
80
85
  allMedias: items
@@ -110,7 +115,7 @@ var useMediasRecent = function useMediasRecent(opts) {
110
115
  };
111
116
  var useMediasRecent$1 = useMediasRecent;
112
117
 
113
- var _excluded$5 = ["data"];
118
+ var _excluded$6 = ["data"];
114
119
  var useMedia = function useMedia(id, opts) {
115
120
  var api = useMediasApi();
116
121
  var loader = React.useCallback(function () {
@@ -118,7 +123,7 @@ var useMedia = function useMedia(id, opts) {
118
123
  }, [api, id]);
119
124
  var _useData = data.useData(loader, opts),
120
125
  data$1 = _useData.data,
121
- request = _objectWithoutProperties(_useData, _excluded$5);
126
+ request = _objectWithoutProperties(_useData, _excluded$6);
122
127
  return _objectSpread({
123
128
  story: data$1
124
129
  }, request);
@@ -165,6 +170,406 @@ var useMediaUpdate = function useMediaUpdate() {
165
170
  };
166
171
  var useMediaUpdate$1 = useMediaUpdate;
167
172
 
173
+ var useMediaDestroy = function useMediaDestroy() {
174
+ var _useState = React.useState(false),
175
+ _useState2 = _slicedToArray(_useState, 2),
176
+ loading = _useState2[0],
177
+ setLoading = _useState2[1];
178
+ var api = useMediasApi();
179
+ var destroy = React.useCallback(function (id, data) {
180
+ setLoading(true);
181
+ return api["delete"](id, data).then(function (response) {
182
+ setLoading(false);
183
+ return response;
184
+ });
185
+ }, [api, setLoading]);
186
+ return {
187
+ destroy: destroy,
188
+ loading: loading
189
+ };
190
+ };
191
+
192
+ var styles = {"mediaFrame":"panneau-medias-mediaFrame","playButton":"panneau-medias-playButton"};
193
+
194
+ var propTypes$7 = {
195
+ value: PropTypes.shape({
196
+ id: PropTypes.string,
197
+ type: PropTypes.string
198
+ }),
199
+ className: PropTypes.string
200
+ };
201
+ var defaultProps$7 = {
202
+ value: null,
203
+ className: null
204
+ };
205
+ function MediaFrame(_ref) {
206
+ var value = _ref.value,
207
+ className = _ref.className;
208
+ var _useState = React.useState(false),
209
+ _useState2 = _slicedToArray(_useState, 2),
210
+ showPlayer = _useState2[0],
211
+ setShowPlayer = _useState2[1];
212
+ var _ref2 = value || {},
213
+ _ref2$type = _ref2.type,
214
+ type = _ref2$type === void 0 ? null : _ref2$type;
215
+ var onClick = React.useCallback(function () {
216
+ setShowPlayer(!showPlayer);
217
+ }, [showPlayer, setShowPlayer]);
218
+ return /*#__PURE__*/React.createElement("div", {
219
+ className: classNames([className, _defineProperty({}, className, className != null)])
220
+ }, showPlayer ? /*#__PURE__*/React.createElement(MediaPlayer, {
221
+ value: value
222
+ }) : /*#__PURE__*/React.createElement(MediaPreview, {
223
+ value: value,
224
+ width: "100%"
225
+ }), /*#__PURE__*/React.createElement("div", {
226
+ className: styles.playButton
227
+ }, !showPlayer && (type === 'video' || type === 'embed') ? /*#__PURE__*/React.createElement(Button, {
228
+ className: "rounded-circle",
229
+ theme: "secondary",
230
+ onClick: onClick,
231
+ icon: "play-fill"
232
+ }) : null));
233
+ }
234
+ MediaFrame.propTypes = propTypes$7;
235
+ MediaFrame.defaultProps = defaultProps$7;
236
+
237
+ var defaultMetadata = [{
238
+ title: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
239
+ id: "3RT69u",
240
+ defaultMessage: [{
241
+ "type": 0,
242
+ "value": "Informations"
243
+ }]
244
+ }),
245
+ items: [{
246
+ id: 'user',
247
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
248
+ id: "yByaBh",
249
+ defaultMessage: [{
250
+ "type": 0,
251
+ "value": "Added by"
252
+ }]
253
+ }),
254
+ component: 'avatar',
255
+ path: 'user'
256
+ }, {
257
+ id: 'created_at',
258
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
259
+ id: "PN+75e",
260
+ defaultMessage: [{
261
+ "type": 0,
262
+ "value": "Created at"
263
+ }]
264
+ }),
265
+ component: 'date',
266
+ path: 'created_at',
267
+ format: 'yyyy-MM-dd hh:ss'
268
+ }]
269
+ }, {
270
+ title: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
271
+ id: "xKUOLG",
272
+ defaultMessage: [{
273
+ "type": 0,
274
+ "value": "Technical details"
275
+ }]
276
+ }),
277
+ items: [{
278
+ id: 'format',
279
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
280
+ id: "JuxiUN",
281
+ defaultMessage: [{
282
+ "type": 0,
283
+ "value": "Format"
284
+ }]
285
+ }),
286
+ component: 'unit',
287
+ format: 'format',
288
+ path: 'format'
289
+ }, {
290
+ id: 'dimensions',
291
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
292
+ id: "rmJBin",
293
+ defaultMessage: [{
294
+ "type": 0,
295
+ "value": "Dimensions"
296
+ }]
297
+ }),
298
+ component: 'unit',
299
+ format: 'dimensions',
300
+ path: 'metadata'
301
+ }, {
302
+ id: 'size',
303
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
304
+ id: "g2CRt5",
305
+ defaultMessage: [{
306
+ "type": 0,
307
+ "value": "Size"
308
+ }]
309
+ }),
310
+ component: 'unit',
311
+ format: 'bytes',
312
+ path: 'metadata.size'
313
+ }, {
314
+ id: 'duration',
315
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
316
+ id: "wU++NJ",
317
+ defaultMessage: [{
318
+ "type": 0,
319
+ "value": "Duration"
320
+ }]
321
+ }),
322
+ component: 'unit',
323
+ format: 'duration',
324
+ path: 'metadata.duration'
325
+ }]
326
+ }];
327
+
328
+ var _excluded$5 = ["label", "path", "component"];
329
+ var propTypes$6 = {
330
+ value: PropTypes.shape({
331
+ metadata: PropTypes.shape({}),
332
+ user: PropTypes.shape({}),
333
+ createdAt: PropTypes.string
334
+ }),
335
+ sections: PropTypes.arrayOf(PropTypes.shape({
336
+ title: PropTypes.node,
337
+ items: PropTypes.arrayOf(PropTypes.shape({})) // displays
338
+ })),
339
+ className: PropTypes.string
340
+ };
341
+ var defaultProps$6 = {
342
+ value: null,
343
+ sections: defaultMetadata,
344
+ className: null
345
+ };
346
+ function MediaMetadata(_ref) {
347
+ var sections = _ref.sections,
348
+ value = _ref.value,
349
+ className = _ref.className;
350
+ var displayComponents = contexts.useDisplaysComponentsManager();
351
+ return /*#__PURE__*/React.createElement("div", {
352
+ className: classNames(['px-2', _defineProperty({}, className, className !== null)])
353
+ }, (sections || []).map(function (_ref3, i) {
354
+ var title = _ref3.title,
355
+ items = _ref3.items;
356
+ return /*#__PURE__*/React.createElement("div", {
357
+ className: "mb-5",
358
+ key: "section-".concat(i + 1)
359
+ }, /*#__PURE__*/React.createElement("h6", {
360
+ className: "px-1"
361
+ }, title), /*#__PURE__*/React.createElement("ul", {
362
+ className: "list-group list-group-flush"
363
+ }, (items || []).map(function (_ref4, index) {
364
+ var label = _ref4.label,
365
+ path = _ref4.path,
366
+ _ref4$component = _ref4.component,
367
+ component = _ref4$component === void 0 ? null : _ref4$component,
368
+ props = _objectWithoutProperties(_ref4, _excluded$5);
369
+ var Component = displayComponents.getComponent(component || 'text');
370
+ var itemValue = lodash.get(value, path, null);
371
+ return Component !== null && itemValue !== null ? /*#__PURE__*/React.createElement("li", {
372
+ className: classNames(['row', 'd-flex', 'align-items-center', 'justify-content-between', 'p-1', 'border-secondary-1', 'border-1', 'border-bottom', 'text-small', {
373
+ 'border-top': index === 0
374
+ }]),
375
+ key: "item-".concat(index + 1)
376
+ }, /*#__PURE__*/React.createElement("div", {
377
+ className: "col-auto"
378
+ }, label), /*#__PURE__*/React.createElement("div", {
379
+ className: "col-auto align-right"
380
+ }, /*#__PURE__*/React.createElement(Component, Object.assign({}, props, {
381
+ value: itemValue
382
+ })))) : null;
383
+ })));
384
+ }));
385
+ }
386
+ MediaMetadata.propTypes = propTypes$6;
387
+ MediaMetadata.defaultProps = defaultProps$6;
388
+
389
+ var defaultFields = [
390
+ // { name: 'type', label: 'Type', type: 'string', component: 'text', disabled: true },
391
+ {
392
+ name: 'name',
393
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
394
+ id: "WX83V9",
395
+ defaultMessage: [{
396
+ "type": 0,
397
+ "value": "File name"
398
+ }]
399
+ }),
400
+ type: 'text',
401
+ component: 'text'
402
+ }, {
403
+ name: 'description',
404
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
405
+ id: "ygNvmz",
406
+ defaultMessage: [{
407
+ "type": 0,
408
+ "value": "Description"
409
+ }]
410
+ }),
411
+ type: 'text',
412
+ component: 'text'
413
+ }
414
+ // {
415
+ // name: 'url',
416
+ // label: <FormattedMessage defaultMessage="URL" description="Field name" />,
417
+ // type: 'text',
418
+ // component: 'url',
419
+ // },
420
+ // {
421
+ // name: 'thumbnail_url',
422
+ // label: <FormattedMessage defaultMessage="Thumbnail URL" description="Field name" />,
423
+ // type: 'text',
424
+ // component: 'url',
425
+ // },
426
+ ];
427
+
428
+ var propTypes$5 = {
429
+ value: PropTypes.shape({
430
+ id: PropTypes.string
431
+ }),
432
+ fields: PropTypes.arrayOf(PropTypes.shape({
433
+ name: PropTypes.string
434
+ })),
435
+ displays: PropTypes.arrayOf(PropTypes.shape({
436
+ name: PropTypes.string
437
+ })),
438
+ onChange: PropTypes.func.isRequired,
439
+ onConfirm: PropTypes.func.isRequired,
440
+ onDelete: PropTypes.func,
441
+ onClose: PropTypes.func,
442
+ className: PropTypes.string
443
+ };
444
+ var defaultProps$5 = {
445
+ value: null,
446
+ fields: defaultFields,
447
+ displays: null,
448
+ onClose: null,
449
+ onDelete: null,
450
+ className: null
451
+ };
452
+ function MediaForm(_ref) {
453
+ var initialValue = _ref.value,
454
+ initialFields = _ref.fields,
455
+ displays = _ref.displays,
456
+ onChange = _ref.onChange,
457
+ onConfirm = _ref.onConfirm;
458
+ _ref.onDelete;
459
+ var onClose = _ref.onClose,
460
+ className = _ref.className;
461
+ var FieldsComponent = contexts.useFieldComponent('fields');
462
+ var _useMediaUpdate = useMediaUpdate$1(),
463
+ update = _useMediaUpdate.update,
464
+ updating = _useMediaUpdate.loading;
465
+ var _useMediaDestroy = useMediaDestroy(),
466
+ destroy = _useMediaDestroy.destroy,
467
+ destroying = _useMediaDestroy.loading;
468
+ var _useState = React.useState(false),
469
+ _useState2 = _slicedToArray(_useState, 2);
470
+ _useState2[0];
471
+ var setChanged = _useState2[1];
472
+ var disabled = updating || destroying || initialValue === null;
473
+ var _ref2 = initialValue || {},
474
+ _ref2$name = _ref2.name,
475
+ name = _ref2$name === void 0 ? null : _ref2$name,
476
+ _ref2$type = _ref2.type,
477
+ type = _ref2$type === void 0 ? null : _ref2$type;
478
+ var onChangeMedia = React.useCallback(function (newValue) {
479
+ if (onChange !== null) {
480
+ onChange(newValue);
481
+ }
482
+ setChanged(true);
483
+ }, [onChange, setChanged]);
484
+ var onMediaSaved = React.useCallback(function (newValue) {
485
+ if (onConfirm !== null) {
486
+ onConfirm(newValue);
487
+ }
488
+ setChanged(false);
489
+ }, [onChange, setChanged]);
490
+ var onDeleteMedia = React.useCallback(function () {
491
+ // Destroy
492
+ if (onClose !== null) {
493
+ onClose();
494
+ }
495
+ setChanged(false);
496
+ }, [destroy, setChanged]);
497
+ var postForm = React.useCallback(function (action, data) {
498
+ return initialValue !== null ? update(initialValue.id, data) : new Promise();
499
+ }, [initialValue, update]);
500
+ var _useForm = hooks.useForm({
501
+ fields: initialFields,
502
+ postForm: postForm,
503
+ onComplete: onMediaSaved,
504
+ value: initialValue,
505
+ setValue: onChange
506
+ }),
507
+ value = _useForm.value,
508
+ setValue = _useForm.setValue,
509
+ fields = _useForm.fields;
510
+ _useForm.onSubmit;
511
+ _useForm.status;
512
+ _useForm.generalError;
513
+ _useForm.errors;
514
+ return /*#__PURE__*/React.createElement("div", {
515
+ className: classNames([className, _defineProperty({}, className, className != null)])
516
+ }, /*#__PURE__*/React.createElement("div", {
517
+ className: "d-flex w-100 justify-content-between mb-2 pb-2 border-bottom"
518
+ }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", {
519
+ className: "d-inline"
520
+ }, name), /*#__PURE__*/React.createElement("span", {
521
+ className: "mx-2"
522
+ }, type)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
523
+ className: "me-2",
524
+ theme: "danger",
525
+ onClick: onDeleteMedia
526
+ }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
527
+ id: "Bhu3B2",
528
+ defaultMessage: [{
529
+ "type": 0,
530
+ "value": "Delete"
531
+ }]
532
+ })), onConfirm !== null ? /*#__PURE__*/React.createElement(Button, {
533
+ theme: "primary",
534
+ onClick: onConfirm
535
+ }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
536
+ id: "R1HYj0",
537
+ defaultMessage: [{
538
+ "type": 0,
539
+ "value": "Save"
540
+ }]
541
+ })) : null)), /*#__PURE__*/React.createElement("div", {
542
+ className: "row"
543
+ }, /*#__PURE__*/React.createElement("div", {
544
+ className: "col-md-6"
545
+ }, /*#__PURE__*/React.createElement("div", {
546
+ className: "position-relative w-100",
547
+ style: {
548
+ height: 400
549
+ }
550
+ }, /*#__PURE__*/React.createElement("div", {
551
+ className: styles.mediaFrame
552
+ }, /*#__PURE__*/React.createElement(MediaFrame, {
553
+ value: value
554
+ })))), /*#__PURE__*/React.createElement("div", {
555
+ className: "col-md-6"
556
+ }, /*#__PURE__*/React.createElement(Form, {
557
+ onChange: onChangeMedia,
558
+ withoutActions: true
559
+ }, /*#__PURE__*/React.createElement(FieldsComponent, {
560
+ fields: fields,
561
+ value: value,
562
+ onChange: setValue,
563
+ disabled: disabled
564
+ })), /*#__PURE__*/React.createElement(MediaMetadata, {
565
+ className: "mt-5",
566
+ value: value,
567
+ displays: displays
568
+ }))));
569
+ }
570
+ MediaForm.propTypes = propTypes$5;
571
+ MediaForm.defaultProps = defaultProps$5;
572
+
168
573
  var defaultColumns = [{
169
574
  id: 'image',
170
575
  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
@@ -362,8 +767,6 @@ var defaultFilters = [{
362
767
  name: 'search'
363
768
  }];
364
769
 
365
- var styles = {};
366
-
367
770
  var _excluded$4 = ["page", "count"];
368
771
  var propTypes$4 = {
369
772
  items: core.PropTypes.medias,
@@ -371,11 +774,12 @@ var propTypes$4 = {
371
774
  columns: core.PropTypes.tableColumns,
372
775
  query: PropTypes.shape({}),
373
776
  baseUrl: PropTypes.string,
374
- // fields: PanneauPropTypes.fields,
777
+ fields: core.PropTypes.fields,
375
778
  layout: PropTypes.string,
376
779
  layouts: PropTypes.arrayOf(PropTypes.shape({})),
377
780
  theme: PropTypes.string,
378
781
  tableProps: PropTypes.bool,
782
+ onSelectItem: PropTypes.func,
379
783
  onItemsChange: PropTypes.func,
380
784
  selectedCount: PropTypes.number,
381
785
  onClearSelected: PropTypes.func,
@@ -385,7 +789,7 @@ var defaultProps$4 = {
385
789
  items: null,
386
790
  filters: defaultFilters,
387
791
  columns: defaultColumns,
388
- // fields: null,
792
+ fields: defaultFields,
389
793
  query: null,
390
794
  baseUrl: null,
391
795
  layout: 'table',
@@ -402,6 +806,7 @@ var defaultProps$4 = {
402
806
  }],
403
807
  theme: null,
404
808
  tableProps: null,
809
+ onSelectItem: null,
405
810
  onItemsChange: null,
406
811
  selectedCount: null,
407
812
  onClearSelected: null,
@@ -417,6 +822,7 @@ function MediasBrowser(_ref) {
417
822
  layouts = _ref.layouts,
418
823
  theme = _ref.theme,
419
824
  tableProps = _ref.tableProps,
825
+ onSelectItem = _ref.onSelectItem,
420
826
  onItemsChange = _ref.onItemsChange,
421
827
  selectedCount = _ref.selectedCount,
422
828
  onClearSelected = _ref.onClearSelected,
@@ -456,7 +862,9 @@ function MediasBrowser(_ref) {
456
862
  lastPage = _useMedias.lastPage,
457
863
  total = _useMedias.total;
458
864
  React.useEffect(function () {
459
- onItemsChange(items);
865
+ if (onItemsChange !== null) {
866
+ onItemsChange(items);
867
+ }
460
868
  }, [items, onItemsChange]);
461
869
  var _useState = React.useState(initialLayout || 'grid'),
462
870
  _useState2 = _slicedToArray(_useState, 2),
@@ -468,6 +876,16 @@ function MediasBrowser(_ref) {
468
876
  var onClickLayout = React.useCallback(function (lay) {
469
877
  setLayout(lay);
470
878
  }, [setLayout]);
879
+ var _useState3 = React.useState(null),
880
+ _useState4 = _slicedToArray(_useState3, 2),
881
+ media = _useState4[0],
882
+ setMedia = _useState4[1];
883
+ var onOpenMedia = React.useCallback(function (currentMedia) {
884
+ setMedia(currentMedia);
885
+ }, [setMedia]);
886
+ var onCloseMedia = React.useCallback(function () {
887
+ setMedia(null);
888
+ }, [setMedia]);
471
889
  var pagination = /*#__PURE__*/React.createElement(Pagination, {
472
890
  page: page,
473
891
  lastPage: lastPage,
@@ -484,7 +902,23 @@ function MediasBrowser(_ref) {
484
902
  });
485
903
  return /*#__PURE__*/React.createElement("div", {
486
904
  className: classNames([styles.container, className])
487
- }, /*#__PURE__*/React.createElement(Filters, {
905
+ }, media !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
906
+ className: "mt-2 mb-4"
907
+ }, /*#__PURE__*/React.createElement(Button, {
908
+ theme: "primary",
909
+ outline: true,
910
+ onClick: onCloseMedia,
911
+ icon: "arrow-left"
912
+ }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
913
+ id: "ac4218",
914
+ defaultMessage: [{
915
+ "type": 0,
916
+ "value": "Back to files"
917
+ }]
918
+ }))), /*#__PURE__*/React.createElement(MediaForm, {
919
+ value: media,
920
+ onClose: onCloseMedia
921
+ })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Filters, {
488
922
  value: query,
489
923
  filters: filters,
490
924
  onChange: onQueryChange,
@@ -509,21 +943,29 @@ function MediasBrowser(_ref) {
509
943
  });
510
944
  })
511
945
  }) : null, pagination), layout === 'grid' ? /*#__PURE__*/React.createElement(Grid, Object.assign({}, tableProps, {
946
+ size: "xsmall",
512
947
  items: items || [],
513
948
  component: MediaCard,
514
949
  componentProps: {
515
950
  className: 'd-flex w-100',
516
- cardClassName: 'flex-grow-1'
951
+ cardClassName: 'flex-grow-1',
952
+ vertical: true
953
+ },
954
+ onSelectItem: onSelectItem !== null ? onSelectItem : function (it) {
955
+ return onOpenMedia(it);
517
956
  }
518
- })) : /*#__PURE__*/React.createElement(Table, Object.assign({}, tableProps, {
957
+ })) : null, layout === 'table' ? /*#__PURE__*/React.createElement(Table, Object.assign({}, tableProps, {
519
958
  columns: columns,
520
959
  items: items,
521
960
  displayPlaceholder: /*#__PURE__*/React.createElement("span", {
522
961
  className: "text-secondary text-opacity-75"
523
- }, "\u2014")
524
- })), /*#__PURE__*/React.createElement("div", {
962
+ }, "\u2014"),
963
+ onSelectItem: onSelectItem !== null ? onSelectItem : function (it) {
964
+ return onOpenMedia(it);
965
+ }
966
+ })) : null, /*#__PURE__*/React.createElement("div", {
525
967
  className: classNames(['d-flex', 'mt-3', 'mb-1', 'justify-content-end'])
526
- }, pagination));
968
+ }, pagination)));
527
969
  }
528
970
  MediasBrowser.propTypes = propTypes$4;
529
971
  MediasBrowser.defaultProps = defaultProps$4;
@@ -606,6 +1048,7 @@ function MediasPicker(_ref) {
606
1048
  selectedItems: selectedItems,
607
1049
  pageSelected: pageSelected
608
1050
  },
1051
+ onSelectItem: onSelectItem,
609
1052
  onItemsChange: onItemsChange,
610
1053
  selectedCount: selectedCount,
611
1054
  onClearSelected: onClearSelected
@@ -721,6 +1164,7 @@ function MediasResourceBrowser(_ref) {
721
1164
  MediasResourceBrowser.propTypes = propTypes;
722
1165
  MediasResourceBrowser.defaultProps = defaultProps;
723
1166
 
1167
+ exports.MediaForm = MediaForm;
724
1168
  exports.MediasApiProvider = MediasApiProvider;
725
1169
  exports.MediasBrowser = MediasBrowser;
726
1170
  exports.MediasPicker = MediasPicker;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@panneau/medias",
3
- "version": "3.0.140",
3
+ "version": "3.0.142",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -46,16 +46,18 @@
46
46
  },
47
47
  "dependencies": {
48
48
  "@babel/runtime": "^7.12.5",
49
- "@panneau/core": "^3.0.140",
50
- "@panneau/data": "^3.0.140",
51
- "@panneau/element-button": "^3.0.140",
52
- "@panneau/element-buttons": "^3.0.140",
53
- "@panneau/element-grid": "^3.0.140",
54
- "@panneau/element-icon": "^3.0.140",
55
- "@panneau/element-media-card": "^3.0.140",
56
- "@panneau/element-pagination": "^3.0.140",
57
- "@panneau/element-table": "^3.0.140",
58
- "@panneau/filter-filters": "^3.0.140",
49
+ "@panneau/core": "^3.0.142",
50
+ "@panneau/data": "^3.0.142",
51
+ "@panneau/element-button": "^3.0.142",
52
+ "@panneau/element-buttons": "^3.0.142",
53
+ "@panneau/element-grid": "^3.0.142",
54
+ "@panneau/element-icon": "^3.0.142",
55
+ "@panneau/element-media-card": "^3.0.142",
56
+ "@panneau/element-media-player": "^3.0.142",
57
+ "@panneau/element-media-preview": "^3.0.142",
58
+ "@panneau/element-pagination": "^3.0.142",
59
+ "@panneau/element-table": "^3.0.142",
60
+ "@panneau/filter-filters": "^3.0.142",
59
61
  "classnames": "^2.5.1",
60
62
  "lodash": "^4.17.21",
61
63
  "prop-types": "^15.7.2",
@@ -64,5 +66,5 @@
64
66
  "publishConfig": {
65
67
  "access": "public"
66
68
  },
67
- "gitHead": "f148a421cabe2dfa529d2df1eaae42d0f4bb32c5"
69
+ "gitHead": "293308a0e1b7175dcc56128f6dbc1416845d0b15"
68
70
  }