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

package/src/components/FilePreview/index.js

@@ -9,7 +9,8 @@ const FilePreview = ({
   displayForm,
   previewType,
   children,
-  handleChangeFile
+  handleChangeFile,
+  showChangeButton
 }) => {
   const { name, url, mimetype, data, store } = file;
   const [Preview, schema] = getPreview({ mimetype, previewType });
@@ -36,7 +37,8 @@ const FilePreview = ({
         name={name}
         {...data}
         file={file}
-        handleChangeFile={handleChangeFile}>
+        handleChangeFile={handleChangeFile}
+        showChangeButton={showChangeButton}>
         {shouldRenderForm && (
           <div className="preview__details">
             <div className="preview__filename">{file.filename}</div>
@@ -67,7 +69,8 @@ FilePreview.propTypes = {
   displayForm: PropTypes.bool,
   handlers: PropTypes.object,
   previewType: PropTypes.oneOf(Object.keys(FilePreview.availablePreviewTypes)),
-  children: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string])
+  children: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),
+  showChangeButton: PropTypes.bool
 };
 
 FilePreview.defaultProps = {
@@ -77,7 +80,8 @@ FilePreview.defaultProps = {
   previewType: FilePreview.availablePreviewTypes.card,
   handleFormChange: () => {},
   handleChangeFile: () => {},
-  children: []
+  children: [],
+  showChangeButton: false
 };
 
 export default FilePreview;

package/src/components/FileUploadAdapter/FileUploadAdapter.js

@@ -197,7 +197,7 @@ const FileUploadAdapter = ({
       modifiers: ['cancel']
     },
     {
-      textButton: 'Save',
+      textButton: 'Apply',
       callback: () => {
         closeModalAndSetValue(true);
       },
@@ -214,7 +214,7 @@ const FileUploadAdapter = ({
       modifiers: ['cancel']
     },
     {
-      textButton: 'Save',
+      textButton: 'Apply',
       callback: async () => {
         const { name, id: editedFileId, data } = editFile;
         const updatedSelectedFiles = selectedFiles.map(selectedFile => {
@@ -349,6 +349,7 @@ const FileUploadAdapter = ({
               handleSelectedFiles={handleSelectedFiles}
               maxItems={currentLimit}
               filesSelected={currentValue.length > 1 ? currentValue : []}
+              openEditInModal
             />
           </Modal>
         </div>

package/src/components/FileUploadModal/FileUploadModal.js

@@ -95,7 +95,7 @@ const FileUploadModal = ({
           modifiers: ['cancel']
         },
         {
-          textButton: 'Save',
+          textButton: 'Upload',
           callback: handleOnSave,
           modifiers: []
         }

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

@@ -13,7 +13,8 @@ const Listing = ({
   getSelectedFiles,
   setDisplayFileUploadModal,
   closeModalAndSetValue,
-  simpleLayout
+  simpleLayout,
+  openEditInModal
 }) => (
   <div className="page">
     {displayFileUploadModal && (
@@ -36,7 +37,7 @@ const Listing = ({
               onClick={() => {
                 handleDisplayFileUploadModal(true);
               }}>
-              Add
+              Upload
             </Button>
             <More displayBg>
               <More.Avatar isMoreMenu>
@@ -48,7 +49,7 @@ const Listing = ({
         </PageHeader>
         <div className="page__content page__content--with-side-panel">
           <FilterPanel />
-          <MediaListing />
+          <MediaListing openEditInModal={openEditInModal} />
         </div>
       </>
     )}
@@ -61,13 +62,15 @@ Listing.propTypes = {
   simpleLayout: PropTypes.bool,
   setDisplayFileUploadModal: PropTypes.func.isRequired,
   displayFileUploadModal: PropTypes.bool.isRequired,
-  closeModalAndSetValue: PropTypes.func
+  closeModalAndSetValue: PropTypes.func,
+  openEditInModal: PropTypes.bool
 };
 
 Listing.defaultProps = {
   closeModalAndSetValue: () => {},
   handleDisplayFileUploadModal: () => {},
-  simpleLayout: false
+  simpleLayout: false,
+  openEditInModal: false
 };
 
 export default Listing;

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

@@ -18,7 +18,8 @@ const MediaFileList = ({
   setDisplayCardPrompt,
   displayLayout,
   wrapperRef,
-  modalTargetRef
+  modalTargetRef,
+  openEditInModal
 }) => {
   const [currentListIndex, setCurrentListIndex] = useState(1);
   const [verifiedRanges, setVerifiedRanges] = useState([]);
@@ -127,6 +128,7 @@ const MediaFileList = ({
                     id={id}
                     index={index}
                     removeFile={removeFile}
+                    openEditInModal={openEditInModal}
                   />
                 </div>
               );
@@ -137,7 +139,7 @@ const MediaFileList = ({
       {displayCardPrompt && (
         <CardPrompt>
           <Button onClick={onClickPrompt} className="button button--rounded button--cta">
-            Add
+            Upload
           </Button>
         </CardPrompt>
       )}
@@ -150,11 +152,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,7 +16,8 @@ const ListingContainer = ({
   displayFileUploadModal,
   setDisplayFileUploadModal,
   closeModalAndSetValue,
-  simpleLayout
+  simpleLayout,
+  openEditInModal
 }) => {
   const [selectedFiles, setSelectedFiles] = useState(filesSelected || []);
   const [selectedFilter, setSelectedFilter] = useState({
@@ -82,6 +83,7 @@ const ListingContainer = ({
             handleDisplayFileUploadModal={handleDisplayFileUploadModal}
             setSelectedFiles={setSelectedFiles}
             handleSelectedFiles={handleSelectedFiles}
+            openEditInModal={openEditInModal}
           />
         </FilesListProvider>
       </MediaContextProvider>
@@ -96,7 +98,8 @@ ListingContainer.propTypes = {
   simpleLayout: PropTypes.bool,
   setDisplayFileUploadModal: PropTypes.func.isRequired,
   displayFileUploadModal: PropTypes.bool.isRequired,
-  closeModalAndSetValue: PropTypes.func
+  closeModalAndSetValue: PropTypes.func,
+  openEditInModal: PropTypes.bool
 };
 
 ListingContainer.defaultProps = {
@@ -104,7 +107,8 @@ ListingContainer.defaultProps = {
   handleSelectedFiles: () => {},
   maxItems: false,
   filesSelected: [],
-  simpleLayout: false
+  simpleLayout: false,
+  openEditInModal: false
 };
 
 export default ListingContainer;