@panneau/field-upload 1.0.3-alpha.1 → 1.0.3-alpha.10

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 +98 -89
  2. package/lib/index.js +102 -91
  3. package/package.json +7 -7
package/es/index.js CHANGED
@@ -2,19 +2,21 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
2
2
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
3
3
  import { faTimes, faFileVideo, faFileImage, faFileAudio } from '@fortawesome/free-solid-svg-icons';
4
4
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
5
- import { PropTypes as PropTypes$1 } from '@panneau/core';
6
- import { useUppy } from '@panneau/core/contexts';
7
- import Button from '@panneau/element-button';
8
- import Label from '@panneau/element-label';
9
- import '@uppy/core/dist/style.css';
10
- import '@uppy/dashboard/dist/style.css';
11
5
  import { Dashboard, DashboardModal } from '@uppy/react';
6
+ import classNames from 'classnames';
7
+ import get from 'lodash/get';
12
8
  import isArray from 'lodash/isArray';
13
9
  import isObject from 'lodash/isObject';
14
10
  import prettyBytes from 'pretty-bytes';
15
11
  import PropTypes from 'prop-types';
16
12
  import React, { useCallback, useMemo, useState } from 'react';
17
13
  import { FormattedMessage } from 'react-intl';
14
+ import { PropTypes as PropTypes$1 } from '@panneau/core';
15
+ import { useUppy } from '@panneau/core/contexts';
16
+ import Button from '@panneau/element-button';
17
+ import Label from '@panneau/element-label';
18
+ import '@uppy/core/dist/style.css';
19
+ import '@uppy/dashboard/dist/style.css';
18
20
 
