@onehat/ui 0.2.50 → 0.2.51

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.2.50",
+	"version": "0.2.51",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",

package/src/Components/Buttons/IconButton.js

@@ -5,6 +5,7 @@ import {
 	Spinner,
 	Tooltip,
 } from 'native-base';
+import styles from '../../Constants/Styles.js';
 
 const IconButton = React.forwardRef((props, ref) => {
 	const {
@@ -29,7 +30,7 @@ const IconButton = React.forwardRef((props, ref) => {
 							alignItems="center"
 							p={2}
 							_disabled={{
-								bg: 'trueGray.300',
+								bg: styles.ICON_BUTTON_BG_DISABLED,
 							}}
 							{...props}
 						>

package/src/Components/Form/Field/Date.js

@@ -277,6 +277,7 @@ export function DateElement(props) {
 							setTop(top + height);
 							setLeft(left);
 						}}
+						w={props.w || null}
 					/>
 					{/* <Pressable
 						flex={1}

package/src/Components/Hoc/withFilters.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, } from 'react';
+import { useState, useEffect, useId, } from 'react';
 import {
 	Column,
 	Modal,
@@ -34,6 +34,8 @@ export default function withFilters(WrappedComponent) {
 				customFilters = [], // of shape: { title, type, field, value, getRepoFilters(value) }
 				minFilters = 3,
 				maxFilters = 6,
+				getSaved,
+				setSaved,
 
 				// withData
 				Repository,
@@ -54,6 +56,7 @@ export default function withFilters(WrappedComponent) {
 					excludeFields: modelExcludeFields,
 					filteringDisabled: modelFilteringDisabled,
 				} = Repository.getSchema().model,
+				id = useId(),
 
 				// determine the starting filters
 				startingFilters = !_.isEmpty(customFilters) ? customFilters : // custom filters override component filters
@@ -103,7 +106,7 @@ export default function withFilters(WrappedComponent) {
 			}
 
 			const
-				[filters, setFilters] = useState(formattedStartingFilters), // array of formatted filters
+				[filters, setFiltersRaw] = useState(formattedStartingFilters), // array of formatted filters
 				[slots, setSlots] = useState(startingSlots), // array of field names user is currently filtering on; blank slots have a null entry in array
 				[modalFilters, setModalFilters] = useState([]),
 				[modalSlots, setModalSlots] = useState([]),
@@ -144,6 +147,29 @@ export default function withFilters(WrappedComponent) {
 					setModalFilters(newFilters);
 					setModalSlots(newSlots);
 				},
+				setFilters = (filters, doSetSlots = true, save = true) => {
+					setFiltersRaw(filters);
+
+					if (doSetSlots) {
+						const newSlots = [];
+						_.each(filters, (filter, ix) => {
+							if (searchAllText && ix === 0) {
+								return; // skip
+							}
+							newSlots.push(filter.field);
+						});
+						if (newSlots.length < minFilters) {
+							// Add more slots until we get to minFilters
+							for(let i = newSlots.length; i < minFilters; i++) {
+								newSlots.push(null);
+							}
+						}
+						setSlots(newSlots);
+					}
+					if (save && setSaved) {
+						setSaved(id + '-filters', filters);
+					}
+				},
 				onFilterChangeValue = (field, value) => {
 					// handler for when a filter value changes
 					const newFilters = [];
@@ -153,7 +179,7 @@ export default function withFilters(WrappedComponent) {
 						}
 						newFilters.push(filter);
 					});
-					setFilters(newFilters);
+					setFilters(newFilters, false);
 				},
 				onClearFilters = () => {
 					// Clears values for all active filters
@@ -162,7 +188,7 @@ export default function withFilters(WrappedComponent) {
 						filter.value = null;
 						newFilters.push(filter);
 					});
-					setFilters(newFilters);
+					setFilters(newFilters, false);
 				},
 				getFilterByField = (field) => {
 					return _.find(filters, (filter) => {
@@ -240,61 +266,73 @@ export default function withFilters(WrappedComponent) {
 				};
 
 			useEffect(() => {
-				// Whenever the filters change in some way, make repository conform to these new filters
-				const newRepoFilters = [];
+				(async () => {
+					
+					// Whenever the filters change in some way, make repository conform to these new filters
+					const newRepoFilters = [];
+					let filtersToUse = filters
+
+					if (!isReady && getSaved) {
+						const savedFilters = await getSaved(id + '-filters');
+						if (!_.isEmpty(savedFilters)) {
+							// load saved filters
+							filtersToUse = savedFilters;
+							setFilters(savedFilters, true, false); // false to skip save
+						}
+					}
 
-				if (isUsingCustomFilters) {
-					_.each(filters, (filter) => {
-						const repoFiltersFromFilter = filter.getRepoFilters(value);
-						_.each(repoFiltersFromFilter, (repoFilter) => { // one custom filter might generate multiple filters for the repository
-							newRepoFilters.push(repoFilter);
+					if (isUsingCustomFilters) {
+						_.each(filtersToUse, (filter) => {
+							const repoFiltersFromFilter = filter.getRepoFilters(value);
+							_.each(repoFiltersFromFilter, (repoFilter) => { // one custom filter might generate multiple filters for the repository
+								newRepoFilters.push(repoFilter);
+							});
 						});
-					});
-				} else {
-					const newFilterNames = [];
-					_.each(filters, (filter) => {
-						const {
-								field,
-								value,
-							} = filter,
-							isFilterRange = getIsFilterRange(field);
-						if (isFilterRange) {
-							if (!!value) {
-								const
-									highField = field + ' <=',
-									lowField = field + ' >=',
-									highValue = value.high,
-									lowValue = value.low;
-								newFilterNames.push(highField);
-								newFilterNames.push(lowField);
-								newRepoFilters.push({ name: highField, value: highValue, });
-								newRepoFilters.push({ name: lowField, value: lowValue, });
+					} else {
+						const newFilterNames = [];
+						_.each(filtersToUse, (filter) => {
+							const {
+									field,
+									value,
+								} = filter,
+								isFilterRange = getIsFilterRange(field);
+							if (isFilterRange) {
+								if (!!value) {
+									const
+										highField = field + ' <=',
+										lowField = field + ' >=',
+										highValue = value.high,
+										lowValue = value.low;
+									newFilterNames.push(highField);
+									newFilterNames.push(lowField);
+									newRepoFilters.push({ name: highField, value: highValue, });
+									newRepoFilters.push({ name: lowField, value: lowValue, });
+								}
+							} else {
+								newFilterNames.push(field);
+								newRepoFilters.push({ name: field, value, });
 							}
-						} else {
-							newFilterNames.push(field);
-							newRepoFilters.push({ name: field, value, });
-						}
-					});
+						});
 
-					// Go through previousFilterNames and see if any are no longer used. 
-					_.each(previousFilterNames, (name) => {
-						if (!inArray(name, newFilterNames)) {
-							newRepoFilters.push({ name, value: null, }); // no longer used, so set it to null so it'll be deleted
-						}
-					});
-					setPreviousFilterNames(newFilterNames);
-				}
+						// Go through previousFilterNames and see if any are no longer used. 
+						_.each(previousFilterNames, (name) => {
+							if (!inArray(name, newFilterNames)) {
+								newRepoFilters.push({ name, value: null, }); // no longer used, so set it to null so it'll be deleted
+							}
+						});
+						setPreviousFilterNames(newFilterNames);
+					}
 
-				Repository.filter(newRepoFilters, null, false); // false so other filters remain
+					Repository.filter(newRepoFilters, null, false); // false so other filters remain
 
-				if (searchAllText && Repository.searchAncillary && !Repository.hasBaseParam('searchAncillary')) {
-					Repository.setBaseParam('searchAncillary', true);
-				}
-
-				if (!isReady) {
-					setIsReady(true);
-				}
+					if (searchAllText && Repository.searchAncillary && !Repository.hasBaseParam('searchAncillary')) {
+						Repository.setBaseParam('searchAncillary', true);
+					}
 
+					if (!isReady) {
+						setIsReady(true);
+					}
+				})();
 			}, [filters]);
 
 			if (!isReady) {
@@ -324,6 +362,8 @@ export default function withFilters(WrappedComponent) {
 									}}
 									ml={1}
 									onPress={() => {
+										const f = filters;
+										const s = slots;
 										setModalFilters(filters);
 										setModalSlots(slots);
 										setIsFilterSelectorShown(true);
@@ -420,9 +460,7 @@ export default function withFilters(WrappedComponent) {
 									onSave={(data, e) => {
 										// Conform filters to this new choice of filters
 
-										const
-											newFilters = [],
-											newSlots = [];
+										const newFilters = [];
 
 										if (searchAllText) {
 											newFilters.push(filters[0]);
@@ -435,20 +473,10 @@ export default function withFilters(WrappedComponent) {
 											}
 
 											const newFilter = getFormattedFilter(field);
-
 											newFilters.push(newFilter);
-											newSlots.push(field);
 										});
 
-										if (newSlots.length < minFilters) {
-											// Add more slots until we get to minFilters
-											for(let i = newSlots.length; i < minFilters; i++) {
-												newSlots.push(null);
-											}
-										}
-
 										setFilters(newFilters);
-										setSlots(newSlots);
 
 										// Close the modal
 										setIsFilterSelectorShown(false);

package/src/Constants/Styles.js

@@ -61,6 +61,7 @@ const defaults = {
 	GRID_TOOLBAR_ITEMS_COLOR: 'trueGray.800',
 	GRID_TOOLBAR_ITEMS_DISABLED_COLOR: 'disabled',
 	GRID_TOOLBAR_ITEMS_ICON_SIZE: 'sm',
+	ICON_BUTTON_BG_DISABLED: 'trueGray.200',
 	PANEL_FOOTER_BG: 'primary.100', // :alpha.50
 	PANEL_HEADER_BG: 'primary.100',
 	PANEL_HEADER_BG_VERTICAL: 'primary.100',