@panneau/field-upload 3.0.308 → 4.0.0

package/assets/css/styles.css

@@ -1 +1 @@
-.panneau-field-upload-container{position:relative;width:100%}.panneau-field-upload-container .panneau-field-upload-dashboard{position:relative}.panneau-field-upload-container .panneau-field-upload-dashboardModal{position:relative;z-index:10001}.panneau-field-upload-container .panneau-field-upload-uppyDashboardContainer{margin-top:10px}
+.panneau-field-upload-container{position:relative;width:100%}.panneau-field-upload-container .panneau-field-upload-dashboard{position:relative}.panneau-field-upload-container .panneau-field-upload-dashboardModal{position:relative;z-index:10001}.panneau-field-upload-container .panneau-field-upload-uppyDashboardContainer{margin-top:0}

package/es/index.js

@@ -2,153 +2,116 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import { Dashboard, DashboardModal } from '@uppy/react';
+import { UppyContextProvider } from '@uppy/react';
+import Dashboard from '@uppy/react/dashboard';
+import DashboardModal from '@uppy/react/dashboard-modal';
 import classNames from 'classnames';
 import isArray from 'lodash-es/isArray';
 import isObject from 'lodash-es/isObject';
-import PropTypes from 'prop-types';
 import React, { useCallback, useMemo, useState, useRef, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { PropTypes as PropTypes$1 } from '@panneau/core';
 import { useQuery } from '@panneau/core/hooks';
 import Button from '@panneau/element-button';
 import Label from '@panneau/element-label';
 import MediaCard, { MediaCards } from '@panneau/element-media-card';
 import ModalResourceItems from '@panneau/modal-resource-items';
 import { useUppy } from '@panneau/uppy';
-import '@uppy/core/dist/style.css';
-import '@uppy/dashboard/dist/style.css';
-import '@uppy/drag-drop/dist/style.css';
-import '@uppy/status-bar/dist/style.css';
+import '@uppy/core/css/style.css';
+import '@uppy/dashboard/css/style.css';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 
 var styles = {"container":"panneau-field-upload-container","dashboard":"panneau-field-upload-dashboard","dashboardModal":"panneau-field-upload-dashboardModal"};
 
-var propTypes$1 = {
-  resource: PropTypes.string,
-  value: PropTypes.oneOfType([PropTypes.array, PropTypes.shape({
-    filename: PropTypes.string,
-    size: PropTypes.number,
-    url: PropTypes.string
-  })]),
-  name: PropTypes.string,
-  types: PropTypes.arrayOf(PropTypes.oneOf(['audio', 'image', 'video', 'document'])),
-  fileTypes: PropTypes.arrayOf(PropTypes.string),
-  sources: PropTypes.arrayOf(PropTypes.oneOf(['webcam', 'facebook', 'instagram', 'dropbox', 'google-drive'])),
-  withButton: PropTypes.bool,
-  withFind: PropTypes.bool,
-  withClearButton: PropTypes.bool,
-  withoutMedia: PropTypes.bool,
-  addButtonLabel: PropTypes$1.label,
-  findButtonLabel: PropTypes$1.label,
-  clearButtonLabel: PropTypes$1.label,
-  allowMultipleUploads: PropTypes.bool,
-  closeAfterFinish: PropTypes.bool,
-  maxNumberOfFiles: PropTypes.number,
-  namePath: PropTypes.string,
-  thumbnailPath: PropTypes.string,
-  sizePath: PropTypes.string,
-  linkPath: PropTypes.string,
-  uppyProps: PropTypes.shape({
-    withUUID: PropTypes.bool
-  }),
-  width: PropTypes.number,
-  height: PropTypes.number,
-  disabled: PropTypes.bool,
-  uploadDisabled: PropTypes.bool,
-  outline: PropTypes.bool,
-  loading: PropTypes.bool,
-  onChange: PropTypes.func,
-  onClear: PropTypes.func,
-  onClickAdd: PropTypes.func,
-  onClickFind: PropTypes.func,
-  className: PropTypes.string
-};
-var defaultProps$1 = {
-  resource: 'medias',
-  value: null,
-  name: null,
-  types: ['audio', 'image', 'video'],
-  fileTypes: null,
-  sources: ['webcam', 'facebook', 'instagram', 'dropbox', 'google-drive'],
-  withButton: false,
-  withFind: false,
-  withClearButton: false,
-  withoutMedia: false,
-  addButtonLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+// import '@uppy/react/css/style.css';
+
+var DEFAULT_TYPES = ['audio', 'image', 'video'];
+var DEFAULT_SOURCES = ['webcam', 'facebook', 'instagram', 'dropbox', 'google-drive'];
+function UploadField(_ref) {
+  var _ref$resource = _ref.resource,
+    resource = _ref$resource === void 0 ? 'medias' : _ref$resource,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? null : _ref$value,
+    _ref$name = _ref.name,
+    name = _ref$name === void 0 ? null : _ref$name,
+    _ref$types = _ref.types,
+    types = _ref$types === void 0 ? DEFAULT_TYPES : _ref$types,
+    _ref$fileTypes = _ref.fileTypes,
+    fileTypes = _ref$fileTypes === void 0 ? null : _ref$fileTypes,
+    _ref$sources = _ref.sources,
+    sources = _ref$sources === void 0 ? DEFAULT_SOURCES : _ref$sources,
+    _ref$withButton = _ref.withButton,
+    withButton = _ref$withButton === void 0 ? false : _ref$withButton,
+    _ref$withFind = _ref.withFind,
+    withFind = _ref$withFind === void 0 ? false : _ref$withFind,
+    _ref$withClearButton = _ref.withClearButton,
+    withClearButton = _ref$withClearButton === void 0 ? false : _ref$withClearButton,
+    _ref$withoutMedia = _ref.withoutMedia,
+    withoutMedia = _ref$withoutMedia === void 0 ? false : _ref$withoutMedia,
+    _ref$addButtonLabel = _ref.addButtonLabel,
+    initialAddButtonLabel = _ref$addButtonLabel === void 0 ? null : _ref$addButtonLabel,
+    _ref$findButtonLabel = _ref.findButtonLabel,
+    initialFindButtonLabel = _ref$findButtonLabel === void 0 ? null : _ref$findButtonLabel,
+    _ref$clearButtonLabel = _ref.clearButtonLabel,
+    initialCleanButtonLabel = _ref$clearButtonLabel === void 0 ? null : _ref$clearButtonLabel,
+    _ref$allowMultipleUpl = _ref.allowMultipleUploads,
+    allowMultipleUploads = _ref$allowMultipleUpl === void 0 ? false : _ref$allowMultipleUpl,
+    _ref$closeAfterFinish = _ref.closeAfterFinish,
+    closeAfterFinish = _ref$closeAfterFinish === void 0 ? true : _ref$closeAfterFinish,
+    _ref$maxNumberOfFiles = _ref.maxNumberOfFiles,
+    maxNumberOfFiles = _ref$maxNumberOfFiles === void 0 ? 1 : _ref$maxNumberOfFiles,
+    _ref$namePath = _ref.namePath,
+    namePath = _ref$namePath === void 0 ? 'name' : _ref$namePath,
+    _ref$thumbnailPath = _ref.thumbnailPath,
+    thumbnailPath = _ref$thumbnailPath === void 0 ? 'thumbnail_url' : _ref$thumbnailPath,
+    _ref$sizePath = _ref.sizePath,
+    sizePath = _ref$sizePath === void 0 ? 'metadata.size' : _ref$sizePath,
+    _ref$linkPath = _ref.linkPath,
+    linkPath = _ref$linkPath === void 0 ? null : _ref$linkPath,
+    _ref$uppyProps = _ref.uppyProps,
+    uppyProps = _ref$uppyProps === void 0 ? null : _ref$uppyProps,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? null : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 300 : _ref$height,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$uploadDisabled = _ref.uploadDisabled,
+    uploadDisabled = _ref$uploadDisabled === void 0 ? false : _ref$uploadDisabled,
+    _ref$outline = _ref.outline,
+    outline = _ref$outline === void 0 ? true : _ref$outline,
+    _ref$loading = _ref.loading,
+    parentLoading = _ref$loading === void 0 ? false : _ref$loading,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? null : _ref$onChange,
+    _ref$onClear = _ref.onClear,
+    onClear = _ref$onClear === void 0 ? null : _ref$onClear,
+    _ref$onClickAdd = _ref.onClickAdd,
+    onClickAdd = _ref$onClickAdd === void 0 ? null : _ref$onClickAdd,
+    _ref$onClickFind = _ref.onClickFind,
+    onClickFind = _ref$onClickFind === void 0 ? null : _ref$onClickFind,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className;
+  var addButtonLabel = initialAddButtonLabel || /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "BeKVq6",
     defaultMessage: [{
       "type": 0,
       "value": "Upload file"
     }]
-  }),
-  findButtonLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+  });
+  var findButtonLabel = initialFindButtonLabel || /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "une5WQ",
     defaultMessage: [{
       "type": 0,
       "value": "Find a file"
     }]