19
21
  var propTypes = {
20
22
  value: PropTypes.oneOfType([PropTypes.array, PropTypes.shape({
@@ -28,6 +30,9 @@ var propTypes = {
28
30
  withButton: PropTypes.bool,
29
31
  addButtonLabel: PropTypes$1.label,
30
32
  allowMultipleUploads: PropTypes.bool,
33
+ namePath: PropTypes.string,
34
+ thumbnailPath: PropTypes.string,
35
+ sizePath: PropTypes.string,
31
36
  onChange: PropTypes.func,
32
37
  className: PropTypes.string
33
38
  };
@@ -45,43 +50,44 @@ var defaultProps = {
45
50
  }]
46
51
  }),
47
52
  allowMultipleUploads: false,
53
+ namePath: null,
54
+ thumbnailPath: null,
55
+ sizePath: null,
48
56
  onChange: null,
49
57
  className: null
50
58
  };
51
-
52
59
  var UploadField = function UploadField(_ref) {
53
60
  var value = _ref.value,
54
- types = _ref.types,
55
- fileTypes = _ref.fileTypes,
56
- sources = _ref.sources,
57
- withButton = _ref.withButton,
58
- addButtonLabel = _ref.addButtonLabel,
59
- allowMultipleUploads = _ref.allowMultipleUploads,
60
- onChange = _ref.onChange,
61
- className = _ref.className;
61
+ types = _ref.types,
62
+ fileTypes = _ref.fileTypes,
63
+ sources = _ref.sources,
64
+ withButton = _ref.withButton,
65
+ addButtonLabel = _ref.addButtonLabel,
66
+ allowMultipleUploads = _ref.allowMultipleUploads,
67
+ namePath = _ref.namePath,
68
+ thumbnailPath = _ref.thumbnailPath,
69
+ sizePath = _ref.sizePath,
70
+ onChange = _ref.onChange,
71
+ className = _ref.className;
62
72
  var onComplete = useCallback(function (response) {
63
73
  console.log('upload complete', response); // eslint-disable-line
64
-
65
74
  var newValue = null;
66
-
67
75
  if (isArray(response)) {
68
76
  if (allowMultipleUploads) {
69
77
  newValue = response;
70
78
  } else {
71
79
  var _response = _slicedToArray(response, 1),
72
- first = _response[0];
73
-
80
+ first = _response[0];
74
81
  newValue = first;
75
82
  }
76
83
  } else if (response && response.successful) {
77
84
  newValue = response.successful.length > 0 ? response.successful[0].response.body : null;
78
- } // Merge the response from our back-end
79
-
85
+ }
80
86
 
87
+ // Merge the response from our back-end
81
88
  if (isObject(newValue) && isObject(newValue.response) && newValue.response.status === 200 && newValue.response.body !== null) {
82
89
  newValue = _objectSpread(_objectSpread({}, newValue), newValue.response.body || null);
83
90
  }
84
-
85
91
  console.log('new upload value', newValue); // eslint-disable-line
86
92
 
87
93
  if (onChange !== null) {
@@ -93,7 +99,6 @@ var UploadField = function UploadField(_ref) {
93
99
  if (fileTypes !== null) {
94
100
  return fileTypes;
95
101
  }
96
-
97
102
  return typesString.split('.').map(function (type) {
98
103
  return "".concat(type, "/*");
99
104
  });
@@ -114,88 +119,99 @@ var UploadField = function UploadField(_ref) {
114
119
  onChange(null);
115
120
  }
116
121
  }, [value, onChange]);
117
-
118
122
  var _useState = useState(false),
119
- _useState2 = _slicedToArray(_useState, 2),
120
- modalOpened = _useState2[0],
121
- setModalOpened = _useState2[1];
122
-
123
+ _useState2 = _slicedToArray(_useState, 2),
124
+ modalOpened = _useState2[0],
125
+ setModalOpened = _useState2[1];
123
126
  var openModal = useCallback(function () {
124
127
  setModalOpened(true);
125
128
  }, [setModalOpened]);
126
129
  var closeModal = useCallback(function () {
127
130
  setModalOpened(false);
128
131
  }, [setModalOpened]);
129
- var values = isArray(value) ? value : [value];
132
+ var values = useMemo(function () {
133
+ if (isArray(value)) {
134
+ return value;
135
+ }
136
+ return value !== null ? [value] : null;
137
+ }, [value]);
138
+ var hasMedia = values !== null && values.length > 0;
130
139
  return /*#__PURE__*/React.createElement("div", {
131
140
  className: className
132
- }, value !== null ? /*#__PURE__*/React.createElement("div", {
133
- className: "card"
134
- }, /*#__PURE__*/React.createElement("div", {
135
- className: "card-body p-1 pl-2"
136
- }, /*#__PURE__*/React.createElement("div", {
137
- className: "media align-items-center"
138
- }, values.map(function (val, idx) {
139
- var _ref2 = val || {},
140
- _ref2$id = _ref2.id,
141
- id = _ref2$id === void 0 ? null : _ref2$id,
142
- _ref2$filename = _ref2.filename,
143
- filename = _ref2$filename === void 0 ? null : _ref2$filename,
144
- _ref2$size = _ref2.size,
145
- size = _ref2$size === void 0 ? 0 : _ref2$size,
146
- _ref2$thumbnail_url = _ref2.thumbnail_url,
147
- thumbnailUrl = _ref2$thumbnail_url === void 0 ? null : _ref2$thumbnail_url,
148
- _ref2$preview = _ref2.preview,
149
- preview = _ref2$preview === void 0 ? null : _ref2$preview,
150
- _ref2$data = _ref2.data,
151
- data = _ref2$data === void 0 ? {} : _ref2$data,
152
- type = _ref2.type;
153
-
154
- var _ref3 = data || {},
155
- _ref3$file = _ref3.file,
156
- file = _ref3$file === void 0 ? null : _ref3$file;
157
-
141
+ }, values !== null ? values.map(function (media, idx) {
142
+ var _media$id = media.id,
143
+ id = _media$id === void 0 ? null : _media$id,
144
+ _media$filename = media.filename,
145
+ filename = _media$filename === void 0 ? null : _media$filename,
146
+ _media$size = media.size,
147
+ fileSize = _media$size === void 0 ? 0 : _media$size,
148
+ _media$thumbnail_url = media.thumbnail_url,
149
+ thumbnailUrl = _media$thumbnail_url === void 0 ? null : _media$thumbnail_url,
150
+ _media$preview = media.preview,
151
+ preview = _media$preview === void 0 ? null : _media$preview,
152
+ _media$data = media.data,
153
+ data = _media$data === void 0 ? {} : _media$data,
154
+ type = media.type;
155
+ var _ref2 = data || {},
156
+ _ref2$file = _ref2.file,
157
+ file = _ref2$file === void 0 ? null : _ref2$file;
158
158
  var faIcon = null;
159
-
160
159
  switch (type) {
161
160
  case 'audio':
162
161
  faIcon = faFileAudio;
163
162
  break;
164
-
165
163
  case 'image':
166
164
  faIcon = faFileImage;
167
165
  break;
168
-
169
166
  case 'video':
170
167
  faIcon = faFileVideo;
171
168
  break;
172
169
  }
173
-
174
- var hasPreview = preview !== null || thumbnailUrl !== null;
170
+ var name = (namePath !== null ? get(media || {}, namePath) : null) || filename || file;
171
+ var thumbnail = (thumbnailPath !== null ? get(media || {}, thumbnailPath) : null) || thumbnailUrl || preview;
172
+ var size = (sizePath !== null ? get(media || {}, sizePath) : null) || fileSize;
173
+ var hasThumbnail = preview !== null || thumbnailUrl !== null;
175
174
  return /*#__PURE__*/React.createElement("div", {
176
- className: "d-flex align-items-center justify-content-between my-1",
177
- key: "file-".concat(id, "-").concat(filename, "-").concat(idx + 1)
178
- }, /*#__PURE__*/React.createElement("div", {
179
- className: "d-flex align-items-center mx-2 text-truncate"
180
- }, !hasPreview && faIcon !== null ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
181
- icon: faIcon,
182
- className: "me-2"
183
- }) : null, hasPreview ? /*#__PURE__*/React.createElement("img", {
184
- className: "img-thumbnail me-2",
185
- src: preview || thumbnailUrl,
186
- alt: "preview",
175
+ className: "card mb-1",
176
+ key: "media-".concat(id),
187
177
  style: {
188
- height: 100,
178
+ maxWidth: 500
179
+ }
180
+ }, /*#__PURE__*/React.createElement("div", {
181
+ className: "d-flex align-items-center"
182
+ }, hasThumbnail || faIcon !== null ? /*#__PURE__*/React.createElement("div", {
183
+ className: "p-2 text-center",
184
+ style: hasThumbnail ? {
185
+ width: 100,
189
186
  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%)',
190
187
  backgroundSize: '20px 20px',
191
188
  backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0'
189
+ } : {
190
+ width: 100
192
191
  }
193
- }) : null, /*#__PURE__*/React.createElement("div", {
194
- className: "media-body text-truncate small me-2"
195
- }, /*#__PURE__*/React.createElement("strong", null, file || filename)), /*#__PURE__*/React.createElement("small", {
196
- className: "text-muted me-2"
197
- }, size > 0 ? prettyBytes(size) : size)), /*#__PURE__*/React.createElement("div", {
198
- className: "mx-2"
192
+ }, !hasThumbnail && faIcon !== null ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
193
+ icon: faIcon,
194
+ className: "m-auto fs-3"
195
+ }) : null, hasThumbnail ? /*#__PURE__*/React.createElement("img", {
196
+ className: "img-fluid",
197
+ src: thumbnail,
198
+ alt: "thumbnail",
199
+ style: {
200
+ maxHeight: 75
201
+ }
202
+ }) : null) : null, /*#__PURE__*/React.createElement("div", {
203
+ className: "flex-grow-1"
204
+ }, /*#__PURE__*/React.createElement("div", {
205
+ className: "card-body"
206
+ }, /*#__PURE__*/React.createElement("h5", {
207
+ className: classNames(['card-title', 'fs-6', {
208
+ 'mb-1': size !== null && size > 0,
209
+ 'mb-0': size === null || size <= 0
210
+ }])
211
+ }, name), size !== null && size > 0 ? /*#__PURE__*/React.createElement("p", {
212
+ className: "card-text text-muted small"
213
+ }, prettyBytes(size)) : null)), /*#__PURE__*/React.createElement("div", {
214
+ className: "p-2"
199
215
  }, /*#__PURE__*/React.createElement(Button, {
200
216
  type: "button",
201
217
  size: "sm",
@@ -206,16 +222,16 @@ var UploadField = function UploadField(_ref) {
206
222
  }
207
223
  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
208
224
  icon: faTimes
209
- }))));
210
- })))) : /*#__PURE__*/React.createElement(React.Fragment, null, withButton ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
225
+ })))));
226
+ }) : null, !hasMedia && withButton ? /*#__PURE__*/React.createElement(Button, {
211
227
  type: "button",
212
228
  theme: "primary",
213
229
  onClick: openModal
214
- }, /*#__PURE__*/React.createElement(Label, null, addButtonLabel))) : /*#__PURE__*/React.createElement(React.Fragment, null, uppy !== null ? /*#__PURE__*/React.createElement(Dashboard, {
230
+ }, /*#__PURE__*/React.createElement(Label, null, addButtonLabel)) : null, !hasMedia && !withButton && uppy !== null ? /*#__PURE__*/React.createElement(Dashboard, {
215
231
  uppy: uppy,
216
232
  height: 300,
217
233
  plugins: sources
218
- }) : null)), withButton && uppy !== null ? /*#__PURE__*/React.createElement(DashboardModal, {
234
+ }) : null, withButton && uppy !== null ? /*#__PURE__*/React.createElement(DashboardModal, {
219
235
  uppy: uppy,
220
236
  plugins: sources,
221
237
  open: modalOpened,
@@ -223,7 +239,6 @@ var UploadField = function UploadField(_ref) {
223
239
  closeModalOnClickOutside: true
224
240
  }) : null);
