@panneau/field-upload 3.0.9 → 3.0.11

package/es/index.js

@@ -1,7 +1,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useLocation } from '@folklore/routes';
+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, DashboardModal } from '@uppy/react';
@@ -40,6 +40,7 @@ var propTypes = {
   withFind: PropTypes.bool,
   addButtonLabel: PropTypes$1.label,
   searchButtonLabel: PropTypes$1.label,
+  confirmButtonLabel: PropTypes$1.label,
   allowMultipleUploads: PropTypes.bool,
   maxNumberOfFiles: PropTypes.number,
   namePath: PropTypes.string,
@@ -75,6 +76,13 @@ var defaultProps = {
       "value": "Find a file"
     }]
   }),
+  confirmButtonLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "UaVu03",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Confirm"
+    }]
+  }),
   allowMultipleUploads: false,
   maxNumberOfFiles: 1,
   namePath: null,
@@ -96,6 +104,7 @@ var UploadField = function UploadField(_ref) {
     withFind = _ref.withFind,
     addButtonLabel = _ref.addButtonLabel,
     searchButtonLabel = _ref.searchButtonLabel,
+    confirmButtonLabel = _ref.confirmButtonLabel,
     allowMultipleUploads = _ref.allowMultipleUploads,
     maxNumberOfFiles = _ref.maxNumberOfFiles,
     namePath = _ref.namePath,
@@ -107,10 +116,7 @@ var UploadField = function UploadField(_ref) {
     disabled = _ref.disabled,
     onChange = _ref.onChange,
     className = _ref.className;
-  var _useLocation = useLocation(),
-    _useLocation2 = _slicedToArray(_useLocation, 1),
-    _useLocation2$0$pathn = _useLocation2[0].pathname,
-    pathname = _useLocation2$0$pathn === void 0 ? null : _useLocation2$0$pathn;
+  // const [{ pathname = null }] = useLocation();
   // const { ref: containerRef, entry = null } = useResizeObserver();
   // const { contentRect } = entry || {};
   // const { width: containerWidth = null } = contentRect || {};
@@ -208,12 +214,45 @@ var UploadField = function UploadField(_ref) {
   var closeResourceModal = useCallback(function () {
     setResourceModalOpen(false);
   }, [resourceModalOpen, setResourceModalOpen]);
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    modalItems = _useState6[0],
+    setModalItems = _useState6[1];
   var onClickSelect = useCallback(function (newValue) {
-    if (onChange !== null) {
+    if (allowMultipleUploads) {
+      if (newValue !== null) {
+        var _ref2 = newValue || {},
+          _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,
+              itemId = _ref3$id === void 0 ? null : _ref3$id;
+            return id === itemId;
+          });
+          if (previous) {
+            setModalItems((modalItems || []).filter(function (_ref4) {
+              var _ref4$id = _ref4.id,
+                itemId = _ref4$id === void 0 ? null : _ref4$id;
+              return id !== itemId;
+            }));
+          } else {
+            setModalItems([].concat(_toConsumableArray(modalItems), [newValue]));
+          }
+        }
+      }
+    } else if (onChange !== null) {
       onChange(newValue);
       setResourceModalOpen(false);
     }
-  }, [onChange, setResourceModalOpen]);
+  }, [onChange, setResourceModalOpen, allowMultipleUploads, modalItems, setModalItems]);
+  console.log(modalItems);
+  var confirmResourceModal = useCallback(function () {
+    if (onChange !== null) {
+      onChange(modalItems);
+      setResourceModalOpen(false);
+    }
+  }, [onChange, setResourceModalOpen, allowMultipleUploads]);
   var initialQuery = useMemo(function () {
     return {
       types: types
@@ -241,9 +280,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 _ref6 = data || {},
+      _ref6$file = _ref6.file,
+      file = _ref6$file === void 0 ? null : _ref6$file;
     var faIcon = null;
     switch (type) {
       case 'audio':
@@ -313,7 +352,7 @@ var UploadField = function UploadField(_ref) {
     }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
       icon: faTimes
     })))));
