@panneau/field-upload 3.0.77 → 3.0.80

package/es/index.js

@@ -4,7 +4,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { faTimes, faFileVideo, faFileImage, faFileAudio } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Dashboard } from '@uppy/react';
+import { Dashboard, DashboardModal } from '@uppy/react';
 import classNames from 'classnames';
 import get from 'lodash/get';
 import isArray from 'lodash/isArray';
@@ -39,7 +39,7 @@ var propTypes = {
   withButton: PropTypes.bool,
   withFind: PropTypes.bool,
   addButtonLabel: PropTypes$1.label,
-  searchButtonLabel: PropTypes$1.label,
+  findButtonLabel: PropTypes$1.label,
   confirmButtonLabel: PropTypes$1.label,
   allowMultipleUploads: PropTypes.bool,
   maxNumberOfFiles: PropTypes.number,
@@ -69,7 +69,7 @@ var defaultProps = {
       "value": "Add file"
     }]
   }),
-  searchButtonLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+  findButtonLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "une5WQ",
     defaultMessage: [{
       "type": 0,
@@ -103,7 +103,7 @@ var UploadField = function UploadField(_ref) {
     withButton = _ref.withButton,
     withFind = _ref.withFind,
     addButtonLabel = _ref.addButtonLabel,
-    searchButtonLabel = _ref.searchButtonLabel,
+    findButtonLabel = _ref.findButtonLabel,
     confirmButtonLabel = _ref.confirmButtonLabel,
     allowMultipleUploads = _ref.allowMultipleUploads,
     maxNumberOfFiles = _ref.maxNumberOfFiles,
@@ -183,7 +183,7 @@ var UploadField = function UploadField(_ref) {
   var closeModal = useCallback(function () {
     setModalOpened(false);
   }, [setModalOpened]);
-  var closeModalAndClear = useCallback(function () {
+  useCallback(function () {
     closeModal();
     if (uppy !== null) {
       uppy.cancelAll();
@@ -213,13 +213,14 @@ var UploadField = function UploadField(_ref) {
   var toggleResourceModal = useCallback(function () {
     setResourceModalOpen(!resourceModalOpen);
   }, [resourceModalOpen, setResourceModalOpen]);
-  var closeResourceModal = useCallback(function () {
-    setResourceModalOpen(false);
-  }, [resourceModalOpen, setResourceModalOpen]);
   var _useState5 = useState([]),
     _useState6 = _slicedToArray(_useState5, 2),
     modalItems = _useState6[0],
     setModalItems = _useState6[1];
+  var closeResourceModal = useCallback(function () {
+    setResourceModalOpen(false);
+    setModalItems(null);
+  }, [resourceModalOpen, setResourceModalOpen, setModalItems]);
   var onClickSelect = useCallback(function (newValue) {
     if (allowMultipleUploads) {
       if (newValue !== null) {
@@ -227,19 +228,22 @@ var UploadField = function UploadField(_ref) {
           _ref2$id = _ref2.id,
           id = _ref2$id === void 0 ? null : _ref2$id;
         if (id !== null) {
-          var previous = (modalItems || []).find(function (_ref3) {
-            var _ref3$id = _ref3.id,
+          console.log('add', newValue);
+          var previous = (modalItems || []).find(function () {
+            var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+              _ref3$id = _ref3.id,
               itemId = _ref3$id === void 0 ? null : _ref3$id;
             return id === itemId;
           });
           if (previous) {
-            setModalItems((modalItems || []).filter(function (_ref4) {
-              var _ref4$id = _ref4.id,
+            setModalItems((modalItems || []).filter(function () {
+              var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+                _ref4$id = _ref4.id,
                 itemId = _ref4$id === void 0 ? null : _ref4$id;
               return id !== itemId;
             }));
           } else {
-            setModalItems([].concat(_toConsumableArray(modalItems), [newValue]));
+            setModalItems([].concat(_toConsumableArray(modalItems || []), [newValue]));
           }
         }
       }
@@ -249,11 +253,13 @@ var UploadField = function UploadField(_ref) {
     }
   }, [onChange, setResourceModalOpen, allowMultipleUploads, modalItems, setModalItems]);
   var confirmResourceModal = useCallback(function () {
+    console.log('confirm', modalItems, onChange);
     if (onChange !== null) {
       onChange(modalItems);
       setResourceModalOpen(false);
+      setModalItems(null);
     }
-  }, [onChange, setResourceModalOpen, allowMultipleUploads]);
+  }, [onChange, setResourceModalOpen, modalItems, allowMultipleUploads, setModalItems]);
   var initialQuery = useMemo(function () {
     return {
       types: types
@@ -371,7 +377,7 @@ var UploadField = function UploadField(_ref) {
     onClick: toggleResourceModal,
     disabled: disabled,
     outline: true
-  }, /*#__PURE__*/React.createElement(Label, null, searchButtonLabel))) : null) : null, !showResourceModal && !disabled && !hasMedia && !withButton && uppy !== null ? /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Label, null, findButtonLabel))) : null) : null, !showResourceModal && !disabled && !hasMedia && !withButton && uppy !== null ? /*#__PURE__*/React.createElement("div", {
     className: styles.dashboard
   }, /*#__PURE__*/React.createElement(Dashboard, Object.assign({
     uppy: uppy
@@ -388,50 +394,46 @@ var UploadField = function UploadField(_ref) {
     showProgressDetails: true,
     areInsidesReadyToBeVisible: true,
     proudlyDisplayPoweredByUppy: false
-  }))) : null, !showResourceModal && !disabled && withButton && uppy !== null && modalOpened ?
-  /*#__PURE__*/
-  // <DashboardModal
-  //     uppy={uppy}
-  //     className={styles.dashboardModal}
-  //     plugins={sources}
-  //     open={modalOpened}
-  //     isHidden={!modalOpened}
-  //     {...(width !== null ? { width } : null)}
-  //     {...(height !== null ? { height } : null)}
-  //     onRequestClose={closeModal}
-  //     proudlyDisplayPoweredByUppy={false}
-  //     closeModalOnClickOutside
-  //     areInsidesReadyToBeVisible
-  //     isDashboardVisible
-  //     showProgressDetailss
-  //     showAddFilesPanel
-  // />
-  // ) : //
-  React.createElement(Dialog, {
-    size: "lg",
-    onClose: closeModal,
-    title: addButtonLabel
-  }, /*#__PURE__*/React.createElement(Dashboard, Object.assign({
-    uppy: uppy
-    // {...(containerWidth !== null && height !== null
-    //     ? { width: containerWidth }
-    // : null)}
+  }))) : null, !showResourceModal && !disabled && withButton && uppy !== null && modalOpened ? /*#__PURE__*/React.createElement(DashboardModal, Object.assign({
+    uppy: uppy,
+    className: styles.dashboardModal,
+    plugins: sources,
+    open: modalOpened,
+    isHidden: !modalOpened
   }, width !== null ? {
     width: width
   } : null, height !== null ? {
     height: height
   } : null, {
-    plugins: sources,
-    inline: true,
-    showProgressDetails: true
-    // areInsidesReadyToBeVisible
-    // isDashboardVisible
-    ,
-    showAddFilesPanel: true,
+    onRequestClose: closeModal,
     proudlyDisplayPoweredByUppy: false,
-    doneButtonHandler: closeModalAndClear
-  }))) : null, showResourceModal ? /*#__PURE__*/React.createElement(Dialog, {
-    title: /*#__PURE__*/React.createElement(Label, null, searchButtonLabel),
+    closeModalOnClickOutside: true,
+    areInsidesReadyToBeVisible: true,
+    isDashboardVisible: true,
+    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, {
+    title: /*#__PURE__*/React.createElement(Label, null, findButtonLabel),
     size: "lg",
     onClose: closeResourceModal
   }, /*#__PURE__*/React.createElement(ResourceItemsList, {
@@ -448,13 +450,29 @@ var UploadField = function UploadField(_ref) {
       },
       withoutActionsColumn: true
     }
-  }), allowMultipleUploads ? /*#__PURE__*/React.createElement(Button, {
+  }), allowMultipleUploads ? /*#__PURE__*/React.createElement("div", {
+    className: "d-flex"
+  }, modalItems !== null && modalItems.length > 0 ? /*#__PURE__*/React.createElement("span", {
+    className: "me-2"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "ZHvvZx",
+    defaultMessage: [{
+      "type": 1,
+      "value": "count"
+    }, {
+      "type": 0,
+      "value": " items selected"
+    }],
+    value: {
+      count: modalItems.length
+    }
+  })) : null, /*#__PURE__*/React.createElement(Button, {
     type: "button",
     theme: "primary",
     onClick: confirmResourceModal,
     disabled: disabled,
     className: "d-block ms-auto mt-2"
-  }, /*#__PURE__*/React.createElement(Label, null, confirmButtonLabel)) : null) : null);
+  }, /*#__PURE__*/React.createElement(Label, null, confirmButtonLabel))) : null) : null);
 };
 UploadField.propTypes = propTypes;
 UploadField.defaultProps = defaultProps;

package/lib/index.js

@@ -61,7 +61,7 @@ var propTypes = {
   withButton: PropTypes__default["default"].bool,
   withFind: PropTypes__default["default"].bool,
   addButtonLabel: core.PropTypes.label,
-  searchButtonLabel: core.PropTypes.label,
+  findButtonLabel: core.PropTypes.label,
   confirmButtonLabel: core.PropTypes.label,
   allowMultipleUploads: PropTypes__default["default"].bool,
   maxNumberOfFiles: PropTypes__default["default"].number,
@@ -91,7 +91,7 @@ var defaultProps = {
       "value": "Add file"
     }]
   }),
-  searchButtonLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+  findButtonLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
     id: "une5WQ",
     defaultMessage: [{
       "type": 0,
@@ -125,7 +125,7 @@ var UploadField = function UploadField(_ref) {
     withButton = _ref.withButton,
     withFind = _ref.withFind,
     addButtonLabel = _ref.addButtonLabel,
-    searchButtonLabel = _ref.searchButtonLabel,
+    findButtonLabel = _ref.findButtonLabel,
     confirmButtonLabel = _ref.confirmButtonLabel,
     allowMultipleUploads = _ref.allowMultipleUploads,
     maxNumberOfFiles = _ref.maxNumberOfFiles,
@@ -205,7 +205,7 @@ var UploadField = function UploadField(_ref) {
   var closeModal = React.useCallback(function () {
     setModalOpened(false);
   }, [setModalOpened]);
-  var closeModalAndClear = React.useCallback(function () {
+  React.useCallback(function () {
     closeModal();
     if (uppy$1 !== null) {
       uppy$1.cancelAll();
@@ -235,13 +235,14 @@ var UploadField = function UploadField(_ref) {
   var toggleResourceModal = React.useCallback(function () {
     setResourceModalOpen(!resourceModalOpen);
   }, [resourceModalOpen, setResourceModalOpen]);
-  var closeResourceModal = React.useCallback(function () {
-    setResourceModalOpen(false);
-  }, [resourceModalOpen, setResourceModalOpen]);
   var _useState5 = React.useState([]),
     _useState6 = _slicedToArray__default["default"](_useState5, 2),
     modalItems = _useState6[0],
     setModalItems = _useState6[1];
+  var closeResourceModal = React.useCallback(function () {
+    setResourceModalOpen(false);
+    setModalItems(null);
+  }, [resourceModalOpen, setResourceModalOpen, setModalItems]);
   var onClickSelect = React.useCallback(function (newValue) {
     if (allowMultipleUploads) {
       if (newValue !== null) {
@@ -249,19 +250,22 @@ var UploadField = function UploadField(_ref) {
           _ref2$id = _ref2.id,
           id = _ref2$id === void 0 ? null : _ref2$id;
         if (id !== null) {
-          var previous = (modalItems || []).find(function (_ref3) {
-            var _ref3$id = _ref3.id,
+          console.log('add', newValue);
+          var previous = (modalItems || []).find(function () {
+            var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+              _ref3$id = _ref3.id,
               itemId = _ref3$id === void 0 ? null : _ref3$id;
             return id === itemId;
           });
           if (previous) {
-            setModalItems((modalItems || []).filter(function (_ref4) {
-              var _ref4$id = _ref4.id,
+            setModalItems((modalItems || []).filter(function () {
+              var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+                _ref4$id = _ref4.id,
                 itemId = _ref4$id === void 0 ? null : _ref4$id;
               return id !== itemId;
             }));
           } else {
-            setModalItems([].concat(_toConsumableArray__default["default"](modalItems), [newValue]));
+            setModalItems([].concat(_toConsumableArray__default["default"](modalItems || []), [newValue]));
           }
         }
       }
@@ -271,11 +275,13 @@ var UploadField = function UploadField(_ref) {
     }
   }, [onChange, setResourceModalOpen, allowMultipleUploads, modalItems, setModalItems]);
   var confirmResourceModal = React.useCallback(function () {
+    console.log('confirm', modalItems, onChange);
     if (onChange !== null) {
       onChange(modalItems);
       setResourceModalOpen(false);
+      setModalItems(null);
     }
-  }, [onChange, setResourceModalOpen, allowMultipleUploads]);
+  }, [onChange, setResourceModalOpen, modalItems, allowMultipleUploads, setModalItems]);
   var initialQuery = React.useMemo(function () {
     return {
       types: types
@@ -393,7 +399,7 @@ var UploadField = function UploadField(_ref) {
     onClick: toggleResourceModal,
     disabled: disabled,
     outline: true
-  }, /*#__PURE__*/React__default["default"].createElement(Label__default["default"], null, searchButtonLabel))) : 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 && uppy$1 !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles.dashboard
   }, /*#__PURE__*/React__default["default"].createElement(react.Dashboard, Object.assign({
     uppy: uppy$1
@@ -410,50 +416,46 @@ var UploadField = function UploadField(_ref) {
     showProgressDetails: true,
     areInsidesReadyToBeVisible: true,
     proudlyDisplayPoweredByUppy: false
-  }))) : null, !showResourceModal && !disabled && withButton && uppy$1 !== null && modalOpened ?
-  /*#__PURE__*/
-  // <DashboardModal
-  //     uppy={uppy}
-  //     className={styles.dashboardModal}
-  //     plugins={sources}
-  //     open={modalOpened}
-  //     isHidden={!modalOpened}
-  //     {...(width !== null ? { width } : null)}
-  //     {...(height !== null ? { height } : null)}
-  //     onRequestClose={closeModal}
-  //     proudlyDisplayPoweredByUppy={false}
-  //     closeModalOnClickOutside
-  //     areInsidesReadyToBeVisible
-  //     isDashboardVisible
-  //     showProgressDetailss
-  //     showAddFilesPanel
-  // />
-  // ) : //
-  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)}
+  }))) : null, !showResourceModal && !disabled && withButton && uppy$1 !== null && modalOpened ? /*#__PURE__*/React__default["default"].createElement(react.DashboardModal, Object.assign({
+    uppy: uppy$1,
+    className: styles.dashboardModal,
+    plugins: sources,
+    open: modalOpened,
+    isHidden: !modalOpened
   }, width !== null ? {
     width: width
   } : null, height !== null ? {
     height: height
   } : null, {
-    plugins: sources,
-    inline: true,
-    showProgressDetails: true
-    // areInsidesReadyToBeVisible
-    // isDashboardVisible
-    ,
-    showAddFilesPanel: true,
+    onRequestClose: closeModal,
     proudlyDisplayPoweredByUppy: false,
-    doneButtonHandler: closeModalAndClear
-  }))) : null, showResourceModal ? /*#__PURE__*/React__default["default"].createElement(Dialog__default["default"], {
-    title: /*#__PURE__*/React__default["default"].createElement(Label__default["default"], null, searchButtonLabel),
+    closeModalOnClickOutside: true,
+    areInsidesReadyToBeVisible: true,
+    isDashboardVisible: true,
+    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"], {
+    title: /*#__PURE__*/React__default["default"].createElement(Label__default["default"], null, findButtonLabel),
     size: "lg",
     onClose: closeResourceModal
   }, /*#__PURE__*/React__default["default"].createElement(ResourceItemsList__default["default"], {
@@ -470,13 +472,29 @@ var UploadField = function UploadField(_ref) {
       },
       withoutActionsColumn: true
     }
-  }), allowMultipleUploads ? /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
+  }), allowMultipleUploads ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "d-flex"
+  }, modalItems !== null && modalItems.length > 0 ? /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "me-2"
+  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+    id: "ZHvvZx",
+    defaultMessage: [{
+      "type": 1,
+      "value": "count"
+    }, {
+      "type": 0,
+      "value": " items selected"
+    }],
+    value: {
+      count: modalItems.length
+    }
+  })) : null, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     type: "button",
     theme: "primary",
     onClick: confirmResourceModal,
     disabled: disabled,
     className: "d-block ms-auto mt-2"
-  }, /*#__PURE__*/React__default["default"].createElement(Label__default["default"], null, confirmButtonLabel)) : null) : null);
+  }, /*#__PURE__*/React__default["default"].createElement(Label__default["default"], null, confirmButtonLabel))) : null) : null);
 };
 UploadField.propTypes = propTypes;
 UploadField.defaultProps = defaultProps;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/field-upload",
-    "version": "3.0.77",
+    "version": "3.0.80",
     "description": "An Upload field",
     "keywords": [
         "javascript"
@@ -82,5 +82,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "359b1b5e8375a7cc6632388caa9173fe130c5778"
+    "gitHead": "e7367fd7150035c2ea8064f12de768e1c0a707a1"
 }