@panneau/field-upload 3.0.94 → 3.0.95

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 +4 -186
  2. package/lib/index.js +2 -188
  3. package/package.json +3 -4
package/es/index.js CHANGED
@@ -7,19 +7,16 @@ import classNames from 'classnames';
7
7
  import isArray from 'lodash/isArray';
8
8
  import isObject from 'lodash/isObject';
9
9
  import PropTypes from 'prop-types';
10
- import React, { useMemo, useCallback, useState } from 'react';
10
+ import React, { useCallback, useMemo, useState } from 'react';
11
11
  import { FormattedMessage } from 'react-intl';
12
12
  import { PropTypes as PropTypes$1 } from '@panneau/core';
13
13
  import { useResourceQuery } from '@panneau/core/hooks';
14
14
  import Button from '@panneau/element-button';
15
15
  import Label from '@panneau/element-label';
16
+ import { MediaCards } from '@panneau/element-media-card';
16
17
  import ResourceItemsList from '@panneau/list-resource-items';
17
18
  import Dialog from '@panneau/modal-dialog';
18
19
  import { useUppy } from '@panneau/uppy';
19
- import { faTimes, faFileVideo, faFileImage, faFileAudio } from '@fortawesome/free-solid-svg-icons';
20
- import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
21
- import get from 'lodash/get';
22
- import prettyBytes from 'pretty-bytes';
23
20
  import '@uppy/core/dist/style.css';
24
21
  import '@uppy/dashboard/dist/style.css';
25
22
  import '@uppy/drag-drop/dist/style.css';
@@ -27,185 +24,6 @@ import '@uppy/status-bar/dist/style.css';
27
24
 
28
25
  var styles = {"container":"panneau-field-upload-container","dashboard":"panneau-field-upload-dashboard","dashboardModal":"panneau-field-upload-dashboardModal"};
29
26
 
