@panneau/field-upload 3.0.109 → 3.0.111

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-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:10px}

package/es/index.js

@@ -2,12 +2,12 @@ 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 } from '@uppy/react';
+import { Dashboard, DashboardModal } from '@uppy/react';
 import classNames from 'classnames';
 import isArray from 'lodash/isArray';
 import isObject from 'lodash/isObject';
 import PropTypes from 'prop-types';
-import React, { useCallback, useMemo, useState, useRef } from 'react';
+import React, { useCallback, useMemo, useState, useRef, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { PropTypes as PropTypes$1 } from '@panneau/core';
 import { useResourceQuery } from '@panneau/core/hooks';
@@ -16,14 +16,13 @@ import Label from '@panneau/element-label';
 import { MediaCards } from '@panneau/element-media-card';
 import ResourceItemsList from '@panneau/list-resource-items';
 import Dialog from '@panneau/modal-dialog';
-import UploadModal from '@panneau/modal-upload';
 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';
 
-var styles = {"container":"panneau-field-upload-container","dashboard":"panneau-field-upload-dashboard","uppyDashboardContainer":"panneau-field-upload-uppyDashboardContainer"};
+var styles = {"container":"panneau-field-upload-container","dashboard":"panneau-field-upload-dashboard","dashboardModal":"panneau-field-upload-dashboardModal","uppyDashboardContainer":"panneau-field-upload-uppyDashboardContainer"};
 
 var propTypes = {
   value: PropTypes.oneOfType([PropTypes.array, PropTypes.shape({
@@ -212,7 +211,7 @@ var UploadField = function UploadField(_ref) {
   var openModal = useCallback(function () {
     setModalOpened(!modalOpened);
   }, [modalOpened, setModalOpened]);
-  useCallback(function () {
+  var closeModal = useCallback(function () {
     setModalOpened(false);
     if (uppy !== null) {
       uppy.cancelAll({
@@ -312,9 +311,25 @@ var UploadField = function UploadField(_ref) {
     onListPageChange = _useResourceQuery.onPageChange,
     onListQueryChange = _useResourceQuery.onQueryChange,
     onListQueryReset = _useResourceQuery.onQueryReset;
-  console.log('modalOpened', !showResourceModal && !disabled && withButton && uppy !== null && modalOpened);
-  console.log('uppy', uppy);
+
+  // console.log(
+  //     'modalOpened',
+  //     !showResourceModal && !disabled && withButton && uppy !== null && modalOpened,
+  // );
+  // console.log('uppy', uppy);
+
   var containerRef = useRef(null);
+
+  // Keep this stable, uppy doesnt like
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    finalUppy = _useState8[0],
+    setFinalUppy = _useState8[1];
+  useEffect(function () {
+    if (uppy !== null && finalUppy === null) {
+      setFinalUppy(uppy);
+    }
+  }, [uppy, finalUppy]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
     ref: containerRef
@@ -353,10 +368,10 @@ var UploadField = function UploadField(_ref) {
     onClick: toggleResourceModal,
     disabled: disabled,
     outline: true
-  }, /*#__PURE__*/React.createElement(Label, null, findButtonLabel))) : null) : null, !showResourceModal && !disabled && !hasMedia && !withButton && uppy !== null ? /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Label, null, findButtonLabel))) : null) : null, !showResourceModal && !disabled && !hasMedia && !withButton && finalUppy !== null ? /*#__PURE__*/React.createElement("div", {
     className: styles.dashboard
   }, /*#__PURE__*/React.createElement(Dashboard, Object.assign({
-    uppy: uppy
+    uppy: finalUppy
     // {...(containerWidth !== null && height !== null
     //     ? { width: containerWidth }
     // : null)}
@@ -370,18 +385,20 @@ var UploadField = function UploadField(_ref) {
     showProgressDetails: true,
     areInsidesReadyToBeVisible: true,
     proudlyDisplayPoweredByUppy: false
-  }))) : null, !showResourceModal && !disabled && withButton && uppy !== null && modalOpened ? /*#__PURE__*/React.createElement("div", {
-    className: styles.uppyDashboardContainer
-  }, /*#__PURE__*/React.createElement(UploadModal, {
-    title: addButtonLabel,
-    uppy: uppy,
+  }))) : null, !showResourceModal && !disabled && withButton && finalUppy !== null && modalOpened ? /*#__PURE__*/React.createElement(DashboardModal, {
+    uppy: finalUppy,
+    className: styles.dashboardModal,
     plugins: sources,
-    inline: true,
-    width: "100%",
-    height: "300px",
+    open: true,
+    onRequestClose: closeModal,
+    proudlyDisplayPoweredByUppy: false,
+    closeModalOnClickOutside: true,
+    areInsidesReadyToBeVisible: true,
+    isDashboardVisible: true,
     showProgressDetails: true,
-    proudlyDisplayPoweredByUppy: false
-  })) : null, showResourceModal ? /*#__PURE__*/React.createElement(Dialog, {
+    showAddFilesPanel: true,
+    doneButtonHandler: closeModal
+  }) : null, showResourceModal ? /*#__PURE__*/React.createElement(Dialog, {
     title: /*#__PURE__*/React.createElement(Label, null, findButtonLabel),
     size: "xl",
     onClose: closeResourceModal

package/lib/index.js

@@ -20,7 +20,6 @@ var Label = require('@panneau/element-label');
 var elementMediaCard = require('@panneau/element-media-card');
 var ResourceItemsList = require('@panneau/list-resource-items');
 var Dialog = require('@panneau/modal-dialog');
-var UploadModal = require('@panneau/modal-upload');
 var uppy = require('@panneau/uppy');
 require('@uppy/core/dist/style.css');
 require('@uppy/dashboard/dist/style.css');
@@ -42,9 +41,8 @@ var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var Label__default = /*#__PURE__*/_interopDefaultLegacy(Label);
 var ResourceItemsList__default = /*#__PURE__*/_interopDefaultLegacy(ResourceItemsList);
 var Dialog__default = /*#__PURE__*/_interopDefaultLegacy(Dialog);
-var UploadModal__default = /*#__PURE__*/_interopDefaultLegacy(UploadModal);
 
-var styles = {"container":"panneau-field-upload-container","dashboard":"panneau-field-upload-dashboard","uppyDashboardContainer":"panneau-field-upload-uppyDashboardContainer"};
+var styles = {"container":"panneau-field-upload-container","dashboard":"panneau-field-upload-dashboard","dashboardModal":"panneau-field-upload-dashboardModal","uppyDashboardContainer":"panneau-field-upload-uppyDashboardContainer"};
 
 var propTypes = {
   value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].array, PropTypes__default["default"].shape({
@@ -233,7 +231,7 @@ var UploadField = function UploadField(_ref) {
   var openModal = React.useCallback(function () {
     setModalOpened(!modalOpened);
   }, [modalOpened, setModalOpened]);
-  React.useCallback(function () {
+  var closeModal = React.useCallback(function () {
     setModalOpened(false);
     if (uppy$1 !== null) {
       uppy$1.cancelAll({
@@ -333,9 +331,25 @@ var UploadField = function UploadField(_ref) {
     onListPageChange = _useResourceQuery.onPageChange,
     onListQueryChange = _useResourceQuery.onQueryChange,
     onListQueryReset = _useResourceQuery.onQueryReset;
-  console.log('modalOpened', !showResourceModal && !disabled && withButton && uppy$1 !== null && modalOpened);
-  console.log('uppy', uppy$1);
+
+  // console.log(
+  //     'modalOpened',
+  //     !showResourceModal && !disabled && withButton && uppy !== null && modalOpened,
+  // );
+  // console.log('uppy', uppy);
+
   var containerRef = React.useRef(null);
+
+  // Keep this stable, uppy doesnt like
+  var _useState7 = React.useState(null),
+    _useState8 = _slicedToArray__default["default"](_useState7, 2),
+    finalUppy = _useState8[0],
+    setFinalUppy = _useState8[1];
+  React.useEffect(function () {
+    if (uppy$1 !== null && finalUppy === null) {
+      setFinalUppy(uppy$1);
+    }
+  }, [uppy$1, finalUppy]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)]),
     ref: containerRef
@@ -374,10 +388,10 @@ var UploadField = function UploadField(_ref) {
     onClick: toggleResourceModal,
     disabled: disabled,
     outline: true
-  }, /*#__PURE__*/React__default["default"].createElement(Label__default["default"], null, findButtonLabel))) : null) : null, !showResourceModal && !disabled && !hasMedia && !withButton && uppy$1 !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement(Label__default["default"], null, findButtonLabel))) : null) : null, !showResourceModal && !disabled && !hasMedia && !withButton && finalUppy !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles.dashboard
   }, /*#__PURE__*/React__default["default"].createElement(react.Dashboard, Object.assign({
-    uppy: uppy$1
+    uppy: finalUppy
     // {...(containerWidth !== null && height !== null
     //     ? { width: containerWidth }
     // : null)}
@@ -391,18 +405,20 @@ var UploadField = function UploadField(_ref) {
     showProgressDetails: true,
     areInsidesReadyToBeVisible: true,
     proudlyDisplayPoweredByUppy: false
-  }))) : null, !showResourceModal && !disabled && withButton && uppy$1 !== null && modalOpened ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles.uppyDashboardContainer
-  }, /*#__PURE__*/React__default["default"].createElement(UploadModal__default["default"], {
-    title: addButtonLabel,
-    uppy: uppy$1,
+  }))) : null, !showResourceModal && !disabled && withButton && finalUppy !== null && modalOpened ? /*#__PURE__*/React__default["default"].createElement(react.DashboardModal, {
+    uppy: finalUppy,
+    className: styles.dashboardModal,
     plugins: sources,
-    inline: true,
-    width: "100%",
-    height: "300px",
+    open: true,
+    onRequestClose: closeModal,
+    proudlyDisplayPoweredByUppy: false,
+    closeModalOnClickOutside: true,
+    areInsidesReadyToBeVisible: true,
+    isDashboardVisible: true,
     showProgressDetails: true,
-    proudlyDisplayPoweredByUppy: false
-  })) : null, showResourceModal ? /*#__PURE__*/React__default["default"].createElement(Dialog__default["default"], {
+    showAddFilesPanel: true,
+    doneButtonHandler: closeModal
+  }) : null, showResourceModal ? /*#__PURE__*/React__default["default"].createElement(Dialog__default["default"], {
     title: /*#__PURE__*/React__default["default"].createElement(Label__default["default"], null, findButtonLabel),
     size: "xl",
     onClose: closeResourceModal

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/field-upload",
-    "version": "3.0.109",
+    "version": "3.0.111",
     "description": "An Upload field",
     "keywords": [
         "javascript"
@@ -61,7 +61,7 @@
         "@panneau/element-button": "^3.0.101",
         "@panneau/element-label": "^3.0.101",
         "@panneau/element-media-card": "^3.0.101",
-        "@panneau/list-resource-items": "^3.0.103",
+        "@panneau/list-resource-items": "^3.0.111",
         "@panneau/modal-dialog": "^3.0.101",
         "@panneau/modal-upload": "^3.0.108",
         "@panneau/themes": "^3.0.101",
@@ -82,5 +82,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "468cc694613d756b87ca9f4b38b7665d14838082"
+    "gitHead": "04002e435414ea40cf9e3340ee1d875eb30f2aa2"
 }