@blaze-cms/plugin-media-ui 0.146.0-alpha.13 → 0.146.0-alpha.14

package/src/components/ListingContainer/Listing/Listing.js

@@ -12,6 +12,7 @@ const Listing = ({
   handleDisplayFileUploadModal,
   getSelectedFiles,
   setDisplayFileUploadModal,
+  closeModalAndSetValue,
   simpleLayout
 }) => (
   <div className="page">
@@ -21,6 +22,8 @@ const Listing = ({
           handleDisplayFileUploadModal(false);
           setDisplayFileUploadModal(false);
         }}
+        closeModalAndSetValue={closeModalAndSetValue}
+        simpleLayout={simpleLayout}
         getSelectedFiles={getSelectedFiles}
       />
     )}
@@ -57,10 +60,12 @@ Listing.propTypes = {
   handleDisplayFileUploadModal: PropTypes.func,
   simpleLayout: PropTypes.bool,
   setDisplayFileUploadModal: PropTypes.func.isRequired,
-  displayFileUploadModal: PropTypes.bool.isRequired
+  displayFileUploadModal: PropTypes.bool.isRequired,
+  closeModalAndSetValue: PropTypes.func
 };
 
 Listing.defaultProps = {
+  closeModalAndSetValue: () => {},
   handleDisplayFileUploadModal: () => {},
   simpleLayout: false
 };

package/src/components/ListingContainer/ListingContainer.js

@@ -15,6 +15,7 @@ const ListingContainer = ({
   filesSelected,
   displayFileUploadModal,
   setDisplayFileUploadModal,
+  closeModalAndSetValue,
   simpleLayout
 }) => {
   const [selectedFiles, setSelectedFiles] = useState(filesSelected || []);
@@ -31,7 +32,13 @@ const ListingContainer = ({
   });
   if (loading) return null;
 
-  const getSelectedFiles = ({ id }) => {
+  const getSelectedFiles = (file, files) => {
+    if (simpleLayout) {
+      handleSelectedFiles(files, false);
+      setSelectedFiles(files);
+      return;
+    }
+    const { id } = file;
     const existPreviousFile = existPrevious(selectedFiles, id);
     if (maxItems === selectedFiles.length && !existPreviousFile) {
       handleSelectedFiles([id], false);
@@ -67,11 +74,14 @@ const ListingContainer = ({
         }}>
         <FilesListProvider>
           <Listing
+            closeModalAndSetValue={closeModalAndSetValue}
             simpleLayout={simpleLayout}
             getSelectedFiles={getSelectedFiles}
             setDisplayFileUploadModal={setDisplayFileUploadModal}
             displayFileUploadModal={displayFileUploadModal}
             handleDisplayFileUploadModal={handleDisplayFileUploadModal}
+            setSelectedFiles={setSelectedFiles}
+            handleSelectedFiles={handleSelectedFiles}
           />
         </FilesListProvider>
       </MediaContextProvider>
@@ -85,10 +95,12 @@ ListingContainer.propTypes = {
   filesSelected: PropTypes.arrayOf(PropTypes.string),
   simpleLayout: PropTypes.bool,
   setDisplayFileUploadModal: PropTypes.func.isRequired,
-  displayFileUploadModal: PropTypes.bool.isRequired
+  displayFileUploadModal: PropTypes.bool.isRequired,
+  closeModalAndSetValue: PropTypes.func
 };
 
 ListingContainer.defaultProps = {
+  closeModalAndSetValue: () => {},
   handleSelectedFiles: () => {},
   maxItems: false,
   filesSelected: [],

package/src/utils/media-context/media-context.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const MediaContext = React.createContext();
+const MediaContext = React.createContext({});
 const MediaContextProvider = MediaContext.Provider;
 const MediaContextConsumer = MediaContext.Consumer;
 

package/lib/components/FilePreview/Image/ReadOnly.js

@@ -1,47 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.object.define-property.js");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ReadOnly = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-require("core-js/modules/es.function.name.js");
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var ReadOnly = exports.ReadOnly = function ReadOnly(_ref) {
-  var url = _ref.url,
-    name = _ref.name,
-    file = _ref.file;
-  var _file$mimetype$split = file.mimetype.split('/'),
-    _file$mimetype$split2 = (0, _slicedToArray2["default"])(_file$mimetype$split, 2),
-    extension = _file$mimetype$split2[1];
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "FilePreview"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "FilePreviewItem"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "FilePreviewItem__wrapper"
-  }, /*#__PURE__*/_react["default"].createElement("img", {
-    className: "FilePreviewItem__wrapper__image",
-    src: url,
-    alt: name
-  })), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "FilePreviewItem__info"
-  }, /*#__PURE__*/_react["default"].createElement("p", {
-    className: "FilePreviewItem__info__fileName"
-  }, name), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "FilePreviewItem__info__actions"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "FilePreviewItem__info__actions FilePreviewItem__info__actions--media-type"
-  }, /*#__PURE__*/_react["default"].createElement("i", {
-    className: "FilePreviewItem__info__actionsIcon material-icons"
-  }, "insert_photo"), ' ', /*#__PURE__*/_react["default"].createElement("span", null, extension))))));
-};
-ReadOnly.propTypes = {
-  url: _propTypes["default"].string.isRequired,
-  name: _propTypes["default"].string.isRequired,
-  file: _propTypes["default"].object.isRequired
-};
-//# sourceMappingURL=ReadOnly.js.map

