@onehat/ui 0.3.70 → 0.3.72

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.70",
+	"version": "0.3.72",
 	"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/Buttons/SquareButton.js

@@ -4,12 +4,14 @@ import {
 	Pressable,
 	Text,
 } from 'native-base';
+import IconButton from './IconButton.js';
 import UiGlobals from '../../UiGlobals.js';
 
 export default function SquareButton(props) {
 	const {
 			text,
 			isActive = false,
+			showText = true,
 			activeColor,
 			invertColorWhenActive = false,
 			disableInteractions = false,
@@ -17,7 +19,9 @@ export default function SquareButton(props) {
 			...propsToPass
 		} = props,
 		styles = UiGlobals.styles,
+		bg = isActive ? activeColor || '#56a6f8' : '#fff',
 		color = invertColorWhenActive && isActive ? '#fff' : '#000';
+
 	const propsIcon = props._icon || {};
 	let icon = props.icon;
 	if (!icon) {
@@ -26,14 +30,6 @@ export default function SquareButton(props) {
 	if (!text) {
 		throw Error('text missing');
 	}
-	
-	if (React.isValidElement(icon)) {
-		if (!_.isEmpty(propsIcon)) {
-			icon = React.cloneElement(icon, {...propsIcon});
-		}
-	} else {
-		icon = <Icon as={icon} {...propsIcon} />;
-	}
 
 	const
 		hoverProps = {},
@@ -42,7 +38,29 @@ export default function SquareButton(props) {
 		hoverProps.bg = styles.ICON_BUTTON_BG_HOVER;
 		pressedProps.bg = styles.ICON_BUTTON_BG_PRESSED;
 	}
-	
+
+	if (!showText) {
+		return <IconButton
+					icon={icon}
+					borderRadius="md"
+					p={2}
+					_icon={{
+						size: '20px',
+						color,
+					}}
+					{...propsToPass}
+					bg={bg}
+				/>;
+	}
+
+	if (React.isValidElement(icon)) {
+		if (!_.isEmpty(propsIcon)) {
+			icon = React.cloneElement(icon, {...propsIcon});
+		}
+	} else {
+		icon = <Icon as={icon} {...propsIcon} />;
+	}
+
 	return <Pressable
 				borderRadius="md"
 				flexDirection="column"
@@ -50,7 +68,7 @@ export default function SquareButton(props) {
 				alignItems="center"
 				p={2}
 				{...propsToPass}
-				bg={isActive ? activeColor || '#56a6f8' : '#fff'}
+				bg={bg}
 				// _hover={hoverProps}
 				// _pressed={pressedProps}
 			>

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

@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useRef, } from 'react';
 import {
-	Button,
 	Modal,
 	Popover,
 	Pressable,
@@ -26,6 +25,8 @@ 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,
@@ -287,7 +288,11 @@ export function ComboComponent(props) {
 		onClearBtn = () => {
 			setTextInputValue('');
 			setValue(null);
-		}
+		},
+		onXBtnPress = () => {
+			hideMenu();
+			setValue(null);
+		},
 		isEventStillInComponent = (e) => {
 			const {
 					relatedTarget
@@ -300,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 {
-					Repository.clear();
 				}
-			
 			} else {
 				setFilteredData(data);
 			}
@@ -345,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);
+						},
 					});
 				}
 
@@ -407,6 +405,12 @@ export function ComboComponent(props) {
 			inputRef.current.focus();
 		}
 
+		return () => {
+			if (Repository && !Repository.isUnique && !Repository.isDestroyed) {
+				clearGridFilters();
+			}
+		};
+
 	}, [isRendered]);
 
 	useEffect(() => {
@@ -442,7 +446,7 @@ export function ComboComponent(props) {
 							size: 'sm',
 						}}
 						isDisabled={isDisabled}
-						onPress={onClearBtn}
+						onPress={onXBtnPress}
 						h="100%"
 						bg={styles.FORM_COMBO_TRIGGER_BG}
 						_hover={{
@@ -481,6 +485,7 @@ export function ComboComponent(props) {
 								</Pressable> :
 								<Input
 									ref={inputRef}
+									reference="ComboInput"
 									value={textInputValue}
 									autoSubmit={true}
 									isDisabled={isDisabled}
@@ -488,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}
@@ -536,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}
@@ -553,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}
@@ -739,15 +737,13 @@ export function ComboComponent(props) {
 		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
-				const isCheckBtnDisabled = _.isEmpty(value);
 				checkBtn = <IconButton
 								_icon={{
 									as: Check,
-									color: isCheckBtnDisabled ? 'disabled' : 'trueGray.600',
+									color: 'trueGray.600',
 									size: 'sm',
 								}}
-								isDisabled={isCheckBtnDisabled}
-								onPress={acceptSelection}
+								onPress={onXBtnPress}
 								h="100%"
 								borderWidth={1}
 								borderColor="#bbb"
@@ -760,6 +756,7 @@ export function ComboComponent(props) {
 			}
 			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}
@@ -781,6 +778,7 @@ export function ComboComponent(props) {
 						>{textInputValue}</Text> :
 						<Input
 							ref={inputRef}
+							reference="ComboInput"
 							value={textInputValue}
 							autoSubmit={true}
 							isDisabled={isDisabled}
@@ -835,7 +833,6 @@ export function ComboComponent(props) {
 							>
 								{inputAndTriggerClone}
 								{grid}
-								<Button mt={2} onPress={() => setIsMenuShown(false)}>Close</Button>
 							</Modal>;
 		}
 	}

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

@@ -570,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

package/src/Functions/buildAdditionalButtons.js

@@ -32,7 +32,7 @@ export default function buildAdditionalButtons(configs, self, handlerArgs = {})
 		const button = <Button
 							color={color}
 							ml={2}
-							mb={2}
+							// mb={2}
 							parent={self}
 							reference={key}
 							{...buttonProps}