225
241
  };
226
-
227
242
  UploadField.propTypes = propTypes;
228
243
  UploadField.defaultProps = defaultProps;
229
244
  var UploadField$1 = /*#__PURE__*/React.memo(UploadField);
@@ -243,33 +258,27 @@ var definition = [{
243
258
  }];
244
259
 
245
260
  /* eslint-disable react/jsx-props-no-spreading */
246
-
247
261
  var AudioField = function AudioField(props) {
248
262
  return /*#__PURE__*/React.createElement(UploadField$1, Object.assign({}, props, {
249
263
  types: ['audio']
250
264
  }));
251
265
  };
252
-
253
266
  var AudioField$1 = /*#__PURE__*/React.memo(AudioField);
254
267
 
255
268
  /* eslint-disable react/jsx-props-no-spreading */
256
-
257
269
  var ImageField = function ImageField(props) {
258
270
  return /*#__PURE__*/React.createElement(UploadField$1, Object.assign({}, props, {
259
271
  types: ['image']
260
272
  }));
261
273
  };
262
-
263
274
  var ImageField$1 = /*#__PURE__*/React.memo(ImageField);
264
275
 
265
276
  /* eslint-disable react/jsx-props-no-spreading */
266
-
267
277
  var VideoField = function VideoField(props) {
268
278
  return /*#__PURE__*/React.createElement(UploadField$1, Object.assign({}, props, {
269
279
  types: ['video']
270
280
  }));
271
281
  };
