@panneau/field-upload 1.0.3 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/index.js +84 -54
- package/lib/index.js +88 -56
- 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,6 +50,9 @@ 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
|
};
|
|
@@ -56,6 +64,9 @@ var UploadField = function UploadField(_ref) {
|
|
|
56
64
|
withButton = _ref.withButton,
|
|
57
65
|
addButtonLabel = _ref.addButtonLabel,
|
|
58
66
|
allowMultipleUploads = _ref.allowMultipleUploads,
|
|
67
|
+
namePath = _ref.namePath,
|
|
68
|
+
thumbnailPath = _ref.thumbnailPath,
|
|
69
|
+
sizePath = _ref.sizePath,
|
|
59
70
|
onChange = _ref.onChange,
|
|
60
71
|
className = _ref.className;
|
|
61
72
|
var onComplete = useCallback(function (response) {
|
|
@@ -118,33 +129,32 @@ var UploadField = function UploadField(_ref) {
|
|
|
118
129
|
var closeModal = useCallback(function () {
|
|
119
130
|
setModalOpened(false);
|
|
120
131
|
}, [setModalOpened]);
|
|
121
|
-
var values =
|
|
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;
|
|
122
139
|
return /*#__PURE__*/React.createElement("div", {
|
|
123
140
|
className: className
|
|
124
|
-
},
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
_ref2$
|
|
141
|
-
preview = _ref2$preview === void 0 ? null : _ref2$preview,
|
|
142
|
-
_ref2$data = _ref2.data,
|
|
143
|
-
data = _ref2$data === void 0 ? {} : _ref2$data,
|
|
144
|
-
type = _ref2.type;
|
|
145
|
-
var _ref3 = data || {},
|
|
146
|
-
_ref3$file = _ref3.file,
|
|
147
|
-
file = _ref3$file === void 0 ? null : _ref3$file;
|
|
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;
|
|
148
158
|
var faIcon = null;
|
|
149
159
|
switch (type) {
|
|
150
160
|
case 'audio':
|
|
@@ -157,31 +167,51 @@ var UploadField = function UploadField(_ref) {
|
|
|
157
167
|
faIcon = faFileVideo;
|
|
158
168
|
break;
|
|
159
169
|
}
|
|
160
|
-
var
|
|
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;
|
|
161
174
|
return /*#__PURE__*/React.createElement("div", {
|
|
162
|
-
className: "
|
|
163
|
-
key: "
|
|
164
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
165
|
-
className: "d-flex align-items-center mx-2 text-truncate"
|
|
166
|
-
}, !hasPreview && faIcon !== null ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
167
|
-
icon: faIcon,
|
|
168
|
-
className: "me-2"
|
|
169
|
-
}) : null, hasPreview ? /*#__PURE__*/React.createElement("img", {
|
|
170
|
-
className: "img-thumbnail me-2",
|
|
171
|
-
src: preview || thumbnailUrl,
|
|
172
|
-
alt: "preview",
|
|
175
|
+
className: "card mb-1",
|
|
176
|
+
key: "media-".concat(id),
|
|
173
177
|
style: {
|
|
174
|
-
|
|
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,
|
|
175
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%)',
|
|
176
187
|
backgroundSize: '20px 20px',
|
|
177
188
|
backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0'
|
|
189
|
+
} : {
|
|
190
|
+
width: 100
|
|
178
191
|
}
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
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"
|
|
185
215
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
186
216
|
type: "button",
|
|
187
217
|
size: "sm",
|
|
@@ -192,16 +222,16 @@ var UploadField = function UploadField(_ref) {
|
|
|
192
222
|
}
|
|
193
223
|
}, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
194
224
|
icon: faTimes
|
|
195
|
-
}))));
|
|
196
|
-
})
|
|
225
|
+
})))));
|
|
226
|
+
}) : null, !hasMedia && withButton ? /*#__PURE__*/React.createElement(Button, {
|
|
197
227
|
type: "button",
|
|
198
228
|
theme: "primary",
|
|
199
229
|
onClick: openModal
|
|
200
|
-
}, /*#__PURE__*/React.createElement(Label, null, addButtonLabel))
|
|
230
|
+
}, /*#__PURE__*/React.createElement(Label, null, addButtonLabel)) : null, !hasMedia && !withButton && uppy !== null ? /*#__PURE__*/React.createElement(Dashboard, {
|
|
201
231
|
uppy: uppy,
|
|
202
232
|
height: 300,
|
|
203
233
|
plugins: sources
|
|
204
|
-
}) : null
|
|
234
|
+
}) : null, withButton && uppy !== null ? /*#__PURE__*/React.createElement(DashboardModal, {
|
|
205
235
|
uppy: uppy,
|
|
206
236
|
plugins: sources,
|
|
207
237
|
open: modalOpened,
|
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
|
|
28
|
-
var
|
|
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,6 +68,9 @@ 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
|
};
|
|
@@ -72,6 +82,9 @@ var UploadField = function UploadField(_ref) {
|
|
|
72
82
|
withButton = _ref.withButton,
|
|
73
83
|
addButtonLabel = _ref.addButtonLabel,
|
|
74
84
|
allowMultipleUploads = _ref.allowMultipleUploads,
|
|
85
|
+
namePath = _ref.namePath,
|
|
86
|
+
thumbnailPath = _ref.thumbnailPath,
|
|
87
|
+
sizePath = _ref.sizePath,
|
|
75
88
|
onChange = _ref.onChange,
|
|
76
89
|
className = _ref.className;
|
|
77
90
|
var onComplete = React.useCallback(function (response) {
|
|
@@ -134,33 +147,32 @@ var UploadField = function UploadField(_ref) {
|
|
|
134
147
|
var closeModal = React.useCallback(function () {
|
|
135
148
|
setModalOpened(false);
|
|
136
149
|
}, [setModalOpened]);
|
|
137
|
-
var values =
|
|
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;
|
|
138
157
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
139
158
|
className: className
|
|
140
|
-
},
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
_ref2$
|
|
157
|
-
preview = _ref2$preview === void 0 ? null : _ref2$preview,
|
|
158
|
-
_ref2$data = _ref2.data,
|
|
159
|
-
data = _ref2$data === void 0 ? {} : _ref2$data,
|
|
160
|
-
type = _ref2.type;
|
|
161
|
-
var _ref3 = data || {},
|
|
162
|
-
_ref3$file = _ref3.file,
|
|
163
|
-
file = _ref3$file === void 0 ? null : _ref3$file;
|
|
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;
|
|
164
176
|
var faIcon = null;
|
|
165
177
|
switch (type) {
|
|
166
178
|
case 'audio':
|
|
@@ -173,31 +185,51 @@ var UploadField = function UploadField(_ref) {
|
|
|
173
185
|
faIcon = freeSolidSvgIcons.faFileVideo;
|
|
174
186
|
break;
|
|
175
187
|
}
|
|
176
|
-
var
|
|
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;
|
|
177
192
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
178
|
-
className: "
|
|
179
|
-
key: "
|
|
180
|
-
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
181
|
-
className: "d-flex align-items-center mx-2 text-truncate"
|
|
182
|
-
}, !hasPreview && faIcon !== null ? /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
|
|
183
|
-
icon: faIcon,
|
|
184
|
-
className: "me-2"
|
|
185
|
-
}) : null, hasPreview ? /*#__PURE__*/React__default["default"].createElement("img", {
|
|
186
|
-
className: "img-thumbnail me-2",
|
|
187
|
-
src: preview || thumbnailUrl,
|
|
188
|
-
alt: "preview",
|
|
193
|
+
className: "card mb-1",
|
|
194
|
+
key: "media-".concat(id),
|
|
189
195
|
style: {
|
|
190
|
-
|
|
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,
|
|
191
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%)',
|
|
192
205
|
backgroundSize: '20px 20px',
|
|
193
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
|
|
194
219
|
}
|
|
195
|
-
}) : null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
196
|
-
className: "
|
|
197
|
-
}, /*#__PURE__*/React__default["default"].createElement("
|
|
198
|
-
className: "
|
|
199
|
-
},
|
|
200
|
-
className: "
|
|
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"
|
|
201
233
|
}, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
|
|
202
234
|
type: "button",
|
|
203
235
|
size: "sm",
|
|
@@ -208,16 +240,16 @@ var UploadField = function UploadField(_ref) {
|
|
|
208
240
|
}
|
|
209
241
|
}, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
|
|
210
242
|
icon: freeSolidSvgIcons.faTimes
|
|
211
|
-
}))));
|
|
212
|
-
})
|
|
243
|
+
})))));
|
|
244
|
+
}) : null, !hasMedia && withButton ? /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
|
|
213
245
|
type: "button",
|
|
214
246
|
theme: "primary",
|
|
215
247
|
onClick: openModal
|
|
216
|
-
}, /*#__PURE__*/React__default["default"].createElement(Label__default["default"], null, addButtonLabel))
|
|
248
|
+
}, /*#__PURE__*/React__default["default"].createElement(Label__default["default"], null, addButtonLabel)) : null, !hasMedia && !withButton && uppy !== null ? /*#__PURE__*/React__default["default"].createElement(react.Dashboard, {
|
|
217
249
|
uppy: uppy,
|
|
218
250
|
height: 300,
|
|
219
251
|
plugins: sources
|
|
220
|
-
}) : null
|
|
252
|
+
}) : null, withButton && uppy !== null ? /*#__PURE__*/React__default["default"].createElement(react.DashboardModal, {
|
|
221
253
|
uppy: uppy,
|
|
222
254
|
plugins: sources,
|
|
223
255
|
open: modalOpened,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@panneau/field-upload",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
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
|
|
60
|
-
"@panneau/element-button": "^1.0
|
|
61
|
-
"@panneau/element-card": "^1.0
|
|
62
|
-
"@panneau/element-label": "^1.0
|
|
63
|
-
"@panneau/themes": "^1.0
|
|
59
|
+
"@panneau/core": "^1.1.0",
|
|
60
|
+
"@panneau/element-button": "^1.1.0",
|
|
61
|
+
"@panneau/element-card": "^1.1.0",
|
|
62
|
+
"@panneau/element-label": "^1.1.0",
|
|
63
|
+
"@panneau/themes": "^1.1.0",
|
|
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": "
|
|
76
|
+
"gitHead": "1d4ce10073e63024309c615ffaec2e1193aeec7e"
|
|
77
77
|
}
|