@panneau/field-upload 3.0.107 → 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

@@ -7,7 +7,7 @@ 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,15 +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('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,
@@ -341,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,
@@ -371,29 +370,18 @@ var UploadField = function UploadField(_ref) {
     showProgressDetails: true,
     areInsidesReadyToBeVisible: true,
     proudlyDisplayPoweredByUppy: false
-  }))) : null, !showResourceModal && !disabled && withButton && uppy !== null && modalOpened ? /*#__PURE__*/React.createElement(Dialog, {
-    size: "lg",
-    onClose: closeModal,
-    title: addButtonLabel
-  }, /*#__PURE__*/React.createElement(Dashboard, Object.assign({
-    uppy: uppy
-    // {...(containerWidth !== null && height !== null
-    //     ? { width: containerWidth }
-    // : null)}
-  }, width !== null ? {
-    width: width
-  } : null, height !== null ? {
-    height: height
-  } : null, {
+  }))) : null, !showResourceModal && !disabled && withButton && uppy !== null && modalOpened ? /*#__PURE__*/React.createElement("div", {
+    className: styles.uppyDashboardContainer
+  }, /*#__PURE__*/React.createElement(UploadModal, {
+    title: addButtonLabel,
+    uppy: uppy,
     plugins: sources,
     inline: true,
+    width: "100%",
+    height: "300px",
     showProgressDetails: true,
-    areInsidesReadyToBeVisible: true,
-    isDashboardVisible: true,
-    showAddFilesPanel: true,
-    proudlyDisplayPoweredByUppy: false,
-    doneButtonHandler: closeModal
-  }))) : 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,15 +333,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('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,
@@ -361,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,
@@ -391,29 +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(Dialog__default["default"], {
-    size: "lg",
-    onClose: closeModal,
-    title: addButtonLabel
-  }, /*#__PURE__*/React__default["default"].createElement(react.Dashboard, Object.assign({
-    uppy: uppy$1
-    // {...(containerWidth !== null && height !== null
-    //     ? { width: containerWidth }
-    // : null)}
-  }, width !== null ? {
-    width: width
-  } : null, height !== null ? {
-    height: height
-  } : null, {
+  }))) : 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,
     plugins: sources,
     inline: true,
+    width: "100%",
+    height: "300px",
     showProgressDetails: true,
-    areInsidesReadyToBeVisible: true,
-    isDashboardVisible: true,
-    showAddFilesPanel: true,
-    proudlyDisplayPoweredByUppy: false,
-    doneButtonHandler: closeModal
-  }))) : 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.107",
+    "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": "84147f217be4806d5a6fb111cee39c0e6b0719cc"
+    "gitHead": "e0d3677666eee6729ca3c48d06ea8564e2078c86"
 }