@onehat/ui 0.3.32 → 0.3.33

package/package.json

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

package/src/Components/Form/Form.js

@@ -77,6 +77,7 @@ function Form(props) {
 			// sizing of outer container
 			h,
 			maxHeight,
+			minHeight = 0,
 			w,
 			maxWidth,
 			flex,
@@ -617,7 +618,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>;

package/src/Components/Hoc/withComponent.js

@@ -10,6 +10,7 @@ export default function withComponent(WrappedComponent) {
 		const {
 				// self: parent,
 				parent,
+				componentMethods,
 				...propsToPass
 			} = props,
 			{ reference } = props,
@@ -38,6 +39,11 @@ export default function withComponent(WrappedComponent) {
 			});
 
 		useEffect(() => {
+			if (componentMethods) {
+				_.each(componentMethods, (method, name) => {
+					selfRef.current[name] = method;
+				});
+			}
 			if (parent && reference) {
 				parent.registerChild(selfRef.current);
 			}

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/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) {