@onehat/ui 0.4.82 → 0.4.84

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

@@ -24,6 +24,7 @@ import testProps from '../../../../Functions/testProps.js';
 import UiGlobals from '../../../../UiGlobals.js';
 import Input from '../Input.js';
 import { Grid, WindowedGridEditor } from '../../../Grid/Grid.js';
+import useForceUpdate from '../../../../Hooks/useForceUpdate.js';
 import withAlert from '../../../Hoc/withAlert.js';
 import withComponent from '../../../Hoc/withComponent.js';
 import withData from '../../../Hoc/withData.js';
@@ -121,13 +122,16 @@ export const ComboComponent = forwardRef((props, ref) => {
 			setValue,
 		} = props,
 		styles = UiGlobals.styles,
+		forceUpdate = useForceUpdate(),
 		inputRef = useRef(),
 		inputCloneRef = useRef(),
 		triggerRef = useRef(),
 		menuRef = useRef(),
 		displayValueRef = useRef(),
 		typingTimeout = useRef(),
-		[isMenuShown, setIsMenuShown] = useState(false),
+		isMenuShown = useRef(false),
+		isGridLayoutRunWithRender = useRef(false),
+		[isMenuAbove, setIsMenuAbove] = useState(false),
 		[isViewerShown, setIsViewerShown] = useState(false),
 		[viewerSelection, setViewerSelection] = useState([]),
 		[isRendered, setIsRendered] = useState(false),
@@ -140,15 +144,39 @@ export const ComboComponent = forwardRef((props, ref) => {
 		[newEntityDisplayValue, setNewEntityDisplayValue] = useState(null),
 		[filteredData, setFilteredData] = useState(data),
 		[inputHeight, setInputHeight] = useState(0),
+		[menuRenderedHeight, setMenuRenderedHeight] = useState(0),
 		[width, setWidth] = useState(0),
 		[top, setTop] = useState(0),
 		[left, setLeft] = useState(0),
+		getIsMenuShown = () => {
+			return isMenuShown.current;
+		},
+		setIsMenuShown = (bool) => {
+			isMenuShown.current = bool;
+
+			if (!bool) {
+				// The menu's onLayout runs every time there's a change in its size or position.
+				// We're only interested in the *first* time it runs with a rendered height.
+				// So if hiding the menu, reset isGridLayoutRunWithRender here and we'll set it to true
+				// the first time onLayout runs with a height.
+				setIsGridLayoutRunWithRender(false);
+				setIsMenuAbove(false); // reset this so the next time the menu opens, it starts below the input
+			}
+
+			forceUpdate();
+		},
+		getIsGridLayoutRunWithRender = () => {
+			return isGridLayoutRunWithRender.current;
+		},
+		setIsGridLayoutRunWithRender = (bool) => {
+			isGridLayoutRunWithRender.current = bool;
+		},
 		onLayout = (e) => {
 			setIsRendered(true);
 			setContainerWidth(e.nativeEvent.layout.width);
 		},
 		showMenu = async () => {
-			if (isMenuShown) {
+			if (getIsMenuShown()) {
 				return;
 			}
 			if (CURRENT_MODE === UI_MODE_WEB && inputRef.current?.getBoundingClientRect) {
@@ -181,13 +209,13 @@ export const ComboComponent = forwardRef((props, ref) => {
 			setIsMenuShown(true);
 		},
 		hideMenu = () => {
-			if (!isMenuShown) {
+			if (!getIsMenuShown()) {
 				return;
 			}
 			setIsMenuShown(false);
 		},
 		toggleMenu = () => {
-			setIsMenuShown(!isMenuShown);
+			setIsMenuShown(!getIsMenuShown());
 		},
 		temporarilySetIsNavigatingViaKeyboard = () => {
 			setIsNavigatingViaKeyboard(true);
@@ -359,14 +387,14 @@ export const ComboComponent = forwardRef((props, ref) => {
 			if (reloadOnTrigger && Repository) {
 				await Repository.reload();
 			}
-			if (isMenuShown) {
+			if (getIsMenuShown()) {
 				hideMenu();
 			} else {
 				showMenu();
 			}
 		},
 		onTriggerBlur = (e) => {
-			if (!isMenuShown) {
+			if (!getIsMenuShown()) {
 				return;
 			}
 
@@ -409,6 +437,33 @@ export const ComboComponent = forwardRef((props, ref) => {
 		onCheckButtonPress = () => {
 			hideMenu();
 		},
+		onGridLayout = (e) => {
+			// This method is to determine if we need to flip the grid above the input
+			// because the menu is partially offscreen
+
+			if (CURRENT_MODE !== UI_MODE_WEB || !e.nativeEvent.layout.height) {
+				return;
+			}
+
+			// we reach this point only if the grid has rendered with a height.
+
+			if (!getIsGridLayoutRunWithRender()) {
+				// we reach this point only on the *first* time onGridLayout runs with a height.
+				// determine if the menu is partially offscreen
+				const
+					menuRect = menuRef.current.getBoundingClientRect(),
+					inputRect = inputRef.current.getBoundingClientRect(),
+					menuOverflows = menuRect.bottom > window.innerHeight;
+				if (menuOverflows) {
+					// flip it
+					setIsMenuAbove(true);
+				} else {
+					setIsMenuAbove(false);
+				}
+				setMenuRenderedHeight(e.nativeEvent.layout.height);
+				setIsGridLayoutRunWithRender(true);
+			}
+		},
 		isEventStillInComponent = (e) => {
 			const {
 					relatedTarget
@@ -518,7 +573,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 				setFilteredData(found);
 			}
 
-			if (!isMenuShown) {
+			if (!getIsMenuShown()) {
 				showMenu();
 			}
 			setIsSearchMode(true);
@@ -734,7 +789,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 				</Pressable>;
 	}
 
-	if (isMenuShown) {
+	if (getIsMenuShown()) {
 		const gridProps = _.pick(props, [
 			'Editor',
 			'model',
@@ -743,6 +798,9 @@ export const ComboComponent = forwardRef((props, ref) => {
 			'idIx',
 			'displayIx',
 			// 'value',
+			'disableAdd',
+			'disableEdit',
+			'disableDelete',
 			'disableView',
 			'disableCopy',
 			'disableDuplicate',
@@ -761,8 +819,9 @@ export const ComboComponent = forwardRef((props, ref) => {
 		if (!Repository) {
 			gridProps.data = filteredData;
 		}
-		const WhichGrid = isEditor ? WindowedGridEditor : Grid;
-		const gridStyle = {};
+		const
+			WhichGrid = isEditor ? WindowedGridEditor : Grid,
+			gridStyle = {};
 		if (CURRENT_MODE === UI_MODE_WEB) {
 			gridStyle.height = menuHeight || styles.FORM_COMBO_MENU_HEIGHT;
 		}
@@ -786,6 +845,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 					disablePresetButtons={!isEditor}
 					alternateRowBackgrounds={false}
 					showSelectHandle={false}
+					onLayout={onGridLayout}
 					onChangeSelection={(selection) => {
 
 						if (Repository && selection[0]?.isPhantom) {
@@ -938,7 +998,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 							</Box>;
 			}
 			dropdownMenu = <Popover
-								isOpen={isMenuShown}
+								isOpen={getIsMenuShown()}
 								onClose={() => {
 									hideMenu();
 								}}
@@ -962,15 +1022,24 @@ export const ComboComponent = forwardRef((props, ref) => {
 										'max-w-full',
 									)}
 									style={{
-										top,
+										// If flipped, position above input; otherwise, below
+										top: isMenuAbove
+											? (top - menuRenderedHeight) // above
+											: top, // below
 										left,
 										width,
-										// height: (menuHeight || styles.FORM_COMBO_MENU_HEIGHT) + inputHeight,
 										minWidth: 100,
 									}}
 								>
-									{inputClone}
-									{grid}
+									{isMenuAbove ?
+										<>
+											{grid}
+											{inputClone}
+										</> :
+										<>
+											{inputClone}
+											{grid}
+										</>}
 								</Box>
 							</Popover>;
 		}

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

@@ -0,0 +1,13 @@
+import withComponent from '../../Hoc/withComponent.js';
+import withValue from '../../Hoc/withValue.js';
+
+const HiddenElement = (props) => {
+	
+	// This component does not render any visible UI elements,
+	// but it acts as a hidden input field for form submissions
+	// via the withValue HOC.
+
+	return null;
+};
+
+export default withComponent(withValue(HiddenElement));

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

@@ -21,6 +21,7 @@ export function JsonElement(props) {
 			tooltip = null,
 			isDisabled = false,
 			isViewOnly = false,
+			isCollapsed = true,
 			tooltipPlacement = 'bottom',
 			testID,
 
@@ -59,7 +60,7 @@ export function JsonElement(props) {
 					editable={!isViewOnly}
 					src={src}
 					enableClipboard={false}
-					collapsed={true}
+					collapsed={isCollapsed}
 					onEdit={(obj) => {
 						setValue(JSON.stringify(obj.updated_src));
 					}}

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

@@ -12,6 +12,8 @@ import {
 import {
 	EDITOR_TYPE__PLAIN,
 } from '../../../../Constants/Editor.js';
+import Button from '../../../Buttons/Button.js';
+import testProps from '../../../../Functions/testProps.js';
 import Form from '../../Form.js';
 import Viewer from '../../../Viewer/Viewer.js';
 import withAlert from '../../../Hoc/withAlert.js';
@@ -36,14 +38,13 @@ function TagComponent(props) {
 			Editor,
 			_combo = {},
 			SourceRepository,
+			mustSaveBeforeEditingJoinData = false,
 			joinDataConfig,
-			outerValueId, // for recursion only. See note in useEffect
+			getBaseParams, // See note in useEffect
+			outerValueId, // See note in useEffect
 			tooltip,
 			testID,
-			getBaseParams,
-
-			// parent Form
-			onChangeValue,
+			isDirty = false,
 
 			// withAlert
 			alert,
@@ -77,11 +78,11 @@ function TagComponent(props) {
 			}
 			return null;
 		}),
-		[isInited, setIsInited] = useState(false),
+		[isInited, setIsInited] = useState(_.isUndefined(getBaseParams)), // default to true unless getBaseParams is defined
 		modelFieldStartsWith = hasJoinData ? Inflector.underscore(JoinRepository.getSchema().name) + '__' : '',
 		valueRef = useRef(value),
 		onView = async (item, e) => {
-			// This method shows the record viewer
+			// show the joined record's viewer
 			const
 				id = item.id,
 				repository = TargetRepository;
@@ -142,7 +143,7 @@ function TagComponent(props) {
 			}
 
 			// The value we get from combo is a simple int
-			// Convert this to id and displayValue from either Repository or data array.
+			// Convert this to { id, text} from either Repository or data array.
 			const
 				data = props.data,
 				idIx = props.idIx,
@@ -171,32 +172,36 @@ function TagComponent(props) {
 
 			let joinData = {};
 			if (hasJoinData) {
-				// build up the default starting values,
+				// build up the default starting values for joinData,
 				// first with schema defaultValues...
 				const
 					allSchemaDefaults = JoinRepository.getSchema().getDefaultValues(),
 					modelSchemaDefaults = _.pickBy(allSchemaDefaults, (value, key) => {
 						return key.startsWith(modelFieldStartsWith);
 					}),
-					joinFieldNames = joinDataConfig.map(fieldConfig => fieldConfig.name || fieldConfig),
-					schemaDefaultValues = _.pick(modelSchemaDefaults, joinFieldNames),
-					strippedSchemaDefaultValues = _.mapKeys(schemaDefaultValues, (value, key) => {
-						return key.startsWith(modelFieldStartsWith) ? key.slice(modelFieldStartsWith.length) : key;
-					});
-
-				// then with default values in joinDataConfig, if they exist
-				_.each(joinDataConfig, (fieldConfig) => {
-					if (!_.isNil(fieldConfig.defaultValue)) {
-						joinData[fieldConfig.name] = fieldConfig.defaultValue;
-					}
+					fullFieldNames = propertyDef.joinData.map((fieldName) => { // add the 'model_name__' prefix so we can get schema default values
+						return modelFieldStartsWith + fieldName;
+					}),
+					schemaDefaultValues = _.pick(modelSchemaDefaults, fullFieldNames);
+				joinData = _.mapKeys(schemaDefaultValues, (value, key) => { // strip out the 'model_name__' prefix from field names
+					return key.startsWith(modelFieldStartsWith) ? key.slice(modelFieldStartsWith.length) : key;
 				});
-				joinData = { ...strippedSchemaDefaultValues, ...joinData };
+
+				// then override with default values in joinDataConfig, if they exist
+				if (joinDataConfig) {
+					_.each(Object.keys(joinDataConfig), (fieldName) => {
+						const fieldConfig = joinDataConfig[fieldName];
+						if (!_.isUndefined(fieldConfig.defaultValue)) { // null in jsonDataConfig will override a default value in schema!
+							joinData[fieldName] = fieldConfig.defaultValue;
+						}
+					});
+				}
 			}
 
 
 			// add new value
 			const
-				newValue = [...value], // clone, so we trigger a re-render
+				newValue = [...value], // clone Tag's full current value (array), so we trigger a re-render after adding the new value
 				newItem = {
 					id,
 					text: displayValue,
@@ -215,8 +220,8 @@ function TagComponent(props) {
 			});			
 			setValue(newValue);
 		},
-		onJoin = async (item, e) => {
-			// This method shows the joinData viewer/editor
+		onViewEditJoinData = async (item, e) => {
+			// show the joinData viewer/editor
 
 			/* item format:
 				item = {
@@ -229,22 +234,27 @@ function TagComponent(props) {
 				}
 			*/
 
-			// prepend 'model_name__' to the field names, so they match the JoinRepository property names
+			// Prepare Form to edit the joinData
 			const
-				record = _.mapKeys(item.joinData, (value, key) => {
+				// create the Form.record, format: { meters_pm_schedules__also_resets: null, meters_pm_schedules__hide_every_n: 5 }
+				record = _.mapKeys(item.joinData, (value, key) => { // add the 'model_name__' prefix so we can match JoinRepository property names
 					return modelFieldStartsWith + key;
 				}),
+				// create the Form.items
 				items = propertyDef.joinData.map((fieldName) => {
 					let obj = {
 						name: modelFieldStartsWith + fieldName,
 					};
-					// add in any config from joinDataConfig for this field
+
+					// add in any specific config for joinData[fieldName]], if it exists
+					// (The outer *Editor can configure each Tag field's joinData Form item.
+					// This moves that configuration down and adds outerValueId)
 					if (joinDataConfig?.[fieldName]) {
-						const jdcf = _.clone(joinDataConfig[fieldName]); // don't mutate original
-						jdcf.outerValueId = item.id;
+						const joinDataConfigFieldname = _.clone(joinDataConfig[fieldName]); // don't mutate original
+						joinDataConfigFieldname.outerValueId = item.id; // so that joinData can be aware of the value of the inspected ValueBox; see note in useEffect, below
 						obj = {
 							...obj,
-							...jdcf,
+							...joinDataConfigFieldname,
 						};
 					}
 
@@ -253,6 +263,7 @@ function TagComponent(props) {
 
 			let height = 300;
 			let body;
+			const extraModalProps = {};
 			if (isViewOnly) {
 				// show Viewer
 				body = <Viewer
@@ -263,12 +274,17 @@ function TagComponent(props) {
 								labelWidth: 200,
 							}}
 						/>;
+
+				extraModalProps.customButtons = [
+					<Button
+						{...testProps('closeBtn')}
+						key="closeBtn"
+						onPress={hideModal}
+						text="Close"
+						className="text-white"
+					/>,
+				];
 			} else {
-				switch (items.length) {
-					case 1: height = 250; break;
-					case 2: height = 400; break;
-					default: height = 600; break;
-				}
 				body = <Form
 							editorType={EDITOR_TYPE__PLAIN}
 							isEditorViewOnly={false}
@@ -285,7 +301,7 @@ function TagComponent(props) {
 							]}
 							onSave={(values)=> {
 
-								// strip the 'model__' prefix from the field names
+								// strip the 'model_name__' prefix from the field names
 								values = _.mapKeys(values, (value, key) => {
 									return key.startsWith(modelFieldStartsWith) ? key.slice(modelFieldStartsWith.length) : key;
 								});
@@ -303,6 +319,11 @@ function TagComponent(props) {
 							}}
 						/>;
 			}
+			switch (items.length) {
+				case 1: height = 250; break;
+				case 2: height = 400; break;
+				default: height = 600; break;
+			}
 
 			showModal({
 				title: 'Extra data for "' + item.text + '"',
@@ -312,6 +333,7 @@ function TagComponent(props) {
 				includeReset: false,
 				includeCancel: false,
 				body,
+				...extraModalProps,
 			});
 		},
 		onGridAdd = (selection) => {
@@ -381,54 +403,47 @@ function TagComponent(props) {
 						text={val.text}
 						onView={() => onView(val)}
 						showEye={showEye}
-						onJoin={() => onJoin(val)}
-						showJoin={hasJoinData}
+						onViewEditJoinData={() => onViewEditJoinData(val)}
+						showJoin={hasJoinData && (!mustSaveBeforeEditingJoinData || !isDirty)}
 						onDelete={!isViewOnly ? () => onDelete(val) : null}
 						minimizeForRow={minimizeForRow}
 					/>;
 		});
 	
-	useEffect(() => {
-
-		// NOTE: This useEffect is so we can set the Target baseParams before it loads
-		// We did this for cases where the Tag field has joinData that's managing a nested Tag field. 
-		// ... This deals with recursion, so gets "alice in wonderland" quickly!
-		// If that inner Tag field has getBaseParams defined on the joinDataConfig of the outer Tag,
-		// then that means it needs to set its baseParams dynamically, based on the values that are 
-		// currently set, as well as the value of the outer ValueBox that was clicked on.
-
-		// For example: in the MetersEditor:
-		// {
-		// 	name: 'meters__pm_schedules',
-		// 	parent: self,
-		// 	reference: 'meters__pm_schedules',
-		// 	joinDataConfig: {
-		// 		also_resets: {
-		// 			getBaseParams: (values, outerValueId) => {
-		// 				const
-		// 					baseParams = {
-		// 						'conditions[MetersPmSchedules.meter_id]': meter_id, // limit also_resets to those MetersPmSchedules related to this meter
-		// 					},
-		// 					ids = values.map((value) => value.id),
-		// 					mpsValues = JSON.parse(self.children.meters__pm_schedules?.value || '[]');
-		// 				if (outerValueId) {
-		// 					ids.push(outerValueId);
-		// 				}
-		// 				if (!_.isEmpty(ids)) {
-		// 					baseParams['conditions[MetersPmSchedules.pm_schedule_id NOT IN]'] = ids;
-		// 				}
-		// 				return baseParams;
-		// 			},
-		// 		},
-		// 	},
-		// }
-
-
-		if (getBaseParams) {
+	if (!_.isUndefined(getBaseParams) && outerValueId) {
+		useEffect(() => {
+
+			// NOTE: This useEffect is so we can dynamically set the TargetRepository's baseParams,
+			// based on outerValueId, before it loads.
+			// We did this for cases where the Tag field has joinData that's managing a nested Tag field. 
+			// ... This deals with recursion, so gets "alice in wonderland" quickly!
+			// If that inner Tag field has getBaseParams defined on a joinDataConfig field of the outer Tag,
+			// then that means it needs to set its baseParams dynamically, based on the value of the outer ValueBox.
+
+			// For example: in the MetersEditor:
+			// {
+			// 	name: 'meters__pm_schedules',
+			// 	mustSaveBeforeEditingJoinData: true,
+			// 	joinDataConfig: {
+			// 		also_resets: {
+			// 			getBaseParams: (values, outerValueId) => {
+			// 				const baseParams = {
+			// 					'conditions[MetersPmSchedules.meter_id]': meter_id, // limit also_resets to those MetersPmSchedules related to this meter
+			// 				};
+			// 				if (outerValueId) {
+			// 					baseParams['conditions[MetersPmSchedules.id <>]'] = outerValueId; // exclude the ValueBox that was clicked on
+			// 				}
+			// 				return baseParams;
+			// 			},
+			// 		},
+			// 	},
+			// }
+
 			TargetRepository.setBaseParams(getBaseParams(value, outerValueId));
-		}
-		setIsInited(true);
-	}, [value]);
+			setIsInited(true);
+
+		}, [value]);
+	}
 
 	if (!isInited) {
 		return null;

package/src/Components/Form/Field/Tag/ValueBox.js

@@ -16,7 +16,7 @@ export default function ValueBox(props) {
 			text,
 			onView,
 			showEye = false,
-			onJoin,
+			onViewEditJoinData,
 			showJoin = false,
 			onDelete,
 			minimizeForRow = false,
@@ -60,7 +60,7 @@ export default function ValueBox(props) {
 							size: styles.FORM_TAG_VALUEBOX_ICON_SIZE,
 							className: 'text-grey-600',
 						}}
-						onPress={onJoin}
+						onPress={onViewEditJoinData}
 						className={clsx(
 							'ValueBox-joinBtn',
 							'h-full',

package/src/Components/Form/Form.js

@@ -205,7 +205,7 @@ function Form(props) {
 			
 			// Fallback to empty schema that allows any fields and defaults to valid
 			return yup.object().noUnknown(false).default({});
-		})(),
+		})() || yup.object().shape({}), // on rare occasions, validatorToUse was null. This fixes it
 		{
 			control,
 			formState,
@@ -816,6 +816,7 @@ function Form(props) {
 												{...testProps('field-' + name)}
 												name={name}
 												value={value}
+												isDirty={isDirty}
 												onChangeValue={(newValue) => {
 													if (newValue === undefined) {
 														newValue = null; // React Hook Form doesn't respond well when setting value to undefined
@@ -1548,7 +1549,7 @@ function Form(props) {
 function disableRequiredYupFields(validator) {
 	// based on https://github.com/jquense/yup/issues/1466#issuecomment-944386480
 	if (!validator) {
-		return null;
+		return yup.object().shape({}); // Return valid empty schema instead of null
 	}
 
 	const nextSchema = validator.clone();