@panneau/field-upload 3.0.106 → 3.0.108

package/assets/css/styles.css

@@ -1 +1 @@
-.panneau-field-upload-container{width:100%}.panneau-field-upload-container .panneau-field-upload-dashboard{position:relative}
+.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}

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, DashboardModal } from '@uppy/react';
+import { Dashboard } 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 } from 'react';
+import React, { useCallback, useMemo, useState, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { PropTypes as PropTypes$1 } from '@panneau/core';
 import { useResourceQuery } from '@panneau/core/hooks';
@@ -16,13 +16,14 @@ 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';
+import '@uppy/core/dist/style.min.css';
+import '@uppy/dashboard/dist/style.min.css';
+import '@uppy/drag-drop/dist/style.min.css';
+import '@uppy/status-bar/dist/style.min.css';
 
-var styles = {"container":"panneau-field-upload-container","dashboard":"panneau-field-upload-dashboard"};
+var styles = {"container":"panneau-field-upload-container","dashboard":"panneau-field-upload-dashboard","uppyDashboardContainer":"panneau-field-upload-uppyDashboardContainer"};
 
 var propTypes = {
   value: PropTypes.oneOfType([PropTypes.array, PropTypes.shape({
@@ -209,9 +210,9 @@ var UploadField = function UploadField(_ref) {
     modalOpened = _useState2[0],
     setModalOpened = _useState2[1];
   var openModal = useCallback(function () {
-    setModalOpened(true);
-  }, [setModalOpened]);
-  var closeModal = useCallback(function () {
+    setModalOpened(!modalOpened);
+  }, [modalOpened, setModalOpened]);
+  useCallback(function () {
     setModalOpened(false);
     if (uppy !== null) {
       uppy.cancelAll({
@@ -311,9 +312,12 @@ 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);
+  var containerRef = useRef(null);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty({}, className, className !== null)])
-    // ref={containerRef}
+    className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
+    ref: containerRef
   }, hasMedia ? /*#__PURE__*/React.createElement(MediaCards, {
     value: values,
     namePath: namePath,
@@ -335,6 +339,7 @@ var UploadField = function UploadField(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "col-auto"
   }, /*#__PURE__*/React.createElement(Button, {
+    id: "trigger-uppy",
     type: "button",
     theme: "primary",
     onClick: openModal,
@@ -365,40 +370,18 @@ var UploadField = function UploadField(_ref) {
     showProgressDetails: true,
     areInsidesReadyToBeVisible: true,
     proudlyDisplayPoweredByUppy: false
-  }))) : null, !showResourceModal && !disabled && withButton && uppy !== null && modalOpened ? /*#__PURE__*/React.createElement(DashboardModal, {
+  }))) : null, !showResourceModal && !disabled && withButton && uppy !== null && modalOpened ? /*#__PURE__*/React.createElement("div", {
+    className: styles.uppyDashboardContainer
+  }, /*#__PURE__*/React.createElement(UploadModal, {
+    title: addButtonLabel,
     uppy: uppy,
-    className: styles.dashboardModal,
     plugins: sources,
-    open: true,
-    onRequestClose: closeModal,
-    proudlyDisplayPoweredByUppy: false,
-    closeModalOnClickOutside: true
-    // areInsidesReadyToBeVisible
-    // isDashboardVisible
-    ,
+    inline: true,
+    width: "100%",
+    height: "300px",
     showProgressDetails: true,
-    showAddFilesPanel: true
-  }) :
-  // ) : //
-  // <Dialog size="lg" onClose={closeModal} title={addButtonLabel}>
-  //     <Dashboard
-  //         uppy={uppy}
-  //         // {...(containerWidth !== null && height !== null
-  //         //     ? { width: containerWidth }
-  //         // : null)}
-  //         {...(width !== null ? { width } : null)}
-  //         {...(height !== null ? { height } : null)}
-  //         plugins={sources}
-  //         inline
-  //         showProgressDetails
-  //         // areInsidesReadyToBeVisible
-  //         // isDashboardVisible
-  //         showAddFilesPanel
-  //         proudlyDisplayPoweredByUppy={false}
-  //         doneButtonHandler={closeModalAndClear}
-  //     />
-  // </Dialog>
-  null, showResourceModal ? /*#__PURE__*/React.createElement(Dialog, {
+    proudlyDisplayPoweredByUppy: false
+  })) : null, showResourceModal ? /*#__PURE__*/React.createElement(Dialog, {
     title: /*#__PURE__*/React.createElement(Label, null, findButtonLabel),
     size: "xl",
     onClose: closeResourceModal

package/lib/index.js

@@ -20,11 +20,12 @@ 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');
-require('@uppy/drag-drop/dist/style.css');
-require('@uppy/status-bar/dist/style.css');
+require('@uppy/core/dist/style.min.css');
+require('@uppy/dashboard/dist/style.min.css');
+require('@uppy/drag-drop/dist/style.min.css');
+require('@uppy/status-bar/dist/style.min.css');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -41,8 +42,9 @@ 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"};
+var styles = {"container":"panneau-field-upload-container","dashboard":"panneau-field-upload-dashboard","uppyDashboardContainer":"panneau-field-upload-uppyDashboardContainer"};
 
 var propTypes = {
   value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].array, PropTypes__default["default"].shape({
@@ -229,9 +231,9 @@ var UploadField = function UploadField(_ref) {
     modalOpened = _useState2[0],
     setModalOpened = _useState2[1];
   var openModal = React.useCallback(function () {
-    setModalOpened(true);
-  }, [setModalOpened]);
-  var closeModal = React.useCallback(function () {
+    setModalOpened(!modalOpened);
+  }, [modalOpened, setModalOpened]);
+  React.useCallback(function () {
     setModalOpened(false);
     if (uppy$1 !== null) {
       uppy$1.cancelAll({
@@ -331,9 +333,12 @@ 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);
+  var containerRef = React.useRef(null);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)])
-    // ref={containerRef}
+    className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)]),
+    ref: containerRef
   }, hasMedia ? /*#__PURE__*/React__default["default"].createElement(elementMediaCard.MediaCards, {
     value: values,
     namePath: namePath,
@@ -355,6 +360,7 @@ var UploadField = function UploadField(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "col-auto"
   }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
+    id: "trigger-uppy",
     type: "button",
     theme: "primary",
     onClick: openModal,
@@ -385,40 +391,18 @@ var UploadField = function UploadField(_ref) {
     showProgressDetails: true,
     areInsidesReadyToBeVisible: true,
     proudlyDisplayPoweredByUppy: false
-  }))) : null, !showResourceModal && !disabled && withButton && uppy$1 !== null && modalOpened ? /*#__PURE__*/React__default["default"].createElement(react.DashboardModal, {
+  }))) : 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,
-    className: styles.dashboardModal,
     plugins: sources,
-    open: true,
-    onRequestClose: closeModal,
-    proudlyDisplayPoweredByUppy: false,
-    closeModalOnClickOutside: true
-    // areInsidesReadyToBeVisible
-    // isDashboardVisible
-    ,
+    inline: true,
+    width: "100%",
+    height: "300px",
     showProgressDetails: true,
-    showAddFilesPanel: true
-  }) :
-  // ) : //
-  // <Dialog size="lg" onClose={closeModal} title={addButtonLabel}>
-  //     <Dashboard
-  //         uppy={uppy}
-  //         // {...(containerWidth !== null && height !== null
-  //         //     ? { width: containerWidth }
-  //         // : null)}
-  //         {...(width !== null ? { width } : null)}
-  //         {...(height !== null ? { height } : null)}
-  //         plugins={sources}
-  //         inline
-  //         showProgressDetails
-  //         // areInsidesReadyToBeVisible
-  //         // isDashboardVisible
-  //         showAddFilesPanel
-  //         proudlyDisplayPoweredByUppy={false}
-  //         doneButtonHandler={closeModalAndClear}
-  //     />
-  // </Dialog>
-  null, showResourceModal ? /*#__PURE__*/React__default["default"].createElement(Dialog__default["default"], {
+    proudlyDisplayPoweredByUppy: false
+  })) : 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.106",
+    "version": "3.0.108",
     "description": "An Upload field",
     "keywords": [
         "javascript"
@@ -63,6 +63,7 @@
         "@panneau/element-media-card": "^3.0.101",
         "@panneau/list-resource-items": "^3.0.103",
         "@panneau/modal-dialog": "^3.0.101",
+        "@panneau/modal-upload": "^3.0.108",
         "@panneau/themes": "^3.0.101",
         "@panneau/uppy": "^3.0.105",
         "@uppy/core": "^3.9.1",
@@ -81,5 +82,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "ffd1542a94896319b8315c7e83b04fc6b422fc5e"
+    "gitHead": "e0d3677666eee6729ca3c48d06ea8564e2078c86"
 }