-  }),
-  clearButtonLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+  });
+  var clearButtonLabel = initialCleanButtonLabel || /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "odaCUe",
     defaultMessage: [{
       "type": 0,
       "value": "Clear"
     }]
-  }),
-  allowMultipleUploads: false,
-  closeAfterFinish: true,
-  maxNumberOfFiles: 1,
-  namePath: 'name',
-  thumbnailPath: 'thumbnail_url',
-  sizePath: 'metadata.size',
-  linkPath: null,
-  uppyProps: null,
-  width: null,
-  height: 300,
-  disabled: false,
-  uploadDisabled: false,
-  outline: true,
-  loading: false,
-  onChange: null,
-  onClear: null,
-  onClickAdd: null,
-  onClickFind: null,
-  className: null
-};
-var UploadField = function UploadField(_ref) {
-  var resource = _ref.resource,
-    value = _ref.value,
-    name = _ref.name,
-    types = _ref.types,
-    fileTypes = _ref.fileTypes,
-    sources = _ref.sources,
-    withButton = _ref.withButton,
-    withFind = _ref.withFind,
-    withClearButton = _ref.withClearButton,
-    withoutMedia = _ref.withoutMedia,
-    addButtonLabel = _ref.addButtonLabel,
-    findButtonLabel = _ref.findButtonLabel,
-    clearButtonLabel = _ref.clearButtonLabel,
-    allowMultipleUploads = _ref.allowMultipleUploads,
-    closeAfterFinish = _ref.closeAfterFinish,
-    maxNumberOfFiles = _ref.maxNumberOfFiles,
-    namePath = _ref.namePath,
-    thumbnailPath = _ref.thumbnailPath,
-    sizePath = _ref.sizePath,
-    linkPath = _ref.linkPath,
-    uppyProps = _ref.uppyProps,
-    width = _ref.width,
-    height = _ref.height,
-    disabled = _ref.disabled,
-    uploadDisabled = _ref.uploadDisabled,
-    outline = _ref.outline,
-    parentLoading = _ref.loading,
-    onChange = _ref.onChange,
-    onClear = _ref.onClear,
-    onClickAdd = _ref.onClickAdd,
-    onClickFind = _ref.onClickFind,
-    className = _ref.className;
+  });
   var mergeData = useCallback(function (newValue) {
     // Merge the response from our back-end
     if (isObject(newValue) && isObject(newValue.response) && newValue.response.status === 200 && newValue.response.body !== null) {
@@ -174,7 +137,7 @@ var UploadField = function UploadField(_ref) {
       newValue = newValue.map(function (val) {
         return mergeData(val);
       });
-    } else {
+    } else if (newValue !== null) {
       newValue = mergeData(newValue);
     }
 
@@ -264,7 +227,7 @@ var UploadField = function UploadField(_ref) {
     setModalItems = _useState6[1];
   var closeResourceModal = useCallback(function () {
     setResourceModalOpen(false);
-    setModalItems(null);
+    setModalItems([]);
   }, [resourceModalOpen, setResourceModalOpen, setModalItems]);
   var finalOnClickFind = useCallback(function () {
     if (onClickFind !== null) {
@@ -309,7 +272,7 @@ var UploadField = function UploadField(_ref) {
       // Always multiple onchange
       onChange(modalItems);
       setResourceModalOpen(false);
-      setModalItems(null);
+      setModalItems([]);
     }
   }, [onChange, setResourceModalOpen, modalItems, allowMultipleUploads, setModalItems]);
   var initialQuery = useMemo(function () {
@@ -324,7 +287,7 @@ var UploadField = function UploadField(_ref) {
     onListQueryReset = _useQuery.onQueryReset;
   var containerRef = useRef(null);
 
-  // Keep this stable, uppy doesnt like
+  // Keep this stable, uppy doesnt like changes
   var _useState7 = useState(null),
     _useState8 = _slicedToArray(_useState7, 2),
     finalUppy = _useState8[0],
@@ -413,7 +376,9 @@ var UploadField = function UploadField(_ref) {
     onClick: finalOnClickFind,
     disabled: disabled,
     outline: outline
-  }, /*#__PURE__*/React.createElement(Label, null, findButtonLabel))) : null) : null, !uploadDisabled && !hasMedia && !withButton && finalUppy !== null ? /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Label, null, findButtonLabel))) : null) : null, finalUppy !== null ? /*#__PURE__*/React.createElement(UppyContextProvider, {
+    uppy: finalUppy
+  }, !uploadDisabled && !hasMedia && !withButton && finalUppy !== null ? /*#__PURE__*/React.createElement("div", {
     className: styles.dashboard
   }, /*#__PURE__*/React.createElement(Dashboard, Object.assign({
     uppy: finalUppy
@@ -444,7 +409,7 @@ var UploadField = function UploadField(_ref) {
     showAddFilesPanel: true,
     doneButtonHandler: closeModal,
     closeAfterFinish: closeAfterFinish
-  }) : null, showResourceModal ? /*#__PURE__*/React.createElement(ModalResourceItems, {
+  }) : null) : null, showResourceModal ? /*#__PURE__*/React.createElement(ModalResourceItems, {
     id: "upload-".concat(name),
     resource: resource,
     query: listQuery,
@@ -489,9 +454,7 @@ var UploadField = function UploadField(_ref) {
       "value": "Confirm selection"
     }]
   }))))) : null);
