@panneau/field-upload 2.0.46 → 2.0.56

package/assets/css/styles.css

@@ -1 +1 @@
-.panneau-field-upload-container{width:100%}
+.panneau-field-upload-container{width:100%}.panneau-field-upload-container .panneau-field-upload-dashboard{position:relative}

package/es/index.js

@@ -10,7 +10,7 @@ import isArray from 'lodash/isArray';
 import isObject from 'lodash/isObject';
 import prettyBytes from 'pretty-bytes';
 import PropTypes from 'prop-types';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { PropTypes as PropTypes$1 } from '@panneau/core';
 import { useUppy } from '@panneau/core/contexts';
@@ -20,8 +20,9 @@ import Label from '@panneau/element-label';
 import '@uppy/core/dist/style.min.css';
 import '@uppy/dashboard/dist/style.min.css';
 import '@uppy/drag-drop/dist/style.min.css';
+import '@uppy/status-bar/dist/style.min.css';
 
-var styles = {"container":"panneau-field-upload-container"};
+var styles = {"container":"panneau-field-upload-container","dashboard":"panneau-field-upload-dashboard"};
 
 var propTypes = {
   value: PropTypes.oneOfType([PropTypes.array, PropTypes.shape({
@@ -33,7 +34,9 @@ var propTypes = {
   fileTypes: PropTypes.arrayOf(PropTypes.string),
   sources: PropTypes.arrayOf(PropTypes.oneOf(['webcam', 'facebook', 'instagram', 'dropbox', 'google-drive'])),
   withButton: PropTypes.bool,
+  withSearchModal: PropTypes.bool,
   addButtonLabel: PropTypes$1.label,
+  searchButtonLabel: PropTypes$1.label,
   allowMultipleUploads: PropTypes.bool,
   namePath: PropTypes.string,
   thumbnailPath: PropTypes.string,
@@ -50,6 +53,7 @@ var defaultProps = {
   fileTypes: null,
   sources: ['webcam', 'facebook', 'instagram', 'dropbox', 'google-drive'],
   withButton: false,
+  withSearchModal: false,
   addButtonLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "NI9440",
     defaultMessage: [{
@@ -57,6 +61,13 @@ var defaultProps = {
       "value": "Add file"
     }]
   }),
+  searchButtonLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "oTrX3h",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Search media"
+    }]
+  }),
   allowMultipleUploads: false,
   namePath: null,
   thumbnailPath: null,
@@ -73,7 +84,9 @@ var UploadField = function UploadField(_ref) {
     fileTypes = _ref.fileTypes,
     sources = _ref.sources,
     withButton = _ref.withButton,
+    withSearchModal = _ref.withSearchModal,
     addButtonLabel = _ref.addButtonLabel,
+    searchButtonLabel = _ref.searchButtonLabel,
     allowMultipleUploads = _ref.allowMultipleUploads,
     namePath = _ref.namePath,
     thumbnailPath = _ref.thumbnailPath,
@@ -92,6 +105,14 @@ var UploadField = function UploadField(_ref) {
   var _ref3 = contentRect || {},
     _ref3$width = _ref3.width,
     containerWidth = _ref3$width === void 0 ? null : _ref3$width;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    mediaModalOpen = _useState2[0],
+    setMediaModalOpen = _useState2[1];
+  var showMediaModal = withSearchModal && mediaModalOpen;
+  var toggleSearchModal = useCallback(function () {
+    setMediaModalOpen(!mediaModalOpen);
+  }, [mediaModalOpen, setMediaModalOpen]);
   var onComplete = useCallback(function (response) {
     console.log('upload complete', response); // eslint-disable-line
     var newValue = null;
@@ -142,10 +163,10 @@ var UploadField = function UploadField(_ref) {
       onChange(null);
     }
   }, [value, onChange]);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    modalOpened = _useState2[0],
-    setModalOpened = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    modalOpened = _useState4[0],
+    setModalOpened = _useState4[1];
   var openModal = useCallback(function () {
     setModalOpened(true);
   }, [setModalOpened]);
@@ -248,35 +269,48 @@ var UploadField = function UploadField(_ref) {
     }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
       icon: faTimes
     })))));
