@panneau/field-upload 3.0.175 → 3.0.176

package/es/index.js

@@ -10,6 +10,7 @@ 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 { useModal } from '@panneau/core/contexts';
 import Button from '@panneau/element-button';
 import Label from '@panneau/element-label';
 import MediaCard, { MediaCards } from '@panneau/element-media-card';
@@ -30,6 +31,7 @@ var propTypes$1 = {
     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'])),
@@ -61,6 +63,7 @@ var propTypes$1 = {
 var defaultProps$1 = {
   resource: 'medias',
   value: null,
+  name: null,
   types: ['audio', 'image', 'video'],
   fileTypes: null,
   sources: ['webcam', 'facebook', 'instagram', 'dropbox', 'google-drive'],
@@ -108,6 +111,7 @@ var defaultProps$1 = {
 var UploadField = function UploadField(_ref) {
   var resource = _ref.resource,
     value = _ref.value,
+    name = _ref.name,
     types = _ref.types,
     fileTypes = _ref.fileTypes,
     sources = _ref.sources,
@@ -232,27 +236,35 @@ var UploadField = function UploadField(_ref) {
     return value !== null ? [value] : null;
   }, [value]);
   var hasMedia = values !== null && values.length > 0;
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    resourceModalOpen = _useState4[0],
-    setResourceModalOpen = _useState4[1];
+
+  // Resource-modal-picker
+  var _useModal = useModal(),
+    register = _useModal.register,
+    unregister = _useModal.unregister,
+    modalIsOpen = _useModal.modalIsOpen;
+  var modalKey = "upload-field-".concat(name);
+  var resourceModalOpen = modalIsOpen(modalKey);
   var showResourceModal = withFind && resourceModalOpen;
   var toggleResourceModal = useCallback(function () {
-    setResourceModalOpen(!resourceModalOpen);
-  }, [resourceModalOpen, setResourceModalOpen]);
-  var _useState5 = useState([]),
-    _useState6 = _slicedToArray(_useState5, 2),
-    modalItems = _useState6[0],
-    setModalItems = _useState6[1];
+    if (resourceModalOpen) {
+      unregister(modalKey);
+    } else {
+      register(modalKey);
+    }
+  }, [resourceModalOpen, register, unregister, modalKey]);
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    modalItems = _useState4[0],
+    setModalItems = _useState4[1];
   var closeResourceModal = useCallback(function () {
-    setResourceModalOpen(false);
+    unregister(modalKey);
     setModalItems(null);
-  }, [resourceModalOpen, setResourceModalOpen, setModalItems]);
+  }, [resourceModalOpen, unregister, modalKey, setModalItems]);
   var openModalInResource = useCallback(function () {
-    setResourceModalOpen(false);
+    unregister(modalKey);
     setModalItems(null);
     setModalOpened(true);
-  }, [modalOpened, setModalOpened]);
+  }, [modalOpened, unregister, modalKey, setModalOpened]);
   var onChangeSelection = useCallback(function (newValue) {
     if (allowMultipleUploads) {
       if (newValue !== null && !isArray(newValue)) {
@@ -287,22 +299,22 @@ var UploadField = function UploadField(_ref) {
         _ref6$ = _ref6[0],
         finalValue = _ref6$ === void 0 ? null : _ref6$;
       onChange(finalValue);
-      setResourceModalOpen(false);
+      unregister(modalKey);
     }
-  }, [onChange, setResourceModalOpen, allowMultipleUploads, modalItems, setModalItems]);
+  }, [onChange, unregister, modalKey, allowMultipleUploads, modalItems, setModalItems]);
   var onConfirmSelection = useCallback(function () {
     if (onChange !== null) {
       onChange(modalItems);
-      setResourceModalOpen(false);
+      unregister(modalKey);
     }
-  }, [onChange, modalItems, setResourceModalOpen, allowMultipleUploads]);
+  }, [onChange, modalItems, unregister, modalKey, allowMultipleUploads]);
   var containerRef = useRef(null);
 
   // Keep this stable, uppy doesnt like
