@panneau/field-upload 2.0.42 → 2.0.51

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 +53 -16
  2. package/lib/index.js +52 -15
  3. package/package.json +7 -7
package/es/index.js CHANGED
@@ -10,7 +10,7 @@ import isArray from 'lodash/isArray';
10
10
  import isObject from 'lodash/isObject';
11
11
  import prettyBytes from 'pretty-bytes';
12
12
  import PropTypes from 'prop-types';
13
- import React, { useCallback, useMemo, useState } from 'react';
13
+ import React, { useState, useCallback, useMemo } 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';
@@ -33,11 +33,15 @@ var propTypes = {
33
33
  fileTypes: PropTypes.arrayOf(PropTypes.string),
34
34
  sources: PropTypes.arrayOf(PropTypes.oneOf(['webcam', 'facebook', 'instagram', 'dropbox', 'google-drive'])),
35
35
  withButton: PropTypes.bool,
36
+ withSearchModal: PropTypes.bool,
36
37
  addButtonLabel: PropTypes$1.label,
38
+ searchButtonLabel: PropTypes$1.label,
37
39
  allowMultipleUploads: PropTypes.bool,
38
40
  namePath: PropTypes.string,
39
41
  thumbnailPath: PropTypes.string,
40
42
  sizePath: PropTypes.string,
43
+ width: PropTypes.number,
44
+ height: PropTypes.number,
41
45
  disabled: PropTypes.bool,
42
46
  onChange: PropTypes.func,
43
47
  className: PropTypes.string
@@ -48,6 +52,7 @@ var defaultProps = {
48
52
  fileTypes: null,
49
53
  sources: ['webcam', 'facebook', 'instagram', 'dropbox', 'google-drive'],
50
54
  withButton: false,
55
+ withSearchModal: false,
51
56
  addButtonLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
52
57
  id: "NI9440",
53
58
  defaultMessage: [{
@@ -55,10 +60,19 @@ var defaultProps = {
55
60
  "value": "Add file"
56
61
  }]
57
62
  }),
63
+ searchButtonLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
64
+ id: "oTrX3h",
65
+ defaultMessage: [{
66
+ "type": 0,
67
+ "value": "Search media"
68
+ }]
69
+ }),
58
70
  allowMultipleUploads: false,
59
71
  namePath: null,
60
72
  thumbnailPath: null,
61
73
  sizePath: null,
74
+ width: null,
75
+ height: 300,
62
76
  disabled: false,
63
77
  onChange: null,
64
78
  className: null
@@ -69,11 +83,15 @@ var UploadField = function UploadField(_ref) {
69
83
  fileTypes = _ref.fileTypes,
70
84
  sources = _ref.sources,
71
85
  withButton = _ref.withButton,
86
+ withSearchModal = _ref.withSearchModal,
72
87
  addButtonLabel = _ref.addButtonLabel,
88
+ searchButtonLabel = _ref.searchButtonLabel,
73
89
  allowMultipleUploads = _ref.allowMultipleUploads,
74
90
  namePath = _ref.namePath,
75
91
  thumbnailPath = _ref.thumbnailPath,
76
92
  sizePath = _ref.sizePath,
93
+ width = _ref.width,
94
+ height = _ref.height,
77
95
  disabled = _ref.disabled,
78
96
  onChange = _ref.onChange,
79
97
  className = _ref.className;
@@ -86,6 +104,14 @@ var UploadField = function UploadField(_ref) {
86
104
  var _ref3 = contentRect || {},
87
105
  _ref3$width = _ref3.width,
88
106
  containerWidth = _ref3$width === void 0 ? null : _ref3$width;
107
+ var _useState = useState(false),
108
+ _useState2 = _slicedToArray(_useState, 2),
109
+ mediaModalOpen = _useState2[0],
110
+ setMediaModalOpen = _useState2[1];
111
+ var showMediaModal = withSearchModal && mediaModalOpen;
112
+ var toggleSearchModal = useCallback(function () {
113
+ setMediaModalOpen(!mediaModalOpen);
114
+ }, [mediaModalOpen, setMediaModalOpen]);
89
115
  var onComplete = useCallback(function (response) {
90
116
  console.log('upload complete', response); // eslint-disable-line
91
117
  var newValue = null;
@@ -136,10 +162,10 @@ var UploadField = function UploadField(_ref) {
136
162
  onChange(null);
137
163
  }
138
164
  }, [value, onChange]);
139
- var _useState = useState(false),
140
- _useState2 = _slicedToArray(_useState, 2),
141
- modalOpened = _useState2[0],
142
- setModalOpened = _useState2[1];
165
+ var _useState3 = useState(false),
166
+ _useState4 = _slicedToArray(_useState3, 2),
167
+ modalOpened = _useState4[0],
168
+ setModalOpened = _useState4[1];
143
169
  var openModal = useCallback(function () {
144
170
  setModalOpened(true);
145
171
  }, [setModalOpened]);
@@ -153,9 +179,6 @@ var UploadField = function UploadField(_ref) {
153
179
  return value !== null ? [value] : null;
154
180
  }, [value]);
155
181
  var hasMedia = values !== null && values.length > 0;
156
-
157
- // console.log(containerWidth);
158
-
159
182
  return /*#__PURE__*/React.createElement("div", {
160
183
  className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
161
184
  ref: containerRef
@@ -245,28 +268,42 @@ var UploadField = function UploadField(_ref) {
245
268
  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
246
269
  icon: faTimes
247
270
  })))));
