@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.
- package/assets/css/styles.css +1 -0
- package/es/index.js +467 -24
- package/lib/index.js +466 -22
- package/package.json +14 -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,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
|
-
|
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
|
-
|
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
|
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(
|
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
|
-
|
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
|
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$
|
43
|
+
var propTypes$8 = {
|
39
44
|
api: apiPropTypes,
|
40
45
|
children: PropTypes.node.isRequired
|
41
46
|
};
|
42
|
-
var defaultProps$
|
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$
|
57
|
-
MediasApiProvider.defaultProps = defaultProps$
|
61
|
+
MediasApiProvider.propTypes = propTypes$8;
|
62
|
+
MediasApiProvider.defaultProps = defaultProps$8;
|
58
63
|
|
59
|
-
var _excluded$
|
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$
|
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$
|
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$
|
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
|
-
|
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
|
-
|
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
|
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(
|
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
|
-
|
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.
|
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.
|
50
|
-
"@panneau/data": "^3.0.
|
51
|
-
"@panneau/element-button": "^3.0.
|
52
|
-
"@panneau/element-buttons": "^3.0.
|
53
|
-
"@panneau/element-grid": "^3.0.
|
54
|
-
"@panneau/element-icon": "^3.0.
|
55
|
-
"@panneau/element-media-card": "^3.0.
|
56
|
-
"@panneau/element-
|
57
|
-
"@panneau/element-
|
58
|
-
"@panneau/
|
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": "
|
69
|
+
"gitHead": "293308a0e1b7175dcc56128f6dbc1416845d0b15"
|
68
70
|
}
|