@blaze-cms/plugin-media-ui 0.146.0-node18.1 → 0.146.0-rc-eagle-3.0

package/src/components/EditorAdapter/EditorAdapter.js

@@ -1,16 +1,41 @@
 import React from 'react';
 import DraftEditor from '@blaze-react/drafteditor';
 import PropTypes from 'prop-types';
+import Tooltip from '@blaze-react/tooltip';
 
-const DraftEditorAdapter = ({ id, value, onChange, error, validationMessage, label, ...props }) => (
+const customStyleMap = {
+  SUPERSCRIPT: {
+    fontSize: '0.75em',
+    verticalAlign: 'super'
+  },
+  SUBSCRIPT: {
+    fontSize: '0.75em',
+    verticalAlign: 'sub'
+  }
+};
+
+const DraftEditorAdapter = ({
+  id,
+  value,
+  onChange,
+  error,
+  validationMessage,
+  label,
+  tooltip,
+  ...props
+}) => (
   <div className="form-field form-field--full-width">
-    <label>{label}</label>
+    <label>
+      <Tooltip tooltipContent={tooltip} />
+    </label>
     <DraftEditor
       name={id}
       value={value}
       onChange={onChange}
       error={error}
       validationMessage={validationMessage}
+      tooltip={{ tooltipContent: tooltip }}
+      customStyleMap={customStyleMap}
     />
   </div>
 );
@@ -21,12 +46,14 @@ DraftEditorAdapter.propTypes = {
   onChange: PropTypes.func.isRequired,
   error: PropTypes.bool,
   validationMessage: PropTypes.string,
-  label: PropTypes.string.isRequired
+  label: PropTypes.string.isRequired,
+  tooltip: PropTypes.string
 };
 
 DraftEditorAdapter.defaultProps = {
   error: false,
-  validationMessage: undefined
+  validationMessage: undefined,
+  tooltip: ''
 };
 
 export default DraftEditorAdapter;

package/src/components/FileList/useGetFiles/getFiles.js

@@ -1,7 +1,15 @@
 import { getQuery } from '@blaze-cms/admin-ui-utils';
 import { ALL, INVALID_STORE_KEY_VALUES } from '../../../constants';
 
-const getFromSearch = async ({ searchTerm, offset, limit, where, client, fileStores = [] }) => {
+const getFromSearch = async ({
+  searchTerm,
+  offset,
+  limit,
+  where,
+  client,
+  fileStores = [],
+  esFilters = []
+}) => {
   const allTypesMatches = [
     {
       match: { type: 'image' }
@@ -19,7 +27,7 @@ const getFromSearch = async ({ searchTerm, offset, limit, where, client, fileSto
     }
   ];
   const match = !where.type || where.type === ALL ? allTypesMatches : matchSpecificType;
-  const mustMatch = [];
+  const mustMatch = [...esFilters];
 
   if (searchTerm) {
     mustMatch.push({
@@ -160,7 +168,7 @@ const getFromSearch = async ({ searchTerm, offset, limit, where, client, fileSto
   return { files, all, image, video, text };
 };
 
-const getFiles = ({ offset, limit, where, searchTerm, fileStores }, client) =>
-  getFromSearch({ searchTerm, offset, limit, where, client, fileStores });
+const getFiles = ({ searchTerm, offset, limit, where, esFilters, fileStores }, client) =>
+  getFromSearch({ searchTerm, offset, limit, where, esFilters, client, fileStores });
 
 export default getFiles;

package/src/components/FileList/useGetFiles/useGetFiles.js

@@ -29,8 +29,8 @@ function useGetFiles() {
 
   useEffect(
     () => {
-      const { offset, limit, where, sort, searchTerm, isSearch } = queryParams;
-      const newFilter = JSON.stringify(where);
+      const { offset, limit, where, sort, searchTerm, isSearch, esFilters } = queryParams;
+      const newFilter = JSON.stringify({ where, esFilters });
       const isNewFilterSet = newFilter !== previousFilter;
       const isNewOffsetSet = previousOffset !== null && offset !== previousOffset;
       const isNewSearchTermSet = searchTerm && previousSearchTerm !== searchTerm;
@@ -41,9 +41,8 @@ function useGetFiles() {
         if (data.files.length) {
           setData({ files: [] });
         }
-
         const { files, total, all, image, video, text } = await getFiles(
-          { offset, limit, where, sort, searchTerm, isSearch, fileStores },
+          { offset, limit, where, sort, searchTerm, isSearch, esFilters, fileStores },
           client
         );
         setData({ files, total, all, image, video, text });

package/src/components/FileList/useGetFilesList/useGetFilesList.js

@@ -137,8 +137,9 @@ function useGetFilesList() {
   const setQueryParams = params => {
     const isNewSearchTerm = params.isSearch && previousSearchTerm !== params.searchTerm;
     const hasDeletedSearchTerm = previousSearchTerm && params.searchTerm === null;
-    const newFilter = JSON.stringify(params.where);
+    const newFilter = JSON.stringify({ where: params.where, esFilters: params.esFilters });
     const isNewFilter = newFilter !== previousFilter;
+
     const shouldClearList = hasDeletedSearchTerm || isNewFilter || isNewSearchTerm;
     shouldClearList ? clearList(params) : setParams(params);
     setCurrentFilter(newFilter);

package/src/components/FilePreview/Actions/index.js

@@ -7,34 +7,32 @@ const Actions = ({ file }) => {
   const [, extension] = file.mimetype.split('/');
 
   return (
-    <>
-      <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>
-          {handleEditModal && (
-            <div
-              data-testid={`open-media-library-${file.id}`}
-              className="FilePreviewItem__info__actionsIcon material-icons edit"
-              aria-hidden="true"
-              onClick={() => handleEditModal(file)}>
-              <i className="fas fa-pen fa-xs" />
-            </div>
-          )}
-          {onUnselectFile && (
-            <div
-              data-testid={`unselect-${file.id}`}
-              className="FilePreviewItem__info__actionsIcon material-icons delete"
-              aria-hidden="true"
-              onClick={() => onUnselectFile([file.id])}>
-              <i className="fas fa-trash fa-xs" />
-            </div>
-          )}
-        </div>
+    <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>
+        {handleEditModal && (
+          <div
+            data-testid={`open-media-library-${file.id}`}
+            className="FilePreviewItem__info__actionsIcon material-icons edit"
+            aria-hidden="true"
+            onClick={() => handleEditModal(file)}>
+            <i className="fas fa-pen fa-xs" />
+          </div>
+        )}
+        {onUnselectFile && (
+          <div
+            data-testid={`unselect-${file.id}`}
+            className="FilePreviewItem__info__actionsIcon material-icons delete"
+            aria-hidden="true"
+            onClick={() => onUnselectFile([file.id])}>
+            <i className="fas fa-trash fa-xs" />
+          </div>
+        )}
+      </div>
+    </div>
   );
 };
 

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Button from '@blaze-react/button';
 
-const Image = ({ url, name, children }) => (
+const Image = ({ url, name, children, handleChangeFile, showChangeButton }) => (
   <div className="preview">
     <div className="preview__file preview__file--image">
       <img src={url} alt={name} />
@@ -12,6 +13,11 @@ const Image = ({ url, name, children }) => (
             Original
           </a>
         </p>
+        {showChangeButton && (
+          <div className="preview__change-button">
+            <Button onClick={handleChangeFile}>Change file</Button>
+          </div>
+        )}
       </div>
     </div>
     {children}
@@ -21,7 +27,14 @@ const Image = ({ url, name, children }) => (
 Image.propTypes = {
   url: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  handleChangeFile: PropTypes.func,
+  showChangeButton: PropTypes.bool
+};
+
+Image.defaultProps = {
+  handleChangeFile: () => {},
+  showChangeButton: false
 };
 
 export { Image };

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

@@ -23,27 +23,31 @@ const imageSchema = {
         showInForm: true,
         label: 'Alt text',
         formFieldType: 'text',
-        formPriority: 3.0
+        formPriority: 3.0,
+        isDataPropery: true
       },
       caption: {
         type: 'string',
         showInForm: true,
         formFieldType: 'text',
-        formPriority: 4.0
+        formPriority: 4.0,
+        isDataPropery: true
       },
       credits: {
         type: 'string',
         showInForm: true,
         formFieldType: 'text',
-        formPriority: 5.0
+        formPriority: 5.0,
+        isDataPropery: true
       },
       hrefUrl: {
         type: 'string',
         format: 'uri-template',
-        label: 'url',
+        label: 'Image hyperlink',
         showInForm: true,
         formFieldType: 'text',
-        description: 'Url format is not valid'
+        description: 'Url format is not valid',
+        isDataPropery: true
       }
     },
     required: ['name']

package/src/components/FilePreview/ModalContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const ModalContext = createContext(false);

package/src/components/FilePreview/PDF/PDF.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Button from '@blaze-react/button';
 
-const PDF = ({ mimetype, url, name, children }) => (
-  <div className="preview">
+const PDF = ({ mimetype, url, name, children, handleChangeFile, showChangeButton }) => (
+  <div className="preview" key={`pdf-${url}`}>
     <div className="preview__file preview__file--pdf">
-      <object data={url} type={mimetype} className="preview__file--pdf">
+      <object key={url} data={url} type={mimetype} className="preview__file--pdf">
         <p>
           <a href={url} rel="noopener noreferrer" target="_blank">
             Download {name}
@@ -18,6 +19,11 @@ const PDF = ({ mimetype, url, name, children }) => (
             Original
           </a>
         </p>
+        {showChangeButton && (
+          <div className="preview__change-button">
+            <Button onClick={handleChangeFile}>Change file</Button>
+          </div>
+        )}
       </div>
     </div>
     {children}
@@ -28,7 +34,14 @@ PDF.propTypes = {
   mimetype: PropTypes.string.isRequired,
   url: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  handleChangeFile: PropTypes.func,
+  showChangeButton: PropTypes.bool
+};
+
+PDF.defaultProps = {
+  handleChangeFile: () => {},
+  showChangeButton: false
 };
 
 export { PDF };

package/src/components/FilePreview/PDF/schema.js

@@ -11,7 +11,8 @@ const PDFSchema = {
       caption: {
         type: 'string',
         showInForm: true,
-        formFieldType: 'text'
+        formFieldType: 'text',
+        isDataPropery: true
       }
     },
     required: ['name']

package/src/components/FilePreview/index.js

@@ -1,13 +1,62 @@
 import React from 'react';
 import { FormBuilder } from '@blaze-cms/react-form-builder';
 import PropTypes from 'prop-types';
+import { useQuery } from '@apollo/client';
+import { getQuery, getDynamicQuery } from '@blaze-cms/admin-ui-utils';
 import { getPreview } from './get-preview';
+import { FILE_DEFAULT_PROPS } from '../../constants';
 
-const FilePreview = ({ file, handleFormChange, displayForm, previewType, children }) => {
-  const { name, url, mimetype, data, store } = file;
+const FilePreview = ({
+  file,
+  handleFormChange,
+  displayForm,
+  previewType,
+  children,
+  handleChangeFile,
+  showChangeButton,
+  disableFilePreview
+}) => {
+  const {
+    data: schemaData = {
+      getEntitySchemas: [
+        {
+          properties: {},
+          actions: {
+            get: 'getFile'
+          }
+        }
+      ]
+    },
+    loading: schemaLoading
+  } = useQuery(getQuery('GET_ENTITY_SCHEMA'), {
+    variables: { identifier: 'file' }
+  });
+
+  const [fileSchema] = schemaData && schemaData.getEntitySchemas ? schemaData.getEntitySchemas : [];
+
+  const fileQuery = getDynamicQuery('DATA_QUERY')(fileSchema, file.id, null, FILE_DEFAULT_PROPS);
+  const { loading, data: { entityData: fileData } = {} } = useQuery(fileQuery, {
+    variables: { id: file.id },
+    fetchPolicy: 'cache-and-network',
+    skip: !fileSchema || !fileSchema.id
+  });
+
+  if (!fileSchema || schemaLoading || loading) return null;
+
+  const { name, url, mimetype, data, store, updated } = fileData;
+  const bustUrl = (srcUrl, version) => {
+    if (!srcUrl) return srcUrl;
+    const sep = srcUrl.includes('?') ? '&' : '?';
+    return `${srcUrl}${sep}v=${version || Date.now()}`;
+  };
+  const displayUrl = bustUrl(url, updated);
   const [Preview, schema] = getPreview({ mimetype, previewType });
   const shouldRenderForm = schema && displayForm;
 
+  const { properties } = fileSchema;
+  const { name: nameProp, storeKey: storeKeyProp, ...restProperties } = properties;
+  Object.assign(schema.formSchema.properties, restProperties);
+
   if (shouldRenderForm && store) {
     const { defaultStore = {}, storeOptions = [] } = store;
     if (schema.formSchema.properties.storeKey) {
@@ -19,11 +68,19 @@ const FilePreview = ({ file, handleFormChange, displayForm, previewType, childre
     }
   }
 
-  const formBuilderData = { values: { ...file, ...data } };
+  const formBuilderData = { values: { ...data, ...fileData } };
 
   return (
     <>
-      <Preview mimetype={mimetype} url={url} name={name} {...data} file={file}>
+      <Preview
+        mimetype={mimetype}
+        url={displayUrl}
+        name={name}
+        {...data}
+        file={file}
+        handleChangeFile={handleChangeFile}
+        disableFilePreview={disableFilePreview}
+        showChangeButton={showChangeButton}>
         {shouldRenderForm && (
           <div className="preview__details">
             <div className="preview__filename">{file.filename}</div>
@@ -50,10 +107,13 @@ FilePreview.propTypes = {
   file: PropTypes.object.isRequired,
   fileName: PropTypes.string,
   handleFormChange: PropTypes.func,
+  handleChangeFile: PropTypes.func,
   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,
+  disableFilePreview: PropTypes.bool
 };
 
 FilePreview.defaultProps = {
@@ -62,7 +122,10 @@ FilePreview.defaultProps = {
   handlers: {},
   previewType: FilePreview.availablePreviewTypes.card,
   handleFormChange: () => {},
-  children: []
+  handleChangeFile: () => {},
+  children: [],
+  showChangeButton: false,
+  disableFilePreview: true
 };
 
 export default FilePreview;

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Button from '@blaze-react/button';
 import { DefaultIcon } from './icons';
 
-const PreviewDefault = ({ url, name, children }) => (
-  <div className="preview">
+const PreviewDefault = ({ url, name, children, handleChangeFile, showChangeButton }) => (
+  <div className="preview" key={`default-${url}`}>
     <div className="preview__file preview__file--default">
       <div className="preview__file--icon">
         <DefaultIcon />
@@ -16,6 +17,11 @@ const PreviewDefault = ({ url, name, children }) => (
             Original
           </a>
         </p>
+        {showChangeButton && (
+          <div className="preview__change-button">
+            <Button onClick={handleChangeFile}>Change file</Button>
+          </div>
+        )}
       </div>
     </div>
     {children}
@@ -25,7 +31,14 @@ const PreviewDefault = ({ url, name, children }) => (
 PreviewDefault.propTypes = {
   url: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  handleChangeFile: PropTypes.func,
+  showChangeButton: PropTypes.bool
+};
+
+PreviewDefault.defaultProps = {
+  handleChangeFile: () => {},
+  showChangeButton: false
 };
 
 export { PreviewDefault };

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/FilePreview/previewDefault/previewDefaultSchema.js

@@ -15,7 +15,8 @@ const previewDefaultSchema = {
         label: 'url',
         showInForm: true,
         formFieldType: 'text',
-        description: 'Url format is not valid'
+        description: 'Url format is not valid',
+        isDataPropery: true
       }
     },
     required: ['name']

package/src/components/FilePreviewReadOnly/FileList.js

@@ -3,9 +3,7 @@ import PropTypes from 'prop-types';
 import FilePreviewList from './FilePreviewList';
 
 const FileList = ({ selectedFiles, children }) => (
-  <>
-    <FilePreviewList selectedFiles={selectedFiles}>{children}</FilePreviewList>
-  </>
+  <FilePreviewList selectedFiles={selectedFiles}>{children}</FilePreviewList>
 );
 
 FileList.propTypes = {

package/src/components/FilePreviewReadOnly/FilePreviewReadOnly.js

@@ -11,49 +11,37 @@ const FilePreviewReadOnly = ({ label, id, type, value }) => {
   const client = useApolloClient();
 
   const getFiles = async (offset, ids) => {
-    const {
-      data: { files: newFiles }
-    } = await client.query({
+    if (!ids.length) return [];
+    const { data: { files = [] } = {} } = await client.query({
       query: getQuery('GET_FILES'),
       variables: {
         offset,
         where: {
-          id: {
-            _in: ids
-          }
+          id: { _in: ids }
         }
       },
-      skip: !initialValue.length,
       fetchPolicy: 'network-only'
     });
-    return newFiles;
+    return files;
   };
 
-  useEffect(
-    () => {
-      (async () => {
-        const files = await getFiles(0, initialValue);
-        const orderedFiles = orderFiles(files, initialValue);
-        setSelectedFiles(orderedFiles);
-      })();
-    },
-    [] //eslint-disable-line
-  );
-
   const orderFiles = (files, ids) =>
     ids.map(currentId => files.find(({ id: fileId }) => fileId === currentId)).filter(Boolean);
 
+  useEffect(() => {
+    (async () => {
+      const files = await getFiles(0, initialValue);
+      const orderedFiles = orderFiles(files, initialValue);
+      setSelectedFiles(orderedFiles);
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
-    <>
-      <div className="form-field form-field--button">
-        <label>{label}</label>
-        {selectedFiles && (
-          <>
-            <FileList selectedFiles={selectedFiles} />
-          </>
-        )}
-      </div>
-    </>
+    <div className="form-field form-field--button">
+      <label htmlFor={id}>{label}</label>
+      {selectedFiles.length > 0 && <FileList selectedFiles={selectedFiles} />}
+    </div>
   );
 };