@panneau/medias 3.0.142 → 3.0.144

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 +167 -111
  2. package/lib/index.js +167 -111
  3. package/package.json +13 -12
package/es/index.js CHANGED
@@ -220,7 +220,7 @@ function MediaFrame(_ref) {
220
220
  width: "100%"
221
221
  }), /*#__PURE__*/React.createElement("div", {
222
222
  className: styles.playButton
223
- }, !showPlayer && (type === 'video' || type === 'embed') ? /*#__PURE__*/React.createElement(Button, {
223
+ }, !showPlayer && (type === 'video' || type === 'embed' || type === 'audio') ? /*#__PURE__*/React.createElement(Button, {
224
224
  className: "rounded-circle",
225
225
  theme: "secondary",
226
226
  onClick: onClick,
@@ -230,97 +230,6 @@ function MediaFrame(_ref) {
230
230
  MediaFrame.propTypes = propTypes$7;
231
231
  MediaFrame.defaultProps = defaultProps$7;
232
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
233
  var _excluded$5 = ["label", "path", "component"];
325
234
  var propTypes$6 = {
326
235
  value: PropTypes.shape({
@@ -332,36 +241,68 @@ var propTypes$6 = {
332
241
  title: PropTypes.node,
333
242
  items: PropTypes.arrayOf(PropTypes.shape({})) // displays
334
243
  })),
244
+ displays: PropTypes.arrayOf(PropTypes.shape({
245
+ section: PropTypes.string
246
+ })),
335
247
  className: PropTypes.string
336
248
  };
337
249
  var defaultProps$6 = {
338
250
  value: null,
339
- sections: defaultMetadata,
251
+ sections: null,
252
+ displays: null,
340
253
  className: null
341
254
  };
342
255
  function MediaMetadata(_ref) {
343
256
  var sections = _ref.sections,
257
+ displays = _ref.displays,
344
258
  value = _ref.value,
345
259
  className = _ref.className;
346
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]);
347
286
  return /*#__PURE__*/React.createElement("div", {
348
287
  className: classNames(['px-2', _defineProperty({}, className, className !== null)])
349
- }, (sections || []).map(function (_ref3, i) {
350
- var title = _ref3.title,
351
- items = _ref3.items;
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;
352
293
  return /*#__PURE__*/React.createElement("div", {
353
294
  className: "mb-5",
354
295
  key: "section-".concat(i + 1)
355
- }, /*#__PURE__*/React.createElement("h6", {
296
+ }, title !== null ? /*#__PURE__*/React.createElement("h6", {
356
297
  className: "px-1"
357
- }, title), /*#__PURE__*/React.createElement("ul", {
298
+ }, title) : null, /*#__PURE__*/React.createElement("ul", {
358
299
  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);
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);
365
306
  var Component = displayComponents.getComponent(component || 'text');
366
307
  var itemValue = get(value, path, null);
367
308
  return Component !== null && itemValue !== null ? /*#__PURE__*/React.createElement("li", {
@@ -421,6 +362,105 @@ var defaultFields = [
421
362
  // },
422
363
  ];
423
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
+
424
464
  var propTypes$5 = {
425
465
  value: PropTypes.shape({
426
466
  id: PropTypes.string
@@ -428,6 +468,10 @@ var propTypes$5 = {
428
468
  fields: PropTypes.arrayOf(PropTypes.shape({
429
469
  name: PropTypes.string
430
470
  })),
471
+ sections: PropTypes.arrayOf(PropTypes.shape({
472
+ id: PropTypes.string,
473
+ title: PropTypes.string
474
+ })),
431
475
  displays: PropTypes.arrayOf(PropTypes.shape({
432
476
  name: PropTypes.string
433
477
  })),
@@ -440,7 +484,8 @@ var propTypes$5 = {
440
484
  var defaultProps$5 = {
441
485
  value: null,
442
486
  fields: defaultFields,
443
- displays: null,
487
+ sections: defaultSections,
488
+ displays: defaultDisplays,
444
489
  onClose: null,
445
490
  onDelete: null,
446
491
  className: null
@@ -448,11 +493,12 @@ var defaultProps$5 = {
448
493
  function MediaForm(_ref) {
449
494
  var initialValue = _ref.value,
450
495
  initialFields = _ref.fields,
496
+ sections = _ref.sections,
451
497
  displays = _ref.displays,
452
498
  onChange = _ref.onChange,
453
- onConfirm = _ref.onConfirm;
454
- _ref.onDelete;
455
- var onClose = _ref.onClose,
499
+ onConfirm = _ref.onConfirm,
500
+ onDelete = _ref.onDelete,
501
+ onClose = _ref.onClose,
456
502
  className = _ref.className;
457
503
  var FieldsComponent = useFieldComponent('fields');
458
504
  var _useMediaUpdate = useMediaUpdate$1(),
@@ -488,6 +534,9 @@ function MediaForm(_ref) {
488
534
  if (onClose !== null) {
489
535
  onClose();
490
536
  }
537
+ if (onDelete !== null) {
538
+ onDelete();
539
+ }
491
540
  setChanged(false);
492
541
  }, [destroy, setChanged]);
493
542
  var postForm = useCallback(function (action, data) {
@@ -508,7 +557,7 @@ function MediaForm(_ref) {
508
557
  _useForm.generalError;
509
558
  _useForm.errors;
510
559
  return /*#__PURE__*/React.createElement("div", {
511
- className: classNames([className, _defineProperty({}, className, className != null)])
560
+ className: classNames(['text-body', _defineProperty({}, className, className !== null)])
512
561
  }, /*#__PURE__*/React.createElement("div", {
513
562
  className: "d-flex w-100 justify-content-between mb-2 pb-2 border-bottom"
514
563
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", {
@@ -560,6 +609,7 @@ function MediaForm(_ref) {
560
609
  })), /*#__PURE__*/React.createElement(MediaMetadata, {
561
610
  className: "mt-5",
562
611
  value: value,
612
+ sections: sections,
563
613
  displays: displays
564
614
  }))));
565
615
  }
@@ -766,6 +816,7 @@ var defaultFilters = [{
766
816
  var _excluded$4 = ["page", "count"];
767
817
  var propTypes$4 = {
768
818
  items: PropTypes$1.medias,
819
+ buttons: PropTypes$1.buttons,
769
820
  filters: PropTypes$1.filters,
770
821
  columns: PropTypes$1.tableColumns,
771
822
  query: PropTypes.shape({}),
@@ -783,6 +834,7 @@ var propTypes$4 = {
783
834
  };
784
835
  var defaultProps$4 = {
785
836
  items: null,
837
+ buttons: null,
786
838
  filters: defaultFilters,
787
839
  columns: defaultColumns,
788
840
  fields: defaultFields,
@@ -811,6 +863,7 @@ var defaultProps$4 = {
811
863
  function MediasBrowser(_ref) {
812
864
  var initialItems = _ref.items,
813
865
  baseUrl = _ref.baseUrl,
866
+ buttons = _ref.buttons,
814
867
  filters = _ref.filters,
815
868
  columns = _ref.columns,
816
869
  initialQuery = _ref.query,
@@ -914,13 +967,16 @@ function MediasBrowser(_ref) {
914
967
  }))), /*#__PURE__*/React.createElement(MediaForm, {
915
968
  value: media,
916
969
  onClose: onCloseMedia
917
- })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Filters, {
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, {
918
974
  value: query,
919
975
  filters: filters,
920
976
  onChange: onQueryChange,
921
977
  onReset: onQueryReset,
922
978
  theme: theme
923
- }), /*#__PURE__*/React.createElement("div", {
979
+ }) : null, /*#__PURE__*/React.createElement("div", {
924
980
  className: classNames(['d-flex', 'mt-1', 'mb-3', {
925
981
  'justify-content-between': hasLayouts,
926
982
  'justify-content-end': !hasLayouts
package/lib/index.js CHANGED
@@ -224,7 +224,7 @@ function MediaFrame(_ref) {
224
224
  width: "100%"
225
225
  }), /*#__PURE__*/React.createElement("div", {
226
226
  className: styles.playButton
227
- }, !showPlayer && (type === 'video' || type === 'embed') ? /*#__PURE__*/React.createElement(Button, {
227
+ }, !showPlayer && (type === 'video' || type === 'embed' || type === 'audio') ? /*#__PURE__*/React.createElement(Button, {
228
228
  className: "rounded-circle",
229
229
  theme: "secondary",
230
230
  onClick: onClick,
@@ -234,97 +234,6 @@ function MediaFrame(_ref) {
234
234
  MediaFrame.propTypes = propTypes$7;
235
235
  MediaFrame.defaultProps = defaultProps$7;
236
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
237
  var _excluded$5 = ["label", "path", "component"];
329
238
  var propTypes$6 = {
330
239
  value: PropTypes.shape({
@@ -336,36 +245,68 @@ var propTypes$6 = {
336
245
  title: PropTypes.node,
337
246
  items: PropTypes.arrayOf(PropTypes.shape({})) // displays
338
247
  })),
248
+ displays: PropTypes.arrayOf(PropTypes.shape({
249
+ section: PropTypes.string
250
+ })),
339
251
  className: PropTypes.string
340
252
  };
341
253
  var defaultProps$6 = {
342
254
  value: null,
343
- sections: defaultMetadata,
255
+ sections: null,
256
+ displays: null,
344
257
  className: null
345
258
  };
346
259
  function MediaMetadata(_ref) {
347
260
  var sections = _ref.sections,
261
+ displays = _ref.displays,
348
262
  value = _ref.value,
349
263
  className = _ref.className;
350
264
  var displayComponents = contexts.useDisplaysComponentsManager();
265
+ var finalSections = React.useMemo(function () {
266
+ var displaysWithoutSection = (displays || []).filter(function (_ref2) {
267
+ var _ref2$section = _ref2.section,
268
+ section = _ref2$section === void 0 ? null : _ref2$section;
269
+ return section === null;
270
+ });
271
+ return (sections || []).map(function (_ref3) {
272
+ var _ref3$id = _ref3.id,
273
+ id = _ref3$id === void 0 ? null : _ref3$id,
274
+ _ref3$title = _ref3.title,
275
+ title = _ref3$title === void 0 ? null : _ref3$title;
276
+ return {
277
+ id: id,
278
+ title: title,
279
+ items: (displays || []).filter(function (_ref4) {
280
+ var _ref4$section = _ref4.section,
281
+ section = _ref4$section === void 0 ? null : _ref4$section;
282
+ return section === id;
283
+ })
284
+ };
285
+ }).concat({
286
+ title: null,
287
+ items: displaysWithoutSection
288
+ });
289
+ }, [sections, displays]);
351
290
  return /*#__PURE__*/React.createElement("div", {
352
291
  className: classNames(['px-2', _defineProperty({}, className, className !== null)])
353
- }, (sections || []).map(function (_ref3, i) {
354
- var title = _ref3.title,
355
- items = _ref3.items;
292
+ }, (finalSections || []).map(function (_ref6, i) {
293
+ var _ref6$title = _ref6.title,
294
+ title = _ref6$title === void 0 ? null : _ref6$title,
295
+ _ref6$items = _ref6.items,
296
+ items = _ref6$items === void 0 ? [] : _ref6$items;
356
297
  return /*#__PURE__*/React.createElement("div", {
357
298
  className: "mb-5",
358
299
  key: "section-".concat(i + 1)
359
- }, /*#__PURE__*/React.createElement("h6", {
300
+ }, title !== null ? /*#__PURE__*/React.createElement("h6", {
360
301
  className: "px-1"
361
- }, title), /*#__PURE__*/React.createElement("ul", {
302
+ }, title) : null, /*#__PURE__*/React.createElement("ul", {
362
303
  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);
304
+ }, (items || []).map(function (_ref7, index) {
305
+ var label = _ref7.label,
306
+ path = _ref7.path,
307
+ _ref7$component = _ref7.component,
308
+ component = _ref7$component === void 0 ? null : _ref7$component,
309
+ props = _objectWithoutProperties(_ref7, _excluded$5);
369
310
  var Component = displayComponents.getComponent(component || 'text');
370
311
  var itemValue = lodash.get(value, path, null);
371
312
  return Component !== null && itemValue !== null ? /*#__PURE__*/React.createElement("li", {
@@ -425,6 +366,105 @@ var defaultFields = [
425
366
  // },
426
367
  ];
427
368
 
369
+ var defaultDisplays = [{
370
+ id: 'user',
371
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
372
+ id: "yByaBh",
373
+ defaultMessage: [{
374
+ "type": 0,
375
+ "value": "Added by"
376
+ }]
377
+ }),
378
+ component: 'avatar',
379
+ path: 'user',
380
+ section: 'info'
381
+ }, {
382
+ id: 'created_at',
383
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
384
+ id: "PN+75e",
385
+ defaultMessage: [{
386
+ "type": 0,
387
+ "value": "Created at"
388
+ }]
389
+ }),
390
+ component: 'date',
391
+ path: 'created_at',
392
+ format: 'yyyy-MM-dd hh:ss',
393
+ section: 'info'
394
+ }, {
395
+ id: 'format',
396
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
397
+ id: "JuxiUN",
398
+ defaultMessage: [{
399
+ "type": 0,
400
+ "value": "Format"
401
+ }]
402
+ }),
403
+ component: 'unit',
404
+ format: 'format',
405
+ path: 'format',
406
+ section: 'technical'
407
+ }, {
408
+ id: 'dimensions',
409
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
410
+ id: "rmJBin",
411
+ defaultMessage: [{
412
+ "type": 0,
413
+ "value": "Dimensions"
414
+ }]
415
+ }),
416
+ component: 'unit',
417
+ format: 'dimensions',
418
+ path: 'metadata',
419
+ section: 'technical'
420
+ }, {
421
+ id: 'size',
422
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
423
+ id: "g2CRt5",
424
+ defaultMessage: [{
425
+ "type": 0,
426
+ "value": "Size"
427
+ }]
428
+ }),
429
+ component: 'unit',
430
+ format: 'bytes',
431
+ path: 'metadata.size',
432
+ section: 'technical'
433
+ }, {
434
+ id: 'duration',
435
+ label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
436
+ id: "wU++NJ",
437
+ defaultMessage: [{
438
+ "type": 0,
439
+ "value": "Duration"
440
+ }]
441
+ }),
442
+ component: 'unit',
443
+ format: 'duration',
444
+ path: 'metadata.duration',
445
+ section: 'technical'
446
+ }];
447
+
448
+ var defaultSections = [{
449
+ id: 'info',
450
+ title: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
451
+ id: "3RT69u",
452
+ defaultMessage: [{
453
+ "type": 0,
454
+ "value": "Informations"
455
+ }]
456
+ })
457
+ }, {
458
+ id: 'technical',
459
+ title: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
460
+ id: "xKUOLG",
461
+ defaultMessage: [{
462
+ "type": 0,
463
+ "value": "Technical details"
464
+ }]
465
+ })
466
+ }];
467
+
428
468
  var propTypes$5 = {
429
469
  value: PropTypes.shape({
430
470
  id: PropTypes.string
@@ -432,6 +472,10 @@ var propTypes$5 = {
432
472
  fields: PropTypes.arrayOf(PropTypes.shape({
433
473
  name: PropTypes.string
434
474
  })),
475
+ sections: PropTypes.arrayOf(PropTypes.shape({
476
+ id: PropTypes.string,
477
+ title: PropTypes.string
478
+ })),
435
479
  displays: PropTypes.arrayOf(PropTypes.shape({
436
480
  name: PropTypes.string
437
481
  })),
@@ -444,7 +488,8 @@ var propTypes$5 = {
444
488
  var defaultProps$5 = {
445
489
  value: null,
446
490
  fields: defaultFields,
447
- displays: null,
491
+ sections: defaultSections,
492
+ displays: defaultDisplays,
448
493
  onClose: null,
449
494
  onDelete: null,
450
495
  className: null
@@ -452,11 +497,12 @@ var defaultProps$5 = {
452
497
  function MediaForm(_ref) {
453
498
  var initialValue = _ref.value,
454
499
  initialFields = _ref.fields,
500
+ sections = _ref.sections,
455
501
  displays = _ref.displays,
456
502
  onChange = _ref.onChange,
457
- onConfirm = _ref.onConfirm;
458
- _ref.onDelete;
459
- var onClose = _ref.onClose,
503
+ onConfirm = _ref.onConfirm,
504
+ onDelete = _ref.onDelete,
505
+ onClose = _ref.onClose,
460
506
  className = _ref.className;
461
507
  var FieldsComponent = contexts.useFieldComponent('fields');
462
508
  var _useMediaUpdate = useMediaUpdate$1(),
@@ -492,6 +538,9 @@ function MediaForm(_ref) {
492
538
  if (onClose !== null) {
493
539
  onClose();
494
540
  }
541
+ if (onDelete !== null) {
542
+ onDelete();
543
+ }
495
544
  setChanged(false);
496
545
  }, [destroy, setChanged]);
497
546
  var postForm = React.useCallback(function (action, data) {
@@ -512,7 +561,7 @@ function MediaForm(_ref) {
512
561
  _useForm.generalError;
513
562
  _useForm.errors;
514
563
  return /*#__PURE__*/React.createElement("div", {
515
- className: classNames([className, _defineProperty({}, className, className != null)])
564
+ className: classNames(['text-body', _defineProperty({}, className, className !== null)])
516
565
  }, /*#__PURE__*/React.createElement("div", {
517
566
  className: "d-flex w-100 justify-content-between mb-2 pb-2 border-bottom"
518
567
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", {
@@ -564,6 +613,7 @@ function MediaForm(_ref) {
564
613
  })), /*#__PURE__*/React.createElement(MediaMetadata, {
565
614
  className: "mt-5",
566
615
  value: value,
616
+ sections: sections,
567
617
  displays: displays
568
618
  }))));
569
619
  }
@@ -770,6 +820,7 @@ var defaultFilters = [{
770
820
  var _excluded$4 = ["page", "count"];
771
821
  var propTypes$4 = {
772
822
  items: core.PropTypes.medias,
823
+ buttons: core.PropTypes.buttons,
773
824
  filters: core.PropTypes.filters,
774
825
  columns: core.PropTypes.tableColumns,
775
826
  query: PropTypes.shape({}),
@@ -787,6 +838,7 @@ var propTypes$4 = {
787
838
  };
788
839
  var defaultProps$4 = {
789
840
  items: null,
841
+ buttons: null,
790
842
  filters: defaultFilters,
791
843
  columns: defaultColumns,
792
844
  fields: defaultFields,
@@ -815,6 +867,7 @@ var defaultProps$4 = {
815
867
  function MediasBrowser(_ref) {
816
868
  var initialItems = _ref.items,
817
869
  baseUrl = _ref.baseUrl,
870
+ buttons = _ref.buttons,
818
871
  filters = _ref.filters,
819
872
  columns = _ref.columns,
820
873
  initialQuery = _ref.query,
@@ -918,13 +971,16 @@ function MediasBrowser(_ref) {
918
971
  }))), /*#__PURE__*/React.createElement(MediaForm, {
919
972
  value: media,
920
973
  onClose: onCloseMedia
921
- })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Filters, {
974
+ })) : /*#__PURE__*/React.createElement(React.Fragment, null, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
975
+ items: buttons,
976
+ className: "mb-2"
977
+ }) : null, filters !== null ? /*#__PURE__*/React.createElement(Filters, {
922
978
  value: query,
923
979
  filters: filters,
924
980
  onChange: onQueryChange,
925
981
  onReset: onQueryReset,
926
982
  theme: theme
927
- }), /*#__PURE__*/React.createElement("div", {
983
+ }) : null, /*#__PURE__*/React.createElement("div", {
928
984
  className: classNames(['d-flex', 'mt-1', 'mb-3', {
929
985
  'justify-content-between': hasLayouts,
930
986
  'justify-content-end': !hasLayouts
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@panneau/medias",
3
- "version": "3.0.142",
3
+ "version": "3.0.144",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -48,16 +48,17 @@
48
48
  "@babel/runtime": "^7.12.5",
49
49
  "@panneau/core": "^3.0.142",
50
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",
51
+ "@panneau/element-button": "^3.0.144",
52
+ "@panneau/element-buttons": "^3.0.144",
53
+ "@panneau/element-form": "^3.0.144",
54
+ "@panneau/element-grid": "^3.0.144",
55
+ "@panneau/element-icon": "^3.0.144",
56
+ "@panneau/element-media-card": "^3.0.144",
57
+ "@panneau/element-media-player": "^3.0.143",
58
+ "@panneau/element-media-preview": "^3.0.144",
59
+ "@panneau/element-pagination": "^3.0.144",
60
+ "@panneau/element-table": "^3.0.144",
61
+ "@panneau/filter-filters": "^3.0.144",
61
62
  "classnames": "^2.5.1",
62
63
  "lodash": "^4.17.21",
63
64
  "prop-types": "^15.7.2",
@@ -66,5 +67,5 @@
66
67
  "publishConfig": {
67
68
  "access": "public"
68
69
  },
69
- "gitHead": "293308a0e1b7175dcc56128f6dbc1416845d0b15"
70
+ "gitHead": "7e808b4380825a4669092203eae4deaf4e39e74b"
70
71
  }