-};
-UploadField.propTypes = propTypes$1;
-UploadField.defaultProps = defaultProps$1;
+}
 
 var definition = [{
   id: 'upload',
@@ -514,27 +477,27 @@ var definition = [{
 }];
 
 /* eslint-disable react/jsx-props-no-spreading */
-var AudioField = function AudioField(props) {
+function AudioField(props) {
   var types = useMemo(function () {
     return ['audio'];
   }, []);
   return /*#__PURE__*/React.createElement(UploadField, Object.assign({}, props, {
     types: types
   }));
-};
+}
 
 /* eslint-disable react/jsx-props-no-spreading */
-var ImageField = function ImageField(props) {
+function ImageField(props) {
   var types = useMemo(function () {
     return ['image'];
   }, []);
   return /*#__PURE__*/React.createElement(UploadField, Object.assign({}, props, {
     types: types
   }));
-};
+}
 
 /* eslint-disable react/jsx-props-no-spreading */
-var ImagesField = function ImagesField(props) {
+function ImagesField(props) {
   var types = useMemo(function () {
     return ['image'];
   }, []);
@@ -542,20 +505,20 @@ var ImagesField = function ImagesField(props) {
     types: types,
     allowMultipleUploads: true
   }));
-};
+}
 
 /* eslint-disable react/jsx-props-no-spreading */
