@blaze-cms/plugin-media-ui 0.146.0-core-styles.63 → 0.146.0-core-styles.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/plugin-media-ui",
-  "version": "0.146.0-core-styles.63",
+  "version": "0.146.0-core-styles.67",
   "description": "Blaze plugin media ui",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -29,12 +29,12 @@
   "dependencies": {
     "@blaze-cms/admin-ui-utils": "0.146.0-core-styles.63",
     "@blaze-cms/core-errors": "0.146.0-core-styles.52",
-    "@blaze-cms/plugin-search-ui": "0.146.0-core-styles.63",
-    "@blaze-cms/react-form-builder": "0.146.0-core-styles.63",
+    "@blaze-cms/plugin-search-ui": "0.146.0-core-styles.67",
+    "@blaze-cms/react-form-builder": "0.146.0-core-styles.67",
     "@blaze-cms/setup-ui": "0.145.1-core-styles.0",
     "@blaze-react/button": "0.8.0-alpha.82",
     "@blaze-react/drafteditor": "0.7.0",
-    "@blaze-react/file-upload": "0.8.0-alpha.78",
+    "@blaze-react/file-upload": "0.8.0-alpha.105",
     "@blaze-react/modal": "0.5.19",
     "@blaze-react/more": "0.5.19",
     "@blaze-react/toaster": "0.5.17",
@@ -57,5 +57,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "ced9156d14f886f57f602047bab502e1b8e19d0e"
+  "gitHead": "87928531793cff6366d97a6f30ef46bfc358b083"
 }

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