package/lib/components/FilePreview/Image/ReadOnly.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ReadOnly.js","names":["_react","_interopRequireDefault","require","_propTypes","ReadOnly","exports","_ref","url","name","file","_file$mimetype$split","mimetype","split","_file$mimetype$split2","_slicedToArray2","extension","createElement","className","src","alt","propTypes","PropTypes","string","isRequired","object"],"sources":["../../../../src/components/FilePreview/Image/ReadOnly.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst ReadOnly = ({ url, name, file }) => {\n  const [, extension] = file.mimetype.split('/');\n\n  return (\n    <div className=\"FilePreview\">\n      <div className=\"FilePreviewItem\">\n        <div className=\"FilePreviewItem__wrapper\">\n          <img className=\"FilePreviewItem__wrapper__image\" src={url} alt={name} />\n        </div>\n        <div className=\"FilePreviewItem__info\">\n          <p className=\"FilePreviewItem__info__fileName\">{name}</p>\n          <div className=\"FilePreviewItem__info__actions\">\n            <div className=\"FilePreviewItem__info__actions FilePreviewItem__info__actions--media-type\">\n              <i className=\"FilePreviewItem__info__actionsIcon material-icons\">insert_photo</i>{' '}\n              <span>{extension}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nReadOnly.propTypes = {\n  url: PropTypes.string.isRequired,\n  name: PropTypes.string.isRequired,\n  file: PropTypes.object.isRequired\n};\n\nexport { ReadOnly };\n"],"mappings":";;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AAEA,IAAME,QAAQ,GAAAC,OAAA,CAAAD,QAAA,GAAG,SAAXA,QAAQA,CAAAE,IAAA,EAA4B;EAAA,IAAtBC,GAAG,GAAAD,IAAA,CAAHC,GAAG;IAAEC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IAAEC,IAAI,GAAAH,IAAA,CAAJG,IAAI;EACjC,IAAAC,oBAAA,GAAsBD,IAAI,CAACE,QAAQ,CAACC,KAAK,CAAC,GAAG,CAAC;IAAAC,qBAAA,OAAAC,eAAA,aAAAJ,oBAAA;IAArCK,SAAS,GAAAF,qBAAA;EAElB,oBACEb,MAAA,YAAAgB,aAAA;IAAKC,SAAS,EAAC;EAAa,gBAC1BjB,MAAA,YAAAgB,aAAA;IAAKC,SAAS,EAAC;EAAiB,gBAC9BjB,MAAA,YAAAgB,aAAA;IAAKC,SAAS,EAAC;EAA0B,gBACvCjB,MAAA,YAAAgB,aAAA;IAAKC,SAAS,EAAC,iCAAiC;IAACC,GAAG,EAAEX,GAAI;IAACY,GAAG,EAAEX;EAAK,CAAE,CACpE,CAAC,eACNR,MAAA,YAAAgB,aAAA;IAAKC,SAAS,EAAC;EAAuB,gBACpCjB,MAAA,YAAAgB,aAAA;IAAGC,SAAS,EAAC;EAAiC,GAAET,IAAQ,CAAC,eACzDR,MAAA,YAAAgB,aAAA;IAAKC,SAAS,EAAC;EAAgC,gBAC7CjB,MAAA,YAAAgB,aAAA;IAAKC,SAAS,EAAC;EAA2E,gBACxFjB,MAAA,YAAAgB,aAAA;IAAGC,SAAS,EAAC;EAAmD,GAAC,cAAe,CAAC,EAAC,GAAG,eACrFjB,MAAA,YAAAgB,aAAA,eAAOD,SAAgB,CACpB,CACF,CACF,CACF,CACF,CAAC;AAEV,CAAC;AAEDX,QAAQ,CAACgB,SAAS,GAAG;EACnBb,GAAG,EAAEc,qBAAS,CAACC,MAAM,CAACC,UAAU;EAChCf,IAAI,EAAEa,qBAAS,CAACC,MAAM,CAACC,UAAU;EACjCd,IAAI,EAAEY,qBAAS,CAACG,MAAM,CAACD;AACzB,CAAC"}

package/lib-es/components/FilePreview/Image/ReadOnly.js

@@ -1,37 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-const ReadOnly = ({
-  url,
-  name,
-  file
-}) => {
-  const [, extension] = file.mimetype.split('/');
-  return /*#__PURE__*/React.createElement("div", {
-    className: "FilePreview"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "FilePreviewItem"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "FilePreviewItem__wrapper"
-  }, /*#__PURE__*/React.createElement("img", {
-    className: "FilePreviewItem__wrapper__image",
-    src: url,
-    alt: name
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "FilePreviewItem__info"
-  }, /*#__PURE__*/React.createElement("p", {
-    className: "FilePreviewItem__info__fileName"
-  }, name), /*#__PURE__*/React.createElement("div", {
-    className: "FilePreviewItem__info__actions"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "FilePreviewItem__info__actions FilePreviewItem__info__actions--media-type"
-  }, /*#__PURE__*/React.createElement("i", {
-    className: "FilePreviewItem__info__actionsIcon material-icons"
-  }, "insert_photo"), ' ', /*#__PURE__*/React.createElement("span", null, extension))))));
-};
-ReadOnly.propTypes = {
-  url: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  file: PropTypes.object.isRequired
-};
-export { ReadOnly };
-//# sourceMappingURL=ReadOnly.js.map

