@panneau/field-upload 2.0.36 → 2.0.39
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/assets/css/styles.css +1 -1
- package/es/index.js +32 -11
- package/lib/index.js +32 -11
- package/package.json +15 -10
package/assets/css/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.panneau-field-upload-container
|
|
1
|
+
.panneau-field-upload-container{width:100%}
|
package/es/index.js
CHANGED
|
@@ -14,12 +14,14 @@ import React, { useCallback, useMemo, useState } from 'react';
|
|
|
14
14
|
import { FormattedMessage } from 'react-intl';
|
|
15
15
|
import { PropTypes as PropTypes$1 } from '@panneau/core';
|
|
16
16
|
import { useUppy } from '@panneau/core/contexts';
|
|
17
|
+
import { useResizeObserver } from '@panneau/core/hooks';
|
|
17
18
|
import Button from '@panneau/element-button';
|
|
18
19
|
import Label from '@panneau/element-label';
|
|
19
|
-
import '@uppy/core/dist/style.css';
|
|
20
|
-
import '@uppy/dashboard/dist/style.css';
|
|
20
|
+
import '@uppy/core/dist/style.min.css';
|
|
21
|
+
import '@uppy/dashboard/dist/style.min.css';
|
|
22
|
+
import '@uppy/drag-drop/dist/style.min.css';
|
|
21
23
|
|
|
22
|
-
var styles = {"container":"panneau-field-upload-container"
|
|
24
|
+
var styles = {"container":"panneau-field-upload-container"};
|
|
23
25
|
|
|
24
26
|
var propTypes = {
|
|
25
27
|
value: PropTypes.oneOfType([PropTypes.array, PropTypes.shape({
|
|
@@ -75,6 +77,15 @@ var UploadField = function UploadField(_ref) {
|
|
|
75
77
|
disabled = _ref.disabled,
|
|
76
78
|
onChange = _ref.onChange,
|
|
77
79
|
className = _ref.className;
|
|
80
|
+
var _useResizeObserver = useResizeObserver(),
|
|
81
|
+
containerRef = _useResizeObserver.ref,
|
|
82
|
+
_useResizeObserver$en = _useResizeObserver.entry,
|
|
83
|
+
entry = _useResizeObserver$en === void 0 ? null : _useResizeObserver$en;
|
|
84
|
+
var _ref2 = entry || {},
|
|
85
|
+
contentRect = _ref2.contentRect;
|
|
86
|
+
var _ref3 = contentRect || {},
|
|
87
|
+
_ref3$width = _ref3.width,
|
|
88
|
+
containerWidth = _ref3$width === void 0 ? null : _ref3$width;
|
|
78
89
|
var onComplete = useCallback(function (response) {
|
|
79
90
|
console.log('upload complete', response); // eslint-disable-line
|
|
80
91
|
var newValue = null;
|
|
@@ -142,8 +153,12 @@ var UploadField = function UploadField(_ref) {
|
|
|
142
153
|
return value !== null ? [value] : null;
|
|
143
154
|
}, [value]);
|
|
144
155
|
var hasMedia = values !== null && values.length > 0;
|
|
156
|
+
|
|
157
|
+
// console.log(containerWidth);
|
|
158
|
+
|
|
145
159
|
return /*#__PURE__*/React.createElement("div", {
|
|
146
|
-
className: classNames([styles.container, _defineProperty({}, className, className !== null)])
|
|
160
|
+
className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
|
|
161
|
+
ref: containerRef
|
|
147
162
|
}, values !== null ? values.map(function (media, idx) {
|
|
148
163
|
var _media$id = media.id,
|
|
149
164
|
id = _media$id === void 0 ? null : _media$id,
|
|
@@ -158,9 +173,9 @@ var UploadField = function UploadField(_ref) {
|
|
|
158
173
|
_media$data = media.data,
|
|
159
174
|
data = _media$data === void 0 ? {} : _media$data,
|
|
160
175
|
type = media.type;
|
|
161
|
-
var
|
|
162
|
-
|
|
163
|
-
file =
|
|
176
|
+
var _ref5 = data || {},
|
|
177
|
+
_ref5$file = _ref5.file,
|
|
178
|
+
file = _ref5$file === void 0 ? null : _ref5$file;
|
|
164
179
|
var faIcon = null;
|
|
165
180
|
switch (type) {
|
|
166
181
|
case 'audio':
|
|
@@ -235,11 +250,17 @@ var UploadField = function UploadField(_ref) {
|
|
|
235
250
|
theme: "primary",
|
|
236
251
|
onClick: openModal,
|
|
237
252
|
disabled: disabled
|
|
238
|
-
}, /*#__PURE__*/React.createElement(Label, null, addButtonLabel)) : null, !disabled && !hasMedia && !withButton && uppy !== null ? /*#__PURE__*/React.createElement(Dashboard, {
|
|
239
|
-
uppy: uppy
|
|
253
|
+
}, /*#__PURE__*/React.createElement(Label, null, addButtonLabel)) : null, !disabled && !hasMedia && !withButton && uppy !== null ? /*#__PURE__*/React.createElement(Dashboard, Object.assign({
|
|
254
|
+
uppy: uppy
|
|
255
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
256
|
+
}, containerWidth !== null ? {
|
|
257
|
+
width: containerWidth
|
|
258
|
+
} : null, {
|
|
240
259
|
height: 300,
|
|
241
|
-
plugins: sources
|
|
242
|
-
|
|
260
|
+
plugins: sources,
|
|
261
|
+
inline: true,
|
|
262
|
+
areInsidesReadyToBeVisible: true
|
|
263
|
+
})) : null, !disabled && withButton && uppy !== null ? /*#__PURE__*/React.createElement(DashboardModal, {
|
|
243
264
|
uppy: uppy,
|
|
244
265
|
plugins: sources,
|
|
245
266
|
open: modalOpened,
|
package/lib/index.js
CHANGED
|
@@ -18,10 +18,12 @@ var React = require('react');
|
|
|
18
18
|
var reactIntl = require('react-intl');
|
|
19
19
|
var core = require('@panneau/core');
|
|
20
20
|
var contexts = require('@panneau/core/contexts');
|
|
21
|
+
var hooks = require('@panneau/core/hooks');
|
|
21
22
|
var Button = require('@panneau/element-button');
|
|
22
23
|
var Label = require('@panneau/element-label');
|
|
23
|
-
require('@uppy/core/dist/style.css');
|
|
24
|
-
require('@uppy/dashboard/dist/style.css');
|
|
24
|
+
require('@uppy/core/dist/style.min.css');
|
|
25
|
+
require('@uppy/dashboard/dist/style.min.css');
|
|
26
|
+
require('@uppy/drag-drop/dist/style.min.css');
|
|
25
27
|
|
|
26
28
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
27
29
|
|
|
@@ -38,7 +40,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
38
40
|
var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
|
|
39
41
|
var Label__default = /*#__PURE__*/_interopDefaultLegacy(Label);
|
|
40
42
|
|
|
41
|
-
var styles = {"container":"panneau-field-upload-container"
|
|
43
|
+
var styles = {"container":"panneau-field-upload-container"};
|
|
42
44
|
|
|
43
45
|
var propTypes = {
|
|
44
46
|
value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].array, PropTypes__default["default"].shape({
|
|
@@ -94,6 +96,15 @@ var UploadField = function UploadField(_ref) {
|
|
|
94
96
|
disabled = _ref.disabled,
|
|
95
97
|
onChange = _ref.onChange,
|
|
96
98
|
className = _ref.className;
|
|
99
|
+
var _useResizeObserver = hooks.useResizeObserver(),
|
|
100
|
+
containerRef = _useResizeObserver.ref,
|
|
101
|
+
_useResizeObserver$en = _useResizeObserver.entry,
|
|
102
|
+
entry = _useResizeObserver$en === void 0 ? null : _useResizeObserver$en;
|
|
103
|
+
var _ref2 = entry || {},
|
|
104
|
+
contentRect = _ref2.contentRect;
|
|
105
|
+
var _ref3 = contentRect || {},
|
|
106
|
+
_ref3$width = _ref3.width,
|
|
107
|
+
containerWidth = _ref3$width === void 0 ? null : _ref3$width;
|
|
97
108
|
var onComplete = React.useCallback(function (response) {
|
|
98
109
|
console.log('upload complete', response); // eslint-disable-line
|
|
99
110
|
var newValue = null;
|
|
@@ -161,8 +172,12 @@ var UploadField = function UploadField(_ref) {
|
|
|
161
172
|
return value !== null ? [value] : null;
|
|
162
173
|
}, [value]);
|
|
163
174
|
var hasMedia = values !== null && values.length > 0;
|
|
175
|
+
|
|
176
|
+
// console.log(containerWidth);
|
|
177
|
+
|
|
164
178
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
165
|
-
className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)])
|
|
179
|
+
className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)]),
|
|
180
|
+
ref: containerRef
|
|
166
181
|
}, values !== null ? values.map(function (media, idx) {
|
|
167
182
|
var _media$id = media.id,
|
|
168
183
|
id = _media$id === void 0 ? null : _media$id,
|
|
@@ -177,9 +192,9 @@ var UploadField = function UploadField(_ref) {
|
|
|
177
192
|
_media$data = media.data,
|
|
178
193
|
data = _media$data === void 0 ? {} : _media$data,
|
|
179
194
|
type = media.type;
|
|
180
|
-
var
|
|
181
|
-
|
|
182
|
-
file =
|
|
195
|
+
var _ref5 = data || {},
|
|
196
|
+
_ref5$file = _ref5.file,
|
|
197
|
+
file = _ref5$file === void 0 ? null : _ref5$file;
|
|
183
198
|
var faIcon = null;
|
|
184
199
|
switch (type) {
|
|
185
200
|
case 'audio':
|
|
@@ -254,11 +269,17 @@ var UploadField = function UploadField(_ref) {
|
|
|
254
269
|
theme: "primary",
|
|
255
270
|
onClick: openModal,
|
|
256
271
|
disabled: disabled
|
|
257
|
-
}, /*#__PURE__*/React__default["default"].createElement(Label__default["default"], null, addButtonLabel)) : null, !disabled && !hasMedia && !withButton && uppy !== null ? /*#__PURE__*/React__default["default"].createElement(react.Dashboard, {
|
|
258
|
-
uppy: uppy
|
|
272
|
+
}, /*#__PURE__*/React__default["default"].createElement(Label__default["default"], null, addButtonLabel)) : null, !disabled && !hasMedia && !withButton && uppy !== null ? /*#__PURE__*/React__default["default"].createElement(react.Dashboard, Object.assign({
|
|
273
|
+
uppy: uppy
|
|
274
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
275
|
+
}, containerWidth !== null ? {
|
|
276
|
+
width: containerWidth
|
|
277
|
+
} : null, {
|
|
259
278
|
height: 300,
|
|
260
|
-
plugins: sources
|
|
261
|
-
|
|
279
|
+
plugins: sources,
|
|
280
|
+
inline: true,
|
|
281
|
+
areInsidesReadyToBeVisible: true
|
|
282
|
+
})) : null, !disabled && withButton && uppy !== null ? /*#__PURE__*/React__default["default"].createElement(react.DashboardModal, {
|
|
262
283
|
uppy: uppy,
|
|
263
284
|
plugins: sources,
|
|
264
285
|
open: modalOpened,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@panneau/field-upload",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.39",
|
|
4
4
|
"description": "An Upload field",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -56,14 +56,19 @@
|
|
|
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": "^2.0.
|
|
60
|
-
"@panneau/element-button": "^2.0.
|
|
61
|
-
"@panneau/element-card": "^2.0.
|
|
62
|
-
"@panneau/element-label": "^2.0.
|
|
63
|
-
"@panneau/themes": "^2.0.
|
|
64
|
-
"@uppy/core": "^2.
|
|
65
|
-
"@uppy/dashboard": "^
|
|
66
|
-
"@uppy/
|
|
59
|
+
"@panneau/core": "^2.0.38",
|
|
60
|
+
"@panneau/element-button": "^2.0.38",
|
|
61
|
+
"@panneau/element-card": "^2.0.38",
|
|
62
|
+
"@panneau/element-label": "^2.0.38",
|
|
63
|
+
"@panneau/themes": "^2.0.38",
|
|
64
|
+
"@uppy/core": "^3.2.0",
|
|
65
|
+
"@uppy/dashboard": "^3.4.0",
|
|
66
|
+
"@uppy/drag-drop": "^3.0.2",
|
|
67
|
+
"@uppy/file-input": "^3.0.2",
|
|
68
|
+
"@uppy/progress-bar": "^3.0.2",
|
|
69
|
+
"@uppy/react": "^3.1.2",
|
|
70
|
+
"@uppy/status-bar": "^3.1.1",
|
|
71
|
+
"@uppy/utils": "^3.6.2",
|
|
67
72
|
"classnames": "^2.2.6",
|
|
68
73
|
"lodash": "^4.17.21",
|
|
69
74
|
"pretty-bytes": "^5.4.1",
|
|
@@ -73,5 +78,5 @@
|
|
|
73
78
|
"publishConfig": {
|
|
74
79
|
"access": "public"
|
|
75
80
|
},
|
|
76
|
-
"gitHead": "
|
|
81
|
+
"gitHead": "8305b9d1673d289994f796c317edd515f0668c4a"
|
|
77
82
|
}
|