-var VideoField = function VideoField(props) {
+function VideoField(props) {
   var types = useMemo(function () {
     return ['video'];
   }, []);
   return /*#__PURE__*/React.createElement(UploadField, Object.assign({}, props, {
     types: types
   }));
-};
+}
 
 /* eslint-disable react/jsx-props-no-spreading */
-var DocumentField = function DocumentField(props) {
+function DocumentField(props) {
   var fileTypes = useMemo(function () {
     return ['.pdf'];
   }, []);
@@ -566,38 +529,22 @@ var DocumentField = function DocumentField(props) {
     fileTypes: fileTypes,
     types: types
   }));
-};
+}
 
 /* eslint-disable react/jsx-props-no-spreading */
-var FontField = function FontField(props) {
+function FontField(props) {
   var fileTypes = useMemo(function () {
     return ['.ttf', '.otf'];
   }, []);
   return /*#__PURE__*/React.createElement(UploadField, Object.assign({}, props, {
     fileTypes: fileTypes
   }));
-};
+}
 
 var _excluded = ["value", "onChange"];
-var propTypes = {
-  value: PropTypes.shape({
-    published: PropTypes.bool,
-    featured: PropTypes.bool,
-    created_at: PropTypes.string,
-    updated_at: PropTypes.string
-  }),
-  onChange: PropTypes.func,
-  types: PropTypes.arrayOf(PropTypes.string),
-  fileTypes: PropTypes.arrayOf(PropTypes.string)
-};
-var defaultProps = {
-  value: null,
-  onChange: null,
-  types: null,
-  fileTypes: null
-};
-var UpdateFileField = function UpdateFileField(_ref) {
-  var value = _ref.value;
+function UpdateFileField(_ref) {
+  var _ref$value = _ref.value,
+    value = _ref$value === void 0 ? null : _ref$value;
     _ref.onChange;
     var props = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(null),
@@ -674,8 +621,6 @@ var UpdateFileField = function UpdateFileField(_ref) {
     withButton: true,
     uppyProps: uppyProps
   }))));
