@onehat/ui 0.3.0 → 0.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.0",
+	"version": "0.3.3",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -30,6 +30,7 @@
 		"@k-renwick/colour-mixer": "^1.2.1",
 		"@reduxjs/toolkit": "^1.9.5",
 		"js-cookie": "^3.0.5",
+		"inflector-js": "^1.0.1",
 		"native-base": "^3.4.28",
 		"react-hook-form": "^7.45.0",
 		"react-redux": "^8.1.2",

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

@@ -12,13 +12,9 @@ import {
 } from '../../../../Constants/UiModes.js';
 import UiGlobals from '../../../../UiGlobals.js';
 import Input from '../Input.js';
-import withAlert from '../../../Hoc/withAlert.js';
 import withData from '../../../Hoc/withData.js';
-import withEvents from '../../../Hoc/withEvents.js';
-import withPresetButtons from '../../../Hoc/withPresetButtons.js';
 import withSelection from '../../../Hoc/withSelection.js';
 import withValue from '../../../Hoc/withValue.js';
-import withWindowedEditor from '../../../Hoc/withWindowedEditor.js';
 import emptyFn from '../../../../Functions/emptyFn.js';
 import { Grid, WindowedGridEditor } from '../../../Grid/Grid.js';
 import IconButton from '../../../Buttons/IconButton.js';
