@panneau/field-upload 2.0.63 → 2.0.69

package/es/index.js

@@ -10,12 +10,14 @@ import isArray from 'lodash/isArray';
 import isObject from 'lodash/isObject';
 import prettyBytes from 'pretty-bytes';
 import PropTypes from 'prop-types';
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { PropTypes as PropTypes$1 } from '@panneau/core';
 import { useUppy } from '@panneau/core/contexts';
 import Button from '@panneau/element-button';
 import Label from '@panneau/element-label';
+import ResourceItemsList from '@panneau/list-resource-items';
+import Dialog from '@panneau/modal-dialog';
 import '@uppy/core/dist/style.min.css';
 import '@uppy/dashboard/dist/style.min.css';
 import '@uppy/drag-drop/dist/style.min.css';
@@ -33,7 +35,7 @@ var propTypes = {
   fileTypes: PropTypes.arrayOf(PropTypes.string),
   sources: PropTypes.arrayOf(PropTypes.oneOf(['webcam', 'facebook', 'instagram', 'dropbox', 'google-drive'])),
   withButton: PropTypes.bool,
-  withSearchModal: PropTypes.bool,
+  withResourceList: PropTypes.bool,
   addButtonLabel: PropTypes$1.label,
   searchButtonLabel: PropTypes$1.label,
   allowMultipleUploads: PropTypes.bool,
@@ -52,7 +54,7 @@ var defaultProps = {
   fileTypes: null,
   sources: ['webcam', 'facebook', 'instagram', 'dropbox', 'google-drive'],
   withButton: false,
-  withSearchModal: false,
+  withResourceList: false,
   addButtonLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "NI9440",
     defaultMessage: [{
@@ -83,7 +85,7 @@ var UploadField = function UploadField(_ref) {
     fileTypes = _ref.fileTypes,
     sources = _ref.sources,
     withButton = _ref.withButton,
-    withSearchModal = _ref.withSearchModal,
+    withResourceList = _ref.withResourceList,
     addButtonLabel = _ref.addButtonLabel,
     searchButtonLabel = _ref.searchButtonLabel,
     allowMultipleUploads = _ref.allowMultipleUploads,
@@ -99,14 +101,6 @@ var UploadField = function UploadField(_ref) {
   // const { contentRect } = entry || {};
   // const { width: containerWidth = null } = contentRect || {};
 
-  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;
@@ -148,6 +142,16 @@ var UploadField = function UploadField(_ref) {
     autoProceed: true,
     onComplete: onComplete
   });
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    modalOpened = _useState2[0],
+    setModalOpened = _useState2[1];
+  var openModal = useCallback(function () {
+    setModalOpened(true);
+  }, [setModalOpened]);
+  var closeModal = useCallback(function () {
+    setModalOpened(false);
+  }, [setModalOpened]);
   var onClickRemove = useCallback(function (idx) {
     if (onChange !== null && isArray(value) && value.length > 1) {
       onChange(value.filter(function (v, i) {
@@ -157,16 +161,6 @@ var UploadField = function UploadField(_ref) {
       onChange(null);
     }
   }, [value, onChange]);
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    modalOpened = _useState4[0],
-    setModalOpened = _useState4[1];
-  var openModal = useCallback(function () {
-    setModalOpened(true);
-  }, [setModalOpened]);
-  var closeModal = useCallback(function () {
-    setModalOpened(false);
-  }, [setModalOpened]);
   var values = useMemo(function () {
     if (isArray(value)) {
       return value;
@@ -174,9 +168,27 @@ var UploadField = function UploadField(_ref) {
     return value !== null ? [value] : null;
   }, [value]);
   var hasMedia = values !== null && values.length > 0;
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    resourceModalOpen = _useState4[0],
+    setResourceModalOpen = _useState4[1];
+  var showResourceModal = withResourceList && resourceModalOpen;
+  var toggleResourceModal = useCallback(function () {
+    setResourceModalOpen(!resourceModalOpen);
+  }, [resourceModalOpen, setResourceModalOpen]);
+  var closeResourceModal = useCallback(function () {
+    setResourceModalOpen(false);
+  }, [resourceModalOpen, setResourceModalOpen]);
+  var onClickSelect = useCallback(function (newValue) {
+    if (onChange !== null) {
+      console.log(newValue, onChange);
+      onChange(newValue);
+      setResourceModalOpen(false);
+    }
+  }, [onChange, setResourceModalOpen]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
-    ref: containerRef
+    className: classNames([styles.container, _defineProperty({}, className, className !== null)])
+    // ref={containerRef}
   }, values !== null ? values.map(function (media, idx) {
     var _media$id = media.id,
       id = _media$id === void 0 ? null : _media$id,
@@ -272,14 +284,14 @@ var UploadField = function UploadField(_ref) {
     theme: "primary",
     onClick: openModal,
     disabled: disabled
-  }, /*#__PURE__*/React.createElement(Label, null, addButtonLabel))), withSearchModal ? /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Label, null, addButtonLabel))), withResourceList ? /*#__PURE__*/React.createElement("div", {
     className: "col-auto ps-0"
   }, /*#__PURE__*/React.createElement(Button, {
     type: "button",
     theme: "primary",
-    onClick: toggleSearchModal,
+    onClick: toggleResourceModal,
     disabled: disabled
-  }, /*#__PURE__*/React.createElement(Label, null, searchButtonLabel))) : null) : null, !showMediaModal && !disabled && !hasMedia && !withButton && uppy !== null ? /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Label, null, searchButtonLabel))) : null) : null, !showResourceModal && !disabled && !hasMedia && !withButton && uppy !== null ? /*#__PURE__*/React.createElement("div", {
     className: styles.dashboard
   }, /*#__PURE__*/React.createElement(Dashboard, Object.assign({
     uppy: uppy
@@ -296,13 +308,25 @@ var UploadField = function UploadField(_ref) {
     areInsidesReadyToBeVisible: true,
     proudlyDisplayPoweredByUppy: false,
     showProgressDetails: true
-  }))) : null, !showMediaModal && !disabled && withButton && uppy !== null ? /*#__PURE__*/React.createElement(DashboardModal, {
+  }))) : null, !showResourceModal && !disabled && withButton && uppy !== null ? /*#__PURE__*/React.createElement(DashboardModal, {
     uppy: uppy,
     plugins: sources,
     open: modalOpened,
     onRequestClose: closeModal,
     closeModalOnClickOutside: true
-  }) : null, showMediaModal ? 'Hello' : null);
+  }) : null, showResourceModal ? /*#__PURE__*/React.createElement(Dialog, {
+    title: /*#__PURE__*/React.createElement(Label, null, searchButtonLabel),
+    size: "lg",
+    onClickClose: closeResourceModal
+  }, /*#__PURE__*/React.createElement(ResourceItemsList, {
+    resource: "medias",
+    listProps: {
+      actions: ['select'],
+      actionsProps: {
+        onClickSelect: onClickSelect
+      }
+    }
+  })) : null);
 };
 UploadField.propTypes = propTypes;
 UploadField.defaultProps = defaultProps;