248
- }) : null, !hasMedia && withButton ? /*#__PURE__*/React.createElement(Button, {
271
+ }) : null, !hasMedia && withButton ? /*#__PURE__*/React.createElement("div", {
272
+ className: "row"
273
+ }, /*#__PURE__*/React.createElement("div", {
274
+ className: "col-auto"
275
+ }, /*#__PURE__*/React.createElement(Button, {
249
276
  type: "button",
250
277
  theme: "primary",
251
278
  onClick: openModal,
252
279
  disabled: disabled
253
- }, /*#__PURE__*/React.createElement(Label, null, addButtonLabel)) : null, !disabled && !hasMedia && !withButton && uppy !== null ? /*#__PURE__*/React.createElement(Dashboard, Object.assign({
280
+ }, /*#__PURE__*/React.createElement(Label, null, addButtonLabel))), withSearchModal ? /*#__PURE__*/React.createElement("div", {
281
+ className: "col-auto ps-0"
282
+ }, /*#__PURE__*/React.createElement(Button, {
283
+ type: "button",
284
+ theme: "primary",
285
+ onClick: toggleSearchModal,
286
+ disabled: disabled
287
+ }, /*#__PURE__*/React.createElement(Label, null, searchButtonLabel))) : null) : null, !showMediaModal && !disabled && !hasMedia && !withButton && uppy !== null ? /*#__PURE__*/React.createElement(Dashboard, Object.assign({
254
288
  uppy: uppy
255
289
  // eslint-disable-next-line react/jsx-props-no-spreading
256
- }, containerWidth !== null ? {
290
+ }, containerWidth !== null && height !== null ? {
257
291
  width: containerWidth
258
- } : null, {
259
- height: 300,
292
+ } : {
293
+ width: width
294
+ }, {
295
+ height: height,
260
296
  plugins: sources,
261
297
  inline: true,
262
- areInsidesReadyToBeVisible: true
263
- })) : null, !disabled && withButton && uppy !== null ? /*#__PURE__*/React.createElement(DashboardModal, {
298
+ areInsidesReadyToBeVisible: true,
299
+ proudlyDisplayPoweredByUppy: false
300
+ })) : null, !showMediaModal && !disabled && withButton && uppy !== null ? /*#__PURE__*/React.createElement(DashboardModal, {
264
301
  uppy: uppy,
265
302
  plugins: sources,
266
303
  open: modalOpened,
267
304
  onRequestClose: closeModal,
268
305
  closeModalOnClickOutside: true
269
- }) : null);
306
+ }) : null, showMediaModal ? 'Hello' : null);
270
307
  };
271
308
  UploadField.propTypes = propTypes;
272
309
  UploadField.defaultProps = defaultProps;
package/lib/index.js CHANGED
@@ -52,11 +52,15 @@ var propTypes = {
52
52
  fileTypes: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
53
53
  sources: PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOf(['webcam', 'facebook', 'instagram', 'dropbox', 'google-drive'])),
