@blaze-cms/plugin-media-ui 0.146.0-translations.6 → 0.147.0-rc-eagle.2

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

@@ -13,11 +13,16 @@ const Listing = ({
   getSelectedFiles,
   setDisplayFileUploadModal,
   closeModalAndSetValue,
-  simpleLayout
+  simpleLayout,
+  openEditInModal,
+  storeKey,
+  selectedStoreKey
 }) => (
   <div className="page">
     {displayFileUploadModal && (
       <FileUploadModal
+        selectedStoreKey={selectedStoreKey}
+        storeKey={storeKey}
         onClose={() => {
           handleDisplayFileUploadModal(false);
           setDisplayFileUploadModal(false);
@@ -36,7 +41,7 @@ const Listing = ({
               onClick={() => {
                 handleDisplayFileUploadModal(true);
               }}>
-              Add
+              Upload
             </Button>
             <More displayBg>
               <More.Avatar isMoreMenu>
@@ -48,7 +53,7 @@ const Listing = ({
         </PageHeader>
         <div className="page__content page__content--with-side-panel">
           <FilterPanel />
-          <MediaListing />
+          <MediaListing openEditInModal={openEditInModal} />
         </div>
       </>
     )}
@@ -61,13 +66,18 @@ Listing.propTypes = {
   simpleLayout: PropTypes.bool,
   setDisplayFileUploadModal: PropTypes.func.isRequired,
   displayFileUploadModal: PropTypes.bool.isRequired,
-  closeModalAndSetValue: PropTypes.func
+  closeModalAndSetValue: PropTypes.func,
+  openEditInModal: PropTypes.bool,
+  storeKey: PropTypes.string.isRequired,
+  selectedStoreKey: PropTypes.string
 };
 
 Listing.defaultProps = {
   closeModalAndSetValue: () => {},
   handleDisplayFileUploadModal: () => {},
-  simpleLayout: false
+  simpleLayout: false,
+  openEditInModal: false,
+  selectedStoreKey: null
 };
 
 export default Listing;

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

@@ -18,33 +18,23 @@ const MediaFileList = ({
   setDisplayCardPrompt,
   displayLayout,
   wrapperRef,
-  modalTargetRef
+  modalTargetRef,
+  openEditInModal
 }) => {
   const [currentListIndex, setCurrentListIndex] = useState(1);
   const [verifiedRanges, setVerifiedRanges] = useState([]);
   const [listHeight, setListHeight] = useState(null);
-  const {
-    queryParams,
-    data,
-    loading,
-    setQueryParams,
-    clearList,
-    removeFile,
-    updateFile
-  } = useFileList();
+  const { queryParams, data, loading, setQueryParams, clearList, removeFile, updateFile } =
+    useFileList();
 
-  const { onClickPrompt, getSelectedFiles, selectedFiles, selectedFilter } = useMediaContext(
-    MediaContext
-  );
+  const { onClickPrompt, getSelectedFiles, selectedFiles, selectedFilter } =
+    useMediaContext(MediaContext);
 
   const hasFiles = !!data.files && !!data.files.length;
 
-  useEffect(
-    () => {
-      if (!loading && !hasFiles) setDisplayCardPrompt(true);
-    },
-    [loading, hasFiles, setDisplayCardPrompt]
-  );
+  useEffect(() => {
+    if (!loading && !hasFiles) setDisplayCardPrompt(true);
+  }, [loading, hasFiles, setDisplayCardPrompt]);
 
   useEffect(
     () => {
@@ -87,22 +77,19 @@ const MediaFileList = ({
     }
   };
 
-  useEffect(
-    () => {
-      const handleListHeight = () => {
-        setListHeight(wrapperRef.current.clientHeight - 40);
-      };
+  useEffect(() => {
+    const handleListHeight = () => {
+      setListHeight(wrapperRef.current.clientHeight - 40);
+    };
 
-      if (wrapperRef.current) {
-        handleListHeight();
-        window.addEventListener('resize', handleListHeight);
-      }
-      return () => {
-        window.removeEventListener('resize', handleListHeight);
-      };
-    },
-    [listHeight, wrapperRef]
-  );
+    if (wrapperRef.current) {
+      handleListHeight();
+      window.addEventListener('resize', handleListHeight);
+    }
+    return () => {
+      window.removeEventListener('resize', handleListHeight);
+    };
+  }, [listHeight, wrapperRef]);
 
   const searchedTerm = queryParams.searchTerm && `${queryParams.searchTerm} -`;
 
@@ -122,7 +109,7 @@ const MediaFileList = ({
             scrollToIndex={currentListIndex}
             onItemsRendered={handleRenderedItems}
             renderItem={({ index, style }) => {
-              const { name, url, mimetype, id } = data.files[index];
+              const { name, url, mimetype, id, data: fileData, updated } = data.files[index];
               const isSelected = existPrevious(selectedFiles, id);
               return (
                 <div key={index} style={style} className="list__item--resultWrapper">
@@ -141,6 +128,9 @@ const MediaFileList = ({
                     id={id}
                     index={index}
                     removeFile={removeFile}
+                    openEditInModal={openEditInModal}
+                    data={fileData}
+                    updated={updated}
                   />
                 </div>
               );
@@ -151,7 +141,7 @@ const MediaFileList = ({
       {displayCardPrompt && (
         <CardPrompt>
           <Button onClick={onClickPrompt} className="button button--rounded button--cta">
-            Add
+            Upload
           </Button>
         </CardPrompt>
       )}
@@ -164,11 +154,13 @@ MediaFileList.propTypes = {
   displayCardPrompt: PropTypes.bool,
   displayLayout: PropTypes.string.isRequired,
   wrapperRef: PropTypes.object.isRequired,
-  modalTargetRef: PropTypes.object.isRequired
+  modalTargetRef: PropTypes.object.isRequired,
+  openEditInModal: PropTypes.bool
 };
 
 MediaFileList.defaultProps = {
-  displayCardPrompt: true
+  displayCardPrompt: true,
+  openEditInModal: false
 };
 
 export default MediaFileList;

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

@@ -1,7 +1,8 @@
+import PropTypes from 'prop-types';
 import React, { useState, useRef } from 'react';
 import MediaFileList from './MediaFileList';
 
-const MediaListing = () => {
+const MediaListing = ({ openEditInModal }) => {
   const [displayCardPrompt, setDisplayCardPrompt] = useState(false);
   const mediaFileListWrapperRef = useRef();
   const modalTargetRef = useRef();
@@ -15,6 +16,7 @@ const MediaListing = () => {
           displayCardPrompt={displayCardPrompt}
           setDisplayCardPrompt={setDisplayCardPrompt}
           displayLayout="list"
+          openEditInModal={openEditInModal}
         />
       </div>
       {/* render edit card modal outside of the virtual list */}
@@ -23,6 +25,12 @@ const MediaListing = () => {
   );
 };
 
-MediaListing.propTypes = {};
+MediaListing.propTypes = {
+  openEditInModal: PropTypes.bool
+};
+
+MediaListing.defaultProps = {
+  openEditInModal: false
+};
 
 export default MediaListing;

package/src/components/ListingContainer/ListingContainer.js

@@ -16,14 +16,16 @@ const ListingContainer = ({
   displayFileUploadModal,
   setDisplayFileUploadModal,
   closeModalAndSetValue,
-  simpleLayout
+  simpleLayout,
+  openEditInModal,
+  storeKey
 }) => {
   const [selectedFiles, setSelectedFiles] = useState(filesSelected || []);
   const [selectedFilter, setSelectedFilter] = useState({
     filter: 'all',
     isSearch: false,
     searchTerm: null,
-    storeKey: null
+    storeKey
   });
 
   const fileStoresType = getQuery('GET_FILE_STORES');
@@ -82,6 +84,9 @@ const ListingContainer = ({
             handleDisplayFileUploadModal={handleDisplayFileUploadModal}
             setSelectedFiles={setSelectedFiles}
             handleSelectedFiles={handleSelectedFiles}
+            openEditInModal={openEditInModal}
+            selectedStoreKey={selectedFilter.storeKey || defaultFileStore}
+            storeKey={storeKey}
           />
         </FilesListProvider>
       </MediaContextProvider>
@@ -96,7 +101,9 @@ ListingContainer.propTypes = {
   simpleLayout: PropTypes.bool,
   setDisplayFileUploadModal: PropTypes.func.isRequired,
   displayFileUploadModal: PropTypes.bool.isRequired,
-  closeModalAndSetValue: PropTypes.func
+  closeModalAndSetValue: PropTypes.func,
+  openEditInModal: PropTypes.bool,
+  storeKey: PropTypes.string
 };
 
 ListingContainer.defaultProps = {
@@ -104,7 +111,9 @@ ListingContainer.defaultProps = {
   handleSelectedFiles: () => {},
   maxItems: false,
   filesSelected: [],
-  simpleLayout: false
+  simpleLayout: false,
+  openEditInModal: false,
+  storeKey: 'default'
 };
 
 export default ListingContainer;

package/src/index.js

@@ -1,21 +1,28 @@
-import React from 'react';
 import FileUploadAdapter from './components/FileUploadAdapter';
 import EditorAdapter from './components/EditorAdapter';
 import { MediaLibraryIcon } from './icons';
 import pkg from '../package.json';
 import { PLUGIN_NAME } from './constants';
+import FilePreviewReadOnly from './components/FilePreviewReadOnly';
+import MediaListing from './components/MediaListing';
+import EditMediaFilePage from './components/EditMediaFile/EditMediaFilePage';
 
-export const FilePreviewReadOnly = React.lazy(() =>
-  import(/* webpackChunkName: 'MediaFilePreviewReadOnly' */ './components/FilePreviewReadOnly')
-);
+// todo: renable lazy loading after bundler optimisations, currently they are too slow in dev mode
+// export const FilePreviewReadOnly = React.lazy(
+//   () =>
+//     import(/* webpackChunkName: 'MediaFilePreviewReadOnly' */ './components/FilePreviewReadOnly')
+// );
 
-const MediaListing = React.lazy(() =>
-  import(/* webpackChunkName: 'MediaListingContainer' */ './components/MediaListing')
-);
+// const MediaListing = React.lazy(
+//   () => import(/* webpackChunkName: 'MediaListingContainer' */ './components/MediaListing')
+// );
 
-const EditMediaFilePage = React.lazy(() =>
-  import(/* webpackChunkName: 'EditMediaFilePage' */ './components/EditMediaFile/EditMediaFilePage')
-);
+// const EditMediaFilePage = React.lazy(
+//   () =>
+//     import(
+//       /* webpackChunkName: 'EditMediaFilePage' */ './components/EditMediaFile/EditMediaFilePage'
+//     )
+// );
 export default async function load(app) {
   app.events.once('admin:menu:config:load', ({ addConfig }) => {
     addConfig({

package/src/utils/bustUrl.js

@@ -0,0 +1,6 @@
+export default function bustUrl(url, updated) {
+  if (!url) return url;
+  const separator = url.includes('?') ? '&' : '?';
+  const version = updated || Date.now();
+  return `${url}${separator}v=${version}`;
+}