@panneau/field-upload 3.0.159 → 3.0.160

package/es/index.js

@@ -10,12 +10,10 @@ 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 { useQuery } from '@panneau/core/hooks';
 import Button from '@panneau/element-button';
 import Label from '@panneau/element-label';
 import MediaCard, { MediaCards } from '@panneau/element-media-card';
-import ResourceItemsList from '@panneau/list-resource-items';
-import Dialog from '@panneau/modal-dialog';
+import ModalPicker from '@panneau/modal-medias-picker';
 import { useUppy } from '@panneau/uppy';
 import '@uppy/core/dist/style.css';
 import '@uppy/dashboard/dist/style.css';
@@ -37,12 +35,10 @@ var propTypes$1 = {
   withButton: PropTypes.bool,
   withFind: PropTypes.bool,
   withClearButton: PropTypes.bool,
+  withoutMedia: PropTypes.bool,
   addButtonLabel: PropTypes$1.label,
   findButtonLabel: PropTypes$1.label,
   clearButtonLabel: PropTypes$1.label,
-  countLabel: PropTypes$1.label,
-  confirmButtonLabel: PropTypes$1.label,
-  cancelButtonLabel: PropTypes$1.label,
   allowMultipleUploads: PropTypes.bool,
   maxNumberOfFiles: PropTypes.number,
   namePath: PropTypes.string,
@@ -69,11 +65,12 @@ var defaultProps$1 = {
   withButton: false,
   withFind: false,
   withClearButton: false,
+  withoutMedia: false,
   addButtonLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "NI9440",
+    id: "BeKVq6",
     defaultMessage: [{
       "type": 0,
-      "value": "Add file"
+      "value": "Upload file"
     }]
   }),
   findButtonLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -90,27 +87,6 @@ var defaultProps$1 = {
       "value": "Clear"
     }]
   }),
-  countLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "XLOebh",
-    defaultMessage: [{
-      "type": 0,
-      "value": "items selected"
-    }]
-  }),
-  confirmButtonLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "UaVu03",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Confirm"
-    }]
-  }),
-  cancelButtonLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "PyxZY2",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Cancel"
-    }]
-  }),
   allowMultipleUploads: false,
   maxNumberOfFiles: 1,
   namePath: 'name',
@@ -135,12 +111,10 @@ var UploadField = function UploadField(_ref) {
     withButton = _ref.withButton,
     withFind = _ref.withFind,
     withClearButton = _ref.withClearButton,
+    withoutMedia = _ref.withoutMedia,
     addButtonLabel = _ref.addButtonLabel,
     findButtonLabel = _ref.findButtonLabel,
     clearButtonLabel = _ref.clearButtonLabel,
-    countLabel = _ref.countLabel,
-    confirmButtonLabel = _ref.confirmButtonLabel,
-    cancelButtonLabel = _ref.cancelButtonLabel,
     allowMultipleUploads = _ref.allowMultipleUploads,
     maxNumberOfFiles = _ref.maxNumberOfFiles,
     namePath = _ref.namePath,
@@ -271,7 +245,7 @@ var UploadField = function UploadField(_ref) {
     setResourceModalOpen(false);
     setModalItems(null);
   }, [resourceModalOpen, setResourceModalOpen, setModalItems]);