272
-
273
282
  var VideoField$1 = /*#__PURE__*/React.memo(VideoField);
274
283
 
275
284
  export { AudioField$1 as AudioField, ImageField$1 as ImageField, VideoField$1 as VideoField, UploadField$1 as default, definition };
package/lib/index.js CHANGED
@@ -6,31 +6,35 @@ var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
6
6
  var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
7
7
  var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
8
8
  var reactFontawesome = require('@fortawesome/react-fontawesome');
9
- var core = require('@panneau/core');
10
- var contexts = require('@panneau/core/contexts');
11
- var Button = require('@panneau/element-button');
12
- var Label = require('@panneau/element-label');
13
- require('@uppy/core/dist/style.css');
14
- require('@uppy/dashboard/dist/style.css');
15
9
  var react = require('@uppy/react');
10
+ var classNames = require('classnames');
11
+ var get = require('lodash/get');
16
12
  var isArray = require('lodash/isArray');
17
13
  var isObject = require('lodash/isObject');
18
14
  var prettyBytes = require('pretty-bytes');
19
15
  var PropTypes = require('prop-types');
20
16
  var React = require('react');
21
17
  var reactIntl = require('react-intl');
18
+ var core = require('@panneau/core');
19
+ var contexts = require('@panneau/core/contexts');
20
+ var Button = require('@panneau/element-button');
21
+ var Label = require('@panneau/element-label');
22
+ require('@uppy/core/dist/style.css');
23
+ require('@uppy/dashboard/dist/style.css');
22
24
 