-};
-UpdateFileField.propTypes = propTypes;
-UpdateFileField.defaultProps = defaultProps;
+}
 
 export { AudioField, DocumentField, FontField, ImageField, ImagesField, UpdateFileField, VideoField, UploadField as default, definition };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/field-upload",
-    "version": "3.0.308",
+    "version": "4.0.0",
     "description": "An Upload field",
     "keywords": [
         "javascript"
@@ -62,28 +62,25 @@
         "@fortawesome/fontawesome-svg-core": "^6.5.1",
         "@fortawesome/free-solid-svg-icons": "^6.5.1",
         "@fortawesome/react-fontawesome": "^0.2.0",
-        "@panneau/core": "^3.0.307",
-        "@panneau/element-button": "^3.0.308",
-        "@panneau/element-label": "^3.0.307",
-        "@panneau/element-media-card": "^3.0.308",
-        "@panneau/modal-resource-items": "^3.0.308",
-        "@panneau/themes": "^3.0.308",
-        "@panneau/uppy": "^3.0.307",
-        "@uppy/core": "^3.9.1",
-        "@uppy/dashboard": "^3.7.3",
-        "@uppy/drag-drop": "^3.0.3",
-        "@uppy/file-input": "^3.0.4",
-        "@uppy/progress-bar": "^3.0.4",
-        "@uppy/react": "^3.3.0",
-        "@uppy/status-bar": "^3.2.7",
-        "@uppy/utils": "^5.7.2",
+        "@panneau/core": "^4.0.0",
+        "@panneau/element-button": "^4.0.0",
+        "@panneau/element-label": "^4.0.0",
+        "@panneau/element-media-card": "^4.0.0",
+        "@panneau/modal-resource-items": "^4.0.0",
+        "@panneau/themes": "^4.0.0",
+        "@panneau/uppy": "^4.0.0",
+        "@uppy/core": "^5.1.1",
+        "@uppy/dashboard": "^5.0.4",
+        "@uppy/react": "^5.1.1",
+        "@uppy/utils": "^7.1.3",
         "classnames": "^2.5.1",
         "lodash-es": "^4.17.21",
         "prop-types": "^15.7.2",
-        "react-intl": "^5.15.8||^6.0.0"
+        "react-intl": "^5.15.8 || ^6.0.0 || ^7.0.0",
+        "tailwindcss": "^4.1.17"
     },
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "8711276a09fcda499a4a2f206554f9cd995976f5"
+    "gitHead": "2cca874e0388b4a20c39aadb205c0e67d5a946fc"
 }