-  var onClickSelect = useCallback(function (newValue) {
+  var onChangeSelection = useCallback(function (newValue) {
     if (allowMultipleUploads) {
       if (newValue !== null && !isArray(newValue)) {
         var _ref2 = newValue || {},
@@ -308,31 +282,12 @@ var UploadField = function UploadField(_ref) {
       setResourceModalOpen(false);
     }
   }, [onChange, setResourceModalOpen, allowMultipleUploads, modalItems, setModalItems]);
-  var confirmResourceModal = useCallback(function () {
+  var onConfirmSelection = useCallback(function () {
     if (onChange !== null) {
-      // Always multiple onchange
       onChange(modalItems);
       setResourceModalOpen(false);
-      setModalItems(null);
     }
-  }, [onChange, setResourceModalOpen, modalItems, allowMultipleUploads, setModalItems]);
-  var initialQuery = useMemo(function () {
-    return {
-      types: types
-    };
-  }, [types]);
-  var _useQuery = useQuery(initialQuery, true),
-    listQuery = _useQuery.query,
-    onListPageChange = _useQuery.onPageChange,
-    onListQueryChange = _useQuery.onQueryChange,
-    onListQueryReset = _useQuery.onQueryReset;
-
-  // console.log(
-  //     'modalOpened',
-  //     !showResourceModal && !disabled && withButton && uppy !== null && modalOpened,
-  // );
-  // console.log('uppy', uppy);
-
+  }, [onChange, modalItems, setResourceModalOpen, allowMultipleUploads]);
   var containerRef = useRef(null);
 
   // Keep this stable, uppy doesnt like
@@ -348,7 +303,7 @@ var UploadField = function UploadField(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
     ref: containerRef
-  }, hasMedia ? /*#__PURE__*/React.createElement(MediaCards, {
+  }, !withoutMedia && hasMedia ? /*#__PURE__*/React.createElement(MediaCards, {
     value: values,
     namePath: namePath,
     thumbnailPath: thumbnailPath,
@@ -356,7 +311,7 @@ var UploadField = function UploadField(_ref) {
     linkPath: linkPath,
     disabled: disabled,
     onClickRemove: onClickRemove
-  }) : null, hasMedia && withClearButton ? /*#__PURE__*/React.createElement("div", {
+  }) : null, !withoutMedia && hasMedia && withClearButton ? /*#__PURE__*/React.createElement("div", {
     className: "row mt-2"
   }, /*#__PURE__*/React.createElement("div", {
     className: "col-auto"
@@ -365,7 +320,7 @@ var UploadField = function UploadField(_ref) {
     theme: "primary",
     onClick: onClickClear,
     outline: true
-  }, /*#__PURE__*/React.createElement(Label, null, clearButtonLabel)))) : null, (!hasMedia || allowMultipleUploads) && withButton ? /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Label, null, clearButtonLabel)))) : null, withoutMedia || (!hasMedia || allowMultipleUploads) && withButton ? /*#__PURE__*/React.createElement("div", {
     className: "row"
   }, /*#__PURE__*/React.createElement("div", {
     className: "col-auto"
@@ -414,40 +369,15 @@ var UploadField = function UploadField(_ref) {
     showProgressDetails: true,
     showAddFilesPanel: true,
     doneButtonHandler: closeModal
-  }) : null, showResourceModal ? /*#__PURE__*/React.createElement(Dialog, {
-    title: /*#__PURE__*/React.createElement(Label, null, findButtonLabel),
-    size: "xl",
-    onClose: closeResourceModal
-  }, /*#__PURE__*/React.createElement(ResourceItemsList, {
+  }) : null, showResourceModal ? /*#__PURE__*/React.createElement(ModalPicker, {
     resource: "medias",
-    query: listQuery,
-    onPageChange: onListPageChange,
-    onQueryChange: onListQueryChange,
-    onQueryReset: onListQueryReset,
-    baseUrl: null,
-    showActions: false,
+    types: types,
     selectable: true,
-    onSelectionChange: onClickSelect,
-    multipleSelection: allowMultipleUploads
-  }), allowMultipleUploads ? /*#__PURE__*/React.createElement("div", {
-    className: "d-flex mt-4 justify-content-between"
-  }, modalItems !== null && modalItems.length > 0 ? /*#__PURE__*/React.createElement("span", {
-    className: "me-2"
-  }, modalItems.length, " ", countLabel) : /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("div", {
-    className: "d-flex"
-  }, /*#__PURE__*/React.createElement(Button, {
-    type: "button",
-    theme: "secondary",
-    onClick: closeResourceModal,
-    disabled: disabled,
-    className: "d-block me-2"
-  }, /*#__PURE__*/React.createElement(Label, null, cancelButtonLabel)), /*#__PURE__*/React.createElement(Button, {
-    type: "button",
-    theme: "primary",
-    onClick: confirmResourceModal,
-    disabled: disabled || modalItems !== null && modalItems.length === 0,
-    className: "d-block"
-  }, /*#__PURE__*/React.createElement(Label, null, confirmButtonLabel)))) : null) : null);
+    onChange: onChangeSelection,
+    onConfirm: onConfirmSelection,
+    onClose: closeResourceModal,
+    multiple: allowMultipleUploads
+  }) : null);
 };
 UploadField.propTypes = propTypes$1;
 UploadField.defaultProps = defaultProps$1;

package/lib/index.js