-  var _useState7 = useState(null),
-    _useState8 = _slicedToArray(_useState7, 2),
-    finalUppy = _useState8[0],
-    setFinalUppy = _useState8[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    finalUppy = _useState6[0],
+    setFinalUppy = _useState6[1];
   useEffect(function () {
     if (uppy !== null && finalUppy === null) {
       setFinalUppy(uppy);
@@ -378,6 +390,7 @@ var UploadField = function UploadField(_ref) {
     showAddFilesPanel: true,
     doneButtonHandler: closeModal
   }) : null, showResourceModal ? /*#__PURE__*/React.createElement(ModalPicker, {
+    id: modalKey,
     value: value,
     resource: resource,
     types: types,

package/lib/index.js

@@ -14,6 +14,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var reactIntl = require('react-intl');
 var core = require('@panneau/core');
+var contexts = require('@panneau/core/contexts');
 var Button = require('@panneau/element-button');
 var Label = require('@panneau/element-label');
 var MediaCard = require('@panneau/element-media-card');
@@ -34,6 +35,7 @@ var propTypes$1 = {
     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'])),
@@ -65,6 +67,7 @@ var propTypes$1 = {
 var defaultProps$1 = {
   resource: 'medias',
   value: null,
+  name: null,
   types: ['audio', 'image', 'video'],
   fileTypes: null,
   sources: ['webcam', 'facebook', 'instagram', 'dropbox', 'google-drive'],
@@ -112,6 +115,7 @@ var defaultProps$1 = {
 var UploadField = function UploadField(_ref) {
   var resource = _ref.resource,
     value = _ref.value,
+    name = _ref.name,
     types = _ref.types,
     fileTypes = _ref.fileTypes,
     sources = _ref.sources,
@@ -236,27 +240,35 @@ var UploadField = function UploadField(_ref) {
     return value !== null ? [value] : null;
   }, [value]);
   var hasMedia = values !== null && values.length > 0;
-  var _useState3 = React.useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    resourceModalOpen = _useState4[0],
-    setResourceModalOpen = _useState4[1];
+
+  // Resource-modal-picker
+  var _useModal = contexts.useModal(),
+    register = _useModal.register,
+    unregister = _useModal.unregister,
+    modalIsOpen = _useModal.modalIsOpen;
+  var modalKey = "upload-field-".concat(name);
+  var resourceModalOpen = modalIsOpen(modalKey);
   var showResourceModal = withFind && resourceModalOpen;
   var toggleResourceModal = React.useCallback(function () {
-    setResourceModalOpen(!resourceModalOpen);
-  }, [resourceModalOpen, setResourceModalOpen]);
-  var _useState5 = React.useState([]),
-    _useState6 = _slicedToArray(_useState5, 2),
-    modalItems = _useState6[0],
-    setModalItems = _useState6[1];
+    if (resourceModalOpen) {
+      unregister(modalKey);
+    } else {
+      register(modalKey);
+    }
+  }, [resourceModalOpen, register, unregister, modalKey]);
+  var _useState3 = React.useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    modalItems = _useState4[0],
+    setModalItems = _useState4[1];
   var closeResourceModal = React.useCallback(function () {
-    setResourceModalOpen(false);
+    unregister(modalKey);
     setModalItems(null);
-  }, [resourceModalOpen, setResourceModalOpen, setModalItems]);
+  }, [resourceModalOpen, unregister, modalKey, setModalItems]);
   var openModalInResource = React.useCallback(function () {
-    setResourceModalOpen(false);
+    unregister(modalKey);
     setModalItems(null);
     setModalOpened(true);
-  }, [modalOpened, setModalOpened]);
+  }, [modalOpened, unregister, modalKey, setModalOpened]);
   var onChangeSelection = React.useCallback(function (newValue) {
     if (allowMultipleUploads) {
       if (newValue !== null && !isArray(newValue)) {
@@ -291,22 +303,22 @@ var UploadField = function UploadField(_ref) {
         _ref6$ = _ref6[0],
         finalValue = _ref6$ === void 0 ? null : _ref6$;
       onChange(finalValue);
-      setResourceModalOpen(false);
+      unregister(modalKey);
     }
-  }, [onChange, setResourceModalOpen, allowMultipleUploads, modalItems, setModalItems]);
+  }, [onChange, unregister, modalKey, allowMultipleUploads, modalItems, setModalItems]);
   var onConfirmSelection = React.useCallback(function () {
     if (onChange !== null) {
       onChange(modalItems);
-      setResourceModalOpen(false);
+      unregister(modalKey);
     }
-  }, [onChange, modalItems, setResourceModalOpen, allowMultipleUploads]);
+  }, [onChange, modalItems, unregister, modalKey, allowMultipleUploads]);
   var containerRef = React.useRef(null);
 
   // Keep this stable, uppy doesnt like
-  var _useState7 = React.useState(null),
-    _useState8 = _slicedToArray(_useState7, 2),
-    finalUppy = _useState8[0],
-    setFinalUppy = _useState8[1];
+  var _useState5 = React.useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    finalUppy = _useState6[0],
+    setFinalUppy = _useState6[1];
   React.useEffect(function () {
     if (uppy$1 !== null && finalUppy === null) {
       setFinalUppy(uppy$1);
@@ -382,6 +394,7 @@ var UploadField = function UploadField(_ref) {
     showAddFilesPanel: true,
     doneButtonHandler: closeModal
   }) : null, showResourceModal ? /*#__PURE__*/React.createElement(ModalPicker, {
+    id: modalKey,
     value: value,
     resource: resource,
     types: types,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/field-upload",
-    "version": "3.0.175",
+    "version": "3.0.176",
     "description": "An Upload field",
     "keywords": [
         "javascript"
@@ -57,16 +57,16 @@
         "@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.175",
-        "@panneau/element-button": "^3.0.175",
-        "@panneau/element-label": "^3.0.175",
-        "@panneau/element-media-card": "^3.0.175",
-        "@panneau/list-resource-items": "^3.0.175",
-        "@panneau/modal-dialog": "^3.0.175",
-        "@panneau/modal-medias-picker": "^3.0.175",
-        "@panneau/modal-upload": "^3.0.175",
-        "@panneau/themes": "^3.0.175",
-        "@panneau/uppy": "^3.0.175",
+        "@panneau/core": "^3.0.176",
+        "@panneau/element-button": "^3.0.176",
+        "@panneau/element-label": "^3.0.176",
+        "@panneau/element-media-card": "^3.0.176",
+        "@panneau/list-resource-items": "^3.0.176",
+        "@panneau/modal-dialog": "^3.0.176",
+        "@panneau/modal-medias-picker": "^3.0.176",
+        "@panneau/modal-upload": "^3.0.176",
+        "@panneau/themes": "^3.0.176",
+        "@panneau/uppy": "^3.0.176",
         "@uppy/core": "^3.9.1",
         "@uppy/dashboard": "^3.7.3",
         "@uppy/drag-drop": "^3.0.3",
@@ -83,5 +83,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "cb8320f1041e7ced6bcf77dd6d32661950215a92"
+    "gitHead": "ddd1878318abbb8da545c1883a50bf49c89ae9c5"
 }