@panneau/field-upload 2.0.38 → 2.0.40

package/assets/css/styles.css

@@ -1 +1 @@
-.panneau-field-upload-container body .panneau-field-upload-uppy-Dashboard-innerWrap{opacity:1}
+.panneau-field-upload-container{width:100%}

package/es/index.js

@@ -14,13 +14,14 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { PropTypes as PropTypes$1 } from '@panneau/core';
 import { useUppy } from '@panneau/core/contexts';
+import { useResizeObserver } from '@panneau/core/hooks';
 import Button from '@panneau/element-button';
 import Label from '@panneau/element-label';
 import '@uppy/core/dist/style.min.css';
 import '@uppy/dashboard/dist/style.min.css';
 import '@uppy/drag-drop/dist/style.min.css';
 
-var styles = {"container":"panneau-field-upload-container","uppy-Dashboard-innerWrap":"panneau-field-upload-uppy-Dashboard-innerWrap"};
+var styles = {"container":"panneau-field-upload-container"};
 
 var propTypes = {
   value: PropTypes.oneOfType([PropTypes.array, PropTypes.shape({
@@ -76,6 +77,15 @@ var UploadField = function UploadField(_ref) {
     disabled = _ref.disabled,
     onChange = _ref.onChange,
     className = _ref.className;
+  var _useResizeObserver = useResizeObserver(),
+    containerRef = _useResizeObserver.ref,
+    _useResizeObserver$en = _useResizeObserver.entry,
+    entry = _useResizeObserver$en === void 0 ? null : _useResizeObserver$en;
+  var _ref2 = entry || {},
+    contentRect = _ref2.contentRect;
+  var _ref3 = contentRect || {},
+    _ref3$width = _ref3.width,
+    containerWidth = _ref3$width === void 0 ? null : _ref3$width;
   var onComplete = useCallback(function (response) {
     console.log('upload complete', response); // eslint-disable-line
     var newValue = null;
@@ -143,8 +153,12 @@ var UploadField = function UploadField(_ref) {
     return value !== null ? [value] : null;
   }, [value]);
   var hasMedia = values !== null && values.length > 0;
+
+  // console.log(containerWidth);
+
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
+    ref: containerRef
   }, values !== null ? values.map(function (media, idx) {
     var _media$id = media.id,
       id = _media$id === void 0 ? null : _media$id,
@@ -159,9 +173,9 @@ var UploadField = function UploadField(_ref) {
       _media$data = media.data,
       data = _media$data === void 0 ? {} : _media$data,
       type = media.type;
-    var _ref3 = data || {},
-      _ref3$file = _ref3.file,
-      file = _ref3$file === void 0 ? null : _ref3$file;
+    var _ref5 = data || {},
+      _ref5$file = _ref5.file,
+      file = _ref5$file === void 0 ? null : _ref5$file;
     var faIcon = null;
     switch (type) {
       case 'audio':
@@ -236,11 +250,17 @@ var UploadField = function UploadField(_ref) {
     theme: "primary",
     onClick: openModal,
     disabled: disabled
-  }, /*#__PURE__*/React.createElement(Label, null, addButtonLabel)) : null, !disabled && !hasMedia && !withButton && uppy !== null ? /*#__PURE__*/React.createElement(Dashboard, {
-    uppy: uppy,
+  }, /*#__PURE__*/React.createElement(Label, null, addButtonLabel)) : null, !disabled && !hasMedia && !withButton && uppy !== null ? /*#__PURE__*/React.createElement(Dashboard, Object.assign({
+    uppy: uppy
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, containerWidth !== null ? {
+    width: containerWidth
+  } : null, {
     height: 300,
-    plugins: sources
-  }) : null, !disabled && withButton && uppy !== null ? /*#__PURE__*/React.createElement(DashboardModal, {
+    plugins: sources,
+    inline: true,
+    areInsidesReadyToBeVisible: true
+  })) : null, !disabled && withButton && uppy !== null ? /*#__PURE__*/React.createElement(DashboardModal, {
     uppy: uppy,
     plugins: sources,
     open: modalOpened,

package/lib/index.js

@@ -18,6 +18,7 @@ var React = require('react');
 var reactIntl = require('react-intl');
 var core = require('@panneau/core');
 var contexts = require('@panneau/core/contexts');
+var hooks = require('@panneau/core/hooks');
 var Button = require('@panneau/element-button');
 var Label = require('@panneau/element-label');
 require('@uppy/core/dist/style.min.css');
@@ -39,7 +40,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var Label__default = /*#__PURE__*/_interopDefaultLegacy(Label);
 
-var styles = {"container":"panneau-field-upload-container","uppy-Dashboard-innerWrap":"panneau-field-upload-uppy-Dashboard-innerWrap"};
+var styles = {"container":"panneau-field-upload-container"};
 
 var propTypes = {
   value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].array, PropTypes__default["default"].shape({
@@ -95,6 +96,15 @@ var UploadField = function UploadField(_ref) {
     disabled = _ref.disabled,
     onChange = _ref.onChange,
     className = _ref.className;
+  var _useResizeObserver = hooks.useResizeObserver(),
+    containerRef = _useResizeObserver.ref,
+    _useResizeObserver$en = _useResizeObserver.entry,
+    entry = _useResizeObserver$en === void 0 ? null : _useResizeObserver$en;
+  var _ref2 = entry || {},
+    contentRect = _ref2.contentRect;
+  var _ref3 = contentRect || {},
+    _ref3$width = _ref3.width,
+    containerWidth = _ref3$width === void 0 ? null : _ref3$width;
   var onComplete = React.useCallback(function (response) {
     console.log('upload complete', response); // eslint-disable-line
     var newValue = null;
@@ -162,8 +172,12 @@ var UploadField = function UploadField(_ref) {
     return value !== null ? [value] : null;
   }, [value]);
   var hasMedia = values !== null && values.length > 0;
+
+  // console.log(containerWidth);
+
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)])
+    className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)]),
+    ref: containerRef
   }, values !== null ? values.map(function (media, idx) {
     var _media$id = media.id,
       id = _media$id === void 0 ? null : _media$id,
@@ -178,9 +192,9 @@ var UploadField = function UploadField(_ref) {
       _media$data = media.data,
       data = _media$data === void 0 ? {} : _media$data,
       type = media.type;
-    var _ref3 = data || {},
-      _ref3$file = _ref3.file,
-      file = _ref3$file === void 0 ? null : _ref3$file;
+    var _ref5 = data || {},
+      _ref5$file = _ref5.file,
+      file = _ref5$file === void 0 ? null : _ref5$file;
     var faIcon = null;
     switch (type) {
       case 'audio':
@@ -255,11 +269,17 @@ var UploadField = function UploadField(_ref) {
     theme: "primary",
     onClick: openModal,
     disabled: disabled
-  }, /*#__PURE__*/React__default["default"].createElement(Label__default["default"], null, addButtonLabel)) : null, !disabled && !hasMedia && !withButton && uppy !== null ? /*#__PURE__*/React__default["default"].createElement(react.Dashboard, {
-    uppy: uppy,
+  }, /*#__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({
+    uppy: uppy
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, containerWidth !== null ? {
+    width: containerWidth
+  } : null, {
     height: 300,
-    plugins: sources
-  }) : null, !disabled && withButton && uppy !== null ? /*#__PURE__*/React__default["default"].createElement(react.DashboardModal, {
+    plugins: sources,
+    inline: true,
+    areInsidesReadyToBeVisible: true
+  })) : null, !disabled && withButton && uppy !== null ? /*#__PURE__*/React__default["default"].createElement(react.DashboardModal, {
     uppy: uppy,
     plugins: sources,
     open: modalOpened,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/field-upload",
-    "version": "2.0.38",
+    "version": "2.0.40",
     "description": "An Upload field",
     "keywords": [
         "javascript"
@@ -56,11 +56,11 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.35",
         "@fortawesome/free-solid-svg-icons": "^5.15.3",
         "@fortawesome/react-fontawesome": "^0.1.14",
-        "@panneau/core": "^2.0.38",
-        "@panneau/element-button": "^2.0.38",
-        "@panneau/element-card": "^2.0.38",
-        "@panneau/element-label": "^2.0.38",
-        "@panneau/themes": "^2.0.38",
+        "@panneau/core": "^2.0.40",
+        "@panneau/element-button": "^2.0.40",
+        "@panneau/element-card": "^2.0.40",
+        "@panneau/element-label": "^2.0.40",
+        "@panneau/themes": "^2.0.40",
         "@uppy/core": "^3.2.0",
         "@uppy/dashboard": "^3.4.0",
         "@uppy/drag-drop": "^3.0.2",
@@ -78,5 +78,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "f5865043afc889f66e92f42cd2695003627ee84d"
+    "gitHead": "31e1de74a8d8d2c2551bba1917c2e607c3d680da"
 }