@onehat/ui 0.3.69 → 0.3.71

package/package.json

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

package/src/Components/Accordion/Accordion.js

@@ -130,7 +130,6 @@ export default function Accordion(props) {
 						if (!containerInitialHeight) {
 							const { height } = e.nativeEvent.layout;
 							setContainerInitialHeight(height);
-							console.log('height', height);
 						}
 						if (onLayout) {
 							onLayout(e);

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

@@ -45,12 +45,6 @@ const
 							const value = editor.getData();
 							debouncedSetValueRef.current(value);
 						}}
-						// onBlur={(event, editor) => {
-						// 	console.log( 'Blur.', editor);
-						// }}
-						// onFocus={(event, editor) => {
-						// 	console.log( 'Focus.', editor);
-						// }}
 					/>
 				</Row>;
 	},

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

@@ -21,9 +21,12 @@ import emptyFn from '../../../../Functions/emptyFn.js';
 import { Grid, WindowedGridEditor } from '../../../Grid/Grid.js';
 import IconButton from '../../../Buttons/IconButton.js';
 import CaretDown from '../../../Icons/CaretDown.js';
+import Check from '../../../Icons/Check.js';
 import Xmark from '../../../Icons/Xmark.js';
 import _ from 'lodash';
 
+const FILTER_NAME = 'q';
+
 export function ComboComponent(props) {
 	const {
 			additionalButtons,
@@ -285,7 +288,11 @@ export function ComboComponent(props) {
 		onClearBtn = () => {
 			setTextInputValue('');
 			setValue(null);
-		}
+		},
+		onXBtnPress = () => {
+			hideMenu();
+			setValue(null);
+		},
 		isEventStillInComponent = (e) => {
 			const {
 					relatedTarget
@@ -298,38 +305,38 @@ export function ComboComponent(props) {
 					menuRef.current === relatedTarget || 
 					menuRef.current?.contains(relatedTarget);
 		},
+		getFilterName = () => {
+			// Only used for remote repositories
+			// Gets the filter name of the query, which becomes the condition sent to server 
+			let filterName = FILTER_NAME;
+			if (Repository.isRemote) {
+				const
+					schema = Repository.getSchema(),
+					displayFieldName = schema.model.displayProperty,
+					displayFieldDef = schema.getPropertyDefinition(displayFieldName);
+	
+				// Verify displayField is a real field
+				if (!displayFieldDef.isVirtual) {
+					filterName = displayFieldName + ' LIKE';
+				}
+			}
+			return filterName;
+		},
 		clearGridFilters = async () => {
 			if (Repository) {
 				if (Repository.isLoading) {
 					await Repository.waitUntilDoneLoading();
 				}
+				const filterName = getFilterName();
+				if (Repository.hasFilter(filterName)) {
+					Repository.clearFilters(filterName);
+				}
 				
-				// clear filter
-				if (Repository.isRemote || Repository.remote) {
-					let searchField = 'q';
-					const searchValue = null;
-
-					// 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';
-					}
-
-					if (Repository.hasFilter(searchField)) {
-						Repository.clear();
-						await Repository.filter(searchField, searchValue);
-						if (!this.isAutoLoad) {
-							await Repository.reload();
-						}
+				if (Repository.isRemote) {
+					if (!this.isAutoLoad) {
+						await Repository.reload();
 					}
-
-				} else {
-					throw Error('Not yet implemented');
 				}
-			
 			} else {
 				setFilteredData(data);
 			}
@@ -343,41 +350,34 @@ export function ComboComponent(props) {
 
 			let found;
 			if (Repository) {
+				if (Repository.isLoading) {
+					await Repository.waitUntilDoneLoading();
+				}
 
-				if (_.isEmpty(value) && Repository.hasFilters) {
-					Repository.clearFilters();
+				if (_.isEmpty(value)) {
+					clearGridFilters();
 					return;
 				}
 
-				if (Repository.isLoading) {
-					await Repository.waitUntilDoneLoading();
-				}
-				
 				// Set filter
+				const filterName = getFilterName();
 				if (Repository.isRemote) {
-					const
-						schema = Repository.getSchema(),
-						displayFieldName = schema.model.displayProperty,
-						displayFieldDef = schema.getPropertyDefinition(displayFieldName),
-						searchValue = _.isEmpty(value) ? null : value + '%';
-					let searchField = 'q';
-
-					// Verify displayField is a real field
-					if (!displayFieldDef.isVirtual) {
-						searchField = displayFieldName + ' LIKE';
-					}
-
-					await Repository.filter(searchField, searchValue);
+					// remote
+					const filterValue = _.isEmpty(value) ? null : value + '%';
+					await Repository.filter(filterName, filterValue);
 					if (!this.isAutoLoad) {
 						await Repository.reload();
 					}
 				} else {
-					// local filter
-					Repository.filter((entity) => {
-						const
-							displayValue = entity.displayValue,
-							regex = new RegExp('^' + value);
-						return displayValue.match(regex);
+					// local
+					Repository.filter({
+						name: filterName,
+						fn: (entity) => {
+							const
+								displayValue = entity.displayValue,
+								regex = new RegExp('^' + value);
+							return displayValue.match(regex);
+						},
 					});
 				}
 
@@ -405,6 +405,12 @@ export function ComboComponent(props) {
 			inputRef.current.focus();
 		}
 
+		return () => {
+			if (Repository && !Repository.isUnique) {
+				clearGridFilters();
+			}
+		};
+
 	}, [isRendered]);
 
 	useEffect(() => {
@@ -427,6 +433,7 @@ export function ComboComponent(props) {
 
 	let xButton = null,
 		inputAndTrigger = null,
+		checkBtn = null,
 		grid = null,
 		dropdownMenu = null,
 		assembledComponents = null;
@@ -439,7 +446,7 @@ export function ComboComponent(props) {
 							size: 'sm',
 						}}
 						isDisabled={isDisabled}
-						onPress={onClearBtn}
+						onPress={onXBtnPress}
 						h="100%"
 						bg={styles.FORM_COMBO_TRIGGER_BG}
 						_hover={{
@@ -478,6 +485,7 @@ export function ComboComponent(props) {
 								</Pressable> :
 								<Input
 									ref={inputRef}
+									reference="ComboInput"
 									value={textInputValue}
 									autoSubmit={true}
 									isDisabled={isDisabled}
@@ -485,14 +493,6 @@ export function ComboComponent(props) {
 									onKeyPress={onInputKeyPress}
 									onFocus={onInputFocus}
 									onBlur={onInputBlur}
-									onLayout={(e) => {
-										const {
-												height,
-												width,
-											} = e.nativeEvent.layout;
-										setWidth(Math.round(width));
-										setTop(Math.round(height));
-									}}
 									flex={1}
 									h="100%"
 									m={0}
@@ -533,7 +533,8 @@ export function ComboComponent(props) {
 
 	if (UiGlobals.mode === UI_MODE_REACT_NATIVE) {
 		// This input and trigger are for show
-		// The just show the current value and open the menu
+		// The just show the current getDisplayValue and open the menu
+		const displayValue = getDisplayValue();
 		inputAndTrigger = <>
 							<Pressable
 								onPress={showMenu}
@@ -550,13 +551,13 @@ export function ComboComponent(props) {
 									borderColor="trueGray.400"
 									borderTopRightRadius={0}
 									borderBottomRightRadius={0}
-									color={_.isEmpty(textInputValue) ? 'trueGray.400' : '#000'}
+									color={_.isEmpty(displayValue) ? 'trueGray.400' : '#000'}
 									fontSize={styles.FORM_COMBO_INPUT_FONTSIZE}
 									bg={styles.FORM_COMBO_INPUT_BG}
 									_focus={{
 										bg: styles.FORM_COMBO_INPUT_FOCUS_BG,
 									}}
-								>{_.isEmpty(textInputValue) ? placeholder : textInputValue}</Text>
+								>{_.isEmpty(displayValue) ? placeholder : displayValue}</Text>
 							</Pressable>
 							<IconButton
 								ref={triggerRef}
@@ -734,8 +735,28 @@ export function ComboComponent(props) {
 							</Popover>;
 		}
 		if (UiGlobals.mode === UI_MODE_REACT_NATIVE) {
+			if (isEditor) {
+				// in RN, an editor has no way to accept the selection of the grid, so we need to add a check button to do this
+				checkBtn = <IconButton
+								_icon={{
+									as: Check,
+									color: 'trueGray.600',
+									size: 'sm',
+								}}
+								onPress={onXBtnPress}
+								h="100%"
+								borderWidth={1}
+								borderColor="#bbb"
+								borderRadius="md"
+								bg={styles.FORM_COMBO_TRIGGER_BG}
+								_hover={{
+									bg: styles.FORM_COMBO_TRIGGER_HOVER_BG,
+								}}
+							/>;
+			}
 			const inputAndTriggerClone = // for RN, this is the actual input and trigger, as we need them to appear up above in the modal
 				<Row h={10}>
+					{xButton}
 					{disableDirectEntry ?
 						<Text
 							ref={inputRef}
@@ -757,6 +778,7 @@ export function ComboComponent(props) {
 						>{textInputValue}</Text> :
 						<Input
 							ref={inputRef}
+							reference="ComboInput"
 							value={textInputValue}
 							autoSubmit={true}
 							isDisabled={isDisabled}
@@ -797,6 +819,7 @@ export function ComboComponent(props) {
 							bg: styles.FORM_COMBO_TRIGGER_HOVER_BG,
 						}}
 					/>
+					{checkBtn}
 				</Row>;
 			dropdownMenu = <Modal
 								isOpen={true}

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

@@ -290,11 +290,11 @@ export function DateElement(props) {
 									color: styles.FORM_DATE_ICON_COLOR,
 									size: 'sm',
 								}}
-								isDisabled={isDisabled}
 								onPress={onTriggerPress}
 								onBlur={onTriggerBlur}
-								h="100%"
+								h={10}
 								w={10}
+								isDisabled={isDisabled}
 								borderWidth={1}
 								borderColor="#bbb"
 								borderLeftRadius="md"
@@ -334,20 +334,21 @@ export function DateElement(props) {
 								<Input
 									ref={inputRef}
 									value={textInputValue}
-									autoSubmit={true}
-									isDisabled={isDisabled}
+									// setValue={onInputSetValue}
 									onChangeValue={onInputChangeText}
 									onKeyPress={onInputKeyPress}
-									onFocus={onInputFocus}
 									onBlur={onInputBlur}
-									onLayout={(e) => {
-										const {
-												height,
-												width,
-											} = e.nativeEvent.layout;
-										setWidth(Math.round(width));
-										setTop(Math.round(height));
-									}}
+									onFocus={onInputFocus}
+									autoSubmit={true}
+									isDisabled={isDisabled}
+									// onLayout={(e) => {
+									// 	const {
+									// 			height,
+									// 			width,
+									// 		} = e.nativeEvent.layout;
+									// 	setWidth(Math.round(width));
+									// 	setTop(Math.round(height));
+									// }}
 									flex={1}
 									h="100%"
 									m={0}
@@ -455,6 +456,7 @@ export function DateElement(props) {
 									minWidth={menuMinWidth}
 									overflow="auto"
 									bg="#fff"
+									{...translateProps}
 								>
 									<Popover.Body
 										ref={pickerRef}
@@ -568,6 +570,7 @@ export function DateElement(props) {
 								/> */}
 								<Box bg="#fff">
 									<Datetime
+										initialDate={moment(value).toDate()}
 										selectedStartDate={moment(value).toDate()}
 										onDateChange={onPickerChange}
 										todayBackgroundColor="#eee"

package/src/Components/Form/Form.js

@@ -107,6 +107,7 @@ function Form(props) {
 			onClose,
 			onDelete,
 			editorStateRef,
+			disableView,
 
 			// parent container
 			selectorId,
@@ -696,7 +697,7 @@ function Form(props) {
 										leftIcon={<Icon as={AngleLeft} color="#fff" size="sm" />}	
 										color="#fff"
 									>Back</Button>}
-								{isSingle && editorMode === EDITOR_MODE__EDIT && onViewMode && 
+								{isSingle && editorMode === EDITOR_MODE__EDIT && onViewMode && !disableView &&
 									<Button
 										key="viewBtn"
 										onPress={onViewMode}
@@ -736,7 +737,12 @@ function Form(props) {
 			if (isEditorViewOnly) {
 				showCloseBtn = true;
 			} else {
-				if (formState.isDirty || record?.isPhantom) {
+				const
+					formIsDirty = formState.isDirty,
+					recordIsPhantom = record?.isPhantom;
+				// console.log('formIsDirty', formIsDirty);
+				// console.log('recordIsPhantom', recordIsPhantom);
+				if (formIsDirty || recordIsPhantom) {
 					if (isSingle && onCancel) {
 						showCancelBtn = true;
 					}

package/src/Components/Layout/Footer.js

@@ -13,7 +13,7 @@ export default function Footer(props) {
 				testID="footer"
 				w="100%"
 				p={2}
-				safeAreaBottom
+				// safeAreaBottom
 				{...props}
 			>
 				{props.children}

package/src/Components/Tree/Tree.js

@@ -973,7 +973,7 @@ function TreeComponent(props) {
 				setHighlitedDatum(null);
 
 			} else {
-				console.log('setDropRowIx', newIx);
+				// console.log('setDropRowIx', newIx);
 				setDropRowIx(newIx);
 
 				// highlight the drop node