@panneau/field-upload 1.0.0-y.0 → 1.0.3-alpha.2

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