-  }) : null, !hasMedia && withButton ? /*#__PURE__*/React.createElement(Button, {
+  }) : null, !hasMedia && withButton ? /*#__PURE__*/React.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "col-auto"
+  }, /*#__PURE__*/React.createElement(Button, {
     type: "button",
     theme: "primary",
     onClick: openModal,
     disabled: disabled
-  }, /*#__PURE__*/React.createElement(Label, null, addButtonLabel)) : null, !disabled && !hasMedia && !withButton && uppy !== null ? /*#__PURE__*/React.createElement(Dashboard, Object.assign({
+  }, /*#__PURE__*/React.createElement(Label, null, addButtonLabel))), withSearchModal ? /*#__PURE__*/React.createElement("div", {
+    className: "col-auto ps-0"
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    theme: "primary",
+    onClick: toggleSearchModal,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(Label, null, searchButtonLabel))) : null) : null, !showMediaModal && !disabled && !hasMedia && !withButton && uppy !== null ? /*#__PURE__*/React.createElement("div", {
+    className: styles.dashboard
+  }, /*#__PURE__*/React.createElement(Dashboard, Object.assign({
     uppy: uppy
-    // eslint-disable-next-line react/jsx-props-no-spreading
   }, containerWidth !== null && height !== null ? {
     width: containerWidth
-  } : {
+  } : null, width !== null ? {
     width: width
-  }, {
-    height: height,
+  } : null, height !== null ? {
+    height: height
+  } : null, {
     plugins: sources,
     inline: true,
     areInsidesReadyToBeVisible: true,
-    proudlyDisplayPoweredByUppy: false
-  })) : null, !disabled && withButton && uppy !== null ? /*#__PURE__*/React.createElement(DashboardModal, {
+    proudlyDisplayPoweredByUppy: false,
+    showProgressDetails: true
+  }))) : null, !showMediaModal && !disabled && withButton && uppy !== null ? /*#__PURE__*/React.createElement(DashboardModal, {
     uppy: uppy,
     plugins: sources,
     open: modalOpened,
     onRequestClose: closeModal,
     closeModalOnClickOutside: true
-  }) : null);
+  }) : null, showMediaModal ? 'Hello' : null);
 };
 UploadField.propTypes = propTypes;
 UploadField.defaultProps = defaultProps;