54
54
  withButton: PropTypes__default["default"].bool,
55
+ withSearchModal: PropTypes__default["default"].bool,
55
56
  addButtonLabel: core.PropTypes.label,
57
+ searchButtonLabel: core.PropTypes.label,
56
58
  allowMultipleUploads: PropTypes__default["default"].bool,
57
59
  namePath: PropTypes__default["default"].string,
58
60
  thumbnailPath: PropTypes__default["default"].string,
59
61
  sizePath: PropTypes__default["default"].string,
62
+ width: PropTypes__default["default"].number,
63
+ height: PropTypes__default["default"].number,
60
64
  disabled: PropTypes__default["default"].bool,
61
65
  onChange: PropTypes__default["default"].func,
62
66
  className: PropTypes__default["default"].string
@@ -67,6 +71,7 @@ var defaultProps = {
67
71
  fileTypes: null,
68
72
  sources: ['webcam', 'facebook', 'instagram', 'dropbox', 'google-drive'],
69
73
  withButton: false,
74
+ withSearchModal: false,
70
75
  addButtonLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
71
76
  id: "NI9440",
72
77
  defaultMessage: [{
@@ -74,10 +79,19 @@ var defaultProps = {
74
79
  "value": "Add file"
75
80
  }]
76
81
  }),
82
+ searchButtonLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
83
+ id: "oTrX3h",
84
+ defaultMessage: [{
85
+ "type": 0,
86
+ "value": "Search media"
87
+ }]
88
+ }),
77
89
  allowMultipleUploads: false,
78
90
  namePath: null,
79
91
  thumbnailPath: null,
80
92
  sizePath: null,
93
+ width: null,
94
+ height: 300,
81
95
  disabled: false,
82
96
  onChange: null,
83
97
  className: null
@@ -88,11 +102,15 @@ var UploadField = function UploadField(_ref) {
88
102
  fileTypes = _ref.fileTypes,
89
103
  sources = _ref.sources,
90
104
  withButton = _ref.withButton,
105
+ withSearchModal = _ref.withSearchModal,
91
106
  addButtonLabel = _ref.addButtonLabel,
107
+ searchButtonLabel = _ref.searchButtonLabel,
92
108
  allowMultipleUploads = _ref.allowMultipleUploads,
93
109
  namePath = _ref.namePath,
94
110
  thumbnailPath = _ref.thumbnailPath,
95
111
  sizePath = _ref.sizePath,
112
+ width = _ref.width,
113
+ height = _ref.height,
96
114
  disabled = _ref.disabled,
97
115
  onChange = _ref.onChange,
98
116
  className = _ref.className;
@@ -105,6 +123,14 @@ var UploadField = function UploadField(_ref) {
105
123
  var _ref3 = contentRect || {},
106
124
  _ref3$width = _ref3.width,
107
125
  containerWidth = _ref3$width === void 0 ? null : _ref3$width;
126
+ var _useState = React.useState(false),
127
+ _useState2 = _slicedToArray__default["default"](_useState, 2),
128
+ mediaModalOpen = _useState2[0],
129
+ setMediaModalOpen = _useState2[1];
130
+ var showMediaModal = withSearchModal && mediaModalOpen;
131
+ var toggleSearchModal = React.useCallback(function () {
132
+ setMediaModalOpen(!mediaModalOpen);
133
+ }, [mediaModalOpen, setMediaModalOpen]);
108
134
  var onComplete = React.useCallback(function (response) {
109
135
  console.log('upload complete', response); // eslint-disable-line
110
136
  var newValue = null;
@@ -155,10 +181,10 @@ var UploadField = function UploadField(_ref) {
155
181
  onChange(null);
156
182
  }
157
183
  }, [value, onChange]);
158
- var _useState = React.useState(false),
159
- _useState2 = _slicedToArray__default["default"](_useState, 2),
160
- modalOpened = _useState2[0],
161
- setModalOpened = _useState2[1];
184
+ var _useState3 = React.useState(false),
185
+ _useState4 = _slicedToArray__default["default"](_useState3, 2),
186
+ modalOpened = _useState4[0],
187
+ setModalOpened = _useState4[1];
162
188
  var openModal = React.useCallback(function () {
163
189
  setModalOpened(true);
164
190
  }, [setModalOpened]);
@@ -172,9 +198,6 @@ var UploadField = function UploadField(_ref) {
172
198
  return value !== null ? [value] : null;
173
199
  }, [value]);
174
200
  var hasMedia = values !== null && values.length > 0;
175
-
176
- // console.log(containerWidth);
177
-
178
201
  return /*#__PURE__*/React__default["default"].createElement("div", {
179
202
  className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)]),