23
25
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
24
26
 
25
27
  var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
26
28
  var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
27
- var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
28
- var Label__default = /*#__PURE__*/_interopDefaultLegacy(Label);
29
+ var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
30
+ var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
29
31
  var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);
30
32
  var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
31
33
  var prettyBytes__default = /*#__PURE__*/_interopDefaultLegacy(prettyBytes);
32
34
  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
33
35
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
36
+ var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
37
+ var Label__default = /*#__PURE__*/_interopDefaultLegacy(Label);
34
38
 
35
39
  var propTypes = {
36
40
  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].array, PropTypes__default["default"].shape({
@@ -44,6 +48,9 @@ var propTypes = {
44
48
  withButton: PropTypes__default["default"].bool,
45
49
  addButtonLabel: core.PropTypes.label,
46
50
  allowMultipleUploads: PropTypes__default["default"].bool,
51
+ namePath: PropTypes__default["default"].string,
52
+ thumbnailPath: PropTypes__default["default"].string,
53
+ sizePath: PropTypes__default["default"].string,
47
54
  onChange: PropTypes__default["default"].func,
48
55
  className: PropTypes__default["default"].string
49
56
  };
@@ -61,43 +68,44 @@ var defaultProps = {
61
68
  }]
62
69
  }),
63
70
  allowMultipleUploads: false,
71
+ namePath: null,
72
+ thumbnailPath: null,
73
+ sizePath: null,
64
74
  onChange: null,
65
75
  className: null
66
76
  };
