@onehat/ui 0.3.124 → 0.3.126

package/package.json

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

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

@@ -12,6 +12,9 @@ import {
 	UI_MODE_REACT_NATIVE,
 	UI_MODE_WEB,
 } from '../../../../Constants/UiModes.js';
+import {
+	EDITOR_TYPE__WINDOWED,
+} from '../../../../Constants/Editor.js';
 import UiGlobals from '../../../../UiGlobals.js';
 import Input from '../Input.js';
 import withAlert from '../../../Hoc/withAlert.js';
@@ -47,11 +50,13 @@ export function ComboComponent(props) {
 			placeholder,
 			onRowPress,
 			icon,
+			Editor, // only used for the eyeButton
 
 			// withComponent
 			self,
 
 			// withAlert
+			alert,
 			confirm,
 			
 			// withData
@@ -317,6 +322,7 @@ export function ComboComponent(props) {
 			setViewerSelection([record]);
 			setIsViewerShown(true);
 		},
+		onViewerClose = () => setIsViewerShown(false),
 		onCheckButtonPress = () => {
 			hideMenu();
 		},
@@ -482,7 +488,7 @@ export function ComboComponent(props) {
 						mr={1}
 					/>;
 	}
-	if (showEyeButton && !_.isNil(value)) {
+	if (showEyeButton && Editor && !_.isNil(value)) {
 		eyeButton = <IconButton
 						_icon={{
 							as: Eye,
@@ -898,10 +904,35 @@ export function ComboComponent(props) {
 							{dropdownMenu}
 						</Row>;
 	
+	if (isViewerShown && Editor) {
+		assembledComponents = 
+				<>
+					{assembledComponents}
+					<Modal
+						isOpen={true}
+						onClose={onViewerClose}
+					>
+						<Editor
+							{...props}
+							editorType={EDITOR_TYPE__WINDOWED}
+							px={0}
+							py={0}
+							w="100%"
+							parent={self}
+							reference="viewer"
+
+							isEditorViewOnly={true}
+							selection={viewerSelection}
+							onEditorClose={onViewerClose}
+						/>
+					</Modal>
+				</>;
+	}
+	
 	if (tooltip) {
 		assembledComponents = <Tooltip label={tooltip} placement={tooltipPlacement}>
-							{assembledComponents}
-						</Tooltip>;
+								{assembledComponents}
+							</Tooltip>;
 	}
 	
 	return assembledComponents;

package/src/Components/Form/Form.js

@@ -346,7 +346,7 @@ function Form(props) {
 				}
 			}
 			if (isCombo) {
-				editorTypeProps.showEyeButton = true;
+				// editorTypeProps.showEyeButton = true;
 				if (_.isNil(propsToPass.showXButton)) {
 					editorTypeProps.showXButton = true;
 				}

package/src/Components/Hoc/Secondary/withSecondaryData.js

@@ -0,0 +1,117 @@
+import { useState, useEffect, } from 'react';
+import oneHatData from '@onehat/data';
+import _ from 'lodash';
+
+// NOTE: This is a modified version of @onehat/ui/src/Hoc/withData
+// This HOC will eventually get out of sync with that one, and may need to be updated.
+
+export default function withSecondaryData(WrappedComponent) {
+	return (props) => {
+
+		if (props.secondaryDisableWithData) {
+			return <WrappedComponent {...props} />;
+		}
+		
+		const
+			{
+				// For @onehat/data repositories
+				SecondaryRepository,
+				setSecondaryRepository,
+				uniqueSecondaryRepository = false,
+				secondaryModel,
+				secondaryAutoLoad, // bool
+				secondaryPageSize,
+				secondaryBaseParams,
+
+				// For plain JS data
+				secondaryData,
+				secondaryFields = ['id', 'value'],
+				secondaryIdField = 'id',
+				secondaryDisplayField = 'value',
+				secondaryIdIx,
+				secondaryDisplayIx,
+
+				// withComponent
+				self,
+			} = props,
+			propsToPass = _.omit(props, ['secondaryModel']), // passing 'secondaryModel' would mess things up if withData gets called twice (e.g. withData(...withData(...)) ), as we'd be trying to recreate SecondaryRepository twice
+			localIdIx = secondaryIdIx || (secondaryFields && secondaryIdField ? secondaryFields.indexOf(secondaryIdField) : null),
+			localDisplayIx = secondaryDisplayIx || (secondaryFields && secondaryDisplayField ? secondaryFields?.indexOf(secondaryDisplayField) : null),
+			[LocalSecondaryRepository, setLocalSecondaryRepository] = useState(SecondaryRepository || null), // simply pass on SecondaryRepository if it's already supplied
+			[isReady, setIsReady] = useState(!!LocalSecondaryRepository || !!secondaryData); // It's already ready if a LocalSecondaryRepository or secondaryData array is already set. Otherwise, we need to create the repository
+
+		// Create LocalSecondaryRepository
+		// If SecondaryRepository was submitted to this withData(), the useEffect has no effect.
+		// If it's empty, it tries to create a LocalSecondaryRepository
+		useEffect(() => {
+			if (!!LocalSecondaryRepository || !!secondaryData) {
+				return () => {};
+			}
+
+			let repositoryId;
+
+			(async () => {
+				let SecondaryRepository;
+				if (uniqueSecondaryRepository) {
+					const schema = oneHatData.getSchema(secondaryModel);
+					SecondaryRepository = await oneHatData.createRepository({ schema });
+					repositoryId = SecondaryRepository.id;
+				} else {
+					SecondaryRepository = oneHatData.getRepository(secondaryModel);
+				}
+
+				if (secondaryPageSize) {
+					SecondaryRepository.setPageSize(secondaryPageSize);
+				}
+
+				if (secondaryBaseParams) {
+					SecondaryRepository.setBaseParams(secondaryBaseParams);
+				}
+
+
+				if (SecondaryRepository && !SecondaryRepository.isLoaded && SecondaryRepository.isRemote && !SecondaryRepository.isAutoLoad && !SecondaryRepository.isLoading) {
+					let doAutoLoad = SecondaryRepository.autoLoad;
+					if (!_.isNil(secondaryAutoLoad)) { // prop can override schema setting for secondaryAutoLoad
+						doAutoLoad = secondaryAutoLoad;
+					}
+					if (doAutoLoad) {
+						await SecondaryRepository.load();
+					}
+				}
+	
+				setLocalSecondaryRepository(SecondaryRepository);
+				if (setSecondaryRepository) { // pass it on up to higher components
+					setSecondaryRepository(SecondaryRepository);
+				}
+				if (self) {
+					self.repository = SecondaryRepository;
+				}
+				setIsReady(true);
+			})();
+
+			return () => {
+				if (repositoryId) {
+					oneHatData.deleteRepository(repositoryId);
+				}
+			}
+
+		}, []);
+
+		if (!isReady) {
+			return null;
+		}
+
+		return <WrappedComponent
+					{...propsToPass}
+					secondaryDisableWithData={false}
+					SecondaryRepository={LocalSecondaryRepository}
+					secondaryModel={secondaryModel}
+					secondaryData={secondaryData}
+					secondaryFields={secondaryFields}
+					secondaryIdField={secondaryIdField}
+					secondaryDisplayField={secondaryDisplayField}
+					secondaryIdIx={localIdIx}
+					secondaryDisplayIx={localDisplayIx}
+				/>;
+	};
+}

package/src/Components/Hoc/Secondary/withSecondaryEditor.js

@@ -0,0 +1,455 @@
+import { useEffect, useState, useRef, } from 'react';
+import {
+	Button,
+} from 'native-base';
+import {
+	EDITOR_MODE__VIEW,
+	EDITOR_MODE__ADD,
+	EDITOR_MODE__EDIT,
+} from '../../../Constants/Editor.js';
+import _ from 'lodash';
+
+// NOTE: This is a modified version of @onehat/ui/src/Hoc/withEditor
+// This HOC will eventually get out of sync with that one, and may need to be updated.
+
+export default function withSecondaryEditor(WrappedComponent, isTree = false) {
+	return (props) => {
+
+		if (props.secondaryDisableWithEditor) {
+			return <WrappedComponent {...props} />;
+		}
+
+		let [secondaryEditorMode, secondarySetEditorMode] = useState(EDITOR_MODE__VIEW); // Can change below, so use 'let'
+		const {
+				secondaryUserCanEdit = true,
+				secondaryUserCanView = true,
+				secondaryCanEditorViewOnly = false, // whether the editor can *ever* change state out of 'View' mode
+				secondaryDisableAdd = false,
+				secondaryDisableEdit = false,
+				secondaryDisableDelete = false,
+				secondaryDisableDuplicate = false,
+				secondaryDisableView = false,
+				secondaryUseRemoteDuplicate = false, // call specific copyToNew function on server, rather than simple duplicate on client
+				secondaryGetRecordIdentifier = (secondarySelection) => {
+					if (secondarySelection.length > 1) {
+						return 'records?';
+					}
+					return 'record' + (secondarySelection[0].displayValue ? ' "' + secondarySelection[0].displayValue + '"' : '') + '?';
+				},
+				secondaryRecord,
+				secondaryOnChange,
+				secondaryOnSave,
+				secondaryNewEntityDisplayValue,
+
+				// withComponent
+				self,
+
+				// parent container
+				secondarySelectorId,
+				secondarySelectorSelected,
+
+				// withSecondaryData
+				SecondaryRepository,
+
+				// withSecondarySelection
+				secondarySelection,
+				secondarySetSelection,
+
+				// withAlert
+				alert,
+				confirm,
+				hideAlert,
+			} = props,
+			secondaryListeners = useRef({}),
+			secondaryEditorStateRef = useRef(),
+			secondaryNewEntityDisplayValueRef = useRef(),
+			[secondaryCurrentRecord, secondarySetCurrentRecord] = useState(null),
+			[secondaryIsAdding, setIsAdding] = useState(false),
+			[secondaryIsSaving, setIsSaving] = useState(false),
+			[secondaryIsEditorShown, secondarySetIsEditorShown] = useState(false),
+			[secondaryIsEditorViewOnly, setIsEditorViewOnly] = useState(secondaryCanEditorViewOnly), // current state of whether editor is in view-only mode
+			[secondaryLastSelection, setLastSelection] = useState(),
+			secondarySetSelectionDecorated = (newSelection) => {
+				function doIt() {
+					secondarySetSelection(newSelection);
+				}
+				const formState = secondaryEditorStateRef.current;
+				if (!_.isEmpty(formState?.dirtyFields) && newSelection !== secondarySelection && secondaryEditorMode === EDITOR_MODE__EDIT) {
+					confirm('This record has unsaved changes. Are you sure you want to cancel editing? Changes will be lost.', doIt);
+				} else {
+					doIt();
+				}
+			},
+			getListeners = () => {
+				return secondaryListeners.current;
+			},
+			setListeners = (obj) => {
+				secondaryListeners.current = obj;
+				// forceUpdate(); // we don't want to get into an infinite loop of renders. Simply directly assign the secondaryListeners in every child render
+			},
+			getNewEntityDisplayValue = () => {
+				return secondaryNewEntityDisplayValueRef.current;
+			},
+			secondaryOnAdd = async (e, values) => {
+				const defaultValues = SecondaryRepository.getSchema().getDefaultValues();
+				let addValues = values || _.clone(defaultValues);
+
+				if (secondarySelectorId && !_.isEmpty(secondarySelectorSelected)) {
+					addValues[secondarySelectorId] = secondarySelectorSelected.id;
+				}
+
+				if (!values && getNewEntityDisplayValue()) {
+					const displayPropertyName = SecondaryRepository.getSchema().model.displayProperty;
+					addValues[displayPropertyName] = getNewEntityDisplayValue();
+				}
+
+				if (getListeners().onBeforeAdd) {
+					const listenerResult = await getListeners().onBeforeAdd();
+					if (listenerResult === false) {
+						return;
+					}
+				}
+
+				if (isTree) {
+					if (!secondarySelection[0]) {
+						throw Error('Must select a parent node.');
+					}
+					addValues.parentId = secondarySelection[0].id;
+				} else {
+					// Set repository to sort by id DESC and switch to page 1, so this new entity is guaranteed to show up on the current page, even after saving
+					const currentSorter = SecondaryRepository.sorters[0];
+					if (currentSorter.name !== SecondaryRepository.schema.model.idProperty || currentSorter.direction !== 'DESC') {
+						SecondaryRepository.pauseEvents();
+						SecondaryRepository.sort(SecondaryRepository.schema.model.idProperty, 'DESC');
+						SecondaryRepository.setPage(1);
+						SecondaryRepository.resumeEvents();
+						await SecondaryRepository.reload();
+					}
+				}
+
+				// Unmap the values, so we can input true originalData
+				addValues = SecondaryRepository.unmapData(addValues);
+
+
+				setIsAdding(true);
+				setIsSaving(true);
+				const entity = await SecondaryRepository.add(addValues, false, true);
+				setIsSaving(false);
+				secondarySetSelection([entity]);
+				setIsEditorViewOnly(false);
+				secondarySetEditorMode(EDITOR_MODE__ADD);
+				secondarySetIsEditorShown(true);
+
+				if (getListeners().onAfterAdd) {
+					await getListeners().onAfterAdd(entity);
+				}
+				if (secondaryOnChange) {
+					secondaryOnChange();
+				}
+			},
+			secondaryOnEdit = async () => {
+				if (_.isEmpty(secondarySelection) || (_.isArray(secondarySelection) && (secondarySelection.length > 1 || secondarySelection[0]?.isDestroyed))) {
+					return;
+				}
+				if (getListeners().onBeforeEdit) {
+					const listenerResult = await getListeners().onBeforeEdit();
+					if (listenerResult === false) {
+						return;
+					}
+				}
+				setIsEditorViewOnly(false);
+				secondarySetEditorMode(EDITOR_MODE__EDIT);
+				secondarySetIsEditorShown(true);
+			},
+			secondaryOnDelete = async (args) => {
+				let cb = null;
+				if (_.isFunction(args)) {
+					cb = args;
+				}
+				if (_.isEmpty(secondarySelection) || (_.isArray(secondarySelection) && (secondarySelection.length > 1 || secondarySelection[0]?.isDestroyed))) {
+					return;
+				}
+				if (getListeners().onBeforeDelete) {
+					const listenerResult = await getListeners().onBeforeDelete();
+					if (listenerResult === false) {
+						return;
+					}
+				}
+				const
+					isSingle = secondarySelection.length === 1,
+					firstSelection = secondarySelection[0],
+					isTree = firstSelection?.isTree,
+					hasChildren = isTree ? firstSelection?.hasChildren : false,
+					isPhantom = firstSelection?.isPhantom;
+
+				if (isSingle && isTree && hasChildren) {
+					alert({
+						title: 'Move up children?',
+						message: 'The node you have selected for deletion has children. ' + 
+								'Should these children be moved up to this node\'s parent, or be deleted?',
+						buttons: [
+							<Button colorScheme="danger" onPress={() => secondaryOnMoveChildren(cb)} key="moveBtn">
+								Move Children
+							</Button>,
+							<Button colorScheme="danger" onPress={() => secondaryOnDeleteChildren(cb)} key="deleteBtn">
+								Delete Children
+							</Button>
+						],
+						includeCancel: true,
+					});
+				} else
+				if (isSingle && isPhantom) {
+					deleteRecord(cb);
+				} else {
+					const identifier = secondaryGetRecordIdentifier(secondarySelection);
+					confirm('Are you sure you want to delete the ' + identifier, () => deleteRecord(null, cb));
+				}
+			},
+			secondaryOnMoveChildren = (cb) => {
+				hideAlert();
+				deleteRecord(true, cb);
+			},
+			secondaryOnDeleteChildren = (cb) => {
+				hideAlert();
+				deleteRecord(false, cb);
+			},
+			deleteRecord = async (moveSubtreeUp, cb) => {
+				if (getListeners().onBeforeDeleteSave) {
+					await getListeners().onBeforeDeleteSave(secondarySelection);
+				}
+
+				await SecondaryRepository.delete(secondarySelection, moveSubtreeUp);
+				if (!SecondaryRepository.isAutoSave) {
+					await SecondaryRepository.save();
+				}
+				if (getListeners().onAfterDelete) {
+					await getListeners().onAfterDelete(secondarySelection);
+				}
+				secondarySetSelection([]);
+				if (cb) {
+					cb();
+				}
+				if (secondaryOnChange) {
+					secondaryOnChange();
+				}
+			},
+			secondaryOnView = async () => {
+				if (!secondaryUserCanView) {
+					return;
+				}
+				if (secondarySelection.length !== 1) {
+					return;
+				}
+				setIsEditorViewOnly(true);
+				secondarySetEditorMode(EDITOR_MODE__VIEW);
+				secondarySetIsEditorShown(true);
+
+				if (getListeners().onAfterView) {
+					await getListeners().onAfterView();
+				}
+			},
+			secondaryOnDuplicate = async () => {
+				if (!secondaryUserCanEdit || secondaryDisableDuplicate) {
+					return;
+				}
+				if (secondarySelection.length !== 1) {
+					return;
+				}
+				if (secondaryUseRemoteDuplicate) {
+					return onRemoteDuplicate();
+				}
+				const
+					entity = secondarySelection[0],
+					idProperty = SecondaryRepository.getSchema().model.idProperty,
+					rawValues = _.omit(entity.rawValues, idProperty),
+					duplicate = await SecondaryRepository.add(rawValues, false, true);
+				secondarySetSelection([duplicate]);
+				secondarySetEditorMode(EDITOR_MODE__EDIT);
+				secondarySetIsEditorShown(true);
+			},
+			onRemoteDuplicate = async () => {
+				const
+					entity = secondarySelection[0],
+					duplicateEntity = await SecondaryRepository.remoteDuplicate(entity);
+
+				secondarySetSelection([duplicateEntity]);
+				secondaryOnEdit();
+			},
+			secondaryOnEditorSave = async (data, e) => {
+				const
+					what = secondaryRecord || secondarySelection,
+					isSingle = what.length === 1;
+				if (isSingle) {
+					// just update this one entity
+					what[0].setValues(data);
+
+				} else if (secondarySelection.length > 1) {
+					// Edit multiple entities
+
+					// Loop through all entities and change fields that are not null
+					const propertyNames = Object.getOwnPropertyNames(data);
+					_.each(propertyNames, (propertyName) => {
+						if (!_.isNil(data[propertyName])) {
+							_.each(what, (rec) => {
+								rec[propertyName] = data[propertyName]
+							});
+						}
+					});
+				}
+
+				if (getListeners().onBeforeEditSave) {
+					await getListeners().onBeforeEditSave(what);
+				}
+
+				setIsSaving(true);
+				let success;
+				try {
+					await SecondaryRepository.save();
+					success = true;
+				} catch (e) {
+					success = false;
+				}
+				setIsSaving(false);
+
+				if (success) {
+					setIsAdding(false);
+					
+					secondarySetEditorMode(EDITOR_MODE__EDIT);
+					// secondarySetIsEditorShown(false);
+					
+					if (getListeners().onAfterEdit) {
+						await getListeners().onAfterEdit(what);
+					}
+					if (secondaryOnChange) {
+						secondaryOnChange();
+					}
+					if (secondaryOnSave) {
+						secondaryOnSave(what);
+					}
+				}
+
+				return success;
+			},
+			secondaryOnEditorCancel =  () => {
+				async function doIt() {
+					const
+						isSingle = secondarySelection.length === 1,
+						isPhantom = secondarySelection[0] && !secondarySelection[0]?.isDestroyed && secondarySelection[0].isPhantom;
+					if (isSingle && isPhantom) {
+						await deleteRecord();
+					}
+					
+					setIsAdding(false);
+					secondarySetIsEditorShown(false);
+				}
+				const formState = secondaryEditorStateRef.current;
+				if (!_.isEmpty(formState.dirtyFields)) {
+					confirm('This record has unsaved changes. Are you sure you want to cancel editing? Changes will be lost.', doIt);
+				} else {
+					doIt();
+				}
+			},
+			secondaryOnEditorClose = () => {
+				if (secondaryIsAdding) {
+					secondaryOnEditorCancel();
+				}
+				secondarySetIsEditorShown(false);
+			},
+			secondaryOnEditorDelete = async () => {
+				secondaryOnDelete(() => {
+					secondarySetEditorMode(EDITOR_MODE__VIEW);
+					secondarySetIsEditorShown(false);
+				});
+			},
+			calculateEditorMode = () => {
+				let mode = secondaryEditorMode;
+				if (!secondaryCanEditorViewOnly && secondaryUserCanEdit) {
+					if (secondarySelection.length > 1) {
+						if (!secondaryDisableEdit) {
+							// For multiple entities selected, change it to edit multiple mode
+							mode = EDITOR_MODE__EDIT;
+						}
+					} else if (secondarySelection.length === 1 && !secondarySelection[0].isDestroyed && secondarySelection[0].isPhantom) {
+						if (!secondaryDisableAdd) {
+							// When a phantom entity is selected, change it to add mode.
+							mode = EDITOR_MODE__ADD;
+						}
+					}
+				}
+				return mode;
+			},
+			secondaryOnEditMode = () => {
+				secondarySetEditorMode(EDITOR_MODE__EDIT);
+			},
+			secondaryOnViewMode = () => {
+				function doIt() {
+					secondarySetEditorMode(EDITOR_MODE__VIEW);
+				}
+				const formState = secondaryEditorStateRef.current;
+				if (!_.isEmpty(formState.dirtyFields)) {
+					confirm('This record has unsaved changes. Are you sure you want to switch to "View" mode? Changes will be lost.', doIt);
+				} else {
+					doIt();
+				}
+			};
+
+		useEffect(() => {
+			// When secondarySelection changes, set the mode appropriately
+			const mode = calculateEditorMode();
+			secondarySetEditorMode(mode);
+
+			setLastSelection(secondarySelection);
+		}, [secondarySelection]);
+
+		if (self) {
+			self.secondaryAdd = secondaryOnAdd;
+			self.secondaryEdit = secondaryOnEdit;
+			self.secondaryDelete = secondaryOnDelete;
+			self.secondarnMoveChildren = secondaryOnMoveChildren;
+			self.secondaryDeleteChildren = secondaryOnDeleteChildren;
+			self.secondaryDuplicate = secondaryOnDuplicate;
+		}
+		secondaryNewEntityDisplayValueRef.current = secondaryNewEntityDisplayValue;
+
+		if (secondaryLastSelection !== secondarySelection) {
+			// NOTE: If I don't calculate this on the fly for secondarySelection changes,
+			// we see a flash of the previous state, since useEffect hasn't yet run.
+			secondaryEditorMode = calculateEditorMode();
+		}
+
+		return <WrappedComponent
+					{...props}
+					secondaryDisableWithEditor={false}
+					secondaryCurrentRecord={secondaryCurrentRecord}
+					secondarySetCurrentRecord={secondarySetCurrentRecord}
+					secondaryIsEditorShown={secondaryIsEditorShown}
+					secondaryIsEditorViewOnly={secondaryIsEditorViewOnly}
+					secondaryIsAdding={secondaryIsAdding}
+					secondaryIsSaving={secondaryIsSaving}
+					secondaryEditorMode={secondaryEditorMode}
+					secondaryOnEditMode={secondaryOnEditMode}
+					secondaryOnViewMode={secondaryOnViewMode}
+					secondaryEditorStateRef={secondaryEditorStateRef}
+					secondarySetIsEditorShown={secondarySetIsEditorShown}
+					secondaryOnAdd={(!secondaryUserCanEdit || secondaryDisableAdd) ? null : secondaryOnAdd}
+					secondaryOnEdit={(!secondaryUserCanEdit || secondaryDisableEdit) ? null : secondaryOnEdit}
+					secondaryOnDelete={(!secondaryUserCanEdit || secondaryDisableDelete) ? null : secondaryOnDelete}
+					secondaryOnView={secondaryOnView}
+					secondaryOnDuplicate={secondaryOnDuplicate}
+					secondaryOnEditorSave={secondaryOnEditorSave}
+					secondaryOnEditorCancel={secondaryOnEditorCancel}
+					secondaryOnEditorDelete={(!secondaryUserCanEdit || secondaryDisableDelete) ? null : secondaryOnEditorDelete}
+					secondaryOnEditorClose={secondaryOnEditorClose}
+					secondarySetWithEditListeners={setListeners}
+					secondaryIsEditor={true}
+					secondaryUserCanEdit={secondaryUserCanEdit}
+					secondaryUserCanView={secondaryUserCanView}
+					secondaryDisableAdd={secondaryDisableAdd}
+					secondaryDisableEdit={secondaryDisableEdit}
+					secondaryDisableDelete={secondaryDisableDelete}
+					secondaryDisableDuplicate={secondaryDisableDuplicate}
+					secondaryDisableView ={secondaryDisableView}
+					secondarySetSelection={secondarySetSelectionDecorated}
+				/>;
+	};
+}

package/src/Components/Hoc/Secondary/withSecondarySelection.js

@@ -0,0 +1,377 @@
+import { useState, useEffect, } from 'react';
+import {
+	SELECTION_MODE_SINGLE,
+	SELECTION_MODE_MULTI,
+	SELECT_UP,
+	SELECT_DOWN,
+} from '../../../Constants/Selection.js';
+import inArray from '../../../Functions/inArray.js';
+import _ from 'lodash';
+
+// NOTE: This is a modified version of @onehat/ui/src/Hoc/withSelection
+// This HOC will eventually get out of sync with that one, and may need to be updated.
+
+export default function withSelection(WrappedComponent) {
+	return (props) => {
+
+		if (props.secondaryDisableWithSelection) {
+			return <WrappedComponent {...props} />;
+		}
+
+		if (props.secondarySetSelection) {
+			// bypass everything, since we're already using withSelection() in hierarchy.
+			// For example, Combo has withSelection(), and intenally it uses Grid which also has withSelection(),
+			// but we only need it defined once for the whole thing.
+			return <WrappedComponent {...props} />;
+		}
+
+		const
+			{
+				secondarySelection,
+				secondaryDefaultSelection,
+				secondaryOnChangeSelection,
+				secondarySelectionMode = SELECTION_MODE_SINGLE, // SELECTION_MODE_MULTI, SELECTION_MODE_SINGLE
+				secondaryAutoSelectFirstItem = false,
+				fireEvent,
+
+				// withComponent
+				self,
+
+				// withSecondaryValue
+				secondaryValue,
+				secondarySetValue,
+
+				// withSecondaryData
+				SecondaryRepository,
+				secondaryData,
+				secondaryIdIx,
+				secondaryDisplayIx,
+			} = props,
+			usesWithValue = !!secondarySetValue,
+			initialSelection = secondarySelection || secondaryDefaultSelection || [],
+			[secondaryLocalSelection, setLocalSelection] = useState(initialSelection),
+			[isReady, setIsReady] = useState(secondarySelection || false), // if secondarySelection is already defined, or secondaryValue is not null and we don't need to load repository, it's ready
+			secondarySetSelection = (secondarySelection) => {
+				if (_.isEqual(secondarySelection, secondaryLocalSelection)) {
+					return;
+				}
+
+				setLocalSelection(secondarySelection);
+				if (secondaryOnChangeSelection) {
+					secondaryOnChangeSelection(secondarySelection);
+				}
+				if (fireEvent) {
+					fireEvent('secondaryChangeSelection', secondarySelection);
+				}
+			},
+			secondarySelectNext = () => {
+				secondarySelectDirection(SELECT_DOWN);
+			},
+			secondarySelectPrev = () => {
+				secondarySelectDirection(SELECT_UP);
+			},
+			secondarySelectDirection = (which) => {
+				const { items, max, min, noSelection, } = getMaxMinSelectionIndices();
+				let newIx;
+				if (which === SELECT_DOWN) {
+					if (noSelection || max === items.length -1) {
+						// select first
+						newIx = 0;
+					} else {
+						newIx = max +1;
+					}
+				} else if (which === SELECT_UP) {
+					if (noSelection || min === 0) {
+						// select last
+						newIx = items.length -1;
+					} else {
+						newIx = min -1;
+					}
+				}
+				if (items[newIx]) {
+					secondarySetSelection([items[newIx]]);
+				}
+			},
+			secondaryAddToSelection = (item) => {
+				let newSelection = [];
+				newSelection = _.clone(secondaryLocalSelection); // so we get a new object, so descendants rerender
+				newSelection.push(item);
+				secondarySetSelection(newSelection);
+			},
+			secondaryRemoveFromSelection = (item) => {
+				let newSelection = [];
+				if (SecondaryRepository) {
+					newSelection = _.remove(secondaryLocalSelection, (sel) => sel !== item);
+				} else {
+					newSelection = _.remove(secondaryLocalSelection, (sel) => sel[secondaryIdIx] !== item[secondaryIdIx]);
+				}
+				secondarySetSelection(newSelection);
+			},
+			secondaryDeselectAll = () => {
+				if (!_.isEmpty(secondaryLocalSelection)) {
+					secondarySetSelection([]);
+				}
+			},
+			getMaxMinSelectionIndices = () => {
+				let items,
+					currentlySelectedRowIndices = [];
+				if (SecondaryRepository) {
+					items = SecondaryRepository.getEntitiesOnPage();
+				} else {
+					items = secondaryData;
+				}
+				_.each(items, (item, ix) => {
+					if (secondaryIsInSelection(item)) {
+						currentlySelectedRowIndices.push(ix);
+					}
+				});
+				if (currentlySelectedRowIndices.length === 0) {
+					return { items, noSelection: true, };
+				}
+				const
+					max = Math.max(...currentlySelectedRowIndices),
+					min = Math.min(...currentlySelectedRowIndices);
+				
+				return { items, max, min, noSelection: false, };
+			},
+			secondarySelectRangeTo = (item) => {
+				// Select above max or below min to this one
+				const
+					currentSelectionLength = secondaryLocalSelection.length,
+					index = getIndexOfSelectedItem(item);
+				let newSelection = _.clone(secondaryLocalSelection); // so we get a new object, so descendants rerender
+
+				if (currentSelectionLength) {
+					const { items, max, min, } = getMaxMinSelectionIndices();
+					let i,
+						itemAtIx;
+					if (max < index) {
+						// all other secondarySelections are below the current;
+						// Range is from max+1 up to index
+						for (i = max +1; i < index; i++) {
+							itemAtIx = items[i];
+							newSelection.push(itemAtIx);
+						}
+					} else if (min > index) {
+						// all other secondarySelections are above the current;
+						// Range is from min-1 down to index
+						for (i = min -1; i > index; i--) {
+							itemAtIx = items[i];
+							newSelection.push(itemAtIx);
+						}
+					}
+				}
+				newSelection.push(item);
+				secondarySetSelection(newSelection);
+			},
+			secondaryIsInSelection = (item) => {
+				if (SecondaryRepository) {
+					return inArray(item, secondaryLocalSelection);
+				}
+
+				const found = _.find(secondaryLocalSelection, (selectedItem) => {
+						return selectedItem[secondaryIdIx] === item[secondaryIdIx];
+					});
+				return !!found;
+			},
+			getIndexOfSelectedItem = (item) => {
+				// Gets ix of entity on page, or element in secondaryData array
+				if (SecondaryRepository) {
+					const entities = SecondaryRepository.getEntitiesOnPage();
+					return entities.indexOf(item);
+				}
+				
+				let found;
+				_.each(secondaryData, (datum, ix) => {
+					if (datum[secondaryIdIx] === item[secondaryIdIx]) {
+						found = ix;
+						return false; // break loop
+					}
+				});
+				return found;
+			},
+			secondaryGetIdsFromLocalSelection = () => {
+				if (!secondaryLocalSelection[0]) {
+					return null;
+				}
+				const secondaryValues = _.map(secondaryLocalSelection, (item) => {
+					if (SecondaryRepository) {
+						return item.id;
+					}
+					return item[secondaryIdIx];
+				});
+				if (secondaryValues.length === 1) {
+					return secondaryValues[0];
+				}
+				return secondaryValues;
+			},
+			secondaryGetDisplayValuesFromLocalSelection = (secondarySelection) => {
+				if (!secondarySelection[0]) {
+					return '';
+				}
+
+				return _.map(secondarySelection, (item) => {
+							if (SecondaryRepository) {
+								return item.displayValue;
+							}
+							return item[secondaryDisplayIx];
+						})
+						.join(', ');
+			},
+			conformValueToLocalSelection = () => {
+				if (!secondarySetValue) {
+					return;
+				}
+				
+				const localValue = secondaryGetIdsFromLocalSelection();
+				if (!_.isEqual(localValue, secondaryValue)) {
+					secondarySetValue(localValue);
+				}
+			},
+			conformSelectionToValue = async () => {
+				let newSelection = [];
+				if (SecondaryRepository) {
+					if (SecondaryRepository.isLoading) {
+						await SecondaryRepository.waitUntilDoneLoading();
+					}
+					// Get entity or entities that match secondaryValue
+					if ((_.isArray(secondaryValue) && !_.isEmpty(secondaryValue)) || !!secondaryValue) {
+						if (_.isArray(secondaryValue)) {
+							newSelection = SecondaryRepository.getBy((entity) => inArray(entity.id, secondaryValue));
+						} else {
+							let found = SecondaryRepository.getById(secondaryValue);
+							if (found) {
+								newSelection.push(found);
+							// } else if (SecondaryRepository?.isRemote && SecondaryRepository?.entities.length) {
+
+							// 	// Value cannot be found in SecondaryRepository, but actually exists on server
+							// 	// Try to get this secondaryValue from the server directly
+							// 	SecondaryRepository.filter(SecondaryRepository.schema.model.idProperty, secondaryValue);
+							// 	await SecondaryRepository.load();
+							// 	found = SecondaryRepository.getById(secondaryValue);
+							// 	if (found) {
+							// 		newSelection.push(found);
+							// 	}
+
+							}
+						}
+					}
+				} else {
+					// Get secondaryData item or items that match secondaryValue
+					if (!_.isNil(secondaryValue) && (_.isBoolean(secondaryValue) || _.isNumber(secondaryValue) || !_.isEmpty(secondaryValue))) {
+						let currentValue = secondaryValue;
+						if (!_.isArray(currentValue)) {
+							currentValue = [currentValue];
+						}
+						_.each(currentValue, (val) => {
+							// Search through secondaryData
+							const found = _.find(secondaryData, (item) => {
+								if (_.isString(item[secondaryIdIx]) && _.isString(val)) {
+									return item[secondaryIdIx].toLowerCase() === val.toLowerCase();
+								}
+								return item[secondaryIdIx] === val;
+							});
+							if (found) {
+								newSelection.push(found);
+							}
+						});
+					}
+				}
+
+				if (!_.isEqual(newSelection, secondaryLocalSelection)) {
+					secondarySetSelection(newSelection);
+				}
+			};
+
+		useEffect(() => {
+
+			(async () => {
+
+				if (usesWithValue && SecondaryRepository?.isRemote 
+					&& !SecondaryRepository.isAutoLoad && !SecondaryRepository.isLoaded && !SecondaryRepository.isLoading && (!_.isNil(secondaryValue) || !_.isEmpty(secondarySelection)) || secondaryAutoSelectFirstItem) {
+					// on initialization, we can't conformSelectionToValue if the repository is not yet loaded, 
+					// so first load repo, then conform to secondaryValue
+					await SecondaryRepository.load();
+				}
+
+				if (!_.isNil(secondaryValue)) {
+
+					await conformSelectionToValue();
+
+				} else if (!_.isEmpty(secondarySelection)) {
+
+					conformValueToLocalSelection();
+
+				} else if (secondaryAutoSelectFirstItem) {
+					let newSelection = [];
+					if (SecondaryRepository) {
+						const entitiesOnPage = SecondaryRepository.getEntitiesOnPage();
+						newSelection = entitiesOnPage[0] ? [entitiesOnPage[0]] : [];
+					} else {
+						newSelection = secondaryData[0] ? [secondaryData[0]] : [];
+					}
+					secondarySetSelection(newSelection);
+				}
+
+				setIsReady(true);
+
+			})();
+
+		}, [secondaryValue]);
+
+		if (self) {
+			self.secondarySelection = secondaryLocalSelection;
+			self.secondarySetSelection = secondarySetSelection;
+			self.secondarySelectNext = secondarySelectNext;
+			self.secondarySelectPrev = secondarySelectPrev;
+			self.secondaryAddToSelection = secondaryAddToSelection;
+			self.secondaryRemoveFromSelection = secondaryRemoveFromSelection;
+			self.secondaryDeselectAll = secondaryDeselectAll;
+			self.secondarySelectRangeTo = secondarySelectRangeTo;
+			self.secondaryIsInSelection = secondaryIsInSelection;
+			self.secondaryGetIdsFromLocalSelection = secondaryGetIdsFromLocalSelection;
+			self.secondaryGetDisplayValuesFromSelection = secondaryGetDisplayValuesFromLocalSelection;
+		}
+
+		if (usesWithValue) {
+			useEffect(() => {
+				if (!isReady) {
+					return () => {};
+				}
+	
+				conformSelectionToValue();
+	
+			}, [secondaryValue]);
+	
+			useEffect(() => {
+				if (!isReady) {
+					return () => {};
+				}
+	
+				conformValueToLocalSelection();
+				
+			}, [secondarySelection]);
+		}
+
+		if (!isReady) {
+			return null;
+		}
+		
+		return <WrappedComponent
+					{...props}
+					secondaryDisableWithSelection={false}
+					secondarySelection={secondaryLocalSelection}
+					secondarySetSelection={secondarySetSelection}
+					secondarySelectionMode={secondarySelectionMode}
+					secondarySelectNext={secondarySelectNext}
+					secondarySelectPrev={secondarySelectPrev}
+					secondaryRemoveFromSelection={secondaryRemoveFromSelection}
+					secondaryAddToSelection={secondaryAddToSelection}
+					secondaryDeselectAll={secondaryDeselectAll}
+					secondarySelectRangeTo={secondarySelectRangeTo}
+					secondaryIsInSelection={secondaryIsInSelection}
+					secondaryGetIdsFromSelection={secondaryGetIdsFromLocalSelection}
+					secondaryGetDisplayValuesFromSelection={secondaryGetDisplayValuesFromLocalSelection}
+				/>;
+	};
+}

package/src/Components/Hoc/Secondary/withSecondarySideEditor.js

@@ -0,0 +1,50 @@
+import {
+	EDITOR_TYPE__SIDE,
+} from '@onehat/ui/src/Constants/Editor.js';
+import Container from '../../Container/Container.js';
+import withSecondaryEditor from './withSecondaryEditor.js';
+import _ from 'lodash';
+
+// NOTE: This is a modified version of @onehat/ui/src/Hoc/withSideEditor
+// This HOC will eventually get out of sync with that one, and may need to be updated.
+
+export default function withSideEditor(WrappedComponent, isTree = false) {
+	return withSecondaryEditor((props) => {
+		const {
+				SecondaryEditor,
+				secondaryEditorProps = {},
+				secondarySideFlex = 100,
+
+				// withComponent
+				self,
+				
+				// pull these out, as we don't want them going to the Editor
+				secondarySelectorId,
+				secondarySelectorSelected,
+				
+				...propsToPass
+			} = props;
+
+		if (!SecondaryEditor) {
+			throw Error('SecondaryEditor is not defined');
+		}
+
+		return <Container
+					center={<WrappedComponent
+								isTree={isTree}
+								isSideEditor={true}
+								{...props}
+							/>}
+					east={<Editor
+								{...propsToPass}
+								editorType={EDITOR_TYPE__SIDE}
+								flex={secondarySideFlex}
+								borderLeftWidth={1}
+								borderLeftColor="#ccc"
+								{...secondaryEditorProps}
+								parent={self}
+								reference="secondaryEditor"
+							/>}
+				/>;
+	});
+}

package/src/Components/Hoc/Secondary/withSecondaryValue.js

@@ -0,0 +1,154 @@
+import { useState, useEffect, useRef, useContext, useCallback, } from 'react';
+import natsort from 'natsort';
+import useForceUpdate from '../../../Hooks/useForceUpdate.js';
+import FieldSetContext from '../../../Contexts/FieldSetContext.js';
+import _ from 'lodash';
+
+// NOTE: This is a modified version of @onehat/ui/src/Hoc/withValue
+// This HOC will eventually get out of sync with that one, and may need to be updated.
+
+export default function withSecondaryValue(WrappedComponent) {
+	return (props) => {
+
+		if (props.secondaryDisableWithValue) {
+			return <WrappedComponent {...props} />;
+		}
+
+		if (props.secondarySetValue) {
+			// bypass everything, since we're already using withSecondaryValue() in hierarchy.
+			// For example, Combo has withSecondaryValue(), and intenally it uses Input which also has withSecondaryValue(),
+			// but we only need it defined once for the whole thing.
+			return <WrappedComponent {...props} />;
+		}
+
+		const
+			{
+				secondaryOnChangeValue,
+				secondaryValue,
+				secondaryStartingValue = null,
+				secondaryIsValueAlwaysArray = false,
+				secondaryIsValueAsStringifiedJson = false,
+
+				// withComponent
+				self,
+
+				// withData
+				SecondaryRepository,
+				secondaryIdIx,
+			} = props,
+			forceUpdate = useForceUpdate(),
+			childRef = useRef({}),
+			secondaryOnChangeValueRef = useRef(),
+			localValueRef = useRef(secondaryStartingValue || secondaryValue),
+			fieldSetOnChangeValueRef = useRef(),
+			fieldSetContext = useContext(FieldSetContext),
+			fieldSetRegisterChild = fieldSetContext?.registerChild,
+			fieldSetOnChangeValue = fieldSetContext?.secondaryOnChangeValue,
+			getLocalValue = () => {
+				return localValueRef.current;
+			},
+			secondarySetLocalValue = (secondaryValue) => {
+				localValueRef.current = secondaryValue;
+				forceUpdate();
+			},
+			secondarySetValueRef = useRef((newValue) => {
+				// NOTE: We useRef so that this function stays current after renders
+				if (secondaryIsValueAlwaysArray && !_.isArray(newValue)) {
+					newValue = _.isNil(newValue) ? [] : [newValue];
+				}
+				if (_.isArray(newValue)) {
+					const sortFn = natsort.default || natsort; // was having trouble with webpack and this solves it
+
+					// TODO: sort by the sortProperty, whatever that is, instead of just value
+					newValue.sort(sortFn()); // Only sort if we're using id/text arrangement. Otherwise, keep sort order as specified in SecondaryRepository.
+				}
+				if (secondaryIsValueAsStringifiedJson) {
+					newValue = JSON.stringify(newValue);
+				}
+
+				if (newValue === getLocalValue()) {
+					return;
+				}
+
+				secondarySetLocalValue(newValue);
+				
+				if (secondaryOnChangeValueRef.current) {
+					secondaryOnChangeValueRef.current(newValue, childRef.current);
+				}
+				if (fieldSetOnChangeValueRef.current) {
+					fieldSetOnChangeValueRef.current(newValue, childRef.current);
+				}
+			}),
+			secondarySetValue = (args) => {
+				secondarySetValueRef.current(args);
+			},
+			secondaryOnChangeSelection = (selection) => {
+				let secondaryValue = null,
+					secondaryValues;
+				if (selection.length) {
+					if (SecondaryRepository) {
+						if (selection.length === 1) {
+							secondaryValue = selection[0].id;
+						} else {
+							secondaryValues = _.map(selection, (entity) => entity.id);
+						}
+					} else {
+						if (selection.length === 1) {
+							secondaryValue = selection[0][secondaryIdIx];
+						} else {
+							secondaryValues = _.map(selection, (item) => item[secondaryIdIx]);
+						}
+					}
+				}
+				if (secondaryValues) {
+					secondaryValue = secondaryValues;
+				}
+				secondarySetValue(secondaryValue);
+			};
+
+		// Ensure these passed functions stay current after render
+		secondaryOnChangeValueRef.current = secondaryOnChangeValue;
+		fieldSetOnChangeValueRef.current = fieldSetOnChangeValue;
+
+		useEffect(() => {
+			if (!_.isEqual(secondaryValue, getLocalValue())) {
+				secondarySetLocalValue(secondaryValue);
+			}
+		}, [secondaryValue]);
+		
+		if (fieldSetRegisterChild) {
+			useEffect(() => {
+				fieldSetRegisterChild({
+					childRef: childRef.current,
+					value: secondaryValue,
+					setValue: secondarySetValueRef.current,
+				});
+			}, []);
+		}
+
+		if (self) {
+			self.secondarySetValue = secondarySetValue;
+			self.secondaryValue = getLocalValue();
+		}
+
+		
+		// Convert localValue to normal JS primitives for field components
+		let convertedValue = getLocalValue();
+		if (_.isString(convertedValue) && secondaryIsValueAsStringifiedJson && !_.isNil(convertedValue)) {
+			convertedValue = JSON.parse(convertedValue);
+		}
+		if (secondaryIsValueAlwaysArray) {
+			if (_.isEmpty(convertedValue) || _.isNil(convertedValue)) {
+				convertedValue = [];
+			}
+		}
+
+		return <WrappedComponent
+					{...props}
+					secondaryDisableWithValue={false}
+					secondaryValue={convertedValue}
+					secondarySetValue={secondarySetValue}
+					secondaryOnChangeSelection={secondaryOnChangeSelection}
+				/>;
+	};
+}

package/src/Components/Hoc/Secondary/withSecondaryWindowedEditor.js

@@ -0,0 +1,71 @@
+import {
+	Column,
+	Modal,
+	Text,
+} from 'native-base';
+import {
+	EDITOR_TYPE__WINDOWED,
+} from '../../../Constants/Editor.js';
+import withSecondaryEditor from './withSecondaryEditor.js';
+// import withDraggable from './withDraggable.js';
+import _ from 'lodash';
+
+// NOTE: This is a modified version of @onehat/ui/src/Hoc/withWindowedEditor
+// This HOC will eventually get out of sync with that one, and may need to be updated.
+
+export default function withSecondaryWindowedEditor(WrappedComponent, isTree = false) {
+	return withSecondaryEditor((props) => {
+		const {
+				secondaryIsEditorShown = false,
+				secondarySetIsEditorShown,
+				SecondaryEditor,
+				secondaryEditorProps = {},
+
+				// withComponent
+				self,
+				
+				// pull these out, as we don't want them going to the SecondaryEditor
+				secondarySelectorId,
+				secondarySelectorSelected,
+				h,
+
+				...propsToPass
+			} = props;
+
+		if (!SecondaryEditor) {
+			throw Error('SecondaryEditor is not defined');
+		}
+
+		if (secondaryIsEditorShown) {
+			// Move the 'secondary' props over to primary
+			// for the sake of the Editor
+			function lcfirst(str) {
+				return str.charAt(0).toLowerCase() + str.slice(1);
+			}
+			_.each(props, (prop, ix) => {
+				if (ix.match(/^secondary/)) {
+					const name = lcfirst(ix.replace(/^secondary/, ''));
+					secondaryEditorProps[name] = prop;
+				}
+			});
+			secondaryEditorProps.Repository = props.SecondaryRepository;
+		}
+
+		return <>
+					<WrappedComponent {...props} />
+					{secondaryIsEditorShown && 
+						<Modal
+							isOpen={true}
+							onClose={() => secondarySetIsEditorShown(false)}
+						>
+							<SecondaryEditor
+								editorType={EDITOR_TYPE__WINDOWED}
+								{...propsToPass}
+								{...secondaryEditorProps}
+								parent={self}
+								reference="secondaryEditor"
+							/>
+						</Modal>}
+				</>;
+	}, isTree);
+}

package/src/Components/Hoc/withEditor.js

@@ -242,7 +242,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				setIsEditorShown(true);
 
 				if (getListeners().onAfterView) {
-					await getListeners().onAfterView(entity);
+					await getListeners().onAfterView();
 				}
 			},
 			onDuplicate = async () => {