@panneau/field-upload 3.0.91 → 3.0.95

package/es/index.js

@@ -2,14 +2,10 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 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';
 import classNames from 'classnames';
-import get from 'lodash/get';
 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 { FormattedMessage } from 'react-intl';
@@ -17,6 +13,7 @@ import { PropTypes as PropTypes$1 } from '@panneau/core';
 import { useResourceQuery } from '@panneau/core/hooks';
 import Button from '@panneau/element-button';
 import Label from '@panneau/element-label';
+import { MediaCards } from '@panneau/element-media-card';
 import ResourceItemsList from '@panneau/list-resource-items';
 import Dialog from '@panneau/modal-dialog';
 import { useUppy } from '@panneau/uppy';
@@ -296,93 +293,14 @@ var UploadField = function UploadField(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     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,
-      _media$filename = media.filename,
-      filename = _media$filename === void 0 ? null : _media$filename,
-      _media$size = media.size,
-      fileSize = _media$size === void 0 ? 0 : _media$size,
-      _media$thumbnail_url = media.thumbnail_url,
-      thumbnailUrl = _media$thumbnail_url === void 0 ? null : _media$thumbnail_url,
-      _media$preview = media.preview,
-      preview = _media$preview === void 0 ? null : _media$preview,
-      _media$data = media.data,
-      data = _media$data === void 0 ? {} : _media$data,
-      type = media.type;
-    var _ref6 = data || {},
-      _ref6$file = _ref6.file,
-      file = _ref6$file === void 0 ? null : _ref6$file;
-    var faIcon = null;
-    switch (type) {
-      case 'audio':
-        faIcon = faFileAudio;
-        break;
-      case 'image':
-        faIcon = faFileImage;
-        break;
-      case 'video':
-        faIcon = faFileVideo;
-        break;
-    }
-    var name = (namePath !== null ? get(media || {}, namePath) : null) || filename || file;
-    var thumbnail = (thumbnailPath !== null ? get(media || {}, thumbnailPath) : null) || thumbnailUrl || preview;
-    var size = (sizePath !== null ? get(media || {}, sizePath) : null) || fileSize;
-    var hasThumbnail = preview !== null || thumbnail !== null;
-    return /*#__PURE__*/React.createElement("div", {
-      className: "card mb-1",
-      key: "media-".concat(id),
-      style: {
-        maxWidth: 500
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "d-flex align-items-center"
-    }, hasThumbnail || faIcon !== null ? /*#__PURE__*/React.createElement("div", {
-      className: "p-2 text-center",
-      style: hasThumbnail ? {
-        width: 100,
-        backgroundImage: 'linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%)',
-        backgroundSize: '20px 20px',
-        backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0'
-      } : {
-        width: 100
-      }
-    }, !hasThumbnail && faIcon !== null ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: faIcon,
-      className: "m-auto fs-3"
-    }) : null, hasThumbnail ? /*#__PURE__*/React.createElement("img", {
-      className: "img-fluid",
-      src: thumbnail,
-      alt: "thumbnail",
-      style: {
-        maxHeight: 75
-      }
-    }) : null) : null, /*#__PURE__*/React.createElement("div", {
-      className: "flex-grow-1"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "card-body"
-    }, /*#__PURE__*/React.createElement("h5", {
-      className: classNames(['card-title', 'text-break', 'fs-6', {
-        'mb-1': size !== null && size > 0,
-        'mb-0': size === null || size <= 0
-      }])
-    }, name), size !== null && size > 0 ? /*#__PURE__*/React.createElement("p", {
-      className: "card-text text-muted small"
-    }, prettyBytes(size)) : null)), /*#__PURE__*/React.createElement("div", {
-      className: "p-2"
-    }, /*#__PURE__*/React.createElement(Button, {
-      type: "button",
-      size: "sm",
-      theme: "secondary",
-      outline: true,
-      onClick: function onClick() {
-        return onClickRemove(idx);
-      },
-      disabled: disabled
-    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: faTimes
-    })))));
-  }) : null, (!hasMedia || allowMultipleUploads) && withButton ? /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(MediaCards, {
+    value: values,
+    namePath: namePath,
+    thumbnailPath: thumbnailPath,
+    sizePath: sizePath,
+    disabled: disabled,
+    onClickRemove: onClickRemove
+  }), (!hasMedia || allowMultipleUploads) && withButton ? /*#__PURE__*/React.createElement("div", {
     className: "row"
   }, /*#__PURE__*/React.createElement("div", {
     className: "col-auto"
@@ -471,13 +389,13 @@ var UploadField = function UploadField(_ref) {
       actionsProps: {
         onClickSelect: onClickSelect,
         getSelectPropsFromItem: function getSelectPropsFromItem(item) {
-          var _ref7 = item || {},
-            _ref7$id = _ref7.id,
-            itemId = _ref7$id === void 0 ? null : _ref7$id;
+          var _ref6 = item || {},
+            _ref6$id = _ref6.id,
+            itemId = _ref6$id === void 0 ? null : _ref6$id;
           var found = (modalItems || []).find(function () {
-            var _ref8 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-              _ref8$id = _ref8.id,
-              modalItemId = _ref8$id === void 0 ? null : _ref8$id;
+            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 {

package/lib/index.js

@@ -6,14 +6,10 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 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');
 var classNames = require('classnames');
-var get = require('lodash/get');
 var isArray = require('lodash/isArray');
 var isObject = require('lodash/isObject');
-var prettyBytes = require('pretty-bytes');
 var PropTypes = require('prop-types');
 var React = require('react');
 var reactIntl = require('react-intl');
@@ -21,6 +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 ResourceItemsList = require('@panneau/list-resource-items');
 var Dialog = require('@panneau/modal-dialog');
 var uppy = require('@panneau/uppy');
@@ -36,10 +33,8 @@ var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumab
 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);
 var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
-var prettyBytes__default = /*#__PURE__*/_interopDefaultLegacy(prettyBytes);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
@@ -318,93 +313,14 @@ var UploadField = function UploadField(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("div", {
     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,
-      _media$filename = media.filename,
-      filename = _media$filename === void 0 ? null : _media$filename,
-      _media$size = media.size,
-      fileSize = _media$size === void 0 ? 0 : _media$size,
-      _media$thumbnail_url = media.thumbnail_url,
-      thumbnailUrl = _media$thumbnail_url === void 0 ? null : _media$thumbnail_url,
-      _media$preview = media.preview,
-      preview = _media$preview === void 0 ? null : _media$preview,
-      _media$data = media.data,
-      data = _media$data === void 0 ? {} : _media$data,
-      type = media.type;
-    var _ref6 = data || {},
-      _ref6$file = _ref6.file,
-      file = _ref6$file === void 0 ? null : _ref6$file;
-    var faIcon = null;
-    switch (type) {
-      case 'audio':
-        faIcon = freeSolidSvgIcons.faFileAudio;
-        break;
-      case 'image':
-        faIcon = freeSolidSvgIcons.faFileImage;
-        break;
-      case 'video':
-        faIcon = freeSolidSvgIcons.faFileVideo;
-        break;
-    }
-    var name = (namePath !== null ? get__default["default"](media || {}, namePath) : null) || filename || file;
-    var thumbnail = (thumbnailPath !== null ? get__default["default"](media || {}, thumbnailPath) : null) || thumbnailUrl || preview;
-    var size = (sizePath !== null ? get__default["default"](media || {}, sizePath) : null) || fileSize;
-    var hasThumbnail = preview !== null || thumbnail !== null;
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "card mb-1",
-      key: "media-".concat(id),
-      style: {
-        maxWidth: 500
-      }
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "d-flex align-items-center"
-    }, hasThumbnail || faIcon !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "p-2 text-center",
-      style: hasThumbnail ? {
-        width: 100,
-        backgroundImage: 'linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%)',
-        backgroundSize: '20px 20px',
-        backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0'
-      } : {
-        width: 100
-      }
-    }, !hasThumbnail && faIcon !== null ? /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-      icon: faIcon,
-      className: "m-auto fs-3"
-    }) : null, hasThumbnail ? /*#__PURE__*/React__default["default"].createElement("img", {
-      className: "img-fluid",
-      src: thumbnail,
-      alt: "thumbnail",
-      style: {
-        maxHeight: 75
-      }
-    }) : null) : null, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "flex-grow-1"
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "card-body"
-    }, /*#__PURE__*/React__default["default"].createElement("h5", {
-      className: classNames__default["default"](['card-title', 'text-break', 'fs-6', {
-        'mb-1': size !== null && size > 0,
-        'mb-0': size === null || size <= 0
-      }])
-    }, name), size !== null && size > 0 ? /*#__PURE__*/React__default["default"].createElement("p", {
-      className: "card-text text-muted small"
-    }, prettyBytes__default["default"](size)) : null)), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "p-2"
-    }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
-      type: "button",
-      size: "sm",
-      theme: "secondary",
-      outline: true,
-      onClick: function onClick() {
-        return onClickRemove(idx);
-      },
-      disabled: disabled
-    }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-      icon: freeSolidSvgIcons.faTimes
-    })))));
-  }) : null, (!hasMedia || allowMultipleUploads) && withButton ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement(elementMediaCard.MediaCards, {
+    value: values,
+    namePath: namePath,
+    thumbnailPath: thumbnailPath,
+    sizePath: sizePath,
+    disabled: disabled,
+    onClickRemove: onClickRemove
+  }), (!hasMedia || allowMultipleUploads) && withButton ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "row"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "col-auto"
@@ -493,13 +409,13 @@ var UploadField = function UploadField(_ref) {
       actionsProps: {
         onClickSelect: onClickSelect,
         getSelectPropsFromItem: function getSelectPropsFromItem(item) {
-          var _ref7 = item || {},
-            _ref7$id = _ref7.id,
-            itemId = _ref7$id === void 0 ? null : _ref7$id;
+          var _ref6 = item || {},
+            _ref6$id = _ref6.id,
+            itemId = _ref6$id === void 0 ? null : _ref6$id;
           var found = (modalItems || []).find(function () {
-            var _ref8 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-              _ref8$id = _ref8.id,
-              modalItemId = _ref8$id === void 0 ? null : _ref8$id;
+            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 {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/field-upload",
-    "version": "3.0.91",
+    "version": "3.0.95",
     "description": "An Upload field",
     "keywords": [
         "javascript"
@@ -59,8 +59,8 @@
         "@fortawesome/react-fontawesome": "^0.1.14",
         "@panneau/core": "^3.0.45",
         "@panneau/element-button": "^3.0.55",
-        "@panneau/element-card": "^3.0.75",
         "@panneau/element-label": "^3.0.45",
+        "@panneau/element-media-card": "^3.0.95",
         "@panneau/list-resource-items": "^3.0.91",
         "@panneau/modal-dialog": "^3.0.77",
         "@panneau/themes": "^3.0.55",
@@ -75,12 +75,11 @@
         "@uppy/utils": "^5.5.0",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
-        "pretty-bytes": "^5.4.1",
         "prop-types": "^15.7.2",
         "react-intl": "^5.15.8||^6.0.0"
     },
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "a8a807211fd09f324a306d105e1b46f211f94b09"
+    "gitHead": "599e92b3a8564b896e6361ce9f44be9d664bd93b"
 }