@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.
- package/assets/css/styles.css +1 -0
- package/es/index.js +524 -25
- package/lib/index.js +523 -23
- package/package.json +15 -12
package/assets/css/styles.css
CHANGED
@@ -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
|
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$
|
39
|
+
var propTypes$8 = {
|
35
40
|
api: apiPropTypes,
|
36
41
|
children: PropTypes.node.isRequired
|
37
42
|
};
|
38
|
-
var defaultProps$
|
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$
|
53
|
-
MediasApiProvider.defaultProps = defaultProps$
|
57
|
+
MediasApiProvider.propTypes = propTypes$8;
|
58
|
+
MediasApiProvider.defaultProps = defaultProps$8;
|
54
59
|
|
55
|
-
var _excluded$
|
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$
|
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$
|
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$
|
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
|
-
|
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
|
-
|
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
|
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(
|
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
|
-
|
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 };
|