180
203
  ref: containerRef
@@ -264,28 +287,42 @@ var UploadField = function UploadField(_ref) {
264
287
  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
265
288
  icon: freeSolidSvgIcons.faTimes
266
289
  })))));
267
- }) : null, !hasMedia && withButton ? /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
290
+ }) : null, !hasMedia && withButton ? /*#__PURE__*/React__default["default"].createElement("div", {
291
+ className: "row"
292
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
293
+ className: "col-auto"
294
+ }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
268
295
  type: "button",
269
296
  theme: "primary",
270
297
  onClick: openModal,
271
298
  disabled: disabled
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({
299
+ }, /*#__PURE__*/React__default["default"].createElement(Label__default["default"], null, addButtonLabel))), withSearchModal ? /*#__PURE__*/React__default["default"].createElement("div", {
300
+ className: "col-auto ps-0"
301
+ }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
302
+ type: "button",
303
+ theme: "primary",
304
+ onClick: toggleSearchModal,
305
+ disabled: disabled
306
+ }, /*#__PURE__*/React__default["default"].createElement(Label__default["default"], null, searchButtonLabel))) : null) : null, !showMediaModal && !disabled && !hasMedia && !withButton && uppy !== null ? /*#__PURE__*/React__default["default"].createElement(react.Dashboard, Object.assign({
273
307
  uppy: uppy
274
308
  // eslint-disable-next-line react/jsx-props-no-spreading
275
- }, containerWidth !== null ? {
309
+ }, containerWidth !== null && height !== null ? {
276
310
  width: containerWidth
277
- } : null, {
278
- height: 300,
311
+ } : {
312
+ width: width
313
+ }, {
314
+ height: height,
279
315
  plugins: sources,
280
316
  inline: true,
281
- areInsidesReadyToBeVisible: true
282
- })) : null, !disabled && withButton && uppy !== null ? /*#__PURE__*/React__default["default"].createElement(react.DashboardModal, {
317
+ areInsidesReadyToBeVisible: true,
318
+ proudlyDisplayPoweredByUppy: false
319
+ })) : null, !showMediaModal && !disabled && withButton && uppy !== null ? /*#__PURE__*/React__default["default"].createElement(react.DashboardModal, {
283
320
  uppy: uppy,
284
321
  plugins: sources,
285
322
  open: modalOpened,
286
323
  onRequestClose: closeModal,
287
324
  closeModalOnClickOutside: true
288
- }) : null);
325
+ }) : null, showMediaModal ? 'Hello' : null);
289
326
  };
290
327
  UploadField.propTypes = propTypes;
291
328
  UploadField.defaultProps = defaultProps;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@panneau/field-upload",
3
- "version": "2.0.42",
3
+ "version": "2.0.51",
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": "^2.0.42",
60
- "@panneau/element-button": "^2.0.42",
61
- "@panneau/element-card": "^2.0.42",
62
- "@panneau/element-label": "^2.0.42",
63
- "@panneau/themes": "^2.0.42",
59
+ "@panneau/core": "^2.0.51",
60
+ "@panneau/element-button": "^2.0.51",
61
+ "@panneau/element-card": "^2.0.51",
62
+ "@panneau/element-label": "^2.0.51",
63
+ "@panneau/themes": "^2.0.51",
64
64
  "@uppy/core": "^3.2.0",
65
65
  "@uppy/dashboard": "^3.4.0",
66
66
  "@uppy/drag-drop": "^3.0.2",
@@ -78,5 +78,5 @@
78
78
  "publishConfig": {
79
79
  "access": "public"
80
80
  },
81
- "gitHead": "8c923d1850491007651c7a9469bfe30671e48127"
81
+ "gitHead": "dcdf30dd8429d6022ae69fff1ea7a101fc6d4e71"
82
82
  }