@onehat/ui 0.3.380 → 0.4.0

package/src/Components/Hoc/withFilters.js

@@ -1,12 +1,12 @@
-import { useState, useEffect, useRef, } from 'react';
+import { forwardRef, useState, useEffect, useRef, } from 'react';
 import {
-	Box,
-	Column,
-	Modal,
-	Row,
-	ScrollView,
+	HStack,
+	// ScrollView,
 	Text,
-} from 'native-base';
+} from '../Gluestack';
+import {
+	ScrollView,
+} from 'react-native'
 import {
 	EDITOR_TYPE__PLAIN,
 } from '../../Constants/Editor.js';
@@ -14,11 +14,12 @@ import {
 	FILTER_TYPE_ANCILLARY
 } from '../../Constants/Filters.js';
 import Inflector from 'inflector-js';
-import inArray from '../../Functions/inArray.js';
 import testProps from '../../Functions/testProps.js';
+import inArray from '../../Functions/inArray.js';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
 import IconButton from '../Buttons/IconButton.js';
-import FormPanel from '../Panel/FormPanel.js';
+import Form from '../Form/Form.js';
+import Label from '../Form/Label.js';
 import Ban from '../Icons/Ban.js';
 import Gear from '../Icons/Gear.js';
 import Toolbar from '../Toolbar/Toolbar.js';
@@ -35,13 +36,19 @@ import _ from 'lodash';
 // Model defaultFilters should adjust to this new arrangement
 
 export default function withFilters(WrappedComponent) {
-	return (props) => {
+	return forwardRef((props, ref) => {
+
+		if (!props.useFilters) {
+			return <WrappedComponent {...props} ref={ref} />;
+		}
+
+		if (!props.Repository) {
+			throw Error('withFilters requires a Repository if useFilters === true');
+		}
+
 		const {
 				// config
-				useFilters = false,
 				searchAllText = true,
-				showLabels = true,
-				showFilterSelector = true,
 				showClearFiltersButton = true,
 				defaultFilters = [], // likely a list of field names, possibly could be of shape below
 				customFilters = [], // of shape: { title, type, field, value, getRepoFilters(value) }
@@ -55,446 +62,294 @@ export default function withFilters(WrappedComponent) {
 
 				// withComponent
 				self,
-			} = props;
 
-		let modal = null,
-			topToolbar = null;
-		
-		if (useFilters && Repository) {
-
-			const
-				// aliases
-				{
-					defaultFilters: modelDefaultFilters,
-					ancillaryFilters: modelAncillaryFilters,
-				} = Repository.getSchema().model,
-				id = props.id || props.self?.path,
-
-				// determine the starting filters
-				startingFilters = !_.isEmpty(customFilters) ? customFilters : // custom filters override component filters
-								!_.isEmpty(defaultFilters) ? defaultFilters : // component filters override model filters
-								!_.isEmpty(modelDefaultFilters) ? modelDefaultFilters : [],
-				isUsingCustomFilters = startingFilters === customFilters,
-				modelFilterTypes = Repository.getSchema().getFilterTypes(),
-				[isReady, setIsReady] = useState(false),
-				[isFilterSelectorShown, setIsFilterSelectorShown] = useState(false),
-				getFormattedFilter = (filter) => {
-					let formatted = null;
-					if (_.isString(filter)) {
-						const
-							field = filter,
-							propertyDef = Repository.getSchema().getPropertyDefinition(field);
-						
-						let title, type;
-						if (propertyDef) {
-							title = propertyDef.title;
-							type = propertyDef.filterType;
-						} else if (modelAncillaryFilters[field]) {
-							const ancillaryFilter = modelFilterTypes[field];
-							title = ancillaryFilter.title;
-							type = FILTER_TYPE_ANCILLARY;
-						} else {
-							throw Error('not a propertyDef, and not an ancillaryFilter!');
-						}
-						formatted = {
-							field,
-							title,
-							type,
-							value: null, // value starts as null
-						};
-					} else if (_.isPlainObject(filter)) {
-						// already formatted
-						formatted = filter;
-					}
-					return formatted;
-				};
-
-			let formattedStartingFilters = [],
-				startingSlots = [];
-			if (!isReady) {
-				// Generate initial starting state
-				if (searchAllText) {
-					formattedStartingFilters.push({ field: 'q', title: 'Search all text fields', type: 'Input', value: null, });
-				}
-				_.each(startingFilters, (filter) => {
+				// withModal
+				showModal,
+				hideModal,
+				updateModalBody,
+
+			} = props,
+
+			// aliases
+			{
+				defaultFilters: modelDefaultFilters,
+				ancillaryFilters: modelAncillaryFilters,
+			} = Repository.getSchema().model,
+			id = props.id || props.self?.path,
+
+			// determine the starting filters
+			startingFilters = !_.isEmpty(customFilters) ? customFilters : // custom filters override component filters
+							!_.isEmpty(defaultFilters) ? defaultFilters : // component filters override model filters
+							!_.isEmpty(modelDefaultFilters) ? modelDefaultFilters : [],
+			isUsingCustomFilters = startingFilters === customFilters,
+			modelFilterTypes = Repository.getSchema().getFilterTypes(),
+			[isReady, setIsReady] = useState(false),
+			getFormattedFilter = (filter) => {
+				let formatted = null;
+				if (_.isString(filter)) {
 					const
-						formattedFilter = getFormattedFilter(filter),
-						field = formattedFilter.field;
-					formattedStartingFilters.push(formattedFilter);
-					if (!isUsingCustomFilters) {
-						startingSlots.push(field);
-					}
-				});
-				if (startingSlots.length < minFilters) {
-					for (let i = startingSlots.length; i < minFilters; i++) {
-						startingSlots.push(null);
+						field = filter,
+						propertyDef = Repository.getSchema().getPropertyDefinition(field);
+					
+					let title, type;
+					if (propertyDef) {
+						title = propertyDef.title;
+						type = propertyDef.filterType;
+					} else if (modelAncillaryFilters[field]) {
+						const ancillaryFilter = modelFilterTypes[field];
+						title = ancillaryFilter.title;
+						type = FILTER_TYPE_ANCILLARY;
+					} else {
+						throw Error('not a propertyDef, and not an ancillaryFilter!');
 					}
+					formatted = {
+						field,
+						title,
+						type,
+						value: null, // value starts as null
+					};
+				} else if (_.isPlainObject(filter)) {
+					// already formatted
+					formatted = filter;
 				}
+				return formatted;
+			};
+
+		let formattedStartingFilters = [],
+			startingSlots = [];
+		if (!isReady) {
+			// Generate initial starting state
+			if (searchAllText) {
+				formattedStartingFilters.push({ field: 'q', title: 'Search all text fields', type: 'Input', value: null, });
 			}
-
-			const
-				filterCallbackRef = useRef(),
-				[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([]),
-				[previousFilterNames, setPreviousFilterNames] = useState([]), // names of filters the repository used last query
-				canAddSlot = (() => {
-					let canAdd = true;
-					if (!!maxFilters && modalSlots.length >= maxFilters) {
-						canAdd = false; // maxFilters has been reached
-					}
-					if (canAdd) {
-						_.each(modalSlots, (field) => {
-							if (_.isNil(field)) {
-								canAdd = false; // at least one slot has no selected field to filter
-								return false;
-							}
-						});
-					}
-					return canAdd;
-				})(),
-				canDeleteSlot = modalSlots.length > minFilters,
-				onAddSlot = () => {
-					if (!canAddSlot) {
-						return;
-					}
-					const newSlots = _.clone(modalSlots);
-					newSlots.push(null);
-					setModalSlots(newSlots);
-				},
-				onDeleteSlot = () => {
-					if (!canDeleteSlot) {
-						return;
-					}
-					const
-						newFilters = _.clone(modalFilters),
-						newSlots = _.clone(modalSlots);
-					newFilters.pop();
-					newSlots.pop();
-					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 && id) {
-						setSaved(id + '-filters', filters);
-					}
-					if (onFilterChange) {
-						onFilterChange(filters);
-					}
-				},
-				onFilterChangeValue = (field, value) => {
-					// handler for when a filter value changes
-					const newFilters = [];
-					_.each(filters, (filter) => {
-						if (filter.field === field) {
-							filter.value = value;
+			_.each(startingFilters, (filter) => {
+				const
+					formattedFilter = getFormattedFilter(filter),
+					field = formattedFilter.field;
+				formattedStartingFilters.push(formattedFilter);
+				if (!isUsingCustomFilters) {
+					startingSlots.push(field);
+				}
+			});
+			if (startingSlots.length < minFilters) {
+				for (let i = startingSlots.length; i < minFilters; i++) {
+					startingSlots.push(null);
+				}
+			}
+		}
+
+		const
+			filterCallbackRef = useRef(),
+			[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
+			[previousFilterNames, setPreviousFilterNames] = useState([]), // names of filters the repository used last query
+			setFilters = (filters, doSetSlots = true, save = true) => {
+				setFiltersRaw(filters);
+
+				if (doSetSlots) {
+					const newSlots = [];
+					_.each(filters, (filter, ix) => {
+						if (searchAllText && ix === 0) {
+							return; // skip
 						}
-						newFilters.push(filter);
+						newSlots.push(filter.field);
 					});
-					setFilters(newFilters, false);
-				},
-				onClearFilters = () => {
-					// Clears values for all active filters
-					const newFilters = [];
-					_.each(filters, (filter) => {
-						if (!inArray(filter.field, clearExceptions)) {
-							filter.value = null;
+					if (newSlots.length < minFilters) {
+						// Add more slots until we get to minFilters
+						for(let i = newSlots.length; i < minFilters; i++) {
+							newSlots.push(null);
 						}
-						newFilters.push(filter);
-					});
-					setFilters(newFilters, false);
-				},
-				getFilterByField = (field) => {
-					return _.find(filters, (filter) => {
-						return filter.field === field;
-					});
-				},
-				getFilterValue = (field) => {
-					const filter = getFilterByField(field);
-					return filter?.value;
-				},
-				getFilterType = (field) => {
-					// Finds filter type for the field name, from active filters
-					const filter = getFilterByField(field);
-					return filter?.type;
-				},
-				getIsFilterRange = (filter) => {
-					let filterType;
-					if (filter.type) {
-						// filter type is already determined
-						filterType = filter.type;
-					} else {
-						// try to find filter type from field name
-						const field = _.isString(filter) ? filter : filter.field;
-						filterType = getFilterType(field);
 					}
-					if (filterType?.type) {
-						filterType = filterType.type;
+					setSlots(newSlots);
+				}
+				if (save && id) {
+					setSaved(id + '-filters', filters);
+				}
+				if (onFilterChange) {
+					onFilterChange(filters);
+				}
+			},
+			onFilterChangeValue = (field, value) => {
+				// handler for when a filter value changes
+				const newFilters = [];
+				_.each(filters, (filter) => {
+					if (filter.field === field) {
+						filter.value = value;
+					}
+					newFilters.push(filter);
+				});
+				setFilters(newFilters, false);
+			},
+			onClearFilters = () => {
+				// Clears values for all active filters
+				const newFilters = [];
+				_.each(filters, (filter) => {
+					if (!inArray(filter.field, clearExceptions)) {
+						filter.value = null;
+					}
+					newFilters.push(filter);
+				});
+				setFilters(newFilters, false);
+			},
+			getFilterByField = (field) => {
+				return _.find(filters, (filter) => {
+					return filter.field === field;
+				});
+			},
+			getFilterValue = (field) => {
+				const filter = getFilterByField(field);
+				return filter?.value;
+			},
+			getFilterType = (field) => {
+				// Finds filter type for the field name, from active filters
+				const filter = getFilterByField(field);
+				return filter?.type;
+			},
+			getIsFilterRange = (filter) => {
+				let filterType;
+				if (filter.type) {
+					// filter type is already determined
+					filterType = filter.type;
+				} else {
+					// try to find filter type from field name
+					const field = _.isString(filter) ? filter : filter.field;
+					filterType = getFilterType(field);
+				}
+				if (filterType?.type) {
+					filterType = filterType.type;
+				}
+				return inArray(filterType, ['NumberRange', 'DateRange']);
+			},
+			filterById = (id, cb) => {
+				onClearFilters();
+				filterCallbackRef.current = cb; // store the callback, so we can call it the next time this HOC renders with new filters
+				const newFilters = _.clone(filters);
+				_.remove(newFilters, (filter) => {
+					return filter.field === 'q';
+				});
+				newFilters.unshift({
+					field: 'q',
+					title: 'Search all text fields',
+					type: 'Input',
+					value: 'id:' + id,
+				});
+				setFilters(newFilters, false, false);
+			},
+			renderFilters = () => {
+				const
+					filterProps = {
+						autoAdjustPageSizeToHeight: false,
+						pageSize: 20,
+						uniqueRepository: true,
+						className: 'Filter mx-1',
+					},
+					filterElements = [];
+				_.each(filters, (filter, ix) => {
+					let Element,
+						elementProps = {};
+					let {
+							field,
+							type: filterType,
+							title,
+							className = '',
+						} = filter;
+						
+					if (!title) {
+						const propertyDef = Repository.getSchema().getPropertyDefinition(field);
+						title = propertyDef?.title;
 					}
-					return inArray(filterType, ['NumberRange', 'DateRange']);
-				},
-				filterById = (id, cb) => {
-					onClearFilters();
-					filterCallbackRef.current = cb; // store the callback, so we can call it the next time this HOC renders with new filters
-					const newFilters = _.clone(filters);
-					_.remove(newFilters, (filter) => {
-						return filter.field === 'q';
-					});
-					newFilters.unshift({
-						field: 'q',
-						title: 'Search all text fields',
-						type: 'Input',
-						value: 'id:' + id,
-					});
-					setFilters(newFilters, false, false);
-				},
-				renderFilters = () => {
-					const
-						filterProps = {
-							mx: 1,
-							autoAdjustPageSizeToHeight: false,
-							pageSize: 20,
-							uniqueRepository: true,
-						},
-						filterElements = [];
-					_.each(filters, (filter, ix) => {
-						let Element,
-							elementProps = {};
-						let {
-								field,
-								type: filterType,
-								title,
-							} = filter;
-							
-						if (!title) {
-							const propertyDef = Repository.getSchema().getPropertyDefinition(field);
-							title = propertyDef?.title;
-						}
 
-						if (_.isString(filterType)) {
-							if (filterType === FILTER_TYPE_ANCILLARY) {
-								title = modelFilterTypes[field].title;
-								const tagOrCombo = Repository.schema.model.ancillaryFiltersThatUseTags && inArray(field, Repository.schema.model.ancillaryFiltersThatUseTags) ? 'Tag' : 'Combo';
-								filterType = Inflector.camelize(Inflector.pluralize(field)) + tagOrCombo; // Convert field to PluralCamelCombo
-							}
-							Element = getComponentFromType(filterType);
-							if (filterType === 'Input') {
-								elementProps.autoSubmit = true;
-							}
-						} else if (_.isPlainObject(filterType)) {
-							const {
-									type,
-									...p
-								} = filterType;
-							elementProps = p;
-							Element = getComponentFromType(type);
-							if (type === 'Input') {
-								elementProps.autoSubmit = true;
-							}
-						}
-						if (!Element) {
-							return; // to protect against errors
+					if (_.isString(filterType)) {
+						if (filterType === FILTER_TYPE_ANCILLARY) {
+							title = modelFilterTypes[field].title;
+							const tagOrCombo = Repository.schema.model.ancillaryFiltersThatUseTags && inArray(field, Repository.schema.model.ancillaryFiltersThatUseTags) ? 'Tag' : 'Combo';
+							filterType = Inflector.camelize(Inflector.pluralize(field)) + tagOrCombo; // Convert field to PluralCamelCombo
 						}
-						if (field === 'q') {
-							elementProps.flex = 1;
-							elementProps.minWidth = 100;
+						Element = getComponentFromType(filterType);
+						if (filterType === 'Input') {
+							elementProps.autoSubmit = true;
 						}
-
-						const tooltip = filter.tooltip || title;
-						let filterElement = <Element
-												{...testProps('filter-' + field)}
-												key={'filter-' + field}
-												tooltip={tooltip}
-												placeholder={tooltip}
-												value={getFilterValue(field)}
-												onChangeValue={(value) => onFilterChangeValue(field, value)}
-												{...filterProps}
-												{...elementProps}
-											/>;
-						if (showLabels && field !== 'q') {
-							filterElement = <Row key={'label-' + ix} alignItems="center" h="100%">
-												<Text ml={2} mr={1} fontSize={UiGlobals.styles.FILTER_LABEL_FONTSIZE}>{title}</Text>
-												{filterElement}
-											</Row>;
-						}
-						// add a container for each filter
-						filterElement = <Row
-											key={'filter-' + ix}
-											bg="trueGray.100"
-											px={1}
-											mx={1}
-											borderRadius={6}
-											borderLeftWidth={1}
-											borderLeftColor="#fff"
-											alignItems="center"
-											h="100%"
-										>
-											{filterElement}
-										</Row>;
-
-						filterElements.push(filterElement);
-					});
-					return filterElements;
-				};
-
-			useEffect(() => {
-				(async () => {
-					
-					// Whenever the filters change in some way, make repository conform to these new filters
-					const newRepoFilters = [];
-					let filtersToUse = filters
-
-					if (!isReady && id && !isUsingCustomFilters) { // can't save custom filters bc we can't save JS fns in Repository (e.g. getRepoFilters)
-						const savedFilters = await getSaved(id + '-filters');
-						if (!_.isEmpty(savedFilters)) {
-							// load saved filters
-							filtersToUse = savedFilters;
-							setFilters(savedFilters, true, false); // false to skip save
+					} else if (_.isPlainObject(filterType)) {
+						const {
+								type,
+								...p
+							} = filterType;
+						elementProps = p;
+						Element = getComponentFromType(type);
+						if (type === 'Input') {
+							elementProps.autoSubmit = true;
 						}
 					}
-
-					if (isUsingCustomFilters) {
-						_.each(filtersToUse, ({ field, value, getRepoFilters }) => {
-							if (getRepoFilters) {
-								let repoFiltersFromFilter = getRepoFilters(value) || [];
-								if (!_.isArray(repoFiltersFromFilter)) {
-									repoFiltersFromFilter = [repoFiltersFromFilter];
-								}
-								_.each(repoFiltersFromFilter, (repoFilter) => { // one custom filter might generate multiple filters for the repository
-									newRepoFilters.push(repoFilter);
-								});
-							} else {
-								newRepoFilters.push({ name: field, value, });
-							}
-						});
-					} else {
-						const newFilterNames = [];
-						_.each(filtersToUse, (filter) => {
-							const {
-									field,
-									value,
-									type,
-								} = filter,
-								isFilterRange = getIsFilterRange(filter);
-							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
-									isAncillary = type === FILTER_TYPE_ANCILLARY,
-									filterName = (isAncillary ? 'ancillary___' : '') + field;
-								newFilterNames.push(filterName);
-								newRepoFilters.push({ name: filterName, 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);
+					if (!Element) {
+						return; // to protect against errors
 					}
-
-					if (searchAllText && Repository.searchAncillary && !Repository.hasBaseParam('searchAncillary')) {
-						Repository.setBaseParam('searchAncillary', true);
+					if (field === 'q') {
+						elementProps.flex = 1;
+						elementProps.minWidth = 100;
 					}
 
-					await Repository.filter(newRepoFilters, null, false); // false so other filters remain
-
-					if (filterCallbackRef.current) {
-						filterCallbackRef.current(); // call the callback
-						filterCallbackRef.current = null; // clear the callback
+					const tooltip = filter.tooltip || title;
+					let filterClassName = filterProps.className + ` Filter-${field}`;
+					if (className) {
+						filterClassName += ' ' + className;
 					}
-
-					if (!isReady) {
-						setIsReady(true);
+					if (elementProps.className) {
+						filterClassName += ' ' + elementProps.className;
 					}
-				})();
-			}, [filters]);
-
-			if (!isReady) {
-				return null;
-			}
-
-			if (self) {
-				self.filterById = filterById;
-				self.setFilters = setFilters;
-			}
-
-			const
-				renderedFilters = renderFilters(),
-				hasFilters = !!renderedFilters.length;
-			topToolbar = <Toolbar>
-							<Row flex={1} alignItems="center">
-								<ScrollView horizontal={true} contentContainerStyle={{ alignItems: 'center' }}>
-									<Text fontStyle="italic" pr={2} userSelect="none">Filters:{hasFilters ? '' : ' None'}</Text>
-									{renderedFilters}
-								</ScrollView>
-							</Row>
-							<Row flex={hasFilters ? null : 1} alignItems="center" alignSelf="flex-end">
-								{showClearFiltersButton && 
-									<IconButton
-										{...testProps('clearFiltersBtn')}
-										key="clearFiltersBtn"
-										_icon={{
-											as: Ban,
-										}}
-										ml={1}
-										onPress={onClearFilters}
-										tooltip="Clear all filters"
-									/>}
-								{showFilterSelector && !isUsingCustomFilters && 
-									<IconButton
-										{...testProps('swapFiltersBtn')}
-										key="swapFiltersBtn"
-										_icon={{
-											as: Gear,
-										}}
-										ml={1}
-										onPress={() => {
-											const f = filters;
-											const s = slots;
-											setModalFilters(filters);
-											setModalSlots(slots);
-											setIsFilterSelectorShown(true);
-										}}
-										tooltip="Swap filters"
-									/>}
-							</Row>
-						</Toolbar>;
+					let filterElement = <Element
+											{...testProps('filter-' + field)}
+											tooltip={tooltip}
+											placeholder={tooltip}
+											value={getFilterValue(field)}
+											onChangeValue={(value) => onFilterChangeValue(field, value)}
+											isFilter={true}
+											{...filterProps}
+											{...elementProps}
+											className={filterClassName}
+										/>;
+					if (field !== 'q') {
+						filterElement = <>
+											<Label
+												className="min-w-0 mr-1"
+												_text={{
+													className: UiGlobals.styles.FILTER_LABEL_FONTSIZE,
+												}}
+											>{title}</Label>
+											{filterElement}
+										</>;
+					}
+					// add a container for each filter
+					filterElement = <HStack
+										key={'filter-' + ix}
+										className={`
+											Filter-container-HStack
+											h-full
+											px-1
+											mx-1
+											bg-grey-100
+											rounded-[6px]
+											border
+											border-l-white
+											items-center
+										`}
+									>
+										{filterElement}
+									</HStack>;
+
+					filterElements.push(filterElement);
+				});
+				return filterElements;
+			},
+			onShowFilterSelector = () => {
+				showModal({
+					title: 'Filter Selector',
+					body: buildModalBody(filters, slots),
+					canClose: true,
+					w: 500,
+				});
+			},
+			buildModalBody = (modalFilters, modalSlots) => {
 
-			if (isFilterSelectorShown) { // this is always false when isUsingCustomFilters
-				// Build the modal to select the filters
 				const
 					modalFilterElements = [],
 					usedFields = _.filter(_.map(modalFilters, (filter) => {
@@ -502,6 +357,7 @@ export default function withFilters(WrappedComponent) {
 					}), el => !_.isNil(el)),
 					formStartingValues = {};
 				
+				// populate modalFilterElements and formStartingValues
 				_.each(modalSlots, (field, ix) => {
 
 					// Create the data for the combobox. (i.e. List all the possible filters for this slot)
@@ -540,20 +396,56 @@ export default function withFilters(WrappedComponent) {
 							const
 								newFilters = _.clone(modalFilters),
 								newSlots = _.clone(modalSlots),
-								i = searchAllText ? ixPlusOne : ix; // compensate for 'q' filter's possible presence
+								i = ix;//searchAllText ? ixPlusOne : ix; // compensate for 'q' filter's possible presence
 
 							newFilters[i] = getFormattedFilter(value);
 							newSlots[i] = value;
 							
-							setModalFilters(newFilters);
-							setModalSlots(newSlots);
+							rebuildModalBody(newFilters, newSlots);
 						},
 					});
 
 					formStartingValues[filterName] = field;
 				});
 
+				const
+					canAddSlot = (() => {
+						let canAdd = true;
+						if (!!maxFilters && modalSlots.length >= maxFilters) {
+							canAdd = false; // maxFilters has been reached
+						}
+						if (canAdd) {
+							_.each(modalSlots, (field) => {
+								if (_.isNil(field)) {
+									canAdd = false; // at least one slot has no selected field to filter
+									return false;
+								}
+							});
+						}
+						return canAdd;
+					})(),
+					canDeleteSlot = modalSlots.length > minFilters;
 				if (canAddSlot || canDeleteSlot) {
+					const
+						onAddSlot = () => {
+							if (!canAddSlot) {
+								return;
+							}
+							const newSlots = _.clone(modalSlots);
+							newSlots.push(null);
+							rebuildModalBody(modalFilters, newSlots);
+						},
+						onDeleteSlot = () => {
+							if (!canDeleteSlot) {
+								return;
+							}
+							const
+								newFilters = _.clone(modalFilters),
+								newSlots = _.clone(modalSlots);
+							newFilters.pop();
+							newSlots.pop();
+							rebuildModalBody(newFilters, newSlots);
+						};
 					modalFilterElements.push({
 						type: 'PlusMinusButton',
 						name: 'plusMinusButton',
@@ -561,72 +453,206 @@ export default function withFilters(WrappedComponent) {
 						minusHandler: onDeleteSlot,
 						isPlusDisabled: !canAddSlot,
 						isMinusDisabled: !canDeleteSlot,
-						justifyContent: 'flex-end',
+						plusTooltip: 'Add another filter slot',
+						minusTooltip: 'Remove the last filter slot',
+						className: 'justify-end',
 					});
 				}
 
-				modal = <Modal
-							isOpen={true}
-							onClose={() => setIsFilterSelectorShown(false)}
-						>
-							<Column bg="#fff" w={500}>
-								<FormPanel
-									title="Filter Selector"
-									instructions="Please select which fields to filter by."
-									editorType={EDITOR_TYPE__PLAIN}
-									flex={1}
-									startingValues={formStartingValues}
-									items={[
-										{
-											type: 'Column',
-											flex: 1,
-											items: modalFilterElements,
-										},
-									]}
-									onCancel={(e) => {
-										setIsFilterSelectorShown(false);
-									}}
-									onClose={(e) => {
-										setIsFilterSelectorShown(false);
-									}}
-									onSave={(data, e) => {
-										// Conform filters to this new choice of filters
-
-										const newFilters = [];
-
-										if (searchAllText) {
-											newFilters.push(filters[0]);
-										}
-
-										// Conform the filters to the modal selection
-										_.each(data, (field, ix) => {
-											if (_.isEmpty(field) || !ix.match(/^filter/)) {
-												return;
-											}
-
-											const newFilter = getFormattedFilter(field);
-											newFilters.push(newFilter);
-										});
-
-										setFilters(newFilters);
-
-										// Close the modal
-										setIsFilterSelectorShown(false);
-									}}
-									onReset={() => {
-										setModalFilters(filters);
-										setModalSlots(slots);
-									}}
-								/>
-							</Column>
-						</Modal>;
-			}
+				return <Form
+							instructions="Please select which fields to filter by."
+							editorType={EDITOR_TYPE__PLAIN}
+							className="flex-1"
+							startingValues={formStartingValues}
+							items={[
+								{
+									name: 'instructions',
+									type: 'DisplayField',
+									text: 'Please select which fields to filter by.',
+									className: 'mb-3',
+								},
+								{
+									type: 'Column',
+									flex: 1,
+									items: modalFilterElements,
+								},
+							]}
+							onReset={() => {
+								rebuildModalBody(filters, slots);
+							}}
+							onCancel={(e) => {
+								hideModal();
+							}}
+							onClose={(e) => {
+								hideModal();
+							}}
+							onSave={(data, e) => {
+								// Conform filters to this new choice of filters
+
+								const newFilters = [];
+
+								if (searchAllText) {
+									newFilters.push(filters[0]);
+								}
 
-		} // END if (useFilters)
+								// Conform the filters to the modal selection
+								_.each(data, (field, ix) => {
+									if (_.isEmpty(field) || !ix.match(/^filter/)) {
+										return;
+									}
+
+									const newFilter = getFormattedFilter(field);
+									newFilters.push(newFilter);
+								});
+
+								setFilters(newFilters);
+
+								// Close the modal
+								hideModal();
+							}}
+						/>;
+			},
+			rebuildModalBody = (filters, slots) => {
+				updateModalBody(buildModalBody(filters, slots));
+			};
+
+		useEffect(() => {
+			(async () => {
+				
+				// Whenever the filters change in some way, make repository conform to these new filters
+				const newRepoFilters = [];
+				let filtersToUse = filters
+
+				if (!isReady && id && !isUsingCustomFilters) { // can't save custom filters bc we can't save JS fns in Repository (e.g. getRepoFilters)
+					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(filtersToUse, ({ field, value, getRepoFilters }) => {
+						if (getRepoFilters) {
+							let repoFiltersFromFilter = getRepoFilters(value) || [];
+							if (!_.isArray(repoFiltersFromFilter)) {
+								repoFiltersFromFilter = [repoFiltersFromFilter];
+							}
+							_.each(repoFiltersFromFilter, (repoFilter) => { // one custom filter might generate multiple filters for the repository
+								newRepoFilters.push(repoFilter);
+							});
+						} else {
+							newRepoFilters.push({ name: field, value, });
+						}
+					});
+				} else {
+					const newFilterNames = [];
+					_.each(filtersToUse, (filter) => {
+						const {
+								field,
+								value,
+								type,
+							} = filter,
+							isFilterRange = getIsFilterRange(filter);
+						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
+								isAncillary = type === FILTER_TYPE_ANCILLARY,
+								filterName = (isAncillary ? 'ancillary___' : '') + field;
+							newFilterNames.push(filterName);
+							newRepoFilters.push({ name: filterName, 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);
+				}
+
+				if (searchAllText && Repository.searchAncillary && !Repository.hasBaseParam('searchAncillary')) {
+					Repository.setBaseParam('searchAncillary', true);
+				}
+
+				await Repository.filter(newRepoFilters, null, false); // false so other filters remain
+
+				if (filterCallbackRef.current) {
+					filterCallbackRef.current(); // call the callback
+					filterCallbackRef.current = null; // clear the callback
+				}
+
+				if (!isReady) {
+					setIsReady(true);
+				}
+			})();
+		}, [filters]);
+
+		if (!isReady) {
+			return null;
+		}
+
+		if (self) {
+			self.filterById = filterById;
+			self.setFilters = setFilters;
+		}
+
+		const
+			renderedFilters = renderFilters(),
+			hasFilters = !!renderedFilters.length,
+			toolbar = <Toolbar>
+						<HStack className="withFilters-scrollViewContainer flex-1 items-center">
+							<ScrollView className="ScrollView" horizontal={true} contentContainerStyle={{ alignItems: 'center' }}>
+								<Text
+									className={`
+										withFilters-filtersLabel
+										italic-italic
+										pr-2
+										select-none
+										${hasFilters ? 'flex-1' : 'italic'}
+									`}>{hasFilters ? 'Filters:' : 'No Filters'}</Text>
+								{renderedFilters}
+							</ScrollView>
+						</HStack>
+						{(showClearFiltersButton || !isUsingCustomFilters) && 
+							<HStack className="withFilters-endButtonsContainer self-end items-center h-full">
+								{showClearFiltersButton && 
+									<IconButton
+										{...testProps('clearFiltersBtn')}
+										key="clearFiltersBtn"
+										icon={Ban}
+										className="ml-1"
+										onPress={onClearFilters}
+										tooltip="Clear all filters"
+										isDisabled={!hasFilters}
+									/>}
+								{!isUsingCustomFilters && 
+									<IconButton
+										{...testProps('swapFiltersBtn')}
+										key="swapFiltersBtn"
+										icon={Gear}
+										className="ml-1"
+										onPress={onShowFilterSelector}
+										tooltip="Set filters"
+									/>}
+							</HStack>}
+					</Toolbar>;
+		
+		return <WrappedComponent {...props} topToolbar={toolbar} ref={ref} />;
 
-		return <>
-					<WrappedComponent topToolbar={topToolbar} {...props} />
-					{modal}
-				</>;
-	};
+	});
 }