67
-
68
77
  var UploadField = function UploadField(_ref) {
69
78
  var value = _ref.value,
70
- types = _ref.types,
71
- fileTypes = _ref.fileTypes,
72
- sources = _ref.sources,
73
- withButton = _ref.withButton,
74
- addButtonLabel = _ref.addButtonLabel,
75
- allowMultipleUploads = _ref.allowMultipleUploads,
76
- onChange = _ref.onChange,
77
- className = _ref.className;
79
+ types = _ref.types,
80
+ fileTypes = _ref.fileTypes,
81
+ sources = _ref.sources,
82
+ withButton = _ref.withButton,
83
+ addButtonLabel = _ref.addButtonLabel,
84
+ allowMultipleUploads = _ref.allowMultipleUploads,
85
+ namePath = _ref.namePath,
86
+ thumbnailPath = _ref.thumbnailPath,
87
+ sizePath = _ref.sizePath,
88
+ onChange = _ref.onChange,
89
+ className = _ref.className;
78
90
  var onComplete = React.useCallback(function (response) {
79
91
  console.log('upload complete', response); // eslint-disable-line
80
-
81
92
  var newValue = null;
82
-
83
93
  if (isArray__default["default"](response)) {
84
94
  if (allowMultipleUploads) {
85
95
  newValue = response;
86
96
  } else {
87
97
  var _response = _slicedToArray__default["default"](response, 1),
88
- first = _response[0];
89
-
98
+ first = _response[0];
90
99
  newValue = first;
91
100
  }
92
101
  } else if (response && response.successful) {
93
102
  newValue = response.successful.length > 0 ? response.successful[0].response.body : null;
94
- } // Merge the response from our back-end
95
-
103
+ }
96
104
 
105
+ // Merge the response from our back-end
97
106
  if (isObject__default["default"](newValue) && isObject__default["default"](newValue.response) && newValue.response.status === 200 && newValue.response.body !== null) {
98
107
  newValue = _objectSpread__default["default"](_objectSpread__default["default"]({}, newValue), newValue.response.body || null);
99
108
  }
100
-
101
109
  console.log('new upload value', newValue); // eslint-disable-line
102
110
 
103
111
  if (onChange !== null) {
@@ -109,7 +117,6 @@ var UploadField = function UploadField(_ref) {
109
117
  if (fileTypes !== null) {
110
118
  return fileTypes;
111
119
  }
112
-
113
120
  return typesString.split('.').map(function (type) {
114
121
  return "".concat(type, "/*");
115
122
  });
@@ -130,88 +137,99 @@ var UploadField = function UploadField(_ref) {
130
137
  onChange(null);
131
138
  }
132
139
  }, [value, onChange]);
133
-
134
140
  var _useState = React.useState(false),
135
- _useState2 = _slicedToArray__default["default"](_useState, 2),
136
- modalOpened = _useState2[0],
137
- setModalOpened = _useState2[1];
138
-
141
+ _useState2 = _slicedToArray__default["default"](_useState, 2),
142
+ modalOpened = _useState2[0],
143
+ setModalOpened = _useState2[1];
139
144
  var openModal = React.useCallback(function () {
140
145
  setModalOpened(true);
141
146
  }, [setModalOpened]);
142
147
  var closeModal = React.useCallback(function () {
143
148
  setModalOpened(false);
144
149
  }, [setModalOpened]);
145
- var values = isArray__default["default"](value) ? value : [value];
150
+ var values = React.useMemo(function () {
151
+ if (isArray__default["default"](value)) {
152
+ return value;
153
+ }
154
+ return value !== null ? [value] : null;
155
+ }, [value]);
156
+ var hasMedia = values !== null && values.length > 0;
146
157
  return /*#__PURE__*/React__default["default"].createElement("div", {
147
158
  className: className
148
- }, value !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
149
- className: "card"
150
- }, /*#__PURE__*/React__default["default"].createElement("div", {
151
- className: "card-body p-1 pl-2"
152
- }, /*#__PURE__*/React__default["default"].createElement("div", {
153
- className: "media align-items-center"
154
- }, values.map(function (val, idx) {
155
- var _ref2 = val || {},
156
- _ref2$id = _ref2.id,
157
- id = _ref2$id === void 0 ? null : _ref2$id,
158
- _ref2$filename = _ref2.filename,
159
- filename = _ref2$filename === void 0 ? null : _ref2$filename,
160
- _ref2$size = _ref2.size,
161
- size = _ref2$size === void 0 ? 0 : _ref2$size,
162
- _ref2$thumbnail_url = _ref2.thumbnail_url,
163
- thumbnailUrl = _ref2$thumbnail_url === void 0 ? null : _ref2$thumbnail_url,
164
- _ref2$preview = _ref2.preview,
165
- preview = _ref2$preview === void 0 ? null : _ref2$preview,
166
- _ref2$data = _ref2.data,
167
- data = _ref2$data === void 0 ? {} : _ref2$data,
168
- type = _ref2.type;
169
-
170
- var _ref3 = data || {},
171
- _ref3$file = _ref3.file,
172
- file = _ref3$file === void 0 ? null : _ref3$file;
173
-
159
+ }, values !== null ? values.map(function (media, idx) {
160
+ var _media$id = media.id,
161
+ id = _media$id === void 0 ? null : _media$id,
162
+ _media$filename = media.filename,
163
+ filename = _media$filename === void 0 ? null : _media$filename,
164
+ _media$size = media.size,
165
+ fileSize = _media$size === void 0 ? 0 : _media$size,
166
+ _media$thumbnail_url = media.thumbnail_url,
167
+ thumbnailUrl = _media$thumbnail_url === void 0 ? null : _media$thumbnail_url,
168
+ _media$preview = media.preview,
169
+ preview = _media$preview === void 0 ? null : _media$preview,
170
+ _media$data = media.data,
171
+ data = _media$data === void 0 ? {} : _media$data,
172
+ type = media.type;
173
+ var _ref2 = data || {},
174
+ _ref2$file = _ref2.file,
175
+ file = _ref2$file === void 0 ? null : _ref2$file;
174
176
  var faIcon = null;
175
-
176
177
  switch (type) {
177
178
  case 'audio':
178
179
  faIcon = freeSolidSvgIcons.faFileAudio;
179
180
  break;
180
-
181
181
  case 'image':
182
182
  faIcon = freeSolidSvgIcons.faFileImage;
183
183
  break;
184
-
185
184
  case 'video':
186
185
  faIcon = freeSolidSvgIcons.faFileVideo;
187
186
  break;
188
187
  }
189
-
190
- var hasPreview = preview !== null || thumbnailUrl !== null;
188
+ var name = (namePath !== null ? get__default["default"](media || {}, namePath) : null) || filename || file;
189
+ var thumbnail = (thumbnailPath !== null ? get__default["default"](media || {}, thumbnailPath) : null) || thumbnailUrl || preview;
190
+ var size = (sizePath !== null ? get__default["default"](media || {}, sizePath) : null) || fileSize;
191
+ var hasThumbnail = preview !== null || thumbnailUrl !== null;
191
192
  return /*#__PURE__*/React__default["default"].createElement("div", {
192
- className: "d-flex align-items-center justify-content-between my-1",
193
- key: "file-".concat(id, "-").concat(filename, "-").concat(idx + 1)
194
- }, /*#__PURE__*/React__default["default"].createElement("div", {
195
- className: "d-flex align-items-center mx-2 text-truncate"
196
- }, !hasPreview && faIcon !== null ? /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
197
- icon: faIcon,
198
- className: "me-2"
199
- }) : null, hasPreview ? /*#__PURE__*/React__default["default"].createElement("img", {
200
- className: "img-thumbnail me-2",
201
- src: preview || thumbnailUrl,
202
- alt: "preview",
193
+ className: "card mb-1",
194
+ key: "media-".concat(id),
203
195
  style: {
204
- height: 100,
196
+ maxWidth: 500
197
+ }
198
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
199
+ className: "d-flex align-items-center"
200
+ }, hasThumbnail || faIcon !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
201
+ className: "p-2 text-center",
202
+ style: hasThumbnail ? {
203
+ width: 100,
205
204
  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%)',
206
205
  backgroundSize: '20px 20px',
207
206
  backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0'
207
+ } : {
208
+ width: 100
209
+ }
210
+ }, !hasThumbnail && faIcon !== null ? /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
211
+ icon: faIcon,
212
+ className: "m-auto fs-3"
213
+ }) : null, hasThumbnail ? /*#__PURE__*/React__default["default"].createElement("img", {
214
+ className: "img-fluid",
215
+ src: thumbnail,
216
+ alt: "thumbnail",
217
+ style: {
218
+ maxHeight: 75
208
219
  }
209
- }) : null, /*#__PURE__*/React__default["default"].createElement("div", {
210
- className: "media-body text-truncate small me-2"
211
- }, /*#__PURE__*/React__default["default"].createElement("strong", null, file || filename)), /*#__PURE__*/React__default["default"].createElement("small", {
212
- className: "text-muted me-2"
213
- }, size > 0 ? prettyBytes__default["default"](size) : size)), /*#__PURE__*/React__default["default"].createElement("div", {
214
- className: "mx-2"
220
+ }) : null) : null, /*#__PURE__*/React__default["default"].createElement("div", {
221
+ className: "flex-grow-1"
222
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
223
+ className: "card-body"
224
+ }, /*#__PURE__*/React__default["default"].createElement("h5", {
225
+ className: classNames__default["default"](['card-title', 'fs-6', {
226
+ 'mb-1': size !== null && size > 0,
227
+ 'mb-0': size === null || size <= 0
228
+ }])
229
+ }, name), size !== null && size > 0 ? /*#__PURE__*/React__default["default"].createElement("p", {
230
+ className: "card-text text-muted small"
231
+ }, prettyBytes__default["default"](size)) : null)), /*#__PURE__*/React__default["default"].createElement("div", {
232
+ className: "p-2"
215
233
  }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
216
234
  type: "button",
217
235
  size: "sm",
@@ -222,16 +240,16 @@ var UploadField = function UploadField(_ref) {
222
240
  }
223
241
  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
224
242
  icon: freeSolidSvgIcons.faTimes
225
- }))));
226
- })))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, withButton ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
243
+ })))));
244
+ }) : null, !hasMedia && withButton ? /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
227
245
  type: "button",
