@panneau/field-upload 2.0.46 → 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 +40 -9
  2. package/lib/index.js +39 -8
  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,7 +33,9 @@ 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,
@@ -50,6 +52,7 @@ var defaultProps = {
50
52
  fileTypes: null,
51
53
  sources: ['webcam', 'facebook', 'instagram', 'dropbox', 'google-drive'],
52
54
  withButton: false,
55
+ withSearchModal: false,
53
56
  addButtonLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
54
57
  id: "NI9440",
55
58
  defaultMessage: [{
@@ -57,6 +60,13 @@ var defaultProps = {
57
60
  "value": "Add file"
58
61
  }]
59
62
  }),
63
+ searchButtonLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
64
+ id: "oTrX3h",
65
+ defaultMessage: [{
66
+ "type": 0,
67
+ "value": "Search media"
68
+ }]
69
+ }),
60
70
  allowMultipleUploads: false,
61
71
  namePath: null,
62
72
  thumbnailPath: null,
@@ -73,7 +83,9 @@ var UploadField = function UploadField(_ref) {
73
83
  fileTypes = _ref.fileTypes,
74
84
  sources = _ref.sources,
75
85
  withButton = _ref.withButton,
86
+ withSearchModal = _ref.withSearchModal,
76
87
  addButtonLabel = _ref.addButtonLabel,
88
+ searchButtonLabel = _ref.searchButtonLabel,
77
89
  allowMultipleUploads = _ref.allowMultipleUploads,
78
90
  namePath = _ref.namePath,
79
91
  thumbnailPath = _ref.thumbnailPath,
@@ -92,6 +104,14 @@ var UploadField = function UploadField(_ref) {
92
104
  var _ref3 = contentRect || {},
93
105
  _ref3$width = _ref3.width,
94
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]);
95
115
  var onComplete = useCallback(function (response) {
96
116
  console.log('upload complete', response); // eslint-disable-line
97
117
  var newValue = null;
@@ -142,10 +162,10 @@ var UploadField = function UploadField(_ref) {
142
162
  onChange(null);
143
163
  }
144
164
  }, [value, onChange]);
145
- var _useState = useState(false),
146
- _useState2 = _slicedToArray(_useState, 2),
147
- modalOpened = _useState2[0],
148
- setModalOpened = _useState2[1];
165
+ var _useState3 = useState(false),
166
+ _useState4 = _slicedToArray(_useState3, 2),
167
+ modalOpened = _useState4[0],
168
+ setModalOpened = _useState4[1];
149
169
  var openModal = useCallback(function () {
150
170
  setModalOpened(true);
151
171
  }, [setModalOpened]);
@@ -248,12 +268,23 @@ var UploadField = function UploadField(_ref) {
248
268
  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
249
269
  icon: faTimes
250
270
  })))));
251
- }) : 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, {
252
276
  type: "button",
253
277
  theme: "primary",
254
278
  onClick: openModal,
255
279
  disabled: disabled
256
- }, /*#__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({
257
288
  uppy: uppy
258
289
  // eslint-disable-next-line react/jsx-props-no-spreading
259
290
  }, containerWidth !== null && height !== null ? {
@@ -266,13 +297,13 @@ var UploadField = function UploadField(_ref) {
266
297
  inline: true,
267
298
  areInsidesReadyToBeVisible: true,
268
299
  proudlyDisplayPoweredByUppy: false
269
- })) : null, !disabled && withButton && uppy !== null ? /*#__PURE__*/React.createElement(DashboardModal, {
300
+ })) : null, !showMediaModal && !disabled && withButton && uppy !== null ? /*#__PURE__*/React.createElement(DashboardModal, {
270
301
  uppy: uppy,
271
302
  plugins: sources,
272
303
  open: modalOpened,
273
304
  onRequestClose: closeModal,
274
305
  closeModalOnClickOutside: true
275
- }) : null);
306
+ }) : null, showMediaModal ? 'Hello' : null);
276
307
  };
277
308
  UploadField.propTypes = propTypes;
278
309
  UploadField.defaultProps = defaultProps;
