@panneau/field-upload 3.0.91 → 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.
Files changed (3) hide show
  1. package/es/index.js +199 -99
  2. package/lib/index.js +201 -99
  3. package/package.json +3 -3
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, { useCallback, useMemo, useState } from '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
- }, values !== null ? values.map(function (media, idx) {
300
- var _media$id = media.id,
301
- id = _media$id === void 0 ? null : _media$id,
302
- _media$filename = media.filename,
303
- filename = _media$filename === void 0 ? null : _media$filename,
304
- _media$size = media.size,
305
- fileSize = _media$size === void 0 ? 0 : _media$size,
306
- _media$thumbnail_url = media.thumbnail_url,
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 _ref7 = item || {},
475
- _ref7$id = _ref7.id,
476
- itemId = _ref7$id === void 0 ? null : _ref7$id;
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 _ref8 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
479
- _ref8$id = _ref8.id,
480
- modalItemId = _ref8$id === void 0 ? null : _ref8$id;
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
- }, values !== null ? values.map(function (media, idx) {
322
- var _media$id = media.id,
323
- id = _media$id === void 0 ? null : _media$id,
324
- _media$filename = media.filename,
325
- filename = _media$filename === void 0 ? null : _media$filename,
326
- _media$size = media.size,
327
- fileSize = _media$size === void 0 ? 0 : _media$size,
328
- _media$thumbnail_url = media.thumbnail_url,
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 _ref7 = item || {},
497
- _ref7$id = _ref7.id,
498
- itemId = _ref7$id === void 0 ? null : _ref7$id;
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 _ref8 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
501
- _ref8$id = _ref8.id,
502
- modalItemId = _ref8$id === void 0 ? null : _ref8$id;
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.91",
3
+ "version": "3.0.94",
4
4
  "description": "An Upload field",
5
5
  "keywords": [
6
6
  "javascript"
@@ -61,6 +61,7 @@
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/element-media-card": "^3.0.94",
64
65
  "@panneau/list-resource-items": "^3.0.91",
65
66
  "@panneau/modal-dialog": "^3.0.77",
66
67
  "@panneau/themes": "^3.0.55",
@@ -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": "a8a807211fd09f324a306d105e1b46f211f94b09"
85
+ "gitHead": "5d3c2bd2a00dad5964ed48e7bd099f084959dc2c"
86
86
  }