@onehat/ui 0.3.32 → 0.3.34

package/package.json

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

package/src/Components/Form/Form.js

@@ -1,4 +1,4 @@
-import { useEffect, useState, isValidElement, } from 'react';
+import { useEffect, useState, useRef, isValidElement, } from 'react';
 import {
 	Box,
 	Column,
@@ -77,6 +77,7 @@ function Form(props) {
 			// sizing of outer container
 			h,
 			maxHeight,
+			minHeight = 0,
 			w,
 			maxWidth,
 			flex,
@@ -105,6 +106,7 @@ function Form(props) {
 			// withAlert
 			alert,
 		} = props,
+		formRef = useRef(),
 		styles = UiGlobals.styles,
 		record = props.record?.length === 1 ? props.record[0] : props.record,
 		isMultiple = _.isArray(record),
@@ -564,6 +566,10 @@ function Form(props) {
 	if (!_.isNil(editorStateRef)) {
 		editorStateRef.current = formState; // Update state so HOC can know what's going on
 	}
+
+	if (self) {
+		self.ref = formRef;
+	}
 	
 	const sizeProps = {};
 	if (!flex && !h && !w) {
@@ -617,7 +623,7 @@ function Form(props) {
 	} else {
 		formComponents = buildFromItems();
 		const formAncillaryComponents = buildAncillary();
-		editor = <ScrollView _web={{ height: 1 }} width="100%" pb={1}>
+		editor = <ScrollView _web={{ minHeight, }} width="100%" pb={1}>
 					<Column p={4}>{formComponents}</Column>
 					<Column m={2} pt={4}>{formAncillaryComponents}</Column>
 				</ScrollView>;
@@ -654,7 +660,7 @@ function Form(props) {
 
 	const additionalButtons = buildAdditionalButtons(additionalEditButtons);
 	
-	return <Column {...sizeProps} onLayout={onLayout}>
+	return <Column {...sizeProps} onLayout={onLayout} ref={formRef}>
 
 				<Row px={4} pt={4} alignItems="center" justifyContent="flex-end">
 					{isSingle && editorMode === EDITOR_MODE__EDIT && onBack && 

package/src/Components/Grid/Grid.js

@@ -774,6 +774,9 @@ function GridComponent(props) {
 
 	}, [selectorId, selectorSelected]);
 
+	if (self) {
+		self.ref = gridRef;
+	}
 
 	isAddingRef.current = isAdding;
 

package/src/Components/Hoc/withComponent.js

@@ -10,6 +10,7 @@ export default function withComponent(WrappedComponent) {
 		const {
 				// self: parent,
 				parent,
+				componentMethods,
 				...propsToPass
 			} = props,
 			{ reference } = props,
@@ -17,6 +18,13 @@ export default function withComponent(WrappedComponent) {
 			selfRef = useRef({
 				parent,
 				reference,
+				hasChild: (childRef) => {
+					const {
+							reference,
+						} = childRef,
+						found = _.find(childrenRef.current, (ref, ix) => ix === reference);
+					return !!found;
+				},
 				registerChild: (childRef) => {
 					const {
 							reference,
@@ -38,7 +46,12 @@ export default function withComponent(WrappedComponent) {
 			});
 
 		useEffect(() => {
-			if (parent && reference) {
+			if (componentMethods) {
+				_.each(componentMethods, (method, name) => {
+					selfRef.current[name] = method;
+				});
+			}
+			if (parent && reference && !parent.hasChild(selfRef.current)) {
 				parent.registerChild(selfRef.current);
 			}
 			return () => {

package/src/Components/Hoc/withData.js

@@ -28,6 +28,9 @@ export default function withData(WrappedComponent) {
 				displayField = 'value',
 				idIx,
 				displayIx,
+
+				// withComponent
+				self,
 			} = props,
 			propsToPass = _.omit(props, ['model']), // passing 'model' would mess things up if withData gets called twice (e.g. withData(...withData(...)) ), as we'd be trying to recreate Repository twice
 			localIdIx = idIx || (fields && idField ? fields.indexOf(idField) : null),
@@ -64,6 +67,9 @@ export default function withData(WrappedComponent) {
 				if (setRepository) { // pass it on up to higher components
 					setRepository(Repository);
 				}
+				if (self) {
+					self.repository = Repository;
+				}
 				setIsReady(true);
 			})();
 

package/src/Components/Hoc/withEditor.js

@@ -22,6 +22,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				disableDelete = false,
 				disableDuplicate = false,
 				disableView = false,
+				useRemoteDuplicate = false, // call specific copyToNew function on server, rather than simple duplicate on client
 				getRecordIdentifier = (selection) => {
 					if (selection.length > 1) {
 						return 'records?';
@@ -224,6 +225,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				if (selection.length !== 1) {
 					return;
 				}
+				if (useRemoteDuplicate) {
+					return onRemoteDuplicate();
+				}
 				const
 					entity = selection[0],
 					idProperty = Repository.getSchema().model.idProperty,
@@ -233,6 +237,40 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				setEditorMode(EDITOR_MODE__EDIT);
 				setIsEditorShown(true);
 			},
+			onRemoteDuplicate = async () => {
+
+				// Call /duplicate on server
+				const 
+					Model = Repository.getSchema().name,
+					entity = selection[0],
+					id = entity.id;
+				const result = await Repository._send('POST', Model + '/duplicate', { id });
+				const {
+					root,
+					success,
+					total,
+					message
+				} = Repository._processServerResponse(result);
+
+				if (!success) {
+					throw Error(message);
+				}
+
+				const duplicateId = root.id;
+
+				// Filter the grid with only the duplicate's ID, and open it for editing.
+				self.filterById(duplicateId, () => { // because of the way useFilters is made, we have to use a callback, not await a Promise.
+
+					// Select the only node
+					const duplicateEntity = Repository.getById(duplicateId);
+					self.setSelection([duplicateEntity]);
+
+					// edit it
+					onEdit();
+
+				});
+
+			},
 			onEditorSave = async (data, e) => {
 				const
 					what = record || selection,
@@ -343,12 +381,12 @@ export default function withEditor(WrappedComponent, isTree = false) {
 		}, [selection]);
 
 		if (self) {
-			self.onAdd = onAdd;
-			self.onEdit = onEdit;
-			self.onDelete = onDelete;
-			self.onMoveChildren = onMoveChildren;
-			self.onDeleteChildren = onDeleteChildren;
-			self.onDuplicate = onDuplicate;
+			self.add = onAdd;
+			self.edit = onEdit;
+			self.delete = onDelete;
+			self.moveChildren = onMoveChildren;
+			self.deleteChildren = onDeleteChildren;
+			self.duplicate = onDuplicate;
 		}
 
 		if (lastSelection !== selection) {

package/src/Components/Hoc/withFilters.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, useId, } from 'react';
+import { useState, useEffect, useId, useRef, } from 'react';
 import {
 	Column,
 	Modal,
@@ -46,6 +46,9 @@ export default function withFilters(WrappedComponent) {
 
 				// withData
 				Repository,
+
+				// withComponent
+				self,
 			} = props;
 
 		let modal = null,
@@ -59,7 +62,7 @@ export default function withFilters(WrappedComponent) {
 					defaultFilters: modelDefaultFilters,
 					ancillaryFilters: modelAncillaryFilters,
 				} = Repository.getSchema().model,
-				id = props.id || useId(),
+				id = props.id || props.reference || useId(),
 
 				// determine the starting filters
 				startingFilters = !_.isEmpty(customFilters) ? customFilters : // custom filters override component filters
@@ -124,6 +127,7 @@ export default function withFilters(WrappedComponent) {
 			}
 
 			const
+				filterCallbackRef = useRef(),
 				[filters, setFiltersRaw] = useState(formattedStartingFilters), // array of formatted filters
 				[slots, setSlots] = useState(startingSlots), // array of field names user is currently filtering on; blank slots have a null entry in array
 				[modalFilters, setModalFilters] = useState([]),
@@ -230,6 +234,21 @@ export default function withFilters(WrappedComponent) {
 					}
 					return inArray(filterType, ['NumberRange', 'DateRange']);
 				},
+				filterById = (id, cb) => {
+					onClearFilters();
+					filterCallbackRef.current = cb; // store the callback, so we can call it the next time this HOC renders with new filters
+					const newFilters = _.clone(filters);
+					_.remove(newFilters, (filter) => {
+						return filter.field === 'q';
+					});
+					newFilters.unshift({
+						field: 'q',
+						title: 'Search all text fields',
+						type: 'Input',
+						value: 'id:' + id,
+					});
+					setFilters(newFilters, false, false);
+				},
 				renderFilters = () => {
 					const
 						filterProps = {
@@ -347,7 +366,7 @@ export default function withFilters(WrappedComponent) {
 							} else {
 								const
 									isAncillary = type === FILTER_TYPE_ANCILLARY,
-									filterName =  (isAncillary ? 'ancillary___' : '') + field;
+									filterName = (isAncillary ? 'ancillary___' : '') + field;
 								newFilterNames.push(filterName);
 								newRepoFilters.push({ name: filterName, value, });
 							}
@@ -362,12 +381,17 @@ export default function withFilters(WrappedComponent) {
 						setPreviousFilterNames(newFilterNames);
 					}
 
-					Repository.filter(newRepoFilters, null, false); // false so other filters remain
-
 					if (searchAllText && Repository.searchAncillary && !Repository.hasBaseParam('searchAncillary')) {
 						Repository.setBaseParam('searchAncillary', true);
 					}
 
+					await Repository.filter(newRepoFilters, null, false); // false so other filters remain
+
+					if (filterCallbackRef.current) {
+						filterCallbackRef.current(); // call the callback
+						filterCallbackRef.current = null; // clear the callback
+					}
+
 					if (!isReady) {
 						setIsReady(true);
 					}
@@ -378,6 +402,11 @@ export default function withFilters(WrappedComponent) {
 				return null;
 			}
 
+			if (self) {
+				self.filterById = filterById;
+				self.setFilters = setFilters;
+			}
+
 			const
 				renderedFilters = renderFilters(),
 				hasFilters = !!renderedFilters.length;
@@ -499,6 +528,7 @@ export default function withFilters(WrappedComponent) {
 									editorType={EDITOR_TYPE__PLAIN}
 									flex={1}
 									startingValues={formStartingValues}
+									minHeight={minHeight}
 									items={[
 										{
 											type: 'Column',

package/src/Components/Hoc/withPdfButton.js

@@ -158,8 +158,10 @@ export default function withPdfButton(WrappedComponent) {
 				setIsModalShown(true);
 			},
 		};
-		additionalEditButtons.push(button);
-		if (additionalEditButtons !== additionalViewButtons) { // Ensure they're NOT the same object, otherwise this would be adding it twice!
+		if (!_.find(additionalEditButtons, btn => button.key === btn.key)) { 
+			additionalEditButtons.push(button);
+		}
+		if (!_.find(additionalViewButtons, btn => button.key === btn.key)) { 
 			additionalViewButtons.push(button);
 		}
 	

package/src/Components/Hoc/withSelection.js

@@ -27,6 +27,9 @@ export default function withSelection(WrappedComponent) {
 				autoSelectFirstItem = false,
 				fireEvent,
 
+				// withComponent
+				self,
+
 				// withValue
 				value,
 				setValue,
@@ -309,6 +312,19 @@ export default function withSelection(WrappedComponent) {
 
 		}, []);
 
+		if (self) {
+			self.setSelection = setSelection;
+			self.selectNext = selectNext;
+			self.selectPrev = selectPrev;
+			self.addToSelection = addToSelection;
+			self.removeFromSelection = removeFromSelection;
+			self.deselectAll = deselectAll;
+			self.selectRangeTo = selectRangeTo;
+			self.isInSelection = isInSelection;
+			self.getIdsFromLocalSelection = getIdsFromLocalSelection;
+			self.getDisplayValuesFromSelection = getDisplayValuesFromLocalSelection;
+		}
+
 		if (usesWithValue) {
 			useEffect(() => {
 				if (!isReady) {

package/src/Components/Viewer/Viewer.js

@@ -1,3 +1,4 @@
+import { useRef, } from 'react';
 import {
 	Column,
 	Icon,
@@ -45,6 +46,7 @@ function Viewer(props) {
 			selectorSelected,
 
 		} = props,
+		scrollViewRef = useRef(),
 		isMultiple = _.isArray(record),
 		isSideEditor = editorType === EDITOR_TYPE__SIDE,
 		styles = UiGlobals.styles,
@@ -205,13 +207,17 @@ function Viewer(props) {
 			return additionalButtons;
 		};
 
+	if (self) {
+		self.ref = scrollViewRef;
+	}
+
 	const
 		showDeleteBtn = onDelete && viewerCanDelete,
 		showCloseBtn = !isSideEditor,
 		additionalButtons = buildAdditionalButtons();
 
 	return <Column flex={flex} {...props}>
-				<ScrollView width="100%" _web={{ height: 1 }}>
+				<ScrollView width="100%" _web={{ height: 1 }} ref={scrollViewRef}>
 					<Column p={4}>
 						{onEditMode && <Row mb={4} justifyContent="flex-end">
 											<Button