@panneau/field-upload 3.0.90 → 3.0.94
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/es/index.js +199 -99
- package/lib/index.js +201 -99
- package/package.json +4 -4
package/es/index.js
CHANGED
|
@@ -2,16 +2,12 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
|
2
2
|
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
|
|
3
3
|
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
4
4
|
import _objectSpread from '@babel/runtime/helpers/objectSpread2';
|
|
5
|
-
import { faTimes, faFileVideo, faFileImage, faFileAudio } from '@fortawesome/free-solid-svg-icons';
|
|
6
|
-
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
7
5
|
import { Dashboard, DashboardModal } from '@uppy/react';
|
|
8
6
|
import classNames from 'classnames';
|
|
9
|
-
import get from 'lodash/get';
|
|
10
7
|
import isArray from 'lodash/isArray';
|
|
11
8
|
import isObject from 'lodash/isObject';
|
|
12
|
-
import prettyBytes from 'pretty-bytes';
|
|
13
9
|
import PropTypes from 'prop-types';
|
|
14
|
-
import React, {
|
|
10
|
+
import React, { useMemo, useCallback, useState } from 'react';
|
|
15
11
|
import { FormattedMessage } from 'react-intl';
|
|
16
12
|
import { PropTypes as PropTypes$1 } from '@panneau/core';
|
|
17
13
|
import { useResourceQuery } from '@panneau/core/hooks';
|
|
@@ -20,6 +16,10 @@ import Label from '@panneau/element-label';
|
|
|
20
16
|
import ResourceItemsList from '@panneau/list-resource-items';
|
|
21
17
|
import Dialog from '@panneau/modal-dialog';
|
|
22
18
|
import { useUppy } from '@panneau/uppy';
|
|
19
|
+
import { faTimes, faFileVideo, faFileImage, faFileAudio } from '@fortawesome/free-solid-svg-icons';
|
|
20
|
+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
21
|
+
import get from 'lodash/get';
|
|
22
|
+
import prettyBytes from 'pretty-bytes';
|
|
23
23
|
import '@uppy/core/dist/style.css';
|
|
24
24
|
import '@uppy/dashboard/dist/style.css';
|
|
25
25
|
import '@uppy/drag-drop/dist/style.css';
|
|
@@ -27,6 +27,185 @@ import '@uppy/status-bar/dist/style.css';
|
|
|
27
27
|
|
|
28
28
|
var styles = {"container":"panneau-field-upload-container","dashboard":"panneau-field-upload-dashboard","dashboardModal":"panneau-field-upload-dashboardModal"};
|
|
29
29
|
|
|
30
|
+
var propTypes$2 = {
|
|
31
|
+
value: PropTypes.oneOfType([PropTypes.array, PropTypes.shape({
|
|
32
|
+
filename: PropTypes.string,
|
|
33
|
+
size: PropTypes.number,
|
|
34
|
+
url: PropTypes.string
|
|
35
|
+
})]),
|
|
36
|
+
index: PropTypes.number,
|
|
37
|
+
namePath: PropTypes.string,
|
|
38
|
+
thumbnailPath: PropTypes.string,
|
|
39
|
+
sizePath: PropTypes.string,
|
|
40
|
+
disabled: PropTypes.bool,
|
|
41
|
+
onClickRemove: PropTypes.func,
|
|
42
|
+
className: PropTypes.string
|
|
43
|
+
};
|
|
44
|
+
var defaultProps$2 = {
|
|
45
|
+
value: null,
|
|
46
|
+
index: null,
|
|
47
|
+
namePath: null,
|
|
48
|
+
thumbnailPath: null,
|
|
49
|
+
sizePath: null,
|
|
50
|
+
disabled: false,
|
|
51
|
+
onClickRemove: null,
|
|
52
|
+
className: null
|
|
53
|
+
};
|
|
54
|
+
var MediaPreviewCard = function MediaPreviewCard(_ref) {
|
|
55
|
+
var value = _ref.value,
|
|
56
|
+
index = _ref.index,
|
|
57
|
+
namePath = _ref.namePath,
|
|
58
|
+
thumbnailPath = _ref.thumbnailPath,
|
|
59
|
+
sizePath = _ref.sizePath,
|
|
60
|
+
disabled = _ref.disabled,
|
|
61
|
+
onClickRemove = _ref.onClickRemove,
|
|
62
|
+
className = _ref.className;
|
|
63
|
+
var _value$id = value.id,
|
|
64
|
+
id = _value$id === void 0 ? null : _value$id,
|
|
65
|
+
_value$filename = value.filename,
|
|
66
|
+
filename = _value$filename === void 0 ? null : _value$filename,
|
|
67
|
+
_value$size = value.size,
|
|
68
|
+
fileSize = _value$size === void 0 ? 0 : _value$size,
|
|
69
|
+
_value$thumbnail_url = value.thumbnail_url,
|
|
70
|
+
thumbnailUrl = _value$thumbnail_url === void 0 ? null : _value$thumbnail_url,
|
|
71
|
+
_value$preview = value.preview,
|
|
72
|
+
preview = _value$preview === void 0 ? null : _value$preview,
|
|
73
|
+
_value$data = value.data,
|
|
74
|
+
data = _value$data === void 0 ? {} : _value$data,
|
|
75
|
+
type = value.type;
|
|
76
|
+
var _ref2 = data || {},
|
|
77
|
+
_ref2$file = _ref2.file,
|
|
78
|
+
file = _ref2$file === void 0 ? null : _ref2$file;
|
|
79
|
+
var faIcon = null;
|
|
80
|
+
switch (type) {
|
|
81
|
+
case 'audio':
|
|
82
|
+
faIcon = faFileAudio;
|
|
83
|
+
break;
|
|
84
|
+
case 'image':
|
|
85
|
+
faIcon = faFileImage;
|
|
86
|
+
break;
|
|
87
|
+
case 'video':
|
|
88
|
+
faIcon = faFileVideo;
|
|
89
|
+
break;
|
|
90
|
+
}
|
|
91
|
+
var name = (namePath !== null ? get(value || {}, namePath) : null) || filename || file;
|
|
92
|
+
var thumbnail = (thumbnailPath !== null ? get(value || {}, thumbnailPath) : null) || thumbnailUrl || preview;
|
|
93
|
+
var size = (sizePath !== null ? get(value || {}, sizePath) : null) || fileSize;
|
|
94
|
+
var hasThumbnail = preview !== null || thumbnail !== null;
|
|
95
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
96
|
+
className: classNames([styles.container, _defineProperty({}, className, className !== null)])
|
|
97
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
98
|
+
className: "card mb-1",
|
|
99
|
+
key: "media-".concat(id),
|
|
100
|
+
style: {
|
|
101
|
+
maxWidth: 500
|
|
102
|
+
}
|
|
103
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
104
|
+
className: "d-flex align-items-center"
|
|
105
|
+
}, hasThumbnail || faIcon !== null ? /*#__PURE__*/React.createElement("div", {
|
|
106
|
+
className: "p-2 text-center",
|
|
107
|
+
style: hasThumbnail ? {
|
|
108
|
+
width: 100,
|
|
109
|
+
backgroundImage: 'linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%)',
|
|
110
|
+
backgroundSize: '20px 20px',
|
|
111
|
+
backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0'
|
|
112
|
+
} : {
|
|
113
|
+
width: 100
|
|
114
|
+
}
|
|
115
|
+
}, !hasThumbnail && faIcon !== null ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
116
|
+
icon: faIcon,
|
|
117
|
+
className: "m-auto fs-3"
|
|
118
|
+
}) : null, hasThumbnail ? /*#__PURE__*/React.createElement("img", {
|
|
119
|
+
className: "img-fluid",
|
|
120
|
+
src: thumbnail,
|
|
121
|
+
alt: "thumbnail",
|
|
122
|
+
style: {
|
|
123
|
+
maxHeight: 75
|
|
124
|
+
}
|
|
125
|
+
}) : null) : null, /*#__PURE__*/React.createElement("div", {
|
|
126
|
+
className: "flex-grow-1"
|
|
127
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
128
|
+
className: "card-body"
|
|
129
|
+
}, /*#__PURE__*/React.createElement("h5", {
|
|
130
|
+
className: classNames(['card-title', 'text-break', 'fs-6', {
|
|
131
|
+
'mb-1': size !== null && size > 0,
|
|
132
|
+
'mb-0': size === null || size <= 0
|
|
133
|
+
}])
|
|
134
|
+
}, name), size !== null && size > 0 ? /*#__PURE__*/React.createElement("p", {
|
|
135
|
+
className: "card-text text-muted small"
|
|
136
|
+
}, prettyBytes(size)) : null)), onClickRemove !== null ? /*#__PURE__*/React.createElement("div", {
|
|
137
|
+
className: "p-2"
|
|
138
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
139
|
+
type: "button",
|
|
140
|
+
size: "sm",
|
|
141
|
+
theme: "secondary",
|
|
142
|
+
outline: true,
|
|
143
|
+
onClick: function onClick() {
|
|
144
|
+
return onClickRemove(index, value);
|
|
145
|
+
},
|
|
146
|
+
disabled: disabled
|
|
147
|
+
}, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
148
|
+
icon: faTimes
|
|
149
|
+
}))) : null)));
|
|
150
|
+
};
|
|
151
|
+
MediaPreviewCard.propTypes = propTypes$2;
|
|
152
|
+
MediaPreviewCard.defaultProps = defaultProps$2;
|
|
153
|
+
var MediaPreviewCard$1 = MediaPreviewCard;
|
|
154
|
+
|
|
155
|
+
var propTypes$1 = {
|
|
156
|
+
value: PropTypes.oneOfType([PropTypes.array, PropTypes.shape({
|
|
157
|
+
filename: PropTypes.string,
|
|
158
|
+
size: PropTypes.number,
|
|
159
|
+
url: PropTypes.string
|
|
160
|
+
})]),
|
|
161
|
+
namePath: PropTypes.string,
|
|
162
|
+
thumbnailPath: PropTypes.string,
|
|
163
|
+
sizePath: PropTypes.string,
|
|
164
|
+
disabled: PropTypes.bool,
|
|
165
|
+
onClickRemove: PropTypes.func,
|
|
166
|
+
className: PropTypes.string
|
|
167
|
+
};
|
|
168
|
+
var defaultProps$1 = {
|
|
169
|
+
value: null,
|
|
170
|
+
namePath: null,
|
|
171
|
+
thumbnailPath: null,
|
|
172
|
+
sizePath: null,
|
|
173
|
+
disabled: false,
|
|
174
|
+
onClickRemove: null,
|
|
175
|
+
className: null
|
|
176
|
+
};
|
|
177
|
+
var MediaPreviewCards = function MediaPreviewCards(_ref) {
|
|
178
|
+
var value = _ref.value,
|
|
179
|
+
namePath = _ref.namePath,
|
|
180
|
+
thumbnailPath = _ref.thumbnailPath,
|
|
181
|
+
sizePath = _ref.sizePath,
|
|
182
|
+
disabled = _ref.disabled,
|
|
183
|
+
onClickRemove = _ref.onClickRemove,
|
|
184
|
+
className = _ref.className;
|
|
185
|
+
var values = useMemo(function () {
|
|
186
|
+
if (isArray(value)) {
|
|
187
|
+
return value;
|
|
188
|
+
}
|
|
189
|
+
return value !== null ? [value] : [];
|
|
190
|
+
}, [value]);
|
|
191
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
192
|
+
className: classNames([styles.container, _defineProperty({}, className, className !== null)])
|
|
193
|
+
}, values.map(function (media, idx) {
|
|
194
|
+
return /*#__PURE__*/React.createElement(MediaPreviewCard$1, {
|
|
195
|
+
value: media,
|
|
196
|
+
index: idx,
|
|
197
|
+
namePath: namePath,
|
|
198
|
+
thumbnailPath: thumbnailPath,
|
|
199
|
+
sizePath: sizePath,
|
|
200
|
+
disabled: disabled,
|
|
201
|
+
onClickRemove: onClickRemove
|
|
202
|
+
});
|
|
203
|
+
}));
|
|
204
|
+
};
|
|
205
|
+
MediaPreviewCards.propTypes = propTypes$1;
|
|
206
|
+
MediaPreviewCards.defaultProps = defaultProps$1;
|
|
207
|
+
var MediaPreviewCards$1 = MediaPreviewCards;
|
|
208
|
+
|
|
30
209
|
var propTypes = {
|
|
31
210
|
value: PropTypes.oneOfType([PropTypes.array, PropTypes.shape({
|
|
32
211
|
filename: PropTypes.string,
|
|
@@ -296,93 +475,14 @@ var UploadField = function UploadField(_ref) {
|
|
|
296
475
|
return /*#__PURE__*/React.createElement("div", {
|
|
297
476
|
className: classNames([styles.container, _defineProperty({}, className, className !== null)])
|
|
298
477
|
// ref={containerRef}
|
|
299
|
-
},
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
thumbnailUrl = _media$thumbnail_url === void 0 ? null : _media$thumbnail_url,
|
|
308
|
-
_media$preview = media.preview,
|
|
309
|
-
preview = _media$preview === void 0 ? null : _media$preview,
|
|
310
|
-
_media$data = media.data,
|
|
311
|
-
data = _media$data === void 0 ? {} : _media$data,
|
|
312
|
-
type = media.type;
|
|
313
|
-
var _ref6 = data || {},
|
|
314
|
-
_ref6$file = _ref6.file,
|
|
315
|
-
file = _ref6$file === void 0 ? null : _ref6$file;
|
|
316
|
-
var faIcon = null;
|
|
317
|
-
switch (type) {
|
|
318
|
-
case 'audio':
|
|
319
|
-
faIcon = faFileAudio;
|
|
320
|
-
break;
|
|
321
|
-
case 'image':
|
|
322
|
-
faIcon = faFileImage;
|
|
323
|
-
break;
|
|
324
|
-
case 'video':
|
|
325
|
-
faIcon = faFileVideo;
|
|
326
|
-
break;
|
|
327
|
-
}
|
|
328
|
-
var name = (namePath !== null ? get(media || {}, namePath) : null) || filename || file;
|
|
329
|
-
var thumbnail = (thumbnailPath !== null ? get(media || {}, thumbnailPath) : null) || thumbnailUrl || preview;
|
|
330
|
-
var size = (sizePath !== null ? get(media || {}, sizePath) : null) || fileSize;
|
|
331
|
-
var hasThumbnail = preview !== null || thumbnail !== null;
|
|
332
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
333
|
-
className: "card mb-1",
|
|
334
|
-
key: "media-".concat(id),
|
|
335
|
-
style: {
|
|
336
|
-
maxWidth: 500
|
|
337
|
-
}
|
|
338
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
339
|
-
className: "d-flex align-items-center"
|
|
340
|
-
}, hasThumbnail || faIcon !== null ? /*#__PURE__*/React.createElement("div", {
|
|
341
|
-
className: "p-2 text-center",
|
|
342
|
-
style: hasThumbnail ? {
|
|
343
|
-
width: 100,
|
|
344
|
-
backgroundImage: 'linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%)',
|
|
345
|
-
backgroundSize: '20px 20px',
|
|
346
|
-
backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0'
|
|
347
|
-
} : {
|
|
348
|
-
width: 100
|
|
349
|
-
}
|
|
350
|
-
}, !hasThumbnail && faIcon !== null ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
351
|
-
icon: faIcon,
|
|
352
|
-
className: "m-auto fs-3"
|
|
353
|
-
}) : null, hasThumbnail ? /*#__PURE__*/React.createElement("img", {
|
|
354
|
-
className: "img-fluid",
|
|
355
|
-
src: thumbnail,
|
|
356
|
-
alt: "thumbnail",
|
|
357
|
-
style: {
|
|
358
|
-
maxHeight: 75
|
|
359
|
-
}
|
|
360
|
-
}) : null) : null, /*#__PURE__*/React.createElement("div", {
|
|
361
|
-
className: "flex-grow-1"
|
|
362
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
363
|
-
className: "card-body"
|
|
364
|
-
}, /*#__PURE__*/React.createElement("h5", {
|
|
365
|
-
className: classNames(['card-title', 'text-break', 'fs-6', {
|
|
366
|
-
'mb-1': size !== null && size > 0,
|
|
367
|
-
'mb-0': size === null || size <= 0
|
|
368
|
-
}])
|
|
369
|
-
}, name), size !== null && size > 0 ? /*#__PURE__*/React.createElement("p", {
|
|
370
|
-
className: "card-text text-muted small"
|
|
371
|
-
}, prettyBytes(size)) : null)), /*#__PURE__*/React.createElement("div", {
|
|
372
|
-
className: "p-2"
|
|
373
|
-
}, /*#__PURE__*/React.createElement(Button, {
|
|
374
|
-
type: "button",
|
|
375
|
-
size: "sm",
|
|
376
|
-
theme: "secondary",
|
|
377
|
-
outline: true,
|
|
378
|
-
onClick: function onClick() {
|
|
379
|
-
return onClickRemove(idx);
|
|
380
|
-
},
|
|
381
|
-
disabled: disabled
|
|
382
|
-
}, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
383
|
-
icon: faTimes
|
|
384
|
-
})))));
|
|
385
|
-
}) : null, (!hasMedia || allowMultipleUploads) && withButton ? /*#__PURE__*/React.createElement("div", {
|
|
478
|
+
}, /*#__PURE__*/React.createElement(MediaPreviewCards$1, {
|
|
479
|
+
value: values,
|
|
480
|
+
namePath: namePath,
|
|
481
|
+
thumbnailPath: thumbnailPath,
|
|
482
|
+
sizePath: sizePath,
|
|
483
|
+
disabled: disabled,
|
|
484
|
+
onClickRemove: onClickRemove
|
|
485
|
+
}), (!hasMedia || allowMultipleUploads) && withButton ? /*#__PURE__*/React.createElement("div", {
|
|
386
486
|
className: "row"
|
|
387
487
|
}, /*#__PURE__*/React.createElement("div", {
|
|
388
488
|
className: "col-auto"
|
|
@@ -471,13 +571,13 @@ var UploadField = function UploadField(_ref) {
|
|
|
471
571
|
actionsProps: {
|
|
472
572
|
onClickSelect: onClickSelect,
|
|
473
573
|
getSelectPropsFromItem: function getSelectPropsFromItem(item) {
|
|
474
|
-
var
|
|
475
|
-
|
|
476
|
-
itemId =
|
|
574
|
+
var _ref6 = item || {},
|
|
575
|
+
_ref6$id = _ref6.id,
|
|
576
|
+
itemId = _ref6$id === void 0 ? null : _ref6$id;
|
|
477
577
|
var found = (modalItems || []).find(function () {
|
|
478
|
-
var
|
|
479
|
-
|
|
480
|
-
modalItemId =
|
|
578
|
+
var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
579
|
+
_ref7$id = _ref7.id,
|
|
580
|
+
modalItemId = _ref7$id === void 0 ? null : _ref7$id;
|
|
481
581
|
return modalItemId === itemId;
|
|
482
582
|
});
|
|
483
583
|
return {
|
|
@@ -602,4 +702,4 @@ var FontField = function FontField(props) {
|
|
|
602
702
|
};
|
|
603
703
|
var FontField$1 = FontField;
|
|
604
704
|
|
|
605
|
-
export { AudioField$1 as AudioField, DocumentField$1 as DocumentField, FontField$1 as FontField, ImageField$1 as ImageField, ImagesField$1 as ImagesField, VideoField$1 as VideoField, UploadField$1 as default, definition };
|
|
705
|
+
export { AudioField$1 as AudioField, DocumentField$1 as DocumentField, FontField$1 as FontField, ImageField$1 as ImageField, ImagesField$1 as ImagesField, MediaPreviewCard$1 as MediaPreviewCard, MediaPreviewCards$1 as MediaPreviewCards, VideoField$1 as VideoField, UploadField$1 as default, definition };
|
package/lib/index.js
CHANGED
|
@@ -6,14 +6,10 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
|
6
6
|
var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
|
|
7
7
|
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
8
8
|
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
|
|
9
|
-
var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
|
|
10
|
-
var reactFontawesome = require('@fortawesome/react-fontawesome');
|
|
11
9
|
var react = require('@uppy/react');
|
|
12
10
|
var classNames = require('classnames');
|
|
13
|
-
var get = require('lodash/get');
|
|
14
11
|
var isArray = require('lodash/isArray');
|
|
15
12
|
var isObject = require('lodash/isObject');
|
|
16
|
-
var prettyBytes = require('pretty-bytes');
|
|
17
13
|
var PropTypes = require('prop-types');
|
|
18
14
|
var React = require('react');
|
|
19
15
|
var reactIntl = require('react-intl');
|
|
@@ -24,6 +20,10 @@ var Label = require('@panneau/element-label');
|
|
|
24
20
|
var ResourceItemsList = require('@panneau/list-resource-items');
|
|
25
21
|
var Dialog = require('@panneau/modal-dialog');
|
|
26
22
|
var uppy = require('@panneau/uppy');
|
|
23
|
+
var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
|
|
24
|
+
var reactFontawesome = require('@fortawesome/react-fontawesome');
|
|
25
|
+
var get = require('lodash/get');
|
|
26
|
+
var prettyBytes = require('pretty-bytes');
|
|
27
27
|
require('@uppy/core/dist/style.css');
|
|
28
28
|
require('@uppy/dashboard/dist/style.css');
|
|
29
29
|
require('@uppy/drag-drop/dist/style.css');
|
|
@@ -36,19 +36,198 @@ var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumab
|
|
|
36
36
|
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
|
|
37
37
|
var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
|
|
38
38
|
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
|
|
39
|
-
var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
|
|
40
39
|
var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);
|
|
41
40
|
var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
|
|
42
|
-
var prettyBytes__default = /*#__PURE__*/_interopDefaultLegacy(prettyBytes);
|
|
43
41
|
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
44
42
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
45
43
|
var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
|
|
46
44
|
var Label__default = /*#__PURE__*/_interopDefaultLegacy(Label);
|
|
47
45
|
var ResourceItemsList__default = /*#__PURE__*/_interopDefaultLegacy(ResourceItemsList);
|
|
48
46
|
var Dialog__default = /*#__PURE__*/_interopDefaultLegacy(Dialog);
|
|
47
|
+
var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
|
|
48
|
+
var prettyBytes__default = /*#__PURE__*/_interopDefaultLegacy(prettyBytes);
|
|
49
49
|
|
|
50
50
|
var styles = {"container":"panneau-field-upload-container","dashboard":"panneau-field-upload-dashboard","dashboardModal":"panneau-field-upload-dashboardModal"};
|
|
51
51
|
|
|
52
|
+
var propTypes$2 = {
|
|
53
|
+
value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].array, PropTypes__default["default"].shape({
|
|
54
|
+
filename: PropTypes__default["default"].string,
|
|
55
|
+
size: PropTypes__default["default"].number,
|
|
56
|
+
url: PropTypes__default["default"].string
|
|
57
|
+
})]),
|
|
58
|
+
index: PropTypes__default["default"].number,
|
|
59
|
+
namePath: PropTypes__default["default"].string,
|
|
60
|
+
thumbnailPath: PropTypes__default["default"].string,
|
|
61
|
+
sizePath: PropTypes__default["default"].string,
|
|
62
|
+
disabled: PropTypes__default["default"].bool,
|
|
63
|
+
onClickRemove: PropTypes__default["default"].func,
|
|
64
|
+
className: PropTypes__default["default"].string
|
|
65
|
+
};
|
|
66
|
+
var defaultProps$2 = {
|
|
67
|
+
value: null,
|
|
68
|
+
index: null,
|
|
69
|
+
namePath: null,
|
|
70
|
+
thumbnailPath: null,
|
|
71
|
+
sizePath: null,
|
|
72
|
+
disabled: false,
|
|
73
|
+
onClickRemove: null,
|
|
74
|
+
className: null
|
|
75
|
+
};
|
|
76
|
+
var MediaPreviewCard = function MediaPreviewCard(_ref) {
|
|
77
|
+
var value = _ref.value,
|
|
78
|
+
index = _ref.index,
|
|
79
|
+
namePath = _ref.namePath,
|
|
80
|
+
thumbnailPath = _ref.thumbnailPath,
|
|
81
|
+
sizePath = _ref.sizePath,
|
|
82
|
+
disabled = _ref.disabled,
|
|
83
|
+
onClickRemove = _ref.onClickRemove,
|
|
84
|
+
className = _ref.className;
|
|
85
|
+
var _value$id = value.id,
|
|
86
|
+
id = _value$id === void 0 ? null : _value$id,
|
|
87
|
+
_value$filename = value.filename,
|
|
88
|
+
filename = _value$filename === void 0 ? null : _value$filename,
|
|
89
|
+
_value$size = value.size,
|
|
90
|
+
fileSize = _value$size === void 0 ? 0 : _value$size,
|
|
91
|
+
_value$thumbnail_url = value.thumbnail_url,
|
|
92
|
+
thumbnailUrl = _value$thumbnail_url === void 0 ? null : _value$thumbnail_url,
|
|
93
|
+
_value$preview = value.preview,
|
|
94
|
+
preview = _value$preview === void 0 ? null : _value$preview,
|
|
95
|
+
_value$data = value.data,
|
|
96
|
+
data = _value$data === void 0 ? {} : _value$data,
|
|
97
|
+
type = value.type;
|
|
98
|
+
var _ref2 = data || {},
|
|
99
|
+
_ref2$file = _ref2.file,
|
|
100
|
+
file = _ref2$file === void 0 ? null : _ref2$file;
|
|
101
|
+
var faIcon = null;
|
|
102
|
+
switch (type) {
|
|
103
|
+
case 'audio':
|
|
104
|
+
faIcon = freeSolidSvgIcons.faFileAudio;
|
|
105
|
+
break;
|
|
106
|
+
case 'image':
|
|
107
|
+
faIcon = freeSolidSvgIcons.faFileImage;
|
|
108
|
+
break;
|
|
109
|
+
case 'video':
|
|
110
|
+
faIcon = freeSolidSvgIcons.faFileVideo;
|
|
111
|
+
break;
|
|
112
|
+
}
|
|
113
|
+
var name = (namePath !== null ? get__default["default"](value || {}, namePath) : null) || filename || file;
|
|
114
|
+
var thumbnail = (thumbnailPath !== null ? get__default["default"](value || {}, thumbnailPath) : null) || thumbnailUrl || preview;
|
|
115
|
+
var size = (sizePath !== null ? get__default["default"](value || {}, sizePath) : null) || fileSize;
|
|
116
|
+
var hasThumbnail = preview !== null || thumbnail !== null;
|
|
117
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
118
|
+
className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)])
|
|
119
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
120
|
+
className: "card mb-1",
|
|
121
|
+
key: "media-".concat(id),
|
|
122
|
+
style: {
|
|
123
|
+
maxWidth: 500
|
|
124
|
+
}
|
|
125
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
126
|
+
className: "d-flex align-items-center"
|
|
127
|
+
}, hasThumbnail || faIcon !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
128
|
+
className: "p-2 text-center",
|
|
129
|
+
style: hasThumbnail ? {
|
|
130
|
+
width: 100,
|
|
131
|
+
backgroundImage: 'linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%)',
|
|
132
|
+
backgroundSize: '20px 20px',
|
|
133
|
+
backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0'
|
|
134
|
+
} : {
|
|
135
|
+
width: 100
|
|
136
|
+
}
|
|
137
|
+
}, !hasThumbnail && faIcon !== null ? /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
|
|
138
|
+
icon: faIcon,
|
|
139
|
+
className: "m-auto fs-3"
|
|
140
|
+
}) : null, hasThumbnail ? /*#__PURE__*/React__default["default"].createElement("img", {
|
|
141
|
+
className: "img-fluid",
|
|
142
|
+
src: thumbnail,
|
|
143
|
+
alt: "thumbnail",
|
|
144
|
+
style: {
|
|
145
|
+
maxHeight: 75
|
|
146
|
+
}
|
|
147
|
+
}) : null) : null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
148
|
+
className: "flex-grow-1"
|
|
149
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
150
|
+
className: "card-body"
|
|
151
|
+
}, /*#__PURE__*/React__default["default"].createElement("h5", {
|
|
152
|
+
className: classNames__default["default"](['card-title', 'text-break', 'fs-6', {
|
|
153
|
+
'mb-1': size !== null && size > 0,
|
|
154
|
+
'mb-0': size === null || size <= 0
|
|
155
|
+
}])
|
|
156
|
+
}, name), size !== null && size > 0 ? /*#__PURE__*/React__default["default"].createElement("p", {
|
|
157
|
+
className: "card-text text-muted small"
|
|
158
|
+
}, prettyBytes__default["default"](size)) : null)), onClickRemove !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
159
|
+
className: "p-2"
|
|
160
|
+
}, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
|
|
161
|
+
type: "button",
|
|
162
|
+
size: "sm",
|
|
163
|
+
theme: "secondary",
|
|
164
|
+
outline: true,
|
|
165
|
+
onClick: function onClick() {
|
|
166
|
+
return onClickRemove(index, value);
|
|
167
|
+
},
|
|
168
|
+
disabled: disabled
|
|
169
|
+
}, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
|
|
170
|
+
icon: freeSolidSvgIcons.faTimes
|
|
171
|
+
}))) : null)));
|
|
172
|
+
};
|
|
173
|
+
MediaPreviewCard.propTypes = propTypes$2;
|
|
174
|
+
MediaPreviewCard.defaultProps = defaultProps$2;
|
|
175
|
+
var MediaPreviewCard$1 = MediaPreviewCard;
|
|
176
|
+
|
|
177
|
+
var propTypes$1 = {
|
|
178
|
+
value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].array, PropTypes__default["default"].shape({
|
|
179
|
+
filename: PropTypes__default["default"].string,
|
|
180
|
+
size: PropTypes__default["default"].number,
|
|
181
|
+
url: PropTypes__default["default"].string
|
|
182
|
+
})]),
|
|
183
|
+
namePath: PropTypes__default["default"].string,
|
|
184
|
+
thumbnailPath: PropTypes__default["default"].string,
|
|
185
|
+
sizePath: PropTypes__default["default"].string,
|
|
186
|
+
disabled: PropTypes__default["default"].bool,
|
|
187
|
+
onClickRemove: PropTypes__default["default"].func,
|
|
188
|
+
className: PropTypes__default["default"].string
|
|
189
|
+
};
|
|
190
|
+
var defaultProps$1 = {
|
|
191
|
+
value: null,
|
|
192
|
+
namePath: null,
|
|
193
|
+
thumbnailPath: null,
|
|
194
|
+
sizePath: null,
|
|
195
|
+
disabled: false,
|
|
196
|
+
onClickRemove: null,
|
|
197
|
+
className: null
|
|
198
|
+
};
|
|
199
|
+
var MediaPreviewCards = function MediaPreviewCards(_ref) {
|
|
200
|
+
var value = _ref.value,
|
|
201
|
+
namePath = _ref.namePath,
|
|
202
|
+
thumbnailPath = _ref.thumbnailPath,
|
|
203
|
+
sizePath = _ref.sizePath,
|
|
204
|
+
disabled = _ref.disabled,
|
|
205
|
+
onClickRemove = _ref.onClickRemove,
|
|
206
|
+
className = _ref.className;
|
|
207
|
+
var values = React.useMemo(function () {
|
|
208
|
+
if (isArray__default["default"](value)) {
|
|
209
|
+
return value;
|
|
210
|
+
}
|
|
211
|
+
return value !== null ? [value] : [];
|
|
212
|
+
}, [value]);
|
|
213
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
214
|
+
className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)])
|
|
215
|
+
}, values.map(function (media, idx) {
|
|
216
|
+
return /*#__PURE__*/React__default["default"].createElement(MediaPreviewCard$1, {
|
|
217
|
+
value: media,
|
|
218
|
+
index: idx,
|
|
219
|
+
namePath: namePath,
|
|
220
|
+
thumbnailPath: thumbnailPath,
|
|
221
|
+
sizePath: sizePath,
|
|
222
|
+
disabled: disabled,
|
|
223
|
+
onClickRemove: onClickRemove
|
|
224
|
+
});
|
|
225
|
+
}));
|
|
226
|
+
};
|
|
227
|
+
MediaPreviewCards.propTypes = propTypes$1;
|
|
228
|
+
MediaPreviewCards.defaultProps = defaultProps$1;
|
|
229
|
+
var MediaPreviewCards$1 = MediaPreviewCards;
|
|
230
|
+
|
|
52
231
|
var propTypes = {
|
|
53
232
|
value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].array, PropTypes__default["default"].shape({
|
|
54
233
|
filename: PropTypes__default["default"].string,
|
|
@@ -318,93 +497,14 @@ var UploadField = function UploadField(_ref) {
|
|
|
318
497
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
319
498
|
className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)])
|
|
320
499
|
// ref={containerRef}
|
|
321
|
-
},
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
thumbnailUrl = _media$thumbnail_url === void 0 ? null : _media$thumbnail_url,
|
|
330
|
-
_media$preview = media.preview,
|
|
331
|
-
preview = _media$preview === void 0 ? null : _media$preview,
|
|
332
|
-
_media$data = media.data,
|
|
333
|
-
data = _media$data === void 0 ? {} : _media$data,
|
|
334
|
-
type = media.type;
|
|
335
|
-
var _ref6 = data || {},
|
|
336
|
-
_ref6$file = _ref6.file,
|
|
337
|
-
file = _ref6$file === void 0 ? null : _ref6$file;
|
|
338
|
-
var faIcon = null;
|
|
339
|
-
switch (type) {
|
|
340
|
-
case 'audio':
|
|
341
|
-
faIcon = freeSolidSvgIcons.faFileAudio;
|
|
342
|
-
break;
|
|
343
|
-
case 'image':
|
|
344
|
-
faIcon = freeSolidSvgIcons.faFileImage;
|
|
345
|
-
break;
|
|
346
|
-
case 'video':
|
|
347
|
-
faIcon = freeSolidSvgIcons.faFileVideo;
|
|
348
|
-
break;
|
|
349
|
-
}
|
|
350
|
-
var name = (namePath !== null ? get__default["default"](media || {}, namePath) : null) || filename || file;
|
|
351
|
-
var thumbnail = (thumbnailPath !== null ? get__default["default"](media || {}, thumbnailPath) : null) || thumbnailUrl || preview;
|
|
352
|
-
var size = (sizePath !== null ? get__default["default"](media || {}, sizePath) : null) || fileSize;
|
|
353
|
-
var hasThumbnail = preview !== null || thumbnail !== null;
|
|
354
|
-
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
355
|
-
className: "card mb-1",
|
|
356
|
-
key: "media-".concat(id),
|
|
357
|
-
style: {
|
|
358
|
-
maxWidth: 500
|
|
359
|
-
}
|
|
360
|
-
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
361
|
-
className: "d-flex align-items-center"
|
|
362
|
-
}, hasThumbnail || faIcon !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
363
|
-
className: "p-2 text-center",
|
|
364
|
-
style: hasThumbnail ? {
|
|
365
|
-
width: 100,
|
|
366
|
-
backgroundImage: 'linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%)',
|
|
367
|
-
backgroundSize: '20px 20px',
|
|
368
|
-
backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0'
|
|
369
|
-
} : {
|
|
370
|
-
width: 100
|
|
371
|
-
}
|
|
372
|
-
}, !hasThumbnail && faIcon !== null ? /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
|
|
373
|
-
icon: faIcon,
|
|
374
|
-
className: "m-auto fs-3"
|
|
375
|
-
}) : null, hasThumbnail ? /*#__PURE__*/React__default["default"].createElement("img", {
|
|
376
|
-
className: "img-fluid",
|
|
377
|
-
src: thumbnail,
|
|
378
|
-
alt: "thumbnail",
|
|
379
|
-
style: {
|
|
380
|
-
maxHeight: 75
|
|
381
|
-
}
|
|
382
|
-
}) : null) : null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
383
|
-
className: "flex-grow-1"
|
|
384
|
-
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
385
|
-
className: "card-body"
|
|
386
|
-
}, /*#__PURE__*/React__default["default"].createElement("h5", {
|
|
387
|
-
className: classNames__default["default"](['card-title', 'text-break', 'fs-6', {
|
|
388
|
-
'mb-1': size !== null && size > 0,
|
|
389
|
-
'mb-0': size === null || size <= 0
|
|
390
|
-
}])
|
|
391
|
-
}, name), size !== null && size > 0 ? /*#__PURE__*/React__default["default"].createElement("p", {
|
|
392
|
-
className: "card-text text-muted small"
|
|
393
|
-
}, prettyBytes__default["default"](size)) : null)), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
394
|
-
className: "p-2"
|
|
395
|
-
}, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
|
|
396
|
-
type: "button",
|
|
397
|
-
size: "sm",
|
|
398
|
-
theme: "secondary",
|
|
399
|
-
outline: true,
|
|
400
|
-
onClick: function onClick() {
|
|
401
|
-
return onClickRemove(idx);
|
|
402
|
-
},
|
|
403
|
-
disabled: disabled
|
|
404
|
-
}, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
|
|
405
|
-
icon: freeSolidSvgIcons.faTimes
|
|
406
|
-
})))));
|
|
407
|
-
}) : null, (!hasMedia || allowMultipleUploads) && withButton ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
500
|
+
}, /*#__PURE__*/React__default["default"].createElement(MediaPreviewCards$1, {
|
|
501
|
+
value: values,
|
|
502
|
+
namePath: namePath,
|
|
503
|
+
thumbnailPath: thumbnailPath,
|
|
504
|
+
sizePath: sizePath,
|
|
505
|
+
disabled: disabled,
|
|
506
|
+
onClickRemove: onClickRemove
|
|
507
|
+
}), (!hasMedia || allowMultipleUploads) && withButton ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
408
508
|
className: "row"
|
|
409
509
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
410
510
|
className: "col-auto"
|
|
@@ -493,13 +593,13 @@ var UploadField = function UploadField(_ref) {
|
|
|
493
593
|
actionsProps: {
|
|
494
594
|
onClickSelect: onClickSelect,
|
|
495
595
|
getSelectPropsFromItem: function getSelectPropsFromItem(item) {
|
|
496
|
-
var
|
|
497
|
-
|
|
498
|
-
itemId =
|
|
596
|
+
var _ref6 = item || {},
|
|
597
|
+
_ref6$id = _ref6.id,
|
|
598
|
+
itemId = _ref6$id === void 0 ? null : _ref6$id;
|
|
499
599
|
var found = (modalItems || []).find(function () {
|
|
500
|
-
var
|
|
501
|
-
|
|
502
|
-
modalItemId =
|
|
600
|
+
var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
601
|
+
_ref7$id = _ref7.id,
|
|
602
|
+
modalItemId = _ref7$id === void 0 ? null : _ref7$id;
|
|
503
603
|
return modalItemId === itemId;
|
|
504
604
|
});
|
|
505
605
|
return {
|
|
@@ -629,6 +729,8 @@ exports.DocumentField = DocumentField$1;
|
|
|
629
729
|
exports.FontField = FontField$1;
|
|
630
730
|
exports.ImageField = ImageField$1;
|
|
631
731
|
exports.ImagesField = ImagesField$1;
|
|
732
|
+
exports.MediaPreviewCard = MediaPreviewCard$1;
|
|
733
|
+
exports.MediaPreviewCards = MediaPreviewCards$1;
|
|
632
734
|
exports.VideoField = VideoField$1;
|
|
633
735
|
exports["default"] = UploadField$1;
|
|
634
736
|
exports.definition = definition;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@panneau/field-upload",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.94",
|
|
4
4
|
"description": "An Upload field",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -61,7 +61,8 @@
|
|
|
61
61
|
"@panneau/element-button": "^3.0.55",
|
|
62
62
|
"@panneau/element-card": "^3.0.75",
|
|
63
63
|
"@panneau/element-label": "^3.0.45",
|
|
64
|
-
"@panneau/
|
|
64
|
+
"@panneau/element-media-card": "^3.0.94",
|
|
65
|
+
"@panneau/list-resource-items": "^3.0.91",
|
|
65
66
|
"@panneau/modal-dialog": "^3.0.77",
|
|
66
67
|
"@panneau/themes": "^3.0.55",
|
|
67
68
|
"@panneau/uppy": "^3.0.59",
|
|
@@ -75,12 +76,11 @@
|
|
|
75
76
|
"@uppy/utils": "^5.5.0",
|
|
76
77
|
"classnames": "^2.2.6",
|
|
77
78
|
"lodash": "^4.17.21",
|
|
78
|
-
"pretty-bytes": "^5.4.1",
|
|
79
79
|
"prop-types": "^15.7.2",
|
|
80
80
|
"react-intl": "^5.15.8||^6.0.0"
|
|
81
81
|
},
|
|
82
82
|
"publishConfig": {
|
|
83
83
|
"access": "public"
|
|
84
84
|
},
|
|
85
|
-
"gitHead": "
|
|
85
|
+
"gitHead": "5d3c2bd2a00dad5964ed48e7bd099f084959dc2c"
|
|
86
86
|
}
|