@panneau/field-upload 3.0.94 → 3.0.97
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 +43 -197
- package/lib/index.js +41 -199
- package/package.json +3 -4
package/es/index.js
CHANGED
|
@@ -7,19 +7,16 @@ import classNames from 'classnames';
|
|
|
7
7
|
import isArray from 'lodash/isArray';
|
|
8
8
|
import isObject from 'lodash/isObject';
|
|
9
9
|
import PropTypes from 'prop-types';
|
|
10
|
-
import React, {
|
|
10
|
+
import React, { useCallback, useMemo, useState } from 'react';
|
|
11
11
|
import { FormattedMessage } from 'react-intl';
|
|
12
12
|
import { PropTypes as PropTypes$1 } from '@panneau/core';
|
|
13
13
|
import { useResourceQuery } from '@panneau/core/hooks';
|
|
14
14
|
import Button from '@panneau/element-button';
|
|
15
15
|
import Label from '@panneau/element-label';
|
|
16
|
+
import { MediaCards } from '@panneau/element-media-card';
|
|
16
17
|
import ResourceItemsList from '@panneau/list-resource-items';
|
|
17
18
|
import Dialog from '@panneau/modal-dialog';
|
|
18
19
|
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
20
|
import '@uppy/core/dist/style.css';
|
|
24
21
|
import '@uppy/dashboard/dist/style.css';
|
|
25
22
|
import '@uppy/drag-drop/dist/style.css';
|
|
@@ -27,185 +24,6 @@ import '@uppy/status-bar/dist/style.css';
|
|
|
27
24
|
|
|
28
25
|
var styles = {"container":"panneau-field-upload-container","dashboard":"panneau-field-upload-dashboard","dashboardModal":"panneau-field-upload-dashboardModal"};
|
|
29
26
|
|
|
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
|
-
|
|
209
27
|
var propTypes = {
|
|
210
28
|
value: PropTypes.oneOfType([PropTypes.array, PropTypes.shape({
|
|
211
29
|
filename: PropTypes.string,
|
|
@@ -217,8 +35,10 @@ var propTypes = {
|
|
|
217
35
|
sources: PropTypes.arrayOf(PropTypes.oneOf(['webcam', 'facebook', 'instagram', 'dropbox', 'google-drive'])),
|
|
218
36
|
withButton: PropTypes.bool,
|
|
219
37
|
withFind: PropTypes.bool,
|
|
38
|
+
withClearButton: PropTypes.bool,
|
|
220
39
|
addButtonLabel: PropTypes$1.label,
|
|
221
40
|
findButtonLabel: PropTypes$1.label,
|
|
41
|
+
clearButtonLabel: PropTypes$1.label,
|
|
222
42
|
countLabel: PropTypes$1.label,
|
|
223
43
|
confirmButtonLabel: PropTypes$1.label,
|
|
224
44
|
cancelButtonLabel: PropTypes$1.label,
|
|
@@ -234,6 +54,7 @@ var propTypes = {
|
|
|
234
54
|
height: PropTypes.number,
|
|
235
55
|
disabled: PropTypes.bool,
|
|
236
56
|
onChange: PropTypes.func,
|
|
57
|
+
onClear: PropTypes.func,
|
|
237
58
|
className: PropTypes.string
|
|
238
59
|
};
|
|
239
60
|
var defaultProps = {
|
|
@@ -243,6 +64,7 @@ var defaultProps = {
|
|
|
243
64
|
sources: ['webcam', 'facebook', 'instagram', 'dropbox', 'google-drive'],
|
|
244
65
|
withButton: false,
|
|
245
66
|
withFind: false,
|
|
67
|
+
withClearButton: false,
|
|
246
68
|
addButtonLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
247
69
|
id: "NI9440",
|
|
248
70
|
defaultMessage: [{
|
|
@@ -257,6 +79,13 @@ var defaultProps = {
|
|
|
257
79
|
"value": "Find a file"
|
|
258
80
|
}]
|
|
259
81
|
}),
|
|
82
|
+
clearButtonLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
83
|
+
id: "odaCUe",
|
|
84
|
+
defaultMessage: [{
|
|
85
|
+
"type": 0,
|
|
86
|
+
"value": "Clear"
|
|
87
|
+
}]
|
|
88
|
+
}),
|
|
260
89
|
countLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
261
90
|
id: "XLOebh",
|
|
262
91
|
defaultMessage: [{
|
|
@@ -288,6 +117,7 @@ var defaultProps = {
|
|
|
288
117
|
height: 300,
|
|
289
118
|
disabled: false,
|
|
290
119
|
onChange: null,
|
|
120
|
+
onClear: null,
|
|
291
121
|
className: null
|
|
292
122
|
};
|
|
293
123
|
var UploadField = function UploadField(_ref) {
|
|
@@ -297,8 +127,10 @@ var UploadField = function UploadField(_ref) {
|
|
|
297
127
|
sources = _ref.sources,
|
|
298
128
|
withButton = _ref.withButton,
|
|
299
129
|
withFind = _ref.withFind,
|
|
130
|
+
withClearButton = _ref.withClearButton,
|
|
300
131
|
addButtonLabel = _ref.addButtonLabel,
|
|
301
132
|
findButtonLabel = _ref.findButtonLabel,
|
|
133
|
+
clearButtonLabel = _ref.clearButtonLabel,
|
|
302
134
|
countLabel = _ref.countLabel,
|
|
303
135
|
confirmButtonLabel = _ref.confirmButtonLabel,
|
|
304
136
|
cancelButtonLabel = _ref.cancelButtonLabel,
|
|
@@ -312,6 +144,7 @@ var UploadField = function UploadField(_ref) {
|
|
|
312
144
|
height = _ref.height,
|
|
313
145
|
disabled = _ref.disabled,
|
|
314
146
|
onChange = _ref.onChange,
|
|
147
|
+
onClear = _ref.onClear,
|
|
315
148
|
className = _ref.className;
|
|
316
149
|
var mergeData = useCallback(function (newValue) {
|
|
317
150
|
// Merge the response from our back-end
|
|
@@ -381,17 +214,21 @@ var UploadField = function UploadField(_ref) {
|
|
|
381
214
|
var closeModal = useCallback(function () {
|
|
382
215
|
setModalOpened(false);
|
|
383
216
|
if (uppy !== null) {
|
|
384
|
-
uppy.cancelAll(
|
|
217
|
+
uppy.cancelAll({
|
|
218
|
+
reason: 'user'
|
|
219
|
+
});
|
|
385
220
|
}
|
|
386
221
|
}, [uppy, setModalOpened]);
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
222
|
+
var onClickClear = useCallback(function () {
|
|
223
|
+
if (onClear !== null) {
|
|
224
|
+
onClear();
|
|
225
|
+
}
|
|
226
|
+
if (uppy !== null) {
|
|
227
|
+
uppy.cancelAll({
|
|
228
|
+
reason: 'user'
|
|
229
|
+
});
|
|
230
|
+
}
|
|
231
|
+
}, [uppy, onClear]);
|
|
395
232
|
var onClickRemove = useCallback(function (idx) {
|
|
396
233
|
if (onChange !== null && isArray(value) && value.length > 1) {
|
|
397
234
|
onChange(value.filter(function (v, i) {
|
|
@@ -475,14 +312,23 @@ var UploadField = function UploadField(_ref) {
|
|
|
475
312
|
return /*#__PURE__*/React.createElement("div", {
|
|
476
313
|
className: classNames([styles.container, _defineProperty({}, className, className !== null)])
|
|
477
314
|
// ref={containerRef}
|
|
478
|
-
}, /*#__PURE__*/React.createElement(
|
|
315
|
+
}, hasMedia ? /*#__PURE__*/React.createElement(MediaCards, {
|
|
479
316
|
value: values,
|
|
480
317
|
namePath: namePath,
|
|
481
318
|
thumbnailPath: thumbnailPath,
|
|
482
319
|
sizePath: sizePath,
|
|
483
320
|
disabled: disabled,
|
|
484
321
|
onClickRemove: onClickRemove
|
|
485
|
-
}),
|
|
322
|
+
}) : null, hasMedia && withClearButton ? /*#__PURE__*/React.createElement("div", {
|
|
323
|
+
className: "row mt-2"
|
|
324
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
325
|
+
className: "col-auto"
|
|
326
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
327
|
+
type: "button",
|
|
328
|
+
theme: "primary",
|
|
329
|
+
onClick: onClickClear,
|
|
330
|
+
outline: true
|
|
331
|
+
}, /*#__PURE__*/React.createElement(Label, null, clearButtonLabel)))) : null, (!hasMedia || allowMultipleUploads) && withButton ? /*#__PURE__*/React.createElement("div", {
|
|
486
332
|
className: "row"
|
|
487
333
|
}, /*#__PURE__*/React.createElement("div", {
|
|
488
334
|
className: "col-auto"
|
|
@@ -557,7 +403,7 @@ var UploadField = function UploadField(_ref) {
|
|
|
557
403
|
// </Dialog>
|
|
558
404
|
null, showResourceModal ? /*#__PURE__*/React.createElement(Dialog, {
|
|
559
405
|
title: /*#__PURE__*/React.createElement(Label, null, findButtonLabel),
|
|
560
|
-
size: "
|
|
406
|
+
size: "xl",
|
|
561
407
|
onClose: closeResourceModal
|
|
562
408
|
}, /*#__PURE__*/React.createElement(ResourceItemsList, {
|
|
563
409
|
resource: "medias",
|
|
@@ -702,4 +548,4 @@ var FontField = function FontField(props) {
|
|
|
702
548
|
};
|
|
703
549
|
var FontField$1 = FontField;
|
|
704
550
|
|
|
705
|
-
export { AudioField$1 as AudioField, DocumentField$1 as DocumentField, FontField$1 as FontField, ImageField$1 as ImageField, ImagesField$1 as ImagesField,
|
|
551
|
+
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 };
|
package/lib/index.js
CHANGED
|
@@ -17,13 +17,10 @@ var core = require('@panneau/core');
|
|
|
17
17
|
var hooks = require('@panneau/core/hooks');
|
|
18
18
|
var Button = require('@panneau/element-button');
|
|
19
19
|
var Label = require('@panneau/element-label');
|
|
20
|
+
var elementMediaCard = require('@panneau/element-media-card');
|
|
20
21
|
var ResourceItemsList = require('@panneau/list-resource-items');
|
|
21
22
|
var Dialog = require('@panneau/modal-dialog');
|
|
22
23
|
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
24
|
require('@uppy/core/dist/style.css');
|
|
28
25
|
require('@uppy/dashboard/dist/style.css');
|
|
29
26
|
require('@uppy/drag-drop/dist/style.css');
|
|
@@ -44,190 +41,9 @@ var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
|
|
|
44
41
|
var Label__default = /*#__PURE__*/_interopDefaultLegacy(Label);
|
|
45
42
|
var ResourceItemsList__default = /*#__PURE__*/_interopDefaultLegacy(ResourceItemsList);
|
|
46
43
|
var Dialog__default = /*#__PURE__*/_interopDefaultLegacy(Dialog);
|
|
47
|
-
var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
|
|
48
|
-
var prettyBytes__default = /*#__PURE__*/_interopDefaultLegacy(prettyBytes);
|
|
49
44
|
|
|
50
45
|
var styles = {"container":"panneau-field-upload-container","dashboard":"panneau-field-upload-dashboard","dashboardModal":"panneau-field-upload-dashboardModal"};
|
|
51
46
|
|
|
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
|
-
|
|
231
47
|
var propTypes = {
|
|
232
48
|
value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].array, PropTypes__default["default"].shape({
|
|
233
49
|
filename: PropTypes__default["default"].string,
|
|
@@ -239,8 +55,10 @@ var propTypes = {
|
|
|
239
55
|
sources: PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOf(['webcam', 'facebook', 'instagram', 'dropbox', 'google-drive'])),
|
|
240
56
|
withButton: PropTypes__default["default"].bool,
|
|
241
57
|
withFind: PropTypes__default["default"].bool,
|
|
58
|
+
withClearButton: PropTypes__default["default"].bool,
|
|
242
59
|
addButtonLabel: core.PropTypes.label,
|
|
243
60
|
findButtonLabel: core.PropTypes.label,
|
|
61
|
+
clearButtonLabel: core.PropTypes.label,
|
|
244
62
|
countLabel: core.PropTypes.label,
|
|
245
63
|
confirmButtonLabel: core.PropTypes.label,
|
|
246
64
|
cancelButtonLabel: core.PropTypes.label,
|
|
@@ -256,6 +74,7 @@ var propTypes = {
|
|
|
256
74
|
height: PropTypes__default["default"].number,
|
|
257
75
|
disabled: PropTypes__default["default"].bool,
|
|
258
76
|
onChange: PropTypes__default["default"].func,
|
|
77
|
+
onClear: PropTypes__default["default"].func,
|
|
259
78
|
className: PropTypes__default["default"].string
|
|
260
79
|
};
|
|
261
80
|
var defaultProps = {
|
|
@@ -265,6 +84,7 @@ var defaultProps = {
|
|
|
265
84
|
sources: ['webcam', 'facebook', 'instagram', 'dropbox', 'google-drive'],
|
|
266
85
|
withButton: false,
|
|
267
86
|
withFind: false,
|
|
87
|
+
withClearButton: false,
|
|
268
88
|
addButtonLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
|
|
269
89
|
id: "NI9440",
|
|
270
90
|
defaultMessage: [{
|
|
@@ -279,6 +99,13 @@ var defaultProps = {
|
|
|
279
99
|
"value": "Find a file"
|
|
280
100
|
}]
|
|
281
101
|
}),
|
|
102
|
+
clearButtonLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
|
|
103
|
+
id: "odaCUe",
|
|
104
|
+
defaultMessage: [{
|
|
105
|
+
"type": 0,
|
|
106
|
+
"value": "Clear"
|
|
107
|
+
}]
|
|
108
|
+
}),
|
|
282
109
|
countLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
|
|
283
110
|
id: "XLOebh",
|
|
284
111
|
defaultMessage: [{
|
|
@@ -310,6 +137,7 @@ var defaultProps = {
|
|
|
310
137
|
height: 300,
|
|
311
138
|
disabled: false,
|
|
312
139
|
onChange: null,
|
|
140
|
+
onClear: null,
|
|
313
141
|
className: null
|
|
314
142
|
};
|
|
315
143
|
var UploadField = function UploadField(_ref) {
|
|
@@ -319,8 +147,10 @@ var UploadField = function UploadField(_ref) {
|
|
|
319
147
|
sources = _ref.sources,
|
|
320
148
|
withButton = _ref.withButton,
|
|
321
149
|
withFind = _ref.withFind,
|
|
150
|
+
withClearButton = _ref.withClearButton,
|
|
322
151
|
addButtonLabel = _ref.addButtonLabel,
|
|
323
152
|
findButtonLabel = _ref.findButtonLabel,
|
|
153
|
+
clearButtonLabel = _ref.clearButtonLabel,
|
|
324
154
|
countLabel = _ref.countLabel,
|
|
325
155
|
confirmButtonLabel = _ref.confirmButtonLabel,
|
|
326
156
|
cancelButtonLabel = _ref.cancelButtonLabel,
|
|
@@ -334,6 +164,7 @@ var UploadField = function UploadField(_ref) {
|
|
|
334
164
|
height = _ref.height,
|
|
335
165
|
disabled = _ref.disabled,
|
|
336
166
|
onChange = _ref.onChange,
|
|
167
|
+
onClear = _ref.onClear,
|
|
337
168
|
className = _ref.className;
|
|
338
169
|
var mergeData = React.useCallback(function (newValue) {
|
|
339
170
|
// Merge the response from our back-end
|
|
@@ -403,17 +234,21 @@ var UploadField = function UploadField(_ref) {
|
|
|
403
234
|
var closeModal = React.useCallback(function () {
|
|
404
235
|
setModalOpened(false);
|
|
405
236
|
if (uppy$1 !== null) {
|
|
406
|
-
uppy$1.cancelAll(
|
|
237
|
+
uppy$1.cancelAll({
|
|
238
|
+
reason: 'user'
|
|
239
|
+
});
|
|
407
240
|
}
|
|
408
241
|
}, [uppy$1, setModalOpened]);
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
242
|
+
var onClickClear = React.useCallback(function () {
|
|
243
|
+
if (onClear !== null) {
|
|
244
|
+
onClear();
|
|
245
|
+
}
|
|
246
|
+
if (uppy$1 !== null) {
|
|
247
|
+
uppy$1.cancelAll({
|
|
248
|
+
reason: 'user'
|
|
249
|
+
});
|
|
250
|
+
}
|
|
251
|
+
}, [uppy$1, onClear]);
|
|
417
252
|
var onClickRemove = React.useCallback(function (idx) {
|
|
418
253
|
if (onChange !== null && isArray__default["default"](value) && value.length > 1) {
|
|
419
254
|
onChange(value.filter(function (v, i) {
|
|
@@ -497,14 +332,23 @@ var UploadField = function UploadField(_ref) {
|
|
|
497
332
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
498
333
|
className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)])
|
|
499
334
|
// ref={containerRef}
|
|
500
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
335
|
+
}, hasMedia ? /*#__PURE__*/React__default["default"].createElement(elementMediaCard.MediaCards, {
|
|
501
336
|
value: values,
|
|
502
337
|
namePath: namePath,
|
|
503
338
|
thumbnailPath: thumbnailPath,
|
|
504
339
|
sizePath: sizePath,
|
|
505
340
|
disabled: disabled,
|
|
506
341
|
onClickRemove: onClickRemove
|
|
507
|
-
}),
|
|
342
|
+
}) : null, hasMedia && withClearButton ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
343
|
+
className: "row mt-2"
|
|
344
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
345
|
+
className: "col-auto"
|
|
346
|
+
}, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
|
|
347
|
+
type: "button",
|
|
348
|
+
theme: "primary",
|
|
349
|
+
onClick: onClickClear,
|
|
350
|
+
outline: true
|
|
351
|
+
}, /*#__PURE__*/React__default["default"].createElement(Label__default["default"], null, clearButtonLabel)))) : null, (!hasMedia || allowMultipleUploads) && withButton ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
508
352
|
className: "row"
|
|
509
353
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
510
354
|
className: "col-auto"
|
|
@@ -579,7 +423,7 @@ var UploadField = function UploadField(_ref) {
|
|
|
579
423
|
// </Dialog>
|
|
580
424
|
null, showResourceModal ? /*#__PURE__*/React__default["default"].createElement(Dialog__default["default"], {
|
|
581
425
|
title: /*#__PURE__*/React__default["default"].createElement(Label__default["default"], null, findButtonLabel),
|
|
582
|
-
size: "
|
|
426
|
+
size: "xl",
|
|
583
427
|
onClose: closeResourceModal
|
|
584
428
|
}, /*#__PURE__*/React__default["default"].createElement(ResourceItemsList__default["default"], {
|
|
585
429
|
resource: "medias",
|
|
@@ -729,8 +573,6 @@ exports.DocumentField = DocumentField$1;
|
|
|
729
573
|
exports.FontField = FontField$1;
|
|
730
574
|
exports.ImageField = ImageField$1;
|
|
731
575
|
exports.ImagesField = ImagesField$1;
|
|
732
|
-
exports.MediaPreviewCard = MediaPreviewCard$1;
|
|
733
|
-
exports.MediaPreviewCards = MediaPreviewCards$1;
|
|
734
576
|
exports.VideoField = VideoField$1;
|
|
735
577
|
exports["default"] = UploadField$1;
|
|
736
578
|
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.97",
|
|
4
4
|
"description": "An Upload field",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -59,9 +59,8 @@
|
|
|
59
59
|
"@fortawesome/react-fontawesome": "^0.1.14",
|
|
60
60
|
"@panneau/core": "^3.0.45",
|
|
61
61
|
"@panneau/element-button": "^3.0.55",
|
|
62
|
-
"@panneau/element-card": "^3.0.75",
|
|
63
62
|
"@panneau/element-label": "^3.0.45",
|
|
64
|
-
"@panneau/element-media-card": "^3.0.
|
|
63
|
+
"@panneau/element-media-card": "^3.0.95",
|
|
65
64
|
"@panneau/list-resource-items": "^3.0.91",
|
|
66
65
|
"@panneau/modal-dialog": "^3.0.77",
|
|
67
66
|
"@panneau/themes": "^3.0.55",
|
|
@@ -82,5 +81,5 @@
|
|
|
82
81
|
"publishConfig": {
|
|
83
82
|
"access": "public"
|
|
84
83
|
},
|
|
85
|
-
"gitHead": "
|
|
84
|
+
"gitHead": "041aa66bfc4eff0723cc6d26e1e9a4c56beb65f9"
|
|
86
85
|
}
|