-var UploadField$1 = /*#__PURE__*/React.memo(UploadField);
 
 var definition = [{
   id: 'upload',
@@ -290,30 +324,62 @@ var definition = [{
 }, {
   id: 'video',
   component: 'Video'
+}, {
+  id: 'document',
+  component: 'Document'
+}, {
+  id: 'font',
+  component: 'Font'
 }];
 
 /* eslint-disable react/jsx-props-no-spreading */
 var AudioField = function AudioField(props) {
-  return /*#__PURE__*/React.createElement(UploadField$1, Object.assign({}, props, {
-    types: ['audio']
+  var types = useMemo(function () {
+    return ['audio'];
+  }, []);
+  return /*#__PURE__*/React.createElement(UploadField, Object.assign({}, props, {
+    types: types
   }));
 };
-var AudioField$1 = /*#__PURE__*/React.memo(AudioField);
 
 /* eslint-disable react/jsx-props-no-spreading */
 var ImageField = function ImageField(props) {
-  return /*#__PURE__*/React.createElement(UploadField$1, Object.assign({}, props, {
-    types: ['image']
+  var types = useMemo(function () {
+    return ['image'];
+  }, []);
+  return /*#__PURE__*/React.createElement(UploadField, Object.assign({}, props, {
+    types: types
   }));
 };
-var ImageField$1 = /*#__PURE__*/React.memo(ImageField);
 
 /* eslint-disable react/jsx-props-no-spreading */
 var VideoField = function VideoField(props) {
-  return /*#__PURE__*/React.createElement(UploadField$1, Object.assign({}, props, {
-    types: ['video']
+  var types = useMemo(function () {
+    return ['video'];
+  }, []);
+  return /*#__PURE__*/React.createElement(UploadField, Object.assign({}, props, {
+    types: types
+  }));
+};
+
+/* eslint-disable react/jsx-props-no-spreading */
+var DocumentField = function DocumentField(props) {
+  var fileTypes = useMemo(function () {
+    return ['.pdf'];
+  }, []);
+  return /*#__PURE__*/React.createElement(UploadField, Object.assign({}, props, {
+    fileTypes: fileTypes
+  }));
+};
+
+/* eslint-disable react/jsx-props-no-spreading */
+var FontField = function FontField(props) {
+  var fileTypes = useMemo(function () {
+    return ['.ttf', '.otf'];
+  }, []);
+  return /*#__PURE__*/React.createElement(UploadField, Object.assign({}, props, {
+    fileTypes: fileTypes
   }));
 };
-var VideoField$1 = /*#__PURE__*/React.memo(VideoField);
 
-export { AudioField$1 as AudioField, ImageField$1 as ImageField, VideoField$1 as VideoField, UploadField$1 as default, definition };
+export { AudioField, DocumentField, FontField, ImageField, VideoField, UploadField as default, definition };

package/lib/index.js

@@ -24,6 +24,7 @@ var Label = require('@panneau/element-label');
 require('@uppy/core/dist/style.min.css');
 require('@uppy/dashboard/dist/style.min.css');
 require('@uppy/drag-drop/dist/style.min.css');
+require('@uppy/status-bar/dist/style.min.css');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -40,7 +41,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var Label__default = /*#__PURE__*/_interopDefaultLegacy(Label);
 
-var styles = {"container":"panneau-field-upload-container"};
+var styles = {"container":"panneau-field-upload-container","dashboard":"panneau-field-upload-dashboard"};
 
 var propTypes = {
   value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].array, PropTypes__default["default"].shape({
@@ -52,7 +53,9 @@ var propTypes = {
   fileTypes: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
   sources: PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOf(['webcam', 'facebook', 'instagram', 'dropbox', 'google-drive'])),
   withButton: PropTypes__default["default"].bool,
+  withSearchModal: PropTypes__default["default"].bool,
   addButtonLabel: core.PropTypes.label,
+  searchButtonLabel: core.PropTypes.label,
   allowMultipleUploads: PropTypes__default["default"].bool,
   namePath: PropTypes__default["default"].string,
   thumbnailPath: PropTypes__default["default"].string,
@@ -69,6 +72,7 @@ var defaultProps = {
   fileTypes: null,
   sources: ['webcam', 'facebook', 'instagram', 'dropbox', 'google-drive'],
   withButton: false,
+  withSearchModal: false,
   addButtonLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
     id: "NI9440",
     defaultMessage: [{
@@ -76,6 +80,13 @@ var defaultProps = {
       "value": "Add file"
     }]
   }),
+  searchButtonLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+    id: "oTrX3h",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Search media"
+    }]
+  }),
   allowMultipleUploads: false,
   namePath: null,
   thumbnailPath: null,
@@ -92,7 +103,9 @@ var UploadField = function UploadField(_ref) {
     fileTypes = _ref.fileTypes,
     sources = _ref.sources,
     withButton = _ref.withButton,
+    withSearchModal = _ref.withSearchModal,
     addButtonLabel = _ref.addButtonLabel,
+    searchButtonLabel = _ref.searchButtonLabel,
     allowMultipleUploads = _ref.allowMultipleUploads,
     namePath = _ref.namePath,
     thumbnailPath = _ref.thumbnailPath,
@@ -111,6 +124,14 @@ var UploadField = function UploadField(_ref) {
   var _ref3 = contentRect || {},
     _ref3$width = _ref3.width,
     containerWidth = _ref3$width === void 0 ? null : _ref3$width;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    mediaModalOpen = _useState2[0],
+    setMediaModalOpen = _useState2[1];
+  var showMediaModal = withSearchModal && mediaModalOpen;
+  var toggleSearchModal = React.useCallback(function () {
+    setMediaModalOpen(!mediaModalOpen);
+  }, [mediaModalOpen, setMediaModalOpen]);
   var onComplete = React.useCallback(function (response) {
     console.log('upload complete', response); // eslint-disable-line
     var newValue = null;
@@ -161,10 +182,10 @@ var UploadField = function UploadField(_ref) {
       onChange(null);
     }
   }, [value, onChange]);
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
-    modalOpened = _useState2[0],
-    setModalOpened = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    modalOpened = _useState4[0],
+    setModalOpened = _useState4[1];
   var openModal = React.useCallback(function () {
     setModalOpened(true);
   }, [setModalOpened]);
@@ -267,35 +288,48 @@ var UploadField = function UploadField(_ref) {
     }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
       icon: freeSolidSvgIcons.faTimes
     })))));
-  }) : null, !hasMedia && withButton ? /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
+  }) : null, !hasMedia && withButton ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "col-auto"
+  }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     type: "button",
     theme: "primary",
     onClick: openModal,
     disabled: disabled