30
- var propTypes$2 = {
31
- value: PropTypes.oneOfType([PropTypes.array, PropTypes.shape({
32
- filename: PropTypes.string,
33
- size: PropTypes.number,
34
- url: PropTypes.string
35
- })]),
36
- index: PropTypes.number,
37
- namePath: PropTypes.string,
38
- thumbnailPath: PropTypes.string,
39
- sizePath: PropTypes.string,
40
- disabled: PropTypes.bool,
41
- onClickRemove: PropTypes.func,
42
- className: PropTypes.string
43
- };
44
- var defaultProps$2 = {
45
- value: null,
46
- index: null,
47
- namePath: null,
48
- thumbnailPath: null,
49
- sizePath: null,
50
- disabled: false,
51
- onClickRemove: null,
52
- className: null
53
- };
54
- var MediaPreviewCard = function MediaPreviewCard(_ref) {
55
- var value = _ref.value,
56
- index = _ref.index,
57
- namePath = _ref.namePath,
58
- thumbnailPath = _ref.thumbnailPath,
59
- sizePath = _ref.sizePath,
60
- disabled = _ref.disabled,
61
- onClickRemove = _ref.onClickRemove,
62
- className = _ref.className;
63
- var _value$id = value.id,
64
- id = _value$id === void 0 ? null : _value$id,
65
- _value$filename = value.filename,
66
- filename = _value$filename === void 0 ? null : _value$filename,
67
- _value$size = value.size,
68
- fileSize = _value$size === void 0 ? 0 : _value$size,
69
- _value$thumbnail_url = value.thumbnail_url,
70
- thumbnailUrl = _value$thumbnail_url === void 0 ? null : _value$thumbnail_url,
71
- _value$preview = value.preview,
72
- preview = _value$preview === void 0 ? null : _value$preview,
73
- _value$data = value.data,
74
- data = _value$data === void 0 ? {} : _value$data,
75
- type = value.type;
76
- var _ref2 = data || {},
77
- _ref2$file = _ref2.file,
78
- file = _ref2$file === void 0 ? null : _ref2$file;
79
- var faIcon = null;
80
- switch (type) {
81
- case 'audio':
82
- faIcon = faFileAudio;
83
- break;
84
- case 'image':
85
- faIcon = faFileImage;
86
- break;
87
- case 'video':
88
- faIcon = faFileVideo;
89
- break;
90
- }
91
- var name = (namePath !== null ? get(value || {}, namePath) : null) || filename || file;
92
- var thumbnail = (thumbnailPath !== null ? get(value || {}, thumbnailPath) : null) || thumbnailUrl || preview;
93
- var size = (sizePath !== null ? get(value || {}, sizePath) : null) || fileSize;
94
- var hasThumbnail = preview !== null || thumbnail !== null;
95
- return /*#__PURE__*/React.createElement("div", {
96
- className: classNames([styles.container, _defineProperty({}, className, className !== null)])
97
- }, /*#__PURE__*/React.createElement("div", {
98
- className: "card mb-1",
99
- key: "media-".concat(id),
100
- style: {
101
- maxWidth: 500
102
- }
103
- }, /*#__PURE__*/React.createElement("div", {
104
- className: "d-flex align-items-center"
105
- }, hasThumbnail || faIcon !== null ? /*#__PURE__*/React.createElement("div", {
106
- className: "p-2 text-center",
107
- style: hasThumbnail ? {
108
- width: 100,
109
- backgroundImage: 'linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%)',
110
- backgroundSize: '20px 20px',
111
- backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0'
112
- } : {
113
- width: 100
114
- }
115
- }, !hasThumbnail && faIcon !== null ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
116
- icon: faIcon,
117
- className: "m-auto fs-3"
118
- }) : null, hasThumbnail ? /*#__PURE__*/React.createElement("img", {
119
- className: "img-fluid",
120
- src: thumbnail,
121
- alt: "thumbnail",
122
- style: {
123
- maxHeight: 75
124
- }
125
- }) : null) : null, /*#__PURE__*/React.createElement("div", {
126
- className: "flex-grow-1"
127
- }, /*#__PURE__*/React.createElement("div", {
128
- className: "card-body"
129
- }, /*#__PURE__*/React.createElement("h5", {
130
- className: classNames(['card-title', 'text-break', 'fs-6', {
131
- 'mb-1': size !== null && size > 0,
132
- 'mb-0': size === null || size <= 0
133
- }])
134
- }, name), size !== null && size > 0 ? /*#__PURE__*/React.createElement("p", {
135
- className: "card-text text-muted small"
136
- }, prettyBytes(size)) : null)), onClickRemove !== null ? /*#__PURE__*/React.createElement("div", {
137
- className: "p-2"
138
- }, /*#__PURE__*/React.createElement(Button, {
139
- type: "button",
140
- size: "sm",
141
- theme: "secondary",
142
- outline: true,
143
- onClick: function onClick() {
144
- return onClickRemove(index, value);
145
- },
146
- disabled: disabled
147
- }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
148
- icon: faTimes
149
- }))) : null)));
150
- };
151
- MediaPreviewCard.propTypes = propTypes$2;
152
- MediaPreviewCard.defaultProps = defaultProps$2;
153
- var MediaPreviewCard$1 = MediaPreviewCard;
154
-
155
- var propTypes$1 = {
156
- value: PropTypes.oneOfType([PropTypes.array, PropTypes.shape({
157
- filename: PropTypes.string,
158
- size: PropTypes.number,
159
- url: PropTypes.string
160
- })]),
161
- namePath: PropTypes.string,
162
- thumbnailPath: PropTypes.string,
163
- sizePath: PropTypes.string,
164
- disabled: PropTypes.bool,
165
- onClickRemove: PropTypes.func,
166
- className: PropTypes.string
167
- };
168
- var defaultProps$1 = {
169
- value: null,
170
- namePath: null,
171
- thumbnailPath: null,
172
- sizePath: null,
173
- disabled: false,
174
- onClickRemove: null,
175
- className: null
176
- };
177
- var MediaPreviewCards = function MediaPreviewCards(_ref) {
178
- var value = _ref.value,
179
- namePath = _ref.namePath,
180
- thumbnailPath = _ref.thumbnailPath,
181
- sizePath = _ref.sizePath,
182
- disabled = _ref.disabled,
183
- onClickRemove = _ref.onClickRemove,
184
- className = _ref.className;
185
- var values = useMemo(function () {
186
- if (isArray(value)) {
187
- return value;
188
- }
189
- return value !== null ? [value] : [];
190
- }, [value]);
191
- return /*#__PURE__*/React.createElement("div", {
192
- className: classNames([styles.container, _defineProperty({}, className, className !== null)])
193
- }, values.map(function (media, idx) {
194
- return /*#__PURE__*/React.createElement(MediaPreviewCard$1, {
195
- value: media,
196
- index: idx,
197
- namePath: namePath,
198
- thumbnailPath: thumbnailPath,
199
- sizePath: sizePath,
200
- disabled: disabled,
201
- onClickRemove: onClickRemove
202
- });
203
- }));
204
- };
205
- MediaPreviewCards.propTypes = propTypes$1;
206
- MediaPreviewCards.defaultProps = defaultProps$1;
207
- var MediaPreviewCards$1 = MediaPreviewCards;
208
-
209
27
  var propTypes = {
210
28
  value: PropTypes.oneOfType([PropTypes.array, PropTypes.shape({
211
29
  filename: PropTypes.string,
@@ -475,7 +293,7 @@ var UploadField = function UploadField(_ref) {
475
293
  return /*#__PURE__*/React.createElement("div", {
476
294
  className: classNames([styles.container, _defineProperty({}, className, className !== null)])
477
295
  // ref={containerRef}
478
- }, /*#__PURE__*/React.createElement(MediaPreviewCards$1, {
296
+ }, /*#__PURE__*/React.createElement(MediaCards, {
479
297
  value: values,
480
298
  namePath: namePath,
481
299
  thumbnailPath: thumbnailPath,
@@ -702,4 +520,4 @@ var FontField = function FontField(props) {
702
520
  };
703
521
  var FontField$1 = FontField;
704
522
 
705
- export { AudioField$1 as AudioField, DocumentField$1 as DocumentField, FontField$1 as FontField, ImageField$1 as ImageField, ImagesField$1 as ImagesField, MediaPreviewCard$1 as MediaPreviewCard, MediaPreviewCards$1 as MediaPreviewCards, VideoField$1 as VideoField, UploadField$1 as default, definition };
523
+ export { AudioField$1 as AudioField, DocumentField$1 as DocumentField, FontField$1 as FontField, ImageField$1 as ImageField, ImagesField$1 as ImagesField, VideoField$1 as VideoField, UploadField$1 as default, definition };
package/lib/index.js CHANGED
@@ -17,13 +17,10 @@ var core = require('@panneau/core');
17
17
  var hooks = require('@panneau/core/hooks');
18
18
  var Button = require('@panneau/element-button');
19
19
  var Label = require('@panneau/element-label');
20
+ var elementMediaCard = require('@panneau/element-media-card');
20
21
  var ResourceItemsList = require('@panneau/list-resource-items');
21
22
  var Dialog = require('@panneau/modal-dialog');
22
23
  var uppy = require('@panneau/uppy');
23
- var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
24
- var reactFontawesome = require('@fortawesome/react-fontawesome');
25
- var get = require('lodash/get');
26
- var prettyBytes = require('pretty-bytes');
27
24
  require('@uppy/core/dist/style.css');
28
25
  require('@uppy/dashboard/dist/style.css');
29
26
  require('@uppy/drag-drop/dist/style.css');
@@ -44,190 +41,9 @@ var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
44
41
  var Label__default = /*#__PURE__*/_interopDefaultLegacy(Label);
45
42
  var ResourceItemsList__default = /*#__PURE__*/_interopDefaultLegacy(ResourceItemsList);
46
43
  var Dialog__default = /*#__PURE__*/_interopDefaultLegacy(Dialog);
47
- var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
48
- var prettyBytes__default = /*#__PURE__*/_interopDefaultLegacy(prettyBytes);
49
44
 
50
45
  var styles = {"container":"panneau-field-upload-container","dashboard":"panneau-field-upload-dashboard","dashboardModal":"panneau-field-upload-dashboardModal"};
51
46
 
52
- var propTypes$2 = {
53
- value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].array, PropTypes__default["default"].shape({
54
- filename: PropTypes__default["default"].string,
55
- size: PropTypes__default["default"].number,
56
- url: PropTypes__default["default"].string
57
- })]),
58
- index: PropTypes__default["default"].number,
59
- namePath: PropTypes__default["default"].string,
60
- thumbnailPath: PropTypes__default["default"].string,
61
- sizePath: PropTypes__default["default"].string,
62
- disabled: PropTypes__default["default"].bool,
63
- onClickRemove: PropTypes__default["default"].func,
64
- className: PropTypes__default["default"].string
65
- };
66
- var defaultProps$2 = {
67
- value: null,
68
- index: null,
69
- namePath: null,
70
- thumbnailPath: null,
71
- sizePath: null,
72
- disabled: false,
73
- onClickRemove: null,
74
- className: null
75
- };
76
- var MediaPreviewCard = function MediaPreviewCard(_ref) {
77
- var value = _ref.value,
78
- index = _ref.index,
79
- namePath = _ref.namePath,
80
- thumbnailPath = _ref.thumbnailPath,
81
- sizePath = _ref.sizePath,
82
- disabled = _ref.disabled,
83
- onClickRemove = _ref.onClickRemove,
84
- className = _ref.className;
85
- var _value$id = value.id,
86
- id = _value$id === void 0 ? null : _value$id,
87
- _value$filename = value.filename,
88
- filename = _value$filename === void 0 ? null : _value$filename,
89
- _value$size = value.size,
90
- fileSize = _value$size === void 0 ? 0 : _value$size,
91
- _value$thumbnail_url = value.thumbnail_url,
92
- thumbnailUrl = _value$thumbnail_url === void 0 ? null : _value$thumbnail_url,
93
- _value$preview = value.preview,
94
- preview = _value$preview === void 0 ? null : _value$preview,
95
- _value$data = value.data,
96
- data = _value$data === void 0 ? {} : _value$data,
97
- type = value.type;
98
- var _ref2 = data || {},
99
- _ref2$file = _ref2.file,
100
- file = _ref2$file === void 0 ? null : _ref2$file;
101
- var faIcon = null;
102
- switch (type) {
103
- case 'audio':
104
- faIcon = freeSolidSvgIcons.faFileAudio;
105
- break;
106
- case 'image':
107
- faIcon = freeSolidSvgIcons.faFileImage;
108
- break;
109
- case 'video':
110
- faIcon = freeSolidSvgIcons.faFileVideo;
111
- break;
112
- }
113
- var name = (namePath !== null ? get__default["default"](value || {}, namePath) : null) || filename || file;
114
- var thumbnail = (thumbnailPath !== null ? get__default["default"](value || {}, thumbnailPath) : null) || thumbnailUrl || preview;
115
- var size = (sizePath !== null ? get__default["default"](value || {}, sizePath) : null) || fileSize;
116
- var hasThumbnail = preview !== null || thumbnail !== null;
117
- return /*#__PURE__*/React__default["default"].createElement("div", {
118
- className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)])
119
- }, /*#__PURE__*/React__default["default"].createElement("div", {
120
- className: "card mb-1",
121
- key: "media-".concat(id),
122
- style: {
123
- maxWidth: 500
124
- }
125
- }, /*#__PURE__*/React__default["default"].createElement("div", {
126
- className: "d-flex align-items-center"
127
- }, hasThumbnail || faIcon !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
128
- className: "p-2 text-center",
129
- style: hasThumbnail ? {
130
- width: 100,
131
- backgroundImage: 'linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%)',
132
- backgroundSize: '20px 20px',
133
- backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0'
134
- } : {
135
- width: 100
136
- }
137
- }, !hasThumbnail && faIcon !== null ? /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
138
- icon: faIcon,
139
- className: "m-auto fs-3"
140
- }) : null, hasThumbnail ? /*#__PURE__*/React__default["default"].createElement("img", {
141
- className: "img-fluid",
142
- src: thumbnail,
143
- alt: "thumbnail",
144
- style: {
145
- maxHeight: 75
146
- }
147
- }) : null) : null, /*#__PURE__*/React__default["default"].createElement("div", {
148
- className: "flex-grow-1"
149
- }, /*#__PURE__*/React__default["default"].createElement("div", {
150
- className: "card-body"
151
- }, /*#__PURE__*/React__default["default"].createElement("h5", {
152
- className: classNames__default["default"](['card-title', 'text-break', 'fs-6', {
153
- 'mb-1': size !== null && size > 0,
154
- 'mb-0': size === null || size <= 0
155
- }])
156
- }, name), size !== null && size > 0 ? /*#__PURE__*/React__default["default"].createElement("p", {
157
- className: "card-text text-muted small"
158
- }, prettyBytes__default["default"](size)) : null)), onClickRemove !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
159
- className: "p-2"
160
- }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
161
- type: "button",
162
- size: "sm",
163
- theme: "secondary",
164
- outline: true,
165
- onClick: function onClick() {
166
- return onClickRemove(index, value);
167
- },
168
- disabled: disabled
169
- }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
170
- icon: freeSolidSvgIcons.faTimes
171
- }))) : null)));
172
- };
173
- MediaPreviewCard.propTypes = propTypes$2;
174
- MediaPreviewCard.defaultProps = defaultProps$2;
175
- var MediaPreviewCard$1 = MediaPreviewCard;
176
-
177
- var propTypes$1 = {
178
- value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].array, PropTypes__default["default"].shape({
179
- filename: PropTypes__default["default"].string,
180
- size: PropTypes__default["default"].number,
181
- url: PropTypes__default["default"].string
182
- })]),
183
- namePath: PropTypes__default["default"].string,
184
- thumbnailPath: PropTypes__default["default"].string,
185
- sizePath: PropTypes__default["default"].string,
186
- disabled: PropTypes__default["default"].bool,
187
- onClickRemove: PropTypes__default["default"].func,
188
- className: PropTypes__default["default"].string
189
- };
190
- var defaultProps$1 = {
191
- value: null,
192
- namePath: null,
193
- thumbnailPath: null,
194
- sizePath: null,
195
- disabled: false,
196
- onClickRemove: null,
197
- className: null
198
- };
199
- var MediaPreviewCards = function MediaPreviewCards(_ref) {
200
- var value = _ref.value,
201
- namePath = _ref.namePath,
202
- thumbnailPath = _ref.thumbnailPath,
203
- sizePath = _ref.sizePath,
204
- disabled = _ref.disabled,
205
- onClickRemove = _ref.onClickRemove,
206
- className = _ref.className;
207
- var values = React.useMemo(function () {
208
- if (isArray__default["default"](value)) {
209
- return value;
210
- }
211
- return value !== null ? [value] : [];
212
- }, [value]);
213
- return /*#__PURE__*/React__default["default"].createElement("div", {
214
- className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)])
215
- }, values.map(function (media, idx) {
216
- return /*#__PURE__*/React__default["default"].createElement(MediaPreviewCard$1, {
217
- value: media,
218
- index: idx,
219
- namePath: namePath,
220
- thumbnailPath: thumbnailPath,
221
- sizePath: sizePath,
222
- disabled: disabled,
223
- onClickRemove: onClickRemove
224
- });
225
- }));
226
- };
227
- MediaPreviewCards.propTypes = propTypes$1;
228
- MediaPreviewCards.defaultProps = defaultProps$1;
229
- var MediaPreviewCards$1 = MediaPreviewCards;
230
-
231
47
  var propTypes = {
232
48
  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].array, PropTypes__default["default"].shape({
233
49
  filename: PropTypes__default["default"].string,
@@ -497,7 +313,7 @@ var UploadField = function UploadField(_ref) {
497
313
  return /*#__PURE__*/React__default["default"].createElement("div", {
498
314
  className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)])
499
315
  // ref={containerRef}
500
- }, /*#__PURE__*/React__default["default"].createElement(MediaPreviewCards$1, {
316
+ }, /*#__PURE__*/React__default["default"].createElement(elementMediaCard.MediaCards, {
501
317
  value: values,
502
318
  namePath: namePath,
503
319
  thumbnailPath: thumbnailPath,
@@ -729,8 +545,6 @@ exports.DocumentField = DocumentField$1;
729
545
  exports.FontField = FontField$1;
730
546
  exports.ImageField = ImageField$1;
731
547
  exports.ImagesField = ImagesField$1;
732
- exports.MediaPreviewCard = MediaPreviewCard$1;
733
- exports.MediaPreviewCards = MediaPreviewCards$1;
734
548
  exports.VideoField = VideoField$1;
735
549
  exports["default"] = UploadField$1;
736
550
  exports.definition = definition;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@panneau/field-upload",
3
- "version": "3.0.94",
3
+ "version": "3.0.95",
4
4
  "description": "An Upload field",
5
5
  "keywords": [
6
6
  "javascript"
@@ -59,9 +59,8 @@
59
59
  "@fortawesome/react-fontawesome": "^0.1.14",
60
60
  "@panneau/core": "^3.0.45",
61
61
  "@panneau/element-button": "^3.0.55",
62
- "@panneau/element-card": "^3.0.75",
63
62
  "@panneau/element-label": "^3.0.45",
64
- "@panneau/element-media-card": "^3.0.94",
63
+ "@panneau/element-media-card": "^3.0.95",
65
64
  "@panneau/list-resource-items": "^3.0.91",
66
65
  "@panneau/modal-dialog": "^3.0.77",
67
66
  "@panneau/themes": "^3.0.55",
@@ -82,5 +81,5 @@
82
81
  "publishConfig": {
83
82
  "access": "public"
84
83
  },
85
- "gitHead": "5d3c2bd2a00dad5964ed48e7bd099f084959dc2c"
84
+ "gitHead": "599e92b3a8564b896e6361ce9f44be9d664bd93b"
86
85
  }