228
246
  theme: "primary",
229
247
  onClick: openModal
230
- }, /*#__PURE__*/React__default["default"].createElement(Label__default["default"], null, addButtonLabel))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, uppy !== null ? /*#__PURE__*/React__default["default"].createElement(react.Dashboard, {
248
+ }, /*#__PURE__*/React__default["default"].createElement(Label__default["default"], null, addButtonLabel)) : null, !hasMedia && !withButton && uppy !== null ? /*#__PURE__*/React__default["default"].createElement(react.Dashboard, {
231
249
  uppy: uppy,
232
250
  height: 300,
233
251
  plugins: sources
234
- }) : null)), withButton && uppy !== null ? /*#__PURE__*/React__default["default"].createElement(react.DashboardModal, {
252
+ }) : null, withButton && uppy !== null ? /*#__PURE__*/React__default["default"].createElement(react.DashboardModal, {
235
253
  uppy: uppy,
236
254
  plugins: sources,
237
255
  open: modalOpened,
@@ -239,7 +257,6 @@ var UploadField = function UploadField(_ref) {
239
257
  closeModalOnClickOutside: true
240
258
  }) : null);
241
259
  };
242
-
243
260
  UploadField.propTypes = propTypes;
244
261
  UploadField.defaultProps = defaultProps;
