aefis-core-ui 2.2.3-rc5 → 2.2.3-rc7

package/dist/index.modern.js

@@ -3296,12 +3296,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.
@@ -7663,69 +7663,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 => {
@@ -8100,7 +8037,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,
@@ -8115,7 +8053,7 @@ const FilterChips = ({
             displayOptions: {
               hasIcon: filter.type !== "keyword"
             },
-            type: "businessObject",
+            type: filter.type || "businessObject",
             template: filter.template,
             data: filter.data,
             onDelete: () => {
@@ -8126,7 +8064,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", {
@@ -8364,6 +8306,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)) || [];
 
@@ -8382,7 +8354,7 @@ const FilterPanel = props => {
     searchTooltip,
     searchPlaceHolderText,
     configuration,
-    filters: filtersProp,
+    filters: filtersProp = [],
     displayType,
     limitTags,
     bottomGutter,
@@ -8392,14 +8364,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(() => {
@@ -8425,9 +8393,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) {
@@ -8464,69 +8431,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);
@@ -9962,13 +9874,13 @@ const Drawer = props => {
   };
   const theme = useTheme$1();
   const appBarStyle = {
-    primary: {
+    primary: _extends({
       color: "#ffffff"
-    },
-    secondary: {
+    }, props.appBarStyle),
+    secondary: _extends({
       backgroundColor: "#ffffff",
       color: "#333333"
-    }
+    }, props.appBarStyle)
   };
   const closeDrawerIconStyle = {
     color: props.headerColor === "secondary" ? "rgba(0, 0, 0, 0.54)" : "#ffffff",
@@ -10176,6 +10088,8 @@ Drawer.propTypes = {
   menuPositionOffset: PropTypes.oneOf(["none", "primaryMenu", "secondaryMenu"]),
   /** Additional styles to apply to the drawer paper. */
   paperStyle: PropTypes.any,
+  /** Additional styles to apply to the appbar. */
+  appBarStyle: PropTypes.any,
   /** Whether or not to show the header divider */
   headerDivider: PropTypes.bool,
   /** The component to use while rendering the drawer title */