@@ -14,12 +14,10 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var reactIntl = require('react-intl');
 var core = require('@panneau/core');
-var hooks = require('@panneau/core/hooks');
 var Button = require('@panneau/element-button');
 var Label = require('@panneau/element-label');
 var MediaCard = require('@panneau/element-media-card');
-var ResourceItemsList = require('@panneau/list-resource-items');
-var Dialog = require('@panneau/modal-dialog');
+var ModalPicker = require('@panneau/modal-medias-picker');
 var uppy = require('@panneau/uppy');
 require('@uppy/core/dist/style.css');
 require('@uppy/dashboard/dist/style.css');
@@ -41,12 +39,10 @@ var propTypes$1 = {
   withButton: PropTypes.bool,
   withFind: PropTypes.bool,
   withClearButton: PropTypes.bool,
+  withoutMedia: PropTypes.bool,
   addButtonLabel: core.PropTypes.label,
   findButtonLabel: core.PropTypes.label,
   clearButtonLabel: core.PropTypes.label,
-  countLabel: core.PropTypes.label,
-  confirmButtonLabel: core.PropTypes.label,
-  cancelButtonLabel: core.PropTypes.label,
   allowMultipleUploads: PropTypes.bool,
   maxNumberOfFiles: PropTypes.number,
   namePath: PropTypes.string,
@@ -73,11 +69,12 @@ var defaultProps$1 = {
   withButton: false,
   withFind: false,
   withClearButton: false,
+  withoutMedia: false,
   addButtonLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "NI9440",
+    id: "BeKVq6",
     defaultMessage: [{
       "type": 0,
-      "value": "Add file"
+      "value": "Upload file"
     }]
   }),
   findButtonLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
@@ -94,27 +91,6 @@ var defaultProps$1 = {
       "value": "Clear"
     }]
   }),
-  countLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "XLOebh",
-    defaultMessage: [{
-      "type": 0,
-      "value": "items selected"
-    }]
-  }),
-  confirmButtonLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "UaVu03",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Confirm"
-    }]
-  }),
-  cancelButtonLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "PyxZY2",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Cancel"
-    }]
-  }),
   allowMultipleUploads: false,
   maxNumberOfFiles: 1,
   namePath: 'name',
@@ -139,12 +115,10 @@ var UploadField = function UploadField(_ref) {
     withButton = _ref.withButton,
     withFind = _ref.withFind,
     withClearButton = _ref.withClearButton,
+    withoutMedia = _ref.withoutMedia,
     addButtonLabel = _ref.addButtonLabel,
     findButtonLabel = _ref.findButtonLabel,
     clearButtonLabel = _ref.clearButtonLabel,
-    countLabel = _ref.countLabel,
-    confirmButtonLabel = _ref.confirmButtonLabel,
-    cancelButtonLabel = _ref.cancelButtonLabel,
     allowMultipleUploads = _ref.allowMultipleUploads,
     maxNumberOfFiles = _ref.maxNumberOfFiles,
     namePath = _ref.namePath,
@@ -275,7 +249,7 @@ var UploadField = function UploadField(_ref) {
     setResourceModalOpen(false);
     setModalItems(null);
   }, [resourceModalOpen, setResourceModalOpen, setModalItems]);
-  var onClickSelect = React.useCallback(function (newValue) {
+  var onChangeSelection = React.useCallback(function (newValue) {
     if (allowMultipleUploads) {
       if (newValue !== null && !isArray(newValue)) {
         var _ref2 = newValue || {},
@@ -312,31 +286,12 @@ var UploadField = function UploadField(_ref) {
       setResourceModalOpen(false);
     }
   }, [onChange, setResourceModalOpen, allowMultipleUploads, modalItems, setModalItems]);
-  var confirmResourceModal = React.useCallback(function () {
+  var onConfirmSelection = React.useCallback(function () {
     if (onChange !== null) {
-      // Always multiple onchange
       onChange(modalItems);
       setResourceModalOpen(false);
-      setModalItems(null);
     }
-  }, [onChange, setResourceModalOpen, modalItems, allowMultipleUploads, setModalItems]);
-  var initialQuery = React.useMemo(function () {
-    return {
-      types: types
-    };
-  }, [types]);
-  var _useQuery = hooks.useQuery(initialQuery, true),
-    listQuery = _useQuery.query,
-    onListPageChange = _useQuery.onPageChange,
-    onListQueryChange = _useQuery.onQueryChange,
-    onListQueryReset = _useQuery.onQueryReset;
-
-  // console.log(
-  //     'modalOpened',
-  //     !showResourceModal && !disabled && withButton && uppy !== null && modalOpened,
-  // );
-  // console.log('uppy', uppy);
-
+  }, [onChange, modalItems, setResourceModalOpen, allowMultipleUploads]);
   var containerRef = React.useRef(null);
 
   // Keep this stable, uppy doesnt like
@@ -352,7 +307,7 @@ var UploadField = function UploadField(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
     ref: containerRef
-  }, hasMedia ? /*#__PURE__*/React.createElement(MediaCard.MediaCards, {
+  }, !withoutMedia && hasMedia ? /*#__PURE__*/React.createElement(MediaCard.MediaCards, {
     value: values,
     namePath: namePath,
     thumbnailPath: thumbnailPath,
@@ -360,7 +315,7 @@ var UploadField = function UploadField(_ref) {
     linkPath: linkPath,
     disabled: disabled,
     onClickRemove: onClickRemove
-  }) : null, hasMedia && withClearButton ? /*#__PURE__*/React.createElement("div", {
+  }) : null, !withoutMedia && hasMedia && withClearButton ? /*#__PURE__*/React.createElement("div", {
     className: "row mt-2"
   }, /*#__PURE__*/React.createElement("div", {
     className: "col-auto"
@@ -369,7 +324,7 @@ var UploadField = function UploadField(_ref) {
     theme: "primary",
     onClick: onClickClear,
     outline: true
-  }, /*#__PURE__*/React.createElement(Label, null, clearButtonLabel)))) : null, (!hasMedia || allowMultipleUploads) && withButton ? /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Label, null, clearButtonLabel)))) : null, withoutMedia || (!hasMedia || allowMultipleUploads) && withButton ? /*#__PURE__*/React.createElement("div", {
     className: "row"
   }, /*#__PURE__*/React.createElement("div", {
     className: "col-auto"
@@ -418,40 +373,15 @@ var UploadField = function UploadField(_ref) {
     showProgressDetails: true,
     showAddFilesPanel: true,
     doneButtonHandler: closeModal
-  }) : null, showResourceModal ? /*#__PURE__*/React.createElement(Dialog, {
-    title: /*#__PURE__*/React.createElement(Label, null, findButtonLabel),
-    size: "xl",
-    onClose: closeResourceModal
-  }, /*#__PURE__*/React.createElement(ResourceItemsList, {
+  }) : null, showResourceModal ? /*#__PURE__*/React.createElement(ModalPicker, {
     resource: "medias",
-    query: listQuery,
-    onPageChange: onListPageChange,
-    onQueryChange: onListQueryChange,
-    onQueryReset: onListQueryReset,
-    baseUrl: null,
-    showActions: false,
+    types: types,
     selectable: true,
-    onSelectionChange: onClickSelect,
-    multipleSelection: allowMultipleUploads
-  }), allowMultipleUploads ? /*#__PURE__*/React.createElement("div", {
-    className: "d-flex mt-4 justify-content-between"
-  }, modalItems !== null && modalItems.length > 0 ? /*#__PURE__*/React.createElement("span", {
-    className: "me-2"
-  }, modalItems.length, " ", countLabel) : /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("div", {
-    className: "d-flex"
-  }, /*#__PURE__*/React.createElement(Button, {
-    type: "button",
-    theme: "secondary",
-    onClick: closeResourceModal,
-    disabled: disabled,
-    className: "d-block me-2"
-  }, /*#__PURE__*/React.createElement(Label, null, cancelButtonLabel)), /*#__PURE__*/React.createElement(Button, {
-    type: "button",
-    theme: "primary",
-    onClick: confirmResourceModal,
-    disabled: disabled || modalItems !== null && modalItems.length === 0,
-    className: "d-block"
-  }, /*#__PURE__*/React.createElement(Label, null, confirmButtonLabel)))) : null) : null);
+    onChange: onChangeSelection,
+    onConfirm: onConfirmSelection,
+    onClose: closeResourceModal,
+    multiple: allowMultipleUploads
+  }) : null);
 };
 UploadField.propTypes = propTypes$1;
 UploadField.defaultProps = defaultProps$1;

package/package.json

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