-  }) : null, !hasMedia && withButton ? /*#__PURE__*/React.createElement("div", {
+  }) : null, (!hasMedia || allowMultipleUploads) && withButton ? /*#__PURE__*/React.createElement("div", {
     className: "row"
   }, /*#__PURE__*/React.createElement("div", {
     className: "col-auto"
@@ -364,7 +403,7 @@ var UploadField = function UploadField(_ref) {
     onPageChange: onListPageChange,
     onQueryChange: onListQueryChange,
     onQueryReset: onListQueryReset,
-    baseUrl: pathname,
+    baseUrl: null,
     listProps: {
       actions: ['select'],
       actionsProps: {
@@ -372,7 +411,13 @@ var UploadField = function UploadField(_ref) {
       },
       withoutActionsColumn: true
     }
-  })) : null);
+  }), allowMultipleUploads ? /*#__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);
 };
 UploadField.propTypes = propTypes;
 UploadField.defaultProps = defaultProps;

package/lib/index.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var routes = require('@folklore/routes');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
 var react = require('@uppy/react');
@@ -32,8 +32,9 @@ require('@uppy/status-bar/dist/style.min.css');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
+var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
+var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
 var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);
@@ -61,6 +62,7 @@ var propTypes = {
   withFind: PropTypes__default["default"].bool,
   addButtonLabel: core.PropTypes.label,
   searchButtonLabel: core.PropTypes.label,
+  confirmButtonLabel: core.PropTypes.label,
   allowMultipleUploads: PropTypes__default["default"].bool,
   maxNumberOfFiles: PropTypes__default["default"].number,
   namePath: PropTypes__default["default"].string,
@@ -96,6 +98,13 @@ var defaultProps = {
       "value": "Find a file"
     }]
   }),
+  confirmButtonLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+    id: "UaVu03",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Confirm"
+    }]
+  }),
   allowMultipleUploads: false,
   maxNumberOfFiles: 1,
   namePath: null,
@@ -117,6 +126,7 @@ var UploadField = function UploadField(_ref) {
     withFind = _ref.withFind,
     addButtonLabel = _ref.addButtonLabel,
     searchButtonLabel = _ref.searchButtonLabel,
+    confirmButtonLabel = _ref.confirmButtonLabel,
     allowMultipleUploads = _ref.allowMultipleUploads,
     maxNumberOfFiles = _ref.maxNumberOfFiles,
     namePath = _ref.namePath,
@@ -128,10 +138,7 @@ var UploadField = function UploadField(_ref) {
     disabled = _ref.disabled,
     onChange = _ref.onChange,
     className = _ref.className;
-  var _useLocation = routes.useLocation(),
-    _useLocation2 = _slicedToArray__default["default"](_useLocation, 1),
-    _useLocation2$0$pathn = _useLocation2[0].pathname,
-    pathname = _useLocation2$0$pathn === void 0 ? null : _useLocation2$0$pathn;
+  // const [{ pathname = null }] = useLocation();
   // const { ref: containerRef, entry = null } = useResizeObserver();
   // const { contentRect } = entry || {};
   // const { width: containerWidth = null } = contentRect || {};
@@ -229,12 +236,45 @@ var UploadField = function UploadField(_ref) {
   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 onClickSelect = React.useCallback(function (newValue) {
-    if (onChange !== null) {
+    if (allowMultipleUploads) {
+      if (newValue !== null) {
+        var _ref2 = newValue || {},
+          _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,
+              itemId = _ref3$id === void 0 ? null : _ref3$id;
+            return id === itemId;
+          });
+          if (previous) {
+            setModalItems((modalItems || []).filter(function (_ref4) {
+              var _ref4$id = _ref4.id,
+                itemId = _ref4$id === void 0 ? null : _ref4$id;
+              return id !== itemId;
+            }));
+          } else {
+            setModalItems([].concat(_toConsumableArray__default["default"](modalItems), [newValue]));
+          }
+        }
+      }
+    } else if (onChange !== null) {
       onChange(newValue);
       setResourceModalOpen(false);
     }
-  }, [onChange, setResourceModalOpen]);
+  }, [onChange, setResourceModalOpen, allowMultipleUploads, modalItems, setModalItems]);
+  console.log(modalItems);
+  var confirmResourceModal = React.useCallback(function () {
+    if (onChange !== null) {
+      onChange(modalItems);
+      setResourceModalOpen(false);
+    }
+  }, [onChange, setResourceModalOpen, allowMultipleUploads]);
   var initialQuery = React.useMemo(function () {
     return {
       types: types
@@ -262,9 +302,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 _ref6 = data || {},
+      _ref6$file = _ref6.file,
+      file = _ref6$file === void 0 ? null : _ref6$file;
     var faIcon = null;
     switch (type) {
       case 'audio':
@@ -334,7 +374,7 @@ var UploadField = function UploadField(_ref) {
     }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
       icon: freeSolidSvgIcons.faTimes
     })))));
-  }) : null, !hasMedia && withButton ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }) : null, (!hasMedia || allowMultipleUploads) && withButton ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "row"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "col-auto"
@@ -385,7 +425,7 @@ var UploadField = function UploadField(_ref) {
     onPageChange: onListPageChange,
     onQueryChange: onListQueryChange,
     onQueryReset: onListQueryReset,
-    baseUrl: pathname,
+    baseUrl: null,
     listProps: {
       actions: ['select'],
       actionsProps: {
@@ -393,7 +433,13 @@ var UploadField = function UploadField(_ref) {
       },
       withoutActionsColumn: true
     }
-  })) : null);
+  }), allowMultipleUploads ? /*#__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);
 };
 UploadField.propTypes = propTypes;
 UploadField.defaultProps = defaultProps;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/field-upload",
-    "version": "3.0.9",
+    "version": "3.0.11",
     "description": "An Upload field",
     "keywords": [
         "javascript"
@@ -59,9 +59,9 @@
         "@fortawesome/react-fontawesome": "^0.1.14",
         "@panneau/core": "^3.0.9",
         "@panneau/element-button": "^3.0.9",
-        "@panneau/element-card": "^3.0.9",
+        "@panneau/element-card": "^3.0.11",
         "@panneau/element-label": "^3.0.9",
-        "@panneau/list-resource-items": "^3.0.9",
+        "@panneau/list-resource-items": "^3.0.11",
         "@panneau/modal-dialog": "^3.0.9",
         "@panneau/themes": "^3.0.9",
         "@uppy/core": "^3.2.0",
@@ -81,5 +81,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "5725a31a8f873f1ae84c6df3ac712baf75be15b5"
+    "gitHead": "828edc2a1e178e890c49c6ea24d9370d4f07c554"
 }