-  }, /*#__PURE__*/React__default["default"].createElement(Label__default["default"], null, addButtonLabel)) : null, !disabled && !hasMedia && !withButton && uppy !== null ? /*#__PURE__*/React__default["default"].createElement(react.Dashboard, Object.assign({
+  }, /*#__PURE__*/React__default["default"].createElement(Label__default["default"], null, addButtonLabel))), withSearchModal ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "col-auto ps-0"
+  }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
+    type: "button",
+    theme: "primary",
+    onClick: toggleSearchModal,
+    disabled: disabled
+  }, /*#__PURE__*/React__default["default"].createElement(Label__default["default"], null, searchButtonLabel))) : null) : null, !showMediaModal && !disabled && !hasMedia && !withButton && uppy !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles.dashboard
+  }, /*#__PURE__*/React__default["default"].createElement(react.Dashboard, Object.assign({
     uppy: uppy
-    // eslint-disable-next-line react/jsx-props-no-spreading
   }, containerWidth !== null && height !== null ? {
     width: containerWidth
-  } : {
+  } : null, width !== null ? {
     width: width
-  }, {
-    height: height,
+  } : null, height !== null ? {
+    height: height
+  } : null, {
     plugins: sources,
     inline: true,
     areInsidesReadyToBeVisible: true,
-    proudlyDisplayPoweredByUppy: false
-  })) : null, !disabled && withButton && uppy !== null ? /*#__PURE__*/React__default["default"].createElement(react.DashboardModal, {
+    proudlyDisplayPoweredByUppy: false,
+    showProgressDetails: true
+  }))) : null, !showMediaModal && !disabled && withButton && uppy !== null ? /*#__PURE__*/React__default["default"].createElement(react.DashboardModal, {
     uppy: uppy,
     plugins: sources,
     open: modalOpened,
     onRequestClose: closeModal,
     closeModalOnClickOutside: true
-  }) : null);
+  }) : null, showMediaModal ? 'Hello' : null);
 };
 UploadField.propTypes = propTypes;
 UploadField.defaultProps = defaultProps;