package/lib-es/components/FilePreview/Image/ReadOnly.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ReadOnly.js","names":["React","PropTypes","ReadOnly","url","name","file","extension","mimetype","split","createElement","className","src","alt","propTypes","string","isRequired","object"],"sources":["../../../../src/components/FilePreview/Image/ReadOnly.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst ReadOnly = ({ url, name, file }) => {\n  const [, extension] = file.mimetype.split('/');\n\n  return (\n    <div className=\"FilePreview\">\n      <div className=\"FilePreviewItem\">\n        <div className=\"FilePreviewItem__wrapper\">\n          <img className=\"FilePreviewItem__wrapper__image\" src={url} alt={name} />\n        </div>\n        <div className=\"FilePreviewItem__info\">\n          <p className=\"FilePreviewItem__info__fileName\">{name}</p>\n          <div className=\"FilePreviewItem__info__actions\">\n            <div className=\"FilePreviewItem__info__actions FilePreviewItem__info__actions--media-type\">\n              <i className=\"FilePreviewItem__info__actionsIcon material-icons\">insert_photo</i>{' '}\n              <span>{extension}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nReadOnly.propTypes = {\n  url: PropTypes.string.isRequired,\n  name: PropTypes.string.isRequired,\n  file: PropTypes.object.isRequired\n};\n\nexport { ReadOnly };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAElC,MAAMC,QAAQ,GAAGA,CAAC;EAAEC,GAAG;EAAEC,IAAI;EAAEC;AAAK,CAAC,KAAK;EACxC,MAAM,GAAGC,SAAS,CAAC,GAAGD,IAAI,CAACE,QAAQ,CAACC,KAAK,CAAC,GAAG,CAAC;EAE9C,oBACER,KAAA,CAAAS,aAAA;IAAKC,SAAS,EAAC;EAAa,gBAC1BV,KAAA,CAAAS,aAAA;IAAKC,SAAS,EAAC;EAAiB,gBAC9BV,KAAA,CAAAS,aAAA;IAAKC,SAAS,EAAC;EAA0B,gBACvCV,KAAA,CAAAS,aAAA;IAAKC,SAAS,EAAC,iCAAiC;IAACC,GAAG,EAAER,GAAI;IAACS,GAAG,EAAER;EAAK,CAAE,CACpE,CAAC,eACNJ,KAAA,CAAAS,aAAA;IAAKC,SAAS,EAAC;EAAuB,gBACpCV,KAAA,CAAAS,aAAA;IAAGC,SAAS,EAAC;EAAiC,GAAEN,IAAQ,CAAC,eACzDJ,KAAA,CAAAS,aAAA;IAAKC,SAAS,EAAC;EAAgC,gBAC7CV,KAAA,CAAAS,aAAA;IAAKC,SAAS,EAAC;EAA2E,gBACxFV,KAAA,CAAAS,aAAA;IAAGC,SAAS,EAAC;EAAmD,GAAC,cAAe,CAAC,EAAC,GAAG,eACrFV,KAAA,CAAAS,aAAA,eAAOH,SAAgB,CACpB,CACF,CACF,CACF,CACF,CAAC;AAEV,CAAC;AAEDJ,QAAQ,CAACW,SAAS,GAAG;EACnBV,GAAG,EAAEF,SAAS,CAACa,MAAM,CAACC,UAAU;EAChCX,IAAI,EAAEH,SAAS,CAACa,MAAM,CAACC,UAAU;EACjCV,IAAI,EAAEJ,SAAS,CAACe,MAAM,CAACD;AACzB,CAAC;AAED,SAASb,QAAQ"}

package/src/components/FilePreview/Image/ReadOnly.js

@@ -1,33 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const ReadOnly = ({ url, name, file }) => {
-  const [, extension] = file.mimetype.split('/');
-
-  return (
-    <div className="FilePreview">
-      <div className="FilePreviewItem">
-        <div className="FilePreviewItem__wrapper">
-          <img className="FilePreviewItem__wrapper__image" src={url} alt={name} />
-        </div>
-        <div className="FilePreviewItem__info">
-          <p className="FilePreviewItem__info__fileName">{name}</p>
-          <div className="FilePreviewItem__info__actions">
-            <div className="FilePreviewItem__info__actions FilePreviewItem__info__actions--media-type">
-              <i className="FilePreviewItem__info__actionsIcon material-icons">insert_photo</i>{' '}
-              <span>{extension}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-ReadOnly.propTypes = {
-  url: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  file: PropTypes.object.isRequired
-};
-
-export { ReadOnly };