package/lib/index.js

@@ -20,6 +20,8 @@ var core = require('@panneau/core');
 var contexts = require('@panneau/core/contexts');
 var Button = require('@panneau/element-button');
 var Label = require('@panneau/element-label');
+var ResourceItemsList = require('@panneau/list-resource-items');
+var Dialog = require('@panneau/modal-dialog');
 require('@uppy/core/dist/style.min.css');
 require('@uppy/dashboard/dist/style.min.css');
 require('@uppy/drag-drop/dist/style.min.css');
@@ -39,6 +41,8 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var Label__default = /*#__PURE__*/_interopDefaultLegacy(Label);
+var ResourceItemsList__default = /*#__PURE__*/_interopDefaultLegacy(ResourceItemsList);
+var Dialog__default = /*#__PURE__*/_interopDefaultLegacy(Dialog);
 
 var styles = {"container":"panneau-field-upload-container","dashboard":"panneau-field-upload-dashboard"};
 
@@ -52,7 +56,7 @@ 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,
+  withResourceList: PropTypes__default["default"].bool,
   addButtonLabel: core.PropTypes.label,
   searchButtonLabel: core.PropTypes.label,
   allowMultipleUploads: PropTypes__default["default"].bool,
@@ -71,7 +75,7 @@ var defaultProps = {
   fileTypes: null,
   sources: ['webcam', 'facebook', 'instagram', 'dropbox', 'google-drive'],
   withButton: false,
-  withSearchModal: false,
+  withResourceList: false,
   addButtonLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
     id: "NI9440",
     defaultMessage: [{
@@ -102,7 +106,7 @@ var UploadField = function UploadField(_ref) {
     fileTypes = _ref.fileTypes,
     sources = _ref.sources,
     withButton = _ref.withButton,
-    withSearchModal = _ref.withSearchModal,
+    withResourceList = _ref.withResourceList,
     addButtonLabel = _ref.addButtonLabel,
     searchButtonLabel = _ref.searchButtonLabel,
     allowMultipleUploads = _ref.allowMultipleUploads,
@@ -118,14 +122,6 @@ var UploadField = function UploadField(_ref) {
   // const { contentRect } = entry || {};
   // const { width: containerWidth = null } = contentRect || {};
 
-  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;
@@ -167,6 +163,16 @@ var UploadField = function UploadField(_ref) {
     autoProceed: true,
     onComplete: onComplete
   });
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    modalOpened = _useState2[0],
+    setModalOpened = _useState2[1];
+  var openModal = React.useCallback(function () {
+    setModalOpened(true);
+  }, [setModalOpened]);
+  var closeModal = React.useCallback(function () {
+    setModalOpened(false);
+  }, [setModalOpened]);
   var onClickRemove = React.useCallback(function (idx) {
     if (onChange !== null && isArray__default["default"](value) && value.length > 1) {
       onChange(value.filter(function (v, i) {
@@ -176,16 +182,6 @@ var UploadField = function UploadField(_ref) {
       onChange(null);
     }
   }, [value, onChange]);
-  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]);
-  var closeModal = React.useCallback(function () {
-    setModalOpened(false);
-  }, [setModalOpened]);
   var values = React.useMemo(function () {
     if (isArray__default["default"](value)) {
       return value;
@@ -193,9 +189,27 @@ var UploadField = function UploadField(_ref) {
     return value !== null ? [value] : null;
   }, [value]);
   var hasMedia = values !== null && values.length > 0;
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    resourceModalOpen = _useState4[0],
+    setResourceModalOpen = _useState4[1];
+  var showResourceModal = withResourceList && resourceModalOpen;
+  var toggleResourceModal = React.useCallback(function () {
+    setResourceModalOpen(!resourceModalOpen);
+  }, [resourceModalOpen, setResourceModalOpen]);
+  var closeResourceModal = React.useCallback(function () {
+    setResourceModalOpen(false);
+  }, [resourceModalOpen, setResourceModalOpen]);
+  var onClickSelect = React.useCallback(function (newValue) {
+    if (onChange !== null) {
+      console.log(newValue, onChange);
+      onChange(newValue);
+      setResourceModalOpen(false);
+    }
+  }, [onChange, setResourceModalOpen]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)]),
-    ref: containerRef
+    className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)])
+    // ref={containerRef}
   }, values !== null ? values.map(function (media, idx) {
     var _media$id = media.id,
       id = _media$id === void 0 ? null : _media$id,
@@ -291,14 +305,14 @@ var UploadField = function UploadField(_ref) {
     theme: "primary",
     onClick: openModal,
     disabled: disabled
-  }, /*#__PURE__*/React__default["default"].createElement(Label__default["default"], null, addButtonLabel))), withSearchModal ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement(Label__default["default"], null, addButtonLabel))), withResourceList ? /*#__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,
+    onClick: toggleResourceModal,
     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", {
+  }, /*#__PURE__*/React__default["default"].createElement(Label__default["default"], null, searchButtonLabel))) : null) : null, !showResourceModal && !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
@@ -315,13 +329,25 @@ var UploadField = function UploadField(_ref) {
     areInsidesReadyToBeVisible: true,
     proudlyDisplayPoweredByUppy: false,
     showProgressDetails: true
-  }))) : null, !showMediaModal && !disabled && withButton && uppy !== null ? /*#__PURE__*/React__default["default"].createElement(react.DashboardModal, {
+  }))) : null, !showResourceModal && !disabled && withButton && uppy !== null ? /*#__PURE__*/React__default["default"].createElement(react.DashboardModal, {
     uppy: uppy,
     plugins: sources,
     open: modalOpened,
     onRequestClose: closeModal,
     closeModalOnClickOutside: true
-  }) : null, showMediaModal ? 'Hello' : null);
+  }) : null, showResourceModal ? /*#__PURE__*/React__default["default"].createElement(Dialog__default["default"], {
+    title: /*#__PURE__*/React__default["default"].createElement(Label__default["default"], null, searchButtonLabel),
+    size: "lg",
+    onClickClose: closeResourceModal
+  }, /*#__PURE__*/React__default["default"].createElement(ResourceItemsList__default["default"], {
+    resource: "medias",
+    listProps: {
+      actions: ['select'],
+      actionsProps: {
+        onClickSelect: onClickSelect
+      }
+    }
+  })) : null);
 };
 UploadField.propTypes = propTypes;
 UploadField.defaultProps = defaultProps;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/field-upload",
-    "version": "2.0.63",
+    "version": "2.0.69",
     "description": "An Upload field",
     "keywords": [
         "javascript"
@@ -56,11 +56,13 @@
         "@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.58",
-        "@panneau/element-button": "^2.0.59",
-        "@panneau/element-card": "^2.0.59",
-        "@panneau/element-label": "^2.0.58",
-        "@panneau/themes": "^2.0.58",
+        "@panneau/core": "^2.0.69",
+        "@panneau/element-button": "^2.0.69",
+        "@panneau/element-card": "^2.0.69",
+        "@panneau/element-label": "^2.0.69",
+        "@panneau/list-resource-items": "^2.0.69",
+        "@panneau/modal-dialog": "^2.0.69",
+        "@panneau/themes": "^2.0.69",
         "@uppy/core": "^3.2.0",
         "@uppy/dashboard": "^3.4.0",
         "@uppy/drag-drop": "^3.0.2",
@@ -78,5 +80,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "4432fa22a428871edfc28d1942d108717c852504"
+    "gitHead": "270c1e84966861e94a390d20ee525c33f7edadb0"
 }