@@ -40,7 +40,7 @@ const imageSchema = {
       hrefUrl: {
         type: 'string',
         format: 'uri-template',
-        label: 'url',
+        label: 'Image hyperlink',
         showInForm: true,
         formFieldType: 'text',
         description: 'Url format is not valid'

package/src/components/FilePreview/index.js

@@ -10,7 +10,8 @@ const FilePreview = ({
   previewType,
   children,
   handleChangeFile,
-  showChangeButton
+  showChangeButton,
+  disableFilePreview
 }) => {
   const { name, url, mimetype, data, store } = file;
   const [Preview, schema] = getPreview({ mimetype, previewType });
@@ -38,6 +39,7 @@ const FilePreview = ({
         {...data}
         file={file}
         handleChangeFile={handleChangeFile}
+        disableFilePreview={disableFilePreview}
         showChangeButton={showChangeButton}>
         {shouldRenderForm && (
           <div className="preview__details">
@@ -70,7 +72,8 @@ FilePreview.propTypes = {
   handlers: PropTypes.object,
   previewType: PropTypes.oneOf(Object.keys(FilePreview.availablePreviewTypes)),
   children: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),
-  showChangeButton: PropTypes.bool
+  showChangeButton: PropTypes.bool,
+  disableFilePreview: PropTypes.bool
 };
 
 FilePreview.defaultProps = {
@@ -81,7 +84,8 @@ FilePreview.defaultProps = {
   handleFormChange: () => {},
   handleChangeFile: () => {},
   children: [],
-  showChangeButton: false
+  showChangeButton: false,
+  disableFilePreview: true
 };
 
 export default FilePreview;

package/src/components/FilePreview/previewDefault/RawPreviewDefault.js

@@ -2,24 +2,34 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Actions from '../Actions';
 
-const RawPreviewDefault = ({ url, name, file }) => (
+const RawPreviewDefault = ({ url, name, file, disableFilePreview }) => (
   <div className="FilePreview">
-    <div className="FilePreviewItem">
-      <div className="FilePreviewItem__wrapper">
-        <img className="FilePreviewItem__wrapper__default" src={url} alt={name} />
+    {!disableFilePreview ? (
+      <div className="FilePreviewItem">
+        <div className="FilePreviewItem__wrapper">
+          <img className="FilePreviewItem__wrapper__default" src={url} alt={name} />
+        </div>
+        <div className="FilePreviewItem__info">
+          <p className="FilePreviewItem__info__fileName">{name}</p>
+          <Actions file={file} />
+        </div>
       </div>
+    ) : (
       <div className="FilePreviewItem__info">
-        <p className="FilePreviewItem__info__fileName">{name}</p>
+        <p className="FilePreviewItem__info__fileName FilePreviewItem__info--disablePreview">
+          {name}
+        </p>
         <Actions file={file} />
       </div>
-    </div>
+    )}
   </div>
 );
 
 RawPreviewDefault.propTypes = {
   url: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
-  file: PropTypes.object.isRequired
+  file: PropTypes.object.isRequired,
+  disableFilePreview: PropTypes.bool.isRequired
 };
 
 export { RawPreviewDefault };

package/src/components/FileUploadAdapter/FileUploadAdapter.js

@@ -31,7 +31,9 @@ const FileUploadAdapter = ({
   canDragAndDrop,
   simpleLayout,
   previewAllFiles,
-  fileType
+  disableFilePreview,
+  fileType,
+  storeKey
 }) => {
   const { InjectPreview } = useContext(FileUploadAdapter.FormContext);
   const [currentLimit] = useLimit(maxItems);
@@ -39,9 +41,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();
 
@@ -68,6 +70,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)
@@ -75,8 +84,8 @@ const FileUploadAdapter = ({
 
         const files = await getFiles(0, initialFiles);
         const orderedFiles = orderFiles(files, currentValue);
-        setCurrentOffset(0);
         setSelectedFiles(orderedFiles);
+        setAllFilesLoaded(false);
       })();
     },
     [currentValue] //eslint-disable-line
@@ -84,14 +93,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) => {
@@ -160,7 +165,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);
@@ -302,6 +307,7 @@ const FileUploadAdapter = ({
         )}
         <FileUpload
           actionText={fileUploadButtonText}
+          storeKey={storeKey}
           handleLibraryClick={() => {
             if (simpleLayout) {
               setDisplayFileUploadModal(true);
@@ -320,6 +326,7 @@ const FileUploadAdapter = ({
             handleFormChange={handleEditFileForm}
             displayForm
             previewType="card"
+            disableFilePreview={disableFilePreview}
           />
         </Modal>
       )}
@@ -336,6 +343,7 @@ const FileUploadAdapter = ({
               simpleLayout={simpleLayout}
               filesSelected={currentValue.length > 1 ? currentValue : []}
               openEditInModal
+              storeKey={storeKey}
             />
           </div>
         )}
@@ -356,6 +364,7 @@ const FileUploadAdapter = ({
                 maxItems={currentLimit}
                 filesSelected={currentValue.length > 1 ? currentValue : []}
                 openEditInModal
+                storeKey={storeKey}
               />
             </Modal>
           </div>
@@ -375,7 +384,9 @@ FileUploadAdapter.propTypes = {
   canDragAndDrop: PropTypes.bool,
   simpleLayout: PropTypes.bool,
   previewAllFiles: PropTypes.bool,
-  fileType: PropTypes.string
+  fileType: PropTypes.string,
+  disableFilePreview: PropTypes.bool,
+  storeKey: PropTypes.string
 };
 
 FileUploadAdapter.defaultProps = {
@@ -385,7 +396,9 @@ FileUploadAdapter.defaultProps = {
   canDragAndDrop: false,
   simpleLayout: false,
   previewAllFiles: false,
-  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 (
     <>
@@ -102,7 +105,11 @@ const FileUploadModal = ({
           }
         ]}
         upload>
-        <FileUpload onChange={handleFiles} selectOptions={storeOptions} />
+        <FileUpload
+          storeKey={selectedStoreKey || storeKey}
+          onChange={handleFiles}
+          selectOptions={storeOptions}
+        />
       </Modal>
     </>
   );
@@ -113,14 +120,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: () => {},
   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;