package/lib/index.js CHANGED
@@ -52,7 +52,9 @@ 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,
@@ -69,6 +71,7 @@ var defaultProps = {
69
71
  fileTypes: null,
70
72
  sources: ['webcam', 'facebook', 'instagram', 'dropbox', 'google-drive'],
71
73
  withButton: false,
74
+ withSearchModal: false,
72
75
  addButtonLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
73
76
  id: "NI9440",
74
77
  defaultMessage: [{
@@ -76,6 +79,13 @@ var defaultProps = {
76
79
  "value": "Add file"
77
80
  }]
78
81
  }),
82
+ searchButtonLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
83
+ id: "oTrX3h",
84
+ defaultMessage: [{
85
+ "type": 0,
86
+ "value": "Search media"
87
+ }]
88
+ }),
79
89
  allowMultipleUploads: false,
80
90
  namePath: null,
81
91
  thumbnailPath: null,
@@ -92,7 +102,9 @@ var UploadField = function UploadField(_ref) {
92
102
  fileTypes = _ref.fileTypes,
93
103
  sources = _ref.sources,
94
104
  withButton = _ref.withButton,
105
+ withSearchModal = _ref.withSearchModal,
95
106
  addButtonLabel = _ref.addButtonLabel,
107
+ searchButtonLabel = _ref.searchButtonLabel,
96
108
  allowMultipleUploads = _ref.allowMultipleUploads,
97
109
  namePath = _ref.namePath,
98
110
  thumbnailPath = _ref.thumbnailPath,
@@ -111,6 +123,14 @@ var UploadField = function UploadField(_ref) {
111
123
  var _ref3 = contentRect || {},
112
124
  _ref3$width = _ref3.width,
113
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]);
114
134
  var onComplete = React.useCallback(function (response) {
115
135
  console.log('upload complete', response); // eslint-disable-line
116
136
  var newValue = null;
@@ -161,10 +181,10 @@ var UploadField = function UploadField(_ref) {
161
181
  onChange(null);
162
182
  }
163
183
  }, [value, onChange]);
164
- var _useState = React.useState(false),
165
- _useState2 = _slicedToArray__default["default"](_useState, 2),
166
- modalOpened = _useState2[0],
167
- setModalOpened = _useState2[1];
184
+ var _useState3 = React.useState(false),
185
+ _useState4 = _slicedToArray__default["default"](_useState3, 2),
186
+ modalOpened = _useState4[0],
187
+ setModalOpened = _useState4[1];
168
188
  var openModal = React.useCallback(function () {
169
189
  setModalOpened(true);
170
190
  }, [setModalOpened]);
@@ -267,12 +287,23 @@ var UploadField = function UploadField(_ref) {
267
287
  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
268
288
  icon: freeSolidSvgIcons.faTimes
269
289
  })))));
270
- }) : 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"], {
271
295
  type: "button",
272
296
  theme: "primary",
273
297
  onClick: openModal,
274
298
  disabled: disabled
275
- }, /*#__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({
276
307
  uppy: uppy
277
308
  // eslint-disable-next-line react/jsx-props-no-spreading
278
309
  }, containerWidth !== null && height !== null ? {
@@ -285,13 +316,13 @@ var UploadField = function UploadField(_ref) {
285
316
  inline: true,
286
317
  areInsidesReadyToBeVisible: true,
287
318
  proudlyDisplayPoweredByUppy: false
288
- })) : null, !disabled && withButton && uppy !== null ? /*#__PURE__*/React__default["default"].createElement(react.DashboardModal, {
319
+ })) : null, !showMediaModal && !disabled && withButton && uppy !== null ? /*#__PURE__*/React__default["default"].createElement(react.DashboardModal, {
289
320
  uppy: uppy,
290
321
  plugins: sources,
291
322
  open: modalOpened,
292
323
  onRequestClose: closeModal,
293
324
  closeModalOnClickOutside: true
294
- }) : null);
325
+ }) : null, showMediaModal ? 'Hello' : null);
295
326
  };
296
327
  UploadField.propTypes = propTypes;
297
328
  UploadField.defaultProps = defaultProps;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@panneau/field-upload",
3
- "version": "2.0.46",
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.46",
60
- "@panneau/element-button": "^2.0.46",
61
- "@panneau/element-card": "^2.0.46",
62
- "@panneau/element-label": "^2.0.46",
63
- "@panneau/themes": "^2.0.46",
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": "566fca41a31122cbbcda4b98cb8395e56eaf9336"
81
+ "gitHead": "dcdf30dd8429d6022ae69fff1ea7a101fc6d4e71"
82
82
  }