245
262
  var UploadField$1 = /*#__PURE__*/React__default["default"].memo(UploadField);
@@ -259,33 +276,27 @@ var definition = [{
259
276
  }];
260
277
 
261
278
  /* eslint-disable react/jsx-props-no-spreading */
262
-
263
279
  var AudioField = function AudioField(props) {
264
280
  return /*#__PURE__*/React__default["default"].createElement(UploadField$1, Object.assign({}, props, {
265
281
  types: ['audio']
266
282
  }));
267
283
  };
268
-
269
284
  var AudioField$1 = /*#__PURE__*/React__default["default"].memo(AudioField);
270
285
 
271
286
  /* eslint-disable react/jsx-props-no-spreading */
272
-
273
287
  var ImageField = function ImageField(props) {
274
288
  return /*#__PURE__*/React__default["default"].createElement(UploadField$1, Object.assign({}, props, {
275
289
  types: ['image']
276
290
  }));
277
291
  };
278
-
279
292
  var ImageField$1 = /*#__PURE__*/React__default["default"].memo(ImageField);
280
293
 
281
294
  /* eslint-disable react/jsx-props-no-spreading */
282
-
283
295
  var VideoField = function VideoField(props) {
284
296
  return /*#__PURE__*/React__default["default"].createElement(UploadField$1, Object.assign({}, props, {
285
297
  types: ['video']
286
298
  }));
287
299
  };
288
-
289
300
  var VideoField$1 = /*#__PURE__*/React__default["default"].memo(VideoField);
290
301
 
291
302
  exports.AudioField = AudioField$1;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@panneau/field-upload",
3
- "version": "1.0.3-alpha.1",
3
+ "version": "1.0.3-alpha.10",
4
4
  "description": "An Upload field",
5
5
  "keywords": [
6
6
  "javascript"
@@ -56,11 +56,11 @@
56
56
  "@fortawesome/fontawesome-svg-core": "^1.2.35",
57
57
  "@fortawesome/free-solid-svg-icons": "^5.15.3",
58
58
  "@fortawesome/react-fontawesome": "^0.1.14",
59
- "@panneau/core": "^1.0.3-alpha.1",
60
- "@panneau/element-button": "^1.0.3-alpha.1",
61
- "@panneau/element-card": "^1.0.3-alpha.1",
62
- "@panneau/element-label": "^1.0.3-alpha.1",
63
- "@panneau/themes": "^1.0.3-alpha.1",
59
+ "@panneau/core": "^1.0.3-alpha.10",
60
+ "@panneau/element-button": "^1.0.3-alpha.10",
61
+ "@panneau/element-card": "^1.0.3-alpha.10",
62
+ "@panneau/element-label": "^1.0.3-alpha.10",
63
+ "@panneau/themes": "^1.0.3-alpha.10",
64
64
  "@uppy/core": "^2.1.4",
65
65
  "@uppy/dashboard": "^2.1.3",
66
66
  "@uppy/react": "^2.1.2",
@@ -73,5 +73,5 @@
73
73
  "publishConfig": {
74
74
  "access": "public"
75
75
  },
76
- "gitHead": "e04e663c7f1eb692f89a0136f2e8f45024fbe355"
76
+ "gitHead": "04abb6a702a77fd3f7370847c5e2bd366c56c62d"
77
77
  }