-var UploadField$1 = /*#__PURE__*/React__default["default"].memo(UploadField);
 
 var definition = [{
   id: 'upload',
@@ -309,34 +343,68 @@ var definition = [{
 }, {
   id: 'video',
   component: 'Video'
+}, {
+  id: 'document',
+  component: 'Document'
+}, {
+  id: 'font',
+  component: 'Font'
 }];
 
 /* eslint-disable react/jsx-props-no-spreading */
 var AudioField = function AudioField(props) {
-  return /*#__PURE__*/React__default["default"].createElement(UploadField$1, Object.assign({}, props, {
-    types: ['audio']
+  var types = React.useMemo(function () {
+    return ['audio'];
+  }, []);
+  return /*#__PURE__*/React__default["default"].createElement(UploadField, Object.assign({}, props, {
+    types: types
   }));
 };
-var AudioField$1 = /*#__PURE__*/React__default["default"].memo(AudioField);
 
 /* eslint-disable react/jsx-props-no-spreading */
 var ImageField = function ImageField(props) {
-  return /*#__PURE__*/React__default["default"].createElement(UploadField$1, Object.assign({}, props, {
-    types: ['image']
+  var types = React.useMemo(function () {
+    return ['image'];
+  }, []);
+  return /*#__PURE__*/React__default["default"].createElement(UploadField, Object.assign({}, props, {
+    types: types
   }));
 };
-var ImageField$1 = /*#__PURE__*/React__default["default"].memo(ImageField);
 
 /* eslint-disable react/jsx-props-no-spreading */
 var VideoField = function VideoField(props) {
-  return /*#__PURE__*/React__default["default"].createElement(UploadField$1, Object.assign({}, props, {
-    types: ['video']
+  var types = React.useMemo(function () {
+    return ['video'];
+  }, []);
+  return /*#__PURE__*/React__default["default"].createElement(UploadField, Object.assign({}, props, {
+    types: types
+  }));
+};
+
+/* eslint-disable react/jsx-props-no-spreading */
+var DocumentField = function DocumentField(props) {
+  var fileTypes = React.useMemo(function () {
+    return ['.pdf'];
+  }, []);
+  return /*#__PURE__*/React__default["default"].createElement(UploadField, Object.assign({}, props, {
+    fileTypes: fileTypes
+  }));
+};
+
+/* eslint-disable react/jsx-props-no-spreading */
+var FontField = function FontField(props) {
+  var fileTypes = React.useMemo(function () {
+    return ['.ttf', '.otf'];
+  }, []);
+  return /*#__PURE__*/React__default["default"].createElement(UploadField, Object.assign({}, props, {
+    fileTypes: fileTypes
   }));
 };
-var VideoField$1 = /*#__PURE__*/React__default["default"].memo(VideoField);
 
-exports.AudioField = AudioField$1;
-exports.ImageField = ImageField$1;
-exports.VideoField = VideoField$1;
-exports["default"] = UploadField$1;
+exports.AudioField = AudioField;
+exports.DocumentField = DocumentField;
+exports.FontField = FontField;
+exports.ImageField = ImageField;
+exports.VideoField = VideoField;
+exports["default"] = UploadField;
 exports.definition = definition;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/field-upload",
-    "version": "2.0.46",
+    "version": "2.0.56",
     "description": "An Upload field",
     "keywords": [
         "javascript"
@@ -56,11 +56,11 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.35",
         "@fortawesome/free-solid-svg-icons": "^5.15.3",
         "@fortawesome/react-fontawesome": "^0.1.14",
-        "@panneau/core": "^2.0.46",
-        "@panneau/element-button": "^2.0.46",
-        "@panneau/element-card": "^2.0.46",
-        "@panneau/element-label": "^2.0.46",
-        "@panneau/themes": "^2.0.46",
+        "@panneau/core": "^2.0.56",
+        "@panneau/element-button": "^2.0.56",
+        "@panneau/element-card": "^2.0.56",
+        "@panneau/element-label": "^2.0.56",
+        "@panneau/themes": "^2.0.56",
         "@uppy/core": "^3.2.0",
         "@uppy/dashboard": "^3.4.0",
         "@uppy/drag-drop": "^3.0.2",
@@ -78,5 +78,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "566fca41a31122cbbcda4b98cb8395e56eaf9336"
+    "gitHead": "edb76a5622f04136db62c1dd0c4b2e362de6878a"
 }