aefis-core-ui 2.3.0-rc5 → 2.3.0-rc6

package/dist/index.modern.js

@@ -84,6 +84,7 @@ import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orien
 import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
 import { registerPlugin, FilePond } from 'react-filepond';
 import FilePondPluginGetFile from 'filepond-plugin-get-file';
+import FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size';
 import MaskedInput from 'react-text-mask';
 import StylesProvider from '@mui/styles/StylesProvider';
 
@@ -16566,14 +16567,6 @@ const render = (value, formState) => {
   }
   return mustache.render(value, formState);
 };
-const renderUrl = (value, formState) => {
-  if (value === undefined || value === null) {
-    return value;
-  }
-  return decodeHtml$2(mustache.render(value, formState));
-};
-const useRenderUrl = template => useSelectFormState(state => renderUrl(template, state));
-const useRender = template => useSelectFormState(state => render(template, state));
 
 const useQueryTemplateParam = queryTemplate => {
   const selector = useCallback(state => {
@@ -17069,49 +17062,6 @@ const DisableWrapper = ({
   }));
 };
 
-const ImageUploadReadOnly = ({
-  formData,
-  schema,
-  uiSchema: _uiSchema = {
-    "ui:options": {}
-  }
-}) => {
-  const {
-    downloadUrl: downloadUrlTemplate,
-    extension: extensionTemplate
-  } = _uiSchema["ui:options"];
-  const downloadUrl = useRenderUrl(downloadUrlTemplate);
-  const extension = useRender(extensionTemplate);
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(Typography, {
-      gutterBottom: true,
-      variant: "subtitle2",
-      children: schema.title
-    }), /*#__PURE__*/jsx(Paper, {
-      sx: {
-        height: 185,
-        justifyContent: "center",
-        display: "flex",
-        padding: 2,
-        overflow: "hidden"
-      },
-      variant: "outlined",
-      children: /*#__PURE__*/jsx(Image, {
-        src: downloadUrl,
-        style: {
-          height: "100%",
-          width: "auto"
-        },
-        extension: extension
-      })
-    })]
-  });
-};
-ImageUploadReadOnly.propTypes = {
-  schema: PropTypes.any,
-  renderedValues: PropTypes.any
-};
-
 const FieldContainer = props => {
   return /*#__PURE__*/jsx(Box$2, _extends({}, props, {
     sx: _extends({}, props.sx, {
@@ -17123,7 +17073,30 @@ const FieldContainer = props => {
 };
 FieldContainer.propTypes = Box$2.propTypes;
 
-registerPlugin(FilePondPluginFileValidateType, FilePondPluginImageExifOrientation, FilePondPluginImagePreview, FilePondPluginGetFile);
+registerPlugin(FilePondPluginFileValidateType, FilePondPluginFileValidateSize, FilePondPluginImageExifOrientation, FilePondPluginImagePreview, FilePondPluginGetFile);
+
+// Check enums below
+// source:https://github.com/pqina/filepond-docs/blob/master/content/patterns/API/filepond-object.md#filepond-status
+const FILE_STATUS = {
+  INIT: 1,
+  IDLE: 2,
+  PROCESSING_QUEUED: 9,
+  PROCESSING: 3,
+  PROCESSING_COMPLETE: 5,
+  // upload complete
+  PROCESSING_ERROR: 6,
+  PROCESSING_REVERT_ERROR: 10,
+  LOADING: 7,
+  LOAD_ERROR: 8
+};
+const FILE_ORIGIN = {
+  INPUT: 1,
+  // add by user
+  LIMBO: 2,
+  // temp file
+  LOCAL: 3 // pre-loaded files
+};
+
 const Upload = props => {
   const {
     schema,
@@ -17132,67 +17105,108 @@ const Upload = props => {
       "ui:options": {}
     },
     onChange,
-    disabled,
-    required
+    disabled
   } = props;
+  const emptyValue = uiSchema["ui:emptyValue"] || null;
   const isReadOnly = useReadOnly();
   const {
-    documentName: documentNameTemplate,
-    downloadUrl: downloadUrlTemplate,
-    extension: extensionTemplate,
     uploadDataSource,
-    mapUploadResponse,
     acceptedFileTypes,
     message,
-    isImage
+    // TODO: can be handled generic way with HOC
+    isImage = true,
+    // multiple = true, // change to false
+
+    isPreviewHidden = false,
+    idTemplate,
+    downloadUrlTemplate,
+    nameTemplate,
+    mapUploadResponseToIdTemplate,
+    maxFiles = 1,
+    maxFileSize = null,
+    maxTotalFileSize = null
   } = uiSchema["ui:options"];
-  const inputProps = uiSchema == null ? void 0 : uiSchema["ui:props"];
-  const documentName = useRender(documentNameTemplate);
-  const downloadUrl = useRenderUrl(downloadUrlTemplate);
-  useRender(extensionTemplate);
-  const [files, setFiles] = useState([]);
-  const uploadUrl = useMemo(() => getDataSourceUrl(uploadDataSource), [uploadDataSource]);
 
-  // INFO: this state is needed to prevent re-load of file during submit
-  const [currentFileId, setCurrentFileId] = useState();
-
-  // TODO: change this to useMemo with help of useLastestDeps
-  useEffect(() => {
-    if (formData === currentFileId) return;
-    const files = [{
-      source: documentName || "File",
-      options: {
-        type: "local",
-        metadata: {
-          url: downloadUrl
+  // TODO: implement single vs multipe mode, currently only multiple is active
+  // let _formData = formData; if (multiple && (formData === null ||
+  // formData === undefined)) { _formData = [];
+  // }
+  const _formData = formData || [];
+  const initialFiles = useMemo(() => {
+    return _formData.map(({
+      data
+    }) => {
+      const id = mustache.render(idTemplate, data);
+      const downloadUrl = downloadUrlTemplate ? decodeHtml$2(mustache.render(downloadUrlTemplate, data)) : downloadUrlTemplate;
+      const name = mustache.render(nameTemplate, data);
+      return {
+        // INFO: source appears in preview but also needed to identify
+        // the download URL. Check issue:
+        // https://github.com/pqina/filepond/issues/284
+        source: `${name} id:${id}`,
+        options: {
+          type: "local",
+          origin: downloadUrl,
+          // INFO: id is used in getFileIds function
+          metadata: {
+            url: downloadUrl,
+            id
+          }
         }
-      }
-    }];
-    if (formData != undefined) setFiles(files);
-  }, [formData]);
-  const handleLoad = (source, load, error) => {
-    fetch(downloadUrl).then(res => res.blob()).then(res => {
+      };
+    });
+  }, []);
+  const inputProps = uiSchema == null ? void 0 : uiSchema["ui:props"];
+  const filePondRef = useRef();
+  const getFileIds = () => {
+    var _filePondRef$current;
+    return ((_filePondRef$current = filePondRef.current) == null ? void 0 : _filePondRef$current.getFiles().filter(file => {
+      const {
+        origin,
+        status
+      } = file;
+      if (origin === FILE_ORIGIN.LOCAL) return true;
+      if (origin === FILE_ORIGIN.INPUT && status === FILE_STATUS.PROCESSING_COMPLETE) return true;
+    }).map(file => {
+      if (file.origin === FILE_ORIGIN.LOCAL) return file.getMetadata().id;
+      return file.serverId;
+    }).map(i => i.toString())) || [];
+  };
+  const uploadUrl = useMemo(() => getDataSourceUrl(uploadDataSource), [uploadDataSource]);
+  const handleLoad = (source, load, error, progress, abort, headers) => {
+    // INFO: source appears in preview but also needed to identify
+    // the download URL. Check issue:
+    // https://github.com/pqina/filepond/issues/284
+    const file = initialFiles.find(item => item.source === source);
+    const loadUrl = file.options.origin;
+    fetch(loadUrl).then(res => res.blob()).then(res => {
       const file = res.type === "jpeg/jfif" || !res.type ? new Blob([res], {
         type: "image/jpeg"
       }) : res;
-      load(file);
+      const preview = isPreviewHidden ? res : file;
+      load(preview);
     }).catch(error);
+
+    // Should expose an abort method so the request can be cancelled
+    return {
+      abort: () => abort()
+    };
   };
   const handleUploadResponse = res => {
     try {
       const jsonRes = JSON.parse(res);
-      const fileUuid = mapUploadResponse ? mustache.render(mapUploadResponse.fileUuid, jsonRes) : jsonRes.DATA.fileUuid;
-      setCurrentFileId(fileUuid);
-      onChange(fileUuid);
+      const id = mustache.render(mapUploadResponseToIdTemplate, jsonRes);
+      return id;
     } catch (err) {
-      console.log(err);
+      var _window$logger;
+      (_window$logger = window.logger) == null ? void 0 : _window$logger.sendLog({
+        name: `Upload response could not be parsed. ${err}`,
+        data: res
+      });
     }
   };
-  const handleDelete = () => {
-    setCurrentFileId();
-    setFiles([]);
-    onChange();
-  };
+
+  // TODO: move to message HOC
   const messageProps = {
     title: (message == null ? void 0 : message.title) || undefined,
     description: (message == null ? void 0 : message.description) || undefined,
@@ -17202,48 +17216,91 @@ const Upload = props => {
   const {
     error
   } = useNotify();
-  const filePondProps = {
-    acceptedFileTypes: acceptedFileTypes ? acceptedFileTypes : isImage ? ["image/*"] : null,
-    files,
-    allowMultiple: false,
-    server: {
-      url: uploadUrl,
-      process: {
-        method: "POST",
-        headers: {
-          Methods: "POST"
-        },
-        onload: handleUploadResponse,
-        onerror: e => {
-          var _window$logger;
-          const message = `The image could not be uploaded.`;
-          error(message);
-          (_window$logger = window.logger) == null ? void 0 : _window$logger.sendLog({
-            name: message,
-            data: e
-          });
-        }
+  const handleFileChange = () => {
+    const ids = getFileIds();
+
+    // TODO: fill the data
+    const value = ids.map(id => ({
+      value: id,
+      data: {}
+    }));
+    if (value.length === 0) onChange(emptyValue);else onChange(value);
+  };
+
+  // TODO: move to memo component
+  const FileUpload = useMemo(() => {
+    const styles = isReadOnly ? {
+      // INFO: hide drop panel and drop panel
+      "div>div>div.filepond--drop-label": {
+        display: "none"
       },
-      load: handleLoad,
-      revert: handleDelete
-    },
-    onupdatefiles: files => {
-      if (files.length === 0) {
-        onChange(undefined);
+      "button.filepond--action-remove-item": {
+        display: "none"
       }
-      setFiles(files);
-    },
-    allowProcess: false,
-    disabled: isReadOnly,
-    allowDownloadByUrl: true
-  };
-  const overrideProps = typeof inputProps === "function" ? inputProps(filePondProps) : inputProps;
+    } : null;
+    const getAcceptedFileTypes = () => {
+      if (acceptedFileTypes) return acceptedFileTypes;
+      if (isImage) return ["image/*"];
+      return null;
+    };
+    const filePondProps = {
+      acceptedFileTypes: getAcceptedFileTypes(),
+      files: initialFiles,
+      // files: undefined,
+      allowMultiple: true,
+      server: {
+        url: uploadUrl,
+        process: {
+          method: "POST",
+          headers: {
+            Methods: "POST"
+          },
+          onload: handleUploadResponse,
+          onerror: e => {
+            var _window$logger2;
+            const message = `The image could not be uploaded.`;
+            error(message);
+            (_window$logger2 = window.logger) == null ? void 0 : _window$logger2.sendLog({
+              name: message,
+              data: e
+            });
+          }
+        },
+        load: handleLoad
+      },
+      onprocessfile: () => handleFileChange(),
+      onremovefile: () => handleFileChange(),
+      maxParallelUploads: 3,
+      allowProcess: false,
+      disabled: isReadOnly,
+      allowDownloadByUrl: true,
+      maxFiles: maxFiles,
+      maxFileSize,
+      maxTotalFileSize,
+      // INFO: allowDrop create problem on file type validation       //
+      // (check badge form), for preview image allowDrop: false,      //
+      // labelIdle: "Click Here to Browse File(s)" 					//
+      allowFileTypeValidation: false
+    };
+    const overrideProps = typeof inputProps === "function" ? inputProps(filePondProps) : inputProps;
+    return /*#__PURE__*/jsx(Box$1, {
+      sx: styles,
+      children: /*#__PURE__*/jsx(FilePond, _extends({
+        ref: filePondRef
+      }, filePondProps, overrideProps))
+    });
+  }, []);
+
+  // TODO: better implementation
   if (isReadOnly) {
     if (formData == undefined) return /*#__PURE__*/jsx(ReadOnlyView, {
       label: schema.title,
       emptyViewText: "No file uploaded"
     });
-    if (isImage) return /*#__PURE__*/jsx(ImageUploadReadOnly, _extends({}, props));
+    return /*#__PURE__*/jsx(ReadOnlyView, {
+      label: schema.title,
+      renderValue: () => FileUpload
+    });
   }
   return /*#__PURE__*/jsxs(FieldContainer, {
     children: [/*#__PURE__*/jsxs(DisableWrapper, {
@@ -17260,7 +17317,7 @@ const Upload = props => {
         sx: {
           marginTop: 1
         },
-        children: /*#__PURE__*/jsx(FilePond, _extends({}, filePondProps, overrideProps))
+        children: FileUpload
       })]
     }), message && /*#__PURE__*/jsx(Alert, _extends({}, messageProps))]
   });