@@ -53,9 +49,6 @@ export function ComboComponent(props) {
 			idIx,
 			displayIx,
 
-			// withEvents
-			onEvent,
-
 			// withSelection
 			selection,
 			setSelection,
@@ -70,11 +63,11 @@ export function ComboComponent(props) {
 		inputRef = useRef(),
 		triggerRef = useRef(),
 		menuRef = useRef(),
-		// isTyping = useRef(false),
-		// typingTimeout = useRef(),
+		isManuallyEnteringText = useRef(false),
+		savedSearch = useRef(null),
+		typingTimeout = useRef(),
 		[isMenuShown, setIsMenuShown] = useState(false),
 		[isRendered, setIsRendered] = useState(false),
-		[isManuallyEnteringText, setIsManuallyEnteringText] = useState(false), // when typing a value, not using trigger/grid
 		[textValue, setTextValue] = useState(''),
 		[width, setWidth] = useState(0),
 		[height, setHeight] = useState(null),
@@ -126,6 +119,18 @@ export function ComboComponent(props) {
 			}
 			setIsMenuShown(false);
 		},
+		getIsManuallyEnteringText = () => {
+			return isManuallyEnteringText.current;
+		},
+		setIsManuallyEnteringText = (bool) => {
+			isManuallyEnteringText.current = bool;
+		},
+		getSavedSearch = () => {
+			return savedSearch.current;
+		},
+		setSavedSearch = (val) => {
+			savedSearch.current = val;
+		},
 		toggleMenu = () => {
 			setIsMenuShown(!isMenuShown);
 		},
@@ -168,22 +173,20 @@ export function ComboComponent(props) {
 				return;
 			}
 			setTextValue(value);
-			// searchForMatches(value);
-			// setIsManuallyEnteringText(true);
-
-			// isTyping.current = true;
-			// if (typingTimeout.current) {
-			// 	clearTimeout(typingTimeout.current);
-			// }
-			// typingTimeout.current = setTimeout(() => {
-			// 	isTyping.current = false;
-			// }, 300);
+
+			setIsManuallyEnteringText(true);
+			clearTimeout(typingTimeout.current);
+			typingTimeout.current = setTimeout(() => {
+				searchForMatches(value);
+			}, 300);
 		},
 		onInputBlur = (e) => {
 			const {
 					relatedTarget
 				} = e;
 
+			setIsManuallyEnteringText(false);
+
 			// If user focused on the trigger and text is blank, clear the selection and close the menu
 			if ((triggerRef.current === relatedTarget || triggerRef.current.contains(relatedTarget)) && (_.isEmpty(textValue) || _.isNil(textValue))) {
 				setSelection([]); // delete current selection
@@ -211,7 +214,7 @@ export function ComboComponent(props) {
 			if (_.isEmpty(textValue) || _.isNil(textValue)) {
 				setSelection([]); // delete current selection
 
-			} else if (isManuallyEnteringText) {
+			} else if (getIsManuallyEnteringText()) {
 				if (forceSelection) {
 					setSelection([]); // delete current selection
 					hideMenu();
@@ -257,43 +260,57 @@ export function ComboComponent(props) {
 				hideMenu();
 			}
 		},
-		searchForMatches = (value) => {
-
-			// Do a search for this value
-			// TODO: Do fuzzy seach for results
-			// Would have to do differently for remote repositories
-			// Narrow results in grid to those that match the filter.
-			// If filter is cleared, show original results.
+		searchForMatches = async (value) => {
 
 			let found;
 			if (Repository) {
 				
-				debugger;
-				
 				// Set filter
 				let filter = {};
-				if (value !== '') {
+				if (Repository.isRemote) {
+					let searchField = 'q';
+
+					// Check to see if displayField is a real field
+					const
+						schema = Repository.getSchema(),
+						displayFieldName = schema.model.displayProperty;
+						displayFieldDef = schema.getPropertyDefinition(displayFieldName);
+					if (!displayFieldDef.isVirtual) {
+						searchField = displayFieldName + ' LIKE';
+					}
 
-					// TODO: Want to build a search functionality that shows results in combo grid
+					if (!_.isEmpty(value)) {
+						value += '%';
+					}
 
-					if (Repository.isRemote) {
-						// 'q' fuzzy search from server 
-						
-	
-					} else {
-						// Fuzzy search with getBy filter function
-						filter = (entity) => {
-							const
-								displayValue = entity.displayValue,
-								regex = new RegExp('^' + value);
-							return displayValue.match(regex);
-						};
+					await Repository.filter(searchField, value);
+					if (!this.isAutoLoad) {
+						await Repository.reload();
 					}
-				}
-				Repository.filter(filter);
 
-				// TODO: Auto-select if filter produces only one result
+				} else {
+					throw Error('Not sure if this works yet!');
+
+					// Fuzzy search with getBy filter function
+					filter = (entity) => {
+						const
+							displayValue = entity.displayValue,
+							regex = new RegExp('^' + value);
+						return displayValue.match(regex);
+					};
+					Repository.filter(filter);
+				}
 
+				setSavedSearch(value);
+				const numResults = Repository.entities.length;
+				if (!numResults) {
+					setSelection([]);
+				} else if (numResults === 1) {
+					const selection = Repository.entities[0];
+					setSelection([selection]);
+					setSavedSearch(null);
+				}
+			
 			} else {
 				// Search through data
 				found = _.find(data, (item) => {
@@ -333,6 +350,10 @@ export function ComboComponent(props) {
 	}, [isRendered]);
 
 	useEffect(() => {
+		if (getIsManuallyEnteringText() && getSavedSearch()) {
+			return
+		}
+
 		// Adjust text input to match selection
 		let localTextValue = getDisplayFromSelection(selection);
 		if (!_.isEqual(localTextValue, textValue)) {
@@ -498,7 +519,6 @@ export function ComboComponent(props) {
 												{...props}
 												disablePresetButtons={!isEditor}
 												disablePagination={disablePagination}
-												fireEvent={onEvent}
 												setSelection={(selection) => {
 													// Decorator fn to add local functionality
 													// Close the menu when row is selected on grid

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

@@ -15,9 +15,9 @@ const
 					ellipsizeMode="head" 
 					flex={1}
 					fontSize={styles.FORM_TEXT_FONTSIZE}
-					bg={styles.FORM_TEXT_BG}
+					minHeight='40px'
 					px={3}
-					py={1}
+					py={2}
 					{...props}
 				>{props.value}</Text>;
 	},

package/src/Components/Form/Form.js

@@ -199,7 +199,8 @@ function Form(props) {
 												} = fieldState;
 											let editorProps = {};
 											if (!editor) {
-												editor = model.editorTypes[fieldName];
+												const propertyDef = fieldName && Repository?.getSchema().getPropertyDefinition(fieldName);
+												editor = propertyDef[fieldName].editoType;
 												if (_.isPlainObject(editor)) {
 													const {
 															type,
@@ -259,14 +260,16 @@ function Form(props) {
 				} = item;
 			let editorTypeProps = {};
 
-			const model = Repository?.getSchema().model;
-			if (!type && Repository) {
-				const 
-					editorTypes = model.editorTypes,
+			const propertyDef = name && Repository?.getSchema().getPropertyDefinition(name);
+			if (propertyDef?.isEditingDisabled) {
+				isEditable = false;
+			}
+			if (isEditable && !type && Repository) {
+				const
 					{
 						type: t,
 						...p
-					} =  editorTypes[name];
+					} =  propertyDef.editorType;
 				type = t;
 				editorTypeProps = p;
 			}
@@ -287,8 +290,8 @@ function Form(props) {
 				return <Element key={ix} title={title} {...defaults} {...propsToPass} {...editorTypeProps}>{children}</Element>;
 			}
 
-			if (!label && Repository && model[name].title) {
-				label = model[name].title;
+			if (!label && Repository && propertyDef.title) {
+				label = propertyDef.title;
 			}
 
 			if (isViewOnly || !isEditable) {
@@ -482,7 +485,6 @@ function Form(props) {
 	let formComponents,
 		editor;
 	if (editorType === EDITOR_TYPE__INLINE) {
-		// for inline editor
 		formComponents = buildFromColumnsConfig();
 		editor = <ScrollView
 					horizontal={true}
@@ -494,8 +496,14 @@ function Form(props) {
 					borderTopColor="primary.100"
 					borderBottomColor="primary.100"
 				>{formComponents}</ScrollView>;
+	} else if (editorType === EDITOR_TYPE__PLAIN) {
+		formComponents = buildFromItems();
+		const formAncillaryComponents = buildAncillary();
+		editor = <>
+					<Row>{formComponents}</Row>
+					<Column pt={4}>{formAncillaryComponents}</Column>
+				</>;
 	} else {
-		// for all other editor types
 		formComponents = buildFromItems();
 		const formAncillaryComponents = buildAncillary();
 		editor = <ScrollView _web={{ height: 1 }} width="100%" pb={1}>

package/src/Components/Hoc/withFilters.js

@@ -5,6 +5,13 @@ import {
 	Row,
 	Text,
 } from 'native-base';
+import {
+	EDITOR_TYPE__PLAIN,
+} from '../../Constants/Editor.js';
+import {
+	FILTER_TYPE_ANCILLARY
+} from '../../Constants/Filters.js';
+import Inflector from 'inflector-js';
 import inArray from '../../Functions/inArray.js';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
 import IconButton from '../Buttons/IconButton.js';
@@ -50,11 +57,7 @@ export default function withFilters(WrappedComponent) {
 				// aliases
 				{
 					defaultFilters: modelDefaultFilters,
-					filterTypes: modelFilterTypes,
-					titles: modelTitles,
-					virtualFields: modelVirtualFields,
-					excludeFields: modelExcludeFields,
-					filteringDisabled: modelFilteringDisabled,
+					ancillaryFilters: modelAncillaryFilters,
 				} = Repository.getSchema().model,
 				id = useId(),
 
@@ -63,16 +66,32 @@ export default function withFilters(WrappedComponent) {
 								!_.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;
+						const
+							field = filter,
+							propertyDef = Repository.getSchema().getPropertyDefinition(field);
+						
+						let title, type;
+						if (propertyDef) {
+							title = propertyDef.title;
+							type = propertyDef.filterType;
+						} else {
+							if (!modelFilterTypes[field]) {
+								throw Error('not a propertyDef, and not an ancillaryFilter!');
+							}
+							const ancillaryFilter = modelFilterTypes[field];
+							title = ancillaryFilter.title;
+							type = FILTER_TYPE_ANCILLARY;
+						}
 						formatted = {
 							field,
-							title: modelTitles[field],
-							type: modelFilterTypes[field],
+							title,
+							type,
 							value: null, // value starts as null
 						};
 					} else if (_.isPlainObject(filter)) {
@@ -221,12 +240,23 @@ export default function withFilters(WrappedComponent) {
 					_.each(filters, (filter, ix) => {
 						let Element,
 							elementProps = {};
-						const {
+						let {
 								field,
 								type: filterType,
-							} = filter;
+								title,
+							} = filter,
+
+							propertyDef = Repository.getSchema().getPropertyDefinition(field);
+						
+						if (!title) {
+							title = propertyDef?.title;
+						}
 
 						if (_.isString(filterType)) {
+							if (filterType === FILTER_TYPE_ANCILLARY) {
+								title = modelFilterTypes[field].title;
+								filterType = Inflector.camelize(Inflector.pluralize(field)) + 'Combo'; // Convert field to PluralCamelCombo
+							}
 							Element = getComponentFromType(filterType);
 							if (filterType === 'Input') {
 								elementProps.autoSubmit = true;
@@ -247,7 +277,7 @@ export default function withFilters(WrappedComponent) {
 							elementProps.minWidth = 100;
 						}
 
-						const tooltip = filter.tooltip || filter.title || modelTitles[filter.field];
+						const tooltip = filter.tooltip || title;
 						let filterElement = <Element
 												key={'filter-' + field}
 												tooltip={tooltip}
@@ -259,7 +289,7 @@ export default function withFilters(WrappedComponent) {
 											/>;
 						if (showLabels && field !== 'q') {
 							filterElement = <Row key={'label-' + ix} alignItems="center">
-												<Text ml={2} mr={1} fontSize={UiGlobals.styles.FILTER_LABEL_FONTSIZE}>{modelTitles[field]}</Text>
+												<Text ml={2} mr={1} fontSize={UiGlobals.styles.FILTER_LABEL_FONTSIZE}>{title}</Text>
 												{filterElement}
 											</Row>;
 						}
@@ -387,13 +417,23 @@ export default function withFilters(WrappedComponent) {
 				
 				_.each(modalSlots, (field, ix) => {
 
-					// Create the data for the combobox.
+					// Create the data for the combobox. (i.e. List all the possible filters for this slot)
 					const data = [];
 					_.each(modelFilterTypes, (filterType, filterField) => {
 						if (inArray(filterField, usedFields) && field !== filterField) { // Show all filters not yet applied, but include the current filter
 							return; // skip, since it's already been used
 						}
-						data.push([ filterField, modelTitles[filterField] ]);
+
+						// Is it an ancillary filter?
+						const isAncillary = _.isPlainObject(filterType) && filterType.isAncillary;
+						if (isAncillary) {
+							data.push([ filterField, filterType.title ]);
+							return;
+						}
+
+						// basic property filter
+						const propertyDef = Repository.getSchema().getPropertyDefinition(filterField);
+						data.push([ filterField, propertyDef.title ]);
 					});
 
 					const
@@ -447,6 +487,7 @@ export default function withFilters(WrappedComponent) {
 								<FormPanel
 									title="Filter Selector"
 									instructions="Please select which fields to filter by."
+									editorType={EDITOR_TYPE__PLAIN}
 									flex={1}
 									startingValues={formStartingValues}
 									items={[

package/src/Constants/Filters.js

@@ -0,0 +1 @@
+export const FILTER_TYPE_ANCILLARY = 'FILTER_TYPE_ANCILLARY';

package/src/Constants/Styles.js

@@ -38,7 +38,6 @@ const defaults = {
 	FORM_LABEL_FONTSIZE: DEFAULT_FONTSIZE,
 	FORM_NUMBER_FONTSIZE: DEFAULT_FONTSIZE,
 	FORM_TEXT_FONTSIZE: DEFAULT_FONTSIZE,
-	FORM_TEXT_BG: WHITE,
 	FORM_TEXTAREA_BG: WHITE,
 	FORM_TEXTAREA_FONTSIZE: DEFAULT_FONTSIZE,
 	FORM_TEXTAREA_HEIGHT: 130,