@panneau/field-upload 3.0.134 → 3.0.136

package/es/index.js

@@ -13,7 +13,7 @@ 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 { MediaCards } from '@panneau/element-media-card';
+import MediaCard, { MediaCards } from '@panneau/element-media-card';
 import ResourceItemsList from '@panneau/list-resource-items';
 import Dialog from '@panneau/modal-dialog';
 import { useUppy } from '@panneau/uppy';
@@ -21,10 +21,11 @@ import '@uppy/core/dist/style.css';
 import '@uppy/dashboard/dist/style.css';
 import '@uppy/drag-drop/dist/style.css';
 import '@uppy/status-bar/dist/style.css';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 
 var styles = {"container":"panneau-field-upload-container","dashboard":"panneau-field-upload-dashboard","dashboardModal":"panneau-field-upload-dashboardModal","uppyDashboardContainer":"panneau-field-upload-uppyDashboardContainer"};
 
-var propTypes = {
+var propTypes$1 = {
   value: PropTypes.oneOfType([PropTypes.array, PropTypes.shape({
     filename: PropTypes.string,
     size: PropTypes.number,
@@ -60,7 +61,7 @@ var propTypes = {
   onClickFind: PropTypes.func,
   className: PropTypes.string
 };
-var defaultProps = {
+var defaultProps$1 = {
   value: null,
   types: ['audio', 'image', 'video'],
   fileTypes: null,
@@ -272,7 +273,8 @@ var UploadField = function UploadField(_ref) {
   }, [resourceModalOpen, setResourceModalOpen, setModalItems]);
   var onClickSelect = useCallback(function (newValue) {
     if (allowMultipleUploads) {
-      if (newValue !== null) {
+      console.log('newValue', newValue);
+      if (newValue !== null && !isArray(newValue)) {
         var _ref2 = newValue || {},
           _ref2$id = _ref2.id,
           id = _ref2$id === void 0 ? null : _ref2$id;
@@ -294,6 +296,8 @@ var UploadField = function UploadField(_ref) {
             setModalItems([].concat(_toConsumableArray(modalItems || []), [newValue]));
           }
         }
+      } else if (newValue !== null && isArray(newValue)) {
+        setModalItems(newValue);
       }
     } else if (onChange !== null) {
       onChange(newValue);
@@ -417,27 +421,10 @@ var UploadField = function UploadField(_ref) {
     onQueryChange: onListQueryChange,
     onQueryReset: onListQueryReset,
     baseUrl: null,
-    listProps: {
-      actions: ['select'],
-      actionsProps: {
-        onClickSelect: onClickSelect,
-        getSelectPropsFromItem: function getSelectPropsFromItem(item) {
-          var _ref6 = item || {},
-            _ref6$id = _ref6.id,
-            itemId = _ref6$id === void 0 ? null : _ref6$id;
-          var found = (modalItems || []).find(function () {
-            var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-              _ref7$id = _ref7.id,
-              modalItemId = _ref7$id === void 0 ? null : _ref7$id;
-            return modalItemId === itemId;
-          });
-          return {
-            outline: !found
-          };
-        }
-      },
-      withoutActionsColumn: true
-    }
+    showActions: false,
+    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", {
@@ -458,8 +445,8 @@ var UploadField = function UploadField(_ref) {
     className: "d-block"
   }, /*#__PURE__*/React.createElement(Label, null, confirmButtonLabel)))) : null) : null);
 };
-UploadField.propTypes = propTypes;
-UploadField.defaultProps = defaultProps;
+UploadField.propTypes = propTypes$1;
+UploadField.defaultProps = defaultProps$1;
 var UploadField$1 = UploadField;
 
 var definition = [{
@@ -553,4 +540,105 @@ var FontField = function FontField(props) {
 };
 var FontField$1 = FontField;
 
-export { AudioField$1 as AudioField, DocumentField$1 as DocumentField, FontField$1 as FontField, ImageField$1 as ImageField, ImagesField$1 as ImagesField, VideoField$1 as VideoField, UploadField$1 as default, definition };
+var _excluded = ["value", "onChange"];
+var propTypes = {
+  value: PropTypes.shape({
+    published: PropTypes.bool,
+    featured: PropTypes.bool,
+    created_at: PropTypes.string,
+    updated_at: PropTypes.string
+  }),
+  onChange: PropTypes.func,
+  types: PropTypes.arrayOf(PropTypes.string),
+  fileTypes: PropTypes.arrayOf(PropTypes.string)
+};
+var defaultProps = {
+  value: null,
+  onChange: null,
+  types: null,
+  fileTypes: null
+};
+var UpdateFileField = function UpdateFileField(_ref) {
+  var value = _ref.value;
+    _ref.onChange;
+    var props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    newValue = _useState2[0],
+    setNewValue = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    visibleFile = _useState4[0],
+    setVisibleFile = _useState4[1];
+  var _ref2 = value || {},
+    previousId = _ref2.id,
+    _ref2$type = _ref2.type,
+    type = _ref2$type === void 0 ? null : _ref2$type;
+  var onUploadChange = useCallback(function () {
+    var uploadedFile = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    if (uploadedFile !== null) {
+      setVisibleFile(uploadedFile);
+    }
+    setNewValue(uploadedFile);
+  }, [setNewValue, setVisibleFile]);
+  var uppyProps = useMemo(function () {
+    return {
+      meta: {
+        previousId: previousId
+      }
+    };
+  }, [previousId]);
+  var uploadProps = useMemo(function () {
+    if (type === 'image') {
+      return {
+        types: ['image']
+      };
+    }
+    if (type === 'audio') {
+      return {
+        types: ['audio']
+      };
+    }
+    if (type === 'video') {
+      return {
+        types: ['video']
+      };
+    }
+    if (type === 'document') {
+      return {
+        types: [],
+        fileTypes: ['.pdf']
+      };
+    }
+    return null;
+  }, [type]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "mb-3"
+  }, /*#__PURE__*/React.createElement(MediaCard, {
+    value: visibleFile || value,
+    withoutDescription: true
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "mb-3"
+  }, /*#__PURE__*/React.createElement(UploadField$1, Object.assign({}, props, uploadProps, {
+    addButtonLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "daHjZg",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Edit file"
+      }]
+    }),
+    allowMultipleUploads: false,
+    linkPath: "panneauUrl",
+    onChange: onUploadChange,
+    onClose: onUploadChange,
+    maxNumberOfFiles: 1,
+    value: newValue,
+    withButton: true,
+    uppyProps: uppyProps
+  }))));
+};
+UpdateFileField.propTypes = propTypes;
+UpdateFileField.defaultProps = defaultProps;
+var UpdateFileField$1 = UpdateFileField;
+
+export { AudioField$1 as AudioField, DocumentField$1 as DocumentField, FontField$1 as FontField, ImageField$1 as ImageField, ImagesField$1 as ImagesField, UpdateFileField$1 as UpdateFileField, VideoField$1 as VideoField, UploadField$1 as default, definition };

package/lib/index.js

@@ -17,7 +17,7 @@ var core = require('@panneau/core');
 var hooks = require('@panneau/core/hooks');
 var Button = require('@panneau/element-button');
 var Label = require('@panneau/element-label');
-var elementMediaCard = require('@panneau/element-media-card');
+var MediaCard = require('@panneau/element-media-card');
 var ResourceItemsList = require('@panneau/list-resource-items');
 var Dialog = require('@panneau/modal-dialog');
 var uppy = require('@panneau/uppy');
@@ -25,10 +25,11 @@ require('@uppy/core/dist/style.css');
 require('@uppy/dashboard/dist/style.css');
 require('@uppy/drag-drop/dist/style.css');
 require('@uppy/status-bar/dist/style.css');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 
 var styles = {"container":"panneau-field-upload-container","dashboard":"panneau-field-upload-dashboard","dashboardModal":"panneau-field-upload-dashboardModal","uppyDashboardContainer":"panneau-field-upload-uppyDashboardContainer"};
 
-var propTypes = {
+var propTypes$1 = {
   value: PropTypes.oneOfType([PropTypes.array, PropTypes.shape({
     filename: PropTypes.string,
     size: PropTypes.number,
@@ -64,7 +65,7 @@ var propTypes = {
   onClickFind: PropTypes.func,
   className: PropTypes.string
 };
-var defaultProps = {
+var defaultProps$1 = {
   value: null,
   types: ['audio', 'image', 'video'],
   fileTypes: null,
@@ -276,7 +277,8 @@ var UploadField = function UploadField(_ref) {
   }, [resourceModalOpen, setResourceModalOpen, setModalItems]);
   var onClickSelect = React.useCallback(function (newValue) {
     if (allowMultipleUploads) {
-      if (newValue !== null) {
+      console.log('newValue', newValue);
+      if (newValue !== null && !isArray(newValue)) {
         var _ref2 = newValue || {},
           _ref2$id = _ref2.id,
           id = _ref2$id === void 0 ? null : _ref2$id;
@@ -298,6 +300,8 @@ var UploadField = function UploadField(_ref) {
             setModalItems([].concat(_toConsumableArray(modalItems || []), [newValue]));
           }
         }
+      } else if (newValue !== null && isArray(newValue)) {
+        setModalItems(newValue);
       }
     } else if (onChange !== null) {
       onChange(newValue);
@@ -344,7 +348,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(elementMediaCard.MediaCards, {
+  }, hasMedia ? /*#__PURE__*/React.createElement(MediaCard.MediaCards, {
     value: values,
     namePath: namePath,
     thumbnailPath: thumbnailPath,
@@ -421,27 +425,10 @@ var UploadField = function UploadField(_ref) {
     onQueryChange: onListQueryChange,
     onQueryReset: onListQueryReset,
     baseUrl: null,
-    listProps: {
-      actions: ['select'],
-      actionsProps: {
-        onClickSelect: onClickSelect,
-        getSelectPropsFromItem: function getSelectPropsFromItem(item) {
-          var _ref6 = item || {},
-            _ref6$id = _ref6.id,
-            itemId = _ref6$id === void 0 ? null : _ref6$id;
-          var found = (modalItems || []).find(function () {
-            var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-              _ref7$id = _ref7.id,
-              modalItemId = _ref7$id === void 0 ? null : _ref7$id;
-            return modalItemId === itemId;
-          });
-          return {
-            outline: !found
-          };
-        }
-      },
-      withoutActionsColumn: true
-    }
+    showActions: false,
+    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", {
@@ -462,8 +449,8 @@ var UploadField = function UploadField(_ref) {
     className: "d-block"
   }, /*#__PURE__*/React.createElement(Label, null, confirmButtonLabel)))) : null) : null);
 };
-UploadField.propTypes = propTypes;
-UploadField.defaultProps = defaultProps;
+UploadField.propTypes = propTypes$1;
+UploadField.defaultProps = defaultProps$1;
 var UploadField$1 = UploadField;
 
 var definition = [{
@@ -557,11 +544,113 @@ var FontField = function FontField(props) {
 };
 var FontField$1 = FontField;
 
+var _excluded = ["value", "onChange"];
+var propTypes = {
+  value: PropTypes.shape({
+    published: PropTypes.bool,
+    featured: PropTypes.bool,
+    created_at: PropTypes.string,
+    updated_at: PropTypes.string
+  }),
+  onChange: PropTypes.func,
+  types: PropTypes.arrayOf(PropTypes.string),
+  fileTypes: PropTypes.arrayOf(PropTypes.string)
+};
+var defaultProps = {
+  value: null,
+  onChange: null,
+  types: null,
+  fileTypes: null
+};
+var UpdateFileField = function UpdateFileField(_ref) {
+  var value = _ref.value;
+    _ref.onChange;
+    var props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = React.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    newValue = _useState2[0],
+    setNewValue = _useState2[1];
+  var _useState3 = React.useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    visibleFile = _useState4[0],
+    setVisibleFile = _useState4[1];
+  var _ref2 = value || {},
+    previousId = _ref2.id,
+    _ref2$type = _ref2.type,
+    type = _ref2$type === void 0 ? null : _ref2$type;
+  var onUploadChange = React.useCallback(function () {
+    var uploadedFile = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    if (uploadedFile !== null) {
+      setVisibleFile(uploadedFile);
+    }
+    setNewValue(uploadedFile);
+  }, [setNewValue, setVisibleFile]);
+  var uppyProps = React.useMemo(function () {
+    return {
+      meta: {
+        previousId: previousId
+      }
+    };
+  }, [previousId]);
+  var uploadProps = React.useMemo(function () {
+    if (type === 'image') {
+      return {
+        types: ['image']
+      };
+    }
+    if (type === 'audio') {
+      return {
+        types: ['audio']
+      };
+    }
+    if (type === 'video') {
+      return {
+        types: ['video']
+      };
+    }
+    if (type === 'document') {
+      return {
+        types: [],
+        fileTypes: ['.pdf']
+      };
+    }
+    return null;
+  }, [type]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "mb-3"
+  }, /*#__PURE__*/React.createElement(MediaCard, {
+    value: visibleFile || value,
+    withoutDescription: true
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "mb-3"
+  }, /*#__PURE__*/React.createElement(UploadField$1, Object.assign({}, props, uploadProps, {
+    addButtonLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+      id: "daHjZg",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Edit file"
+      }]
+    }),
+    allowMultipleUploads: false,
+    linkPath: "panneauUrl",
+    onChange: onUploadChange,
+    onClose: onUploadChange,
+    maxNumberOfFiles: 1,
+    value: newValue,
+    withButton: true,
+    uppyProps: uppyProps
+  }))));
+};
+UpdateFileField.propTypes = propTypes;
+UpdateFileField.defaultProps = defaultProps;
+var UpdateFileField$1 = UpdateFileField;
+
 exports.AudioField = AudioField$1;
 exports.DocumentField = DocumentField$1;
 exports.FontField = FontField$1;
 exports.ImageField = ImageField$1;
 exports.ImagesField = ImagesField$1;
+exports.UpdateFileField = UpdateFileField$1;
 exports.VideoField = VideoField$1;
 exports.default = UploadField$1;
 exports.definition = definition;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/field-upload",
-    "version": "3.0.134",
+    "version": "3.0.136",
     "description": "An Upload field",
     "keywords": [
         "javascript"
@@ -57,15 +57,15 @@
         "@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.133",
-        "@panneau/element-button": "^3.0.133",
-        "@panneau/element-label": "^3.0.133",
-        "@panneau/element-media-card": "^3.0.133",
-        "@panneau/list-resource-items": "^3.0.134",
-        "@panneau/modal-dialog": "^3.0.133",
-        "@panneau/modal-upload": "^3.0.133",
-        "@panneau/themes": "^3.0.133",
-        "@panneau/uppy": "^3.0.133",
+        "@panneau/core": "^3.0.136",
+        "@panneau/element-button": "^3.0.136",
+        "@panneau/element-label": "^3.0.136",
+        "@panneau/element-media-card": "^3.0.136",
+        "@panneau/list-resource-items": "^3.0.136",
+        "@panneau/modal-dialog": "^3.0.136",
+        "@panneau/modal-upload": "^3.0.136",
+        "@panneau/themes": "^3.0.136",
+        "@panneau/uppy": "^3.0.136",
         "@uppy/core": "^3.9.1",
         "@uppy/dashboard": "^3.7.3",
         "@uppy/drag-drop": "^3.0.3",
@@ -82,5 +82,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "b30d648c1a3bc67e8cb134d896b06bea405fd9df"
+    "gitHead": "c9a3de330286a6cadd73651f1893adbbe090cd0e"
 }