@blaze-cms/plugin-media-ui 0.146.0-node18-core-styles-tooltips.5 → 0.146.0-node18-core-styles-tooltips.11

package/src/components/FileUploadAdapter/FileUploadAdapter.js

@@ -33,7 +33,9 @@ const FileUploadAdapter = ({
   simpleLayout,
   tooltip,
   previewAllFiles,
-  fileType
+  disableFilePreview,
+  fileType,
+  storeKey
 }) => {
   const { InjectPreview } = useContext(FileUploadAdapter.FormContext);
   const [currentLimit] = useLimit(maxItems);
@@ -41,9 +43,9 @@ const FileUploadAdapter = ({
   const [displayFileUploadModal, setDisplayFileUploadModal] = useState(false);
   const initialValue = formatInitialValue({ value, type });
   const [currentValue, setCurrentValue] = useState(initialValue);
-  const [currentOffset, setCurrentOffset] = useState(0);
   const [selectedFiles, setSelectedFiles] = useState([]);
   const [editFile, setEditFile] = useState(null);
+  const [allFilesLoaded, setAllFilesLoaded] = useState(false);
   const client = useApolloClient();
   const { addToast } = useToasts();
 
@@ -70,6 +72,13 @@ const FileUploadAdapter = ({
   useEffect(
     () => {
       (async () => {
+        if (allFilesLoaded) {
+          const loadedFiles = await getFiles(0, currentValue, true);
+          const loadedOrderedFiles = orderFiles(loadedFiles, currentValue);
+          setSelectedFiles(loadedOrderedFiles);
+          return;
+        }
+
         const initialFiles =
           !selectedFiles.length && !previewAllFiles
             ? currentValue.filter((_, i) => i <= 3)
@@ -77,8 +86,8 @@ const FileUploadAdapter = ({
 
         const files = await getFiles(0, initialFiles);
         const orderedFiles = orderFiles(files, currentValue);
-        setCurrentOffset(0);
         setSelectedFiles(orderedFiles);
+        setAllFilesLoaded(false);
       })();
     },
     [currentValue] //eslint-disable-line
@@ -86,14 +95,10 @@ const FileUploadAdapter = ({
 
   const fetchMore = async shouldFetchAll => {
     if (selectedFiles.length === currentValue.length) return;
-    const newOffset = currentOffset + 4;
-    const updatedOffset = newOffset > currentValue.length ? currentValue.length : newOffset;
-    const offsetToUse = shouldFetchAll ? 0 : updatedOffset;
-    const files = await getFiles(offsetToUse, currentValue, shouldFetchAll);
-    const newFiles = [...selectedFiles, ...files];
-    const orderedFiles = orderFiles(newFiles, currentValue);
-    setSelectedFiles(orderedFiles);
-    setCurrentOffset(newOffset);
+    const newFiles = await getFiles(0, currentValue, true);
+    const newOrderedFiles = orderFiles(newFiles, currentValue);
+    setSelectedFiles(newOrderedFiles);
+    setAllFilesLoaded(true);
   };
 
   const handleSelectedFiles = (files, checkIsUnselecting = true) => {
@@ -162,7 +167,7 @@ const FileUploadAdapter = ({
 
   const filesPending = previewAllFiles
     ? 0
-    : getNumberFilesPendingToFetch(currentOffset, currentValue);
+    : getNumberFilesPendingToFetch(selectedFiles.length, currentValue);
   const onOpenLibrary = () => setDisplayModal(true);
   const handleEditModal = file => {
     const selectedEditFile = selectedFiles.find(({ id: _id }) => _id === file.id);
@@ -299,6 +304,7 @@ const FileUploadAdapter = ({
         )}
         <FileUpload
           actionText={fileUploadButtonText}
+          storeKey={storeKey}
           handleLibraryClick={() => {
             if (simpleLayout) {
               setDisplayFileUploadModal(true);
@@ -317,6 +323,7 @@ const FileUploadAdapter = ({
             handleFormChange={handleEditFileForm}
             displayForm
             previewType="card"
+            disableFilePreview={disableFilePreview}
           />
         </Modal>
       )}
@@ -331,6 +338,8 @@ const FileUploadAdapter = ({
             maxItems={currentLimit}
             simpleLayout={simpleLayout}
             filesSelected={currentValue.length > 1 ? currentValue : []}
+            openEditInModal
+            storeKey={storeKey}
           />
         </div>
       )}
@@ -350,6 +359,7 @@ const FileUploadAdapter = ({
               maxItems={currentLimit}
               filesSelected={currentValue.length > 1 ? currentValue : []}
               openEditInModal
+              storeKey={storeKey}
             />
           </Modal>
         </div>
@@ -370,7 +380,9 @@ FileUploadAdapter.propTypes = {
   simpleLayout: PropTypes.bool,
   previewAllFiles: PropTypes.bool,
   tooltip: PropTypes.string,
-  fileType: PropTypes.string
+  fileType: PropTypes.string,
+  disableFilePreview: PropTypes.bool,
+  storeKey: PropTypes.string
 };
 
 FileUploadAdapter.defaultProps = {
@@ -381,7 +393,9 @@ FileUploadAdapter.defaultProps = {
   simpleLayout: false,
   previewAllFiles: false,
   tooltip: '',
-  fileType: 'file'
+  fileType: 'file',
+  disableFilePreview: true,
+  storeKey: null
 };
 
 export default FileUploadAdapter;

package/src/components/FileUploadAdapter/mappers/get-number-files-pending-to-fetch.js

@@ -1,5 +1,7 @@
-export const getNumberFilesPendingToFetch = (currentOffset, currentValue) => {
-  const offsetSet = currentOffset + 4;
-  const offset = currentValue.length < offsetSet ? currentValue.length : offsetSet;
-  return currentValue.length - offset;
+export const getNumberFilesPendingToFetch = (loadedFilesCount, currentValue) => {
+  if (loadedFilesCount >= currentValue.length) {
+    return 0;
+  }
+
+  return currentValue.length - loadedFilesCount;
 };

package/src/components/FileUploadModal/FileUploadModal.js

@@ -11,7 +11,9 @@ const FileUploadModal = ({
   getSelectedFiles,
   closeModalAndSetValue,
   simpleLayout,
-  fileId
+  fileId,
+  storeKey,
+  selectedStoreKey
 }) => {
   const [files, setFiles] = useState([]);
   const { addToast } = useToasts();
@@ -30,10 +32,10 @@ const FileUploadModal = ({
 
   const uploadFiles = async () => {
     const response = await Promise.all(
-      files.map(({ file, name, data, storeKey }) => {
+      files.map(({ file, name, data, storeKey: fileStoreKey }) => {
         const payload = {
           name,
-          storeKey,
+          storeKey: fileStoreKey,
           data
         };
         if (fileId) {
@@ -82,7 +84,8 @@ const FileUploadModal = ({
     onClose();
   };
 
-  const storeOptions = storeType.map(type => [type.key, type.name]);
+  let storeOptions = storeType.map(type => [type.key, type.name]);
+  storeOptions = storeKey ? storeOptions.filter(([key]) => key === storeKey) : storeOptions;
 
   return (
     <Modal
@@ -101,7 +104,11 @@ const FileUploadModal = ({
         }
       ]}
       upload>
-      <FileUpload onChange={handleFiles} selectOptions={storeOptions} />
+      <FileUpload
+        storeKey={selectedStoreKey || storeKey}
+        onChange={handleFiles}
+        selectOptions={storeOptions}
+      />
     </Modal>
   );
 };
@@ -111,14 +118,18 @@ FileUploadModal.propTypes = {
   getSelectedFiles: PropTypes.func.isRequired,
   onClose: PropTypes.func,
   simpleLayout: PropTypes.bool,
-  closeModalAndSetValue: PropTypes.func
+  closeModalAndSetValue: PropTypes.func,
+  storeKey: PropTypes.string,
+  selectedStoreKey: PropTypes.string
 };
 
 FileUploadModal.defaultProps = {
-  onClose: () => {},
-  closeModalAndSetValue: () => {},
+  onClose: () => { },
+  closeModalAndSetValue: () => { },
   simpleLayout: false,
-  fileId: null
+  fileId: null,
+  storeKey: null,
+  selectedStoreKey: null
 };
 
 export default FileUploadModal;

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

@@ -14,11 +14,15 @@ const Listing = ({
   setDisplayFileUploadModal,
   closeModalAndSetValue,
   simpleLayout,
-  openEditInModal
+  openEditInModal,
+  storeKey,
+  selectedStoreKey
 }) => (
   <div className="page">
     {displayFileUploadModal && (
       <FileUploadModal
+        selectedStoreKey={selectedStoreKey}
+        storeKey={storeKey}
         onClose={() => {
           handleDisplayFileUploadModal(false);
           setDisplayFileUploadModal(false);
@@ -63,14 +67,17 @@ Listing.propTypes = {
   setDisplayFileUploadModal: PropTypes.func.isRequired,
   displayFileUploadModal: PropTypes.bool.isRequired,
   closeModalAndSetValue: PropTypes.func,
-  openEditInModal: PropTypes.bool
+  openEditInModal: PropTypes.bool,
+  storeKey: PropTypes.string.isRequired,
+  selectedStoreKey: PropTypes.string
 };
 
 Listing.defaultProps = {
   closeModalAndSetValue: () => {},
   handleDisplayFileUploadModal: () => {},
   simpleLayout: false,
-  openEditInModal: false
+  openEditInModal: false,
+  selectedStoreKey: null
 };
 
 export default Listing;

package/src/components/ListingContainer/ListingContainer.js

@@ -17,14 +17,15 @@ const ListingContainer = ({
   setDisplayFileUploadModal,
   closeModalAndSetValue,
   simpleLayout,
-  openEditInModal
+  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');
@@ -84,6 +85,8 @@ const ListingContainer = ({
             setSelectedFiles={setSelectedFiles}
             handleSelectedFiles={handleSelectedFiles}
             openEditInModal={openEditInModal}
+            selectedStoreKey={selectedFilter.storeKey || defaultFileStore}
+            storeKey={storeKey}
           />
         </FilesListProvider>
       </MediaContextProvider>
@@ -99,7 +102,8 @@ ListingContainer.propTypes = {
   setDisplayFileUploadModal: PropTypes.func.isRequired,
   displayFileUploadModal: PropTypes.bool.isRequired,
   closeModalAndSetValue: PropTypes.func,
-  openEditInModal: PropTypes.bool
+  openEditInModal: PropTypes.bool,
+  storeKey: PropTypes.string
 };
 
 ListingContainer.defaultProps = {
@@ -108,7 +112,8 @@ ListingContainer.defaultProps = {
   maxItems: false,
   filesSelected: [],
   simpleLayout: false,
-  openEditInModal: false
+  openEditInModal: false,
+  storeKey: 'default'
 };
 
 export default ListingContainer;