aefis-core-ui 2.3.0-rc4 → 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';
 
@@ -3296,12 +3297,12 @@ const outcomeConfiguration = {
 // about solution: https://stackoverflow.com/questions/22820162/mustache-js-escaping
 mustache.escape = _ => _;
 function compile() {}
-function render$2(template, data, defaultValue) {
+function render$1(template, data, defaultValue) {
   return template ? mustache.render(template, data) : defaultValue;
 }
 var template = {
   compile,
-  render: render$2
+  render: render$1
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
@@ -7659,69 +7660,6 @@ TextSearch.propTypes = {
   bottomGutter: PropTypes.number
 };
 
-const {
-  render: render$1
-} = template;
-
-/**
- * This function returns unique field inside filter item using render.
- *
- * @param {object} item
- * @param {object} filter
- * @returns {string}
- */
-const getFilterItemId = (item, configItem = {}) => {
-  var _item$data;
-  if (item.id) {
-    return item.id;
-  }
-  const template = configItem.idTemplate || configItem.template || configItem.optionTemplate;
-  if (template) {
-    return render$1(template, item.data || item);
-  }
-  if ((_item$data = item.data) != null && _item$data.id) {
-    return item.data.id;
-  }
-};
-
-/**
- * This function checks filter items; if index and id fields are missing then
- * try to sets them with possible ways.
- *
- * @param {array} filters
- * @param {array} configuration
- * @returns {array}
- */
-const formatFilters = (filters = [], configuration = []) => filters.map(filter => {
-  var _ref, _filter$index, _filter$id, _configuration$index, _configuration$index2, _configuration$index3, _configuration$index4, _configuration$index5;
-  // TODO: index should be defined on filters. There should not be need of
-  // search of index value throught type or map values.
-  const index = (_ref = (_filter$index = filter == null ? void 0 : filter.index) != null ? _filter$index : findIndexByType(filter, configuration)) != null ? _ref : findIndexByMap(filter, configuration);
-  const id = (_filter$id = filter == null ? void 0 : filter.id) != null ? _filter$id : getFilterItemId(filter, configuration[index]);
-
-  // TODO: These properties should ONLY be defined either in configuration
-  // or filters; currently data can be defined from both sources. Filter
-  // data prioritised over configuratuon.
-  const {
-    map = (_configuration$index = configuration[index]) == null ? void 0 : _configuration$index.map,
-    type = (_configuration$index2 = configuration[index]) == null ? void 0 : _configuration$index2.type,
-    template = (_configuration$index3 = configuration[index]) == null ? void 0 : _configuration$index3.template,
-    idTemplate = (_configuration$index4 = configuration[index]) == null ? void 0 : _configuration$index4.idTemplate,
-    optionTemplate = (_configuration$index5 = configuration[index]) == null ? void 0 : _configuration$index5.optionTemplate
-  } = filter;
-  return _extends({}, filter, {
-    template,
-    idTemplate,
-    optionTemplate,
-    type,
-    map,
-    index,
-    id
-  });
-});
-const findIndexByType = (filter, configuration) => filter.type !== undefined ? configuration.findIndex(config => config.type === filter.type) : undefined;
-const findIndexByMap = (filter, configuration) => filter.map !== undefined ? configuration.findIndex(config => config.map === filter.map) : undefined;
-
 const mapFilters = newFilters => {
   const mappedFilters = {};
   newFilters.map(filter => {
@@ -8096,7 +8034,8 @@ const FilterChips = ({
   const Filters = useMemo(() => {
     return /*#__PURE__*/jsx(Box$1, {
       sx: {
-        display: "flex"
+        display: "flex",
+        flexFlow: "wrap"
       },
       children: _filters.map(filter => /*#__PURE__*/jsx(Grow, {
         in: true,
@@ -8111,7 +8050,7 @@ const FilterChips = ({
             displayOptions: {
               hasIcon: filter.type !== "keyword"
             },
-            type: "businessObject",
+            type: filter.type || "businessObject",
             template: filter.template,
             data: filter.data,
             onDelete: () => {
@@ -8122,7 +8061,11 @@ const FilterChips = ({
       }, `filterPanelFilter-${filter.index}-${filter.id}`))
     });
   }, [_filters]);
-  const SortItems = useMemo(() => /*#__PURE__*/jsx(Fragment, {
+  const SortItems = useMemo(() => /*#__PURE__*/jsx(Box$1, {
+    sx: {
+      display: "flex",
+      flexFlow: "wrap"
+    },
     children: _sort.map(sortItem => /*#__PURE__*/jsx(Grow, {
       in: true,
       children: /*#__PURE__*/jsx("div", {
@@ -8360,6 +8303,36 @@ PanelDisplay.propTypes = {
   renderFilterSelection: PropTypes.bool
 };
 
+const usePrevState = (callback, current) => {
+  const [prev, setPrev] = useState(current);
+  if (prev !== current) {
+    callback(prev, current);
+    setPrev(current);
+  }
+};
+
+const useFilterState = filtersProp => {
+  const [filters, _setFilters] = useState(filtersProp);
+  const setFilters = useCallback((filters = []) => {
+    const sorted = filters.sort((a, b) => a.index - b.index);
+    _setFilters(sorted);
+  }, []);
+  usePrevState(() => {
+    setFilters(filtersProp);
+  }, filtersProp);
+  return [filters, setFilters];
+};
+
+const getItemId = (item, filter) => item.id || template.render(filter.idTemplate || filter.optionTemplate, item);
+const formatFilterItem = (index, filter, data) => ({
+  index: index,
+  id: getItemId(data, filter),
+  type: filter.type,
+  template: filter.optionTemplate,
+  idTemplate: filter.idTemplate,
+  map: filter.map,
+  data
+});
 const mapSort = value => value.map(i => i.map);
 const getSearchFilter = newFilters => (newFilters == null ? void 0 : newFilters.filter(filter => (filter == null ? void 0 : filter.type) === "keyword").map(item => item.data.id)) || [];
 
@@ -8378,7 +8351,7 @@ const FilterPanel = props => {
     searchTooltip,
     searchPlaceHolderText,
     configuration,
-    filters: filtersProp,
+    filters: filtersProp = [],
     displayType,
     limitTags,
     bottomGutter,
@@ -8388,14 +8361,10 @@ const FilterPanel = props => {
     sort: sortProp
   } = props;
   const [menuPosition, setMenuPosition] = useState(null);
-  const [filters, setFilters] = useState([]);
+  const [filters, setFilters] = useFilterState(filtersProp);
   const [sort, setSort] = useState(sortProp || []);
   const [panelSearch, setPanelSearch] = useState([]);
   const [pickerFilters, setPickerFilters] = useState([]);
-  useEffect(() => {
-    const formattedFilters = formatFilters(filtersProp, configuration);
-    setFilters(formattedFilters);
-  }, [filtersProp]);
 
   // TODO: replace it with useMemo
   useEffect(() => {
@@ -8421,9 +8390,8 @@ const FilterPanel = props => {
       onDataChange(filteredData, filterParameters, filters);
     }
   }, [filters, sort]);
-  const removeFilter = filter => {
-    console.log("remove filter ", filter);
-    const newFilterArray = filters == null ? void 0 : filters.filter(i => i.index !== filter.index || filter.id !== i.id);
+  const removeFilter = (filter = []) => {
+    const newFilterArray = filters.filter(i => i.index !== filter.index || filter.id !== i.id);
     setFilters(newFilterArray);
     if (!onApplyFilters) {
       if ((filter == null ? void 0 : filter.type) === "keyword" && onSearchChange) {
@@ -8460,69 +8428,14 @@ const FilterPanel = props => {
       onChange(mapFilters(newFilterArray), newFilterArray);
     }
   };
-  /** Had to revert this function as filters were not working properly 
-  const handleSetFilterType = (inputIndex, configItem, data = []) => {
-  	const newFiltersByUpdatedIndex = data.map((filterItem) => {
-  		return {
-  			index: inputIndex,
-  			id: filterItem.id || getFilterItemId(configItem, filterItem),
-  			type: configItem.type,
-  			template: configItem.optionTemplate,
-  			idTemplate: configItem.idTemplate,
-  			map: configItem.map,
-  			data: filterItem
-  		};
-  	});
-  	const filtersByUnupdatedIndex = filters.filter((i) => i.index !== inputIndex);
-  	const newFilters = [...filtersByUnupdatedIndex, ...newFiltersByUpdatedIndex];
-  		setFilters(newFilters);
-  	if (onChange) {
-  		// TO-CHECK: what does mapFilters do?
-  		onChange(mapFilters(newFilters), newFilters);
-  	}
-  }; */
-
   const handleSetFilterType = (index, filter, data) => {
-    const getItemId = item => item.id || template.render(filter.idTemplate || filter.optionTemplate, item);
-    if (!Array.isArray(data)) {
-      const _newFilterArray = filters.filter(i => index !== i.index);
-      if (data) {
-        const newItemId = getItemId(data);
-        _newFilterArray.push({
-          index: index,
-          id: newItemId,
-          type: filter.type,
-          template: filter.optionTemplate,
-          idTemplate: filter.idTemplate,
-          map: filter.map,
-          data: data
-        });
-      }
-      setFilters(_newFilterArray);
-      if (onChange && !onApplyFilters) {
-        onChange(mapFilters(_newFilterArray), _newFilterArray);
-      }
-      return;
-    }
-    data.map(item => {
-      const newItemId = getItemId(item);
-      if (!filters.find(i => i.index === index && i.id === newItemId)) {
-        filters.push({
-          index: index,
-          id: newItemId,
-          type: filter.type,
-          template: filter.optionTemplate,
-          idTemplate: filter.idTemplate,
-          map: filter.map,
-          data: item
-        });
-      }
-    });
-    const newFilterArray = filters.filter(i => index !== i.index || index === i.index && data.find(d => i.data.id === d.id));
-    setFilters(newFilterArray);
-    if (onChange && !onApplyFilters) {
-      onChange(mapFilters(newFilterArray), newFilterArray);
-    }
+    let _data = data;
+    if (!Array.isArray(data)) _data = data ? [data] : [];
+    const filtersWithoutUpdatedField = filters.filter(filter => index !== filter.index);
+    const newUpdatedFilters = _data.map(d => formatFilterItem(index, filter, d));
+    const newFilters = filtersWithoutUpdatedField.concat(newUpdatedFilters);
+    setFilters(newFilters);
+    if (!onApplyFilters) onChange == null ? void 0 : onChange(mapFilters(newFilters), newFilters);
   };
   const handleSortChange = value => {
     setSort(value);
@@ -16654,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 => {
@@ -17157,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, {
@@ -17211,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,
@@ -17220,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
-  } = 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]);
+    // TODO: can be handled generic way with HOC
+    isImage = true,
+    // multiple = true, // change to false
 
-  // INFO: this state is needed to prevent re-load of file during submit
-  const [currentFileId, setCurrentFileId] = useState();
+    isPreviewHidden = false,
+    idTemplate,
+    downloadUrlTemplate,
+    nameTemplate,
+    mapUploadResponseToIdTemplate,
+    maxFiles = 1,
+    maxFileSize = null,
+    maxTotalFileSize = null
+  } = uiSchema["ui:options"];
 
-  // 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,
@@ -17290,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, {
@@ -17348,7 +17317,7 @@ const Upload = props => {
         sx: {
           marginTop: 1
         },
-        children: /*#__PURE__*/jsx(FilePond, _extends({}, filePondProps, overrideProps))
+        children: FileUpload
       })]
     }), message && /*#__PURE__*/jsx(Alert, _extends({}, messageProps))]
   });