@onehat/ui 0.4.26 → 0.4.27

package/package.json

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

package/src/Components/Buttons/SquareButton.js

@@ -7,14 +7,13 @@ export default function SquareButton(props) {
 	const {
 			text,
 			isActive = false,
-			activeColor,
+			activeClassName,
 			invertColorWhenActive = false,
 			showText = true,
 			disableInteractions = false,
 			fontSize = '20px',
 			...propsToPass
 		} = props,
-		bg = isActive ? activeColor || '#56a6f8' : '#fff',
 		color = invertColorWhenActive && isActive ? '#fff' : '#000';
 
 	if (!props.icon) {
@@ -24,21 +23,26 @@ export default function SquareButton(props) {
 		throw Error('text missing. If you want to hide the text, use showText={false}');
 	}
 
+	let className = `
+		SquareButton
+		rounded-md
+		p-2
+		h-[100px]
+		w-[100px]
+		flex
+		flex-col
+		justify-center
+		items-center
+		bg-grey-200
+		hover:bg-grey-400
+		disabled:bg-grey-100
+	`;
+	if (isActive && activeClassName) {
+		className += ' ' + activeClassName;
+	}
+
 	return <IconButton
-				className={`
-					SquareButton
-					rounded-md
-					p-2
-					bg-[${bg}]
-					hover:bg-[${bg}]
-					disabled:bg-[${bg}]
-					h-[100px]
-					w-[100px]
-					flex
-					flex-col
-					justify-center
-					items-center
-				`}
+				className={className}
 				style={{
 					// backgroundColor: bg,
 				}}

package/src/Components/Grid/Grid.js

@@ -417,7 +417,7 @@ function GridComponent(props) {
 											if (canUser && !canUser(VIEW)) { // permissions
 												return;
 											}
-											onView(true);
+											onView(!props.isEditorViewOnly);
 										}
 									} else {
 										if (onEdit) {

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

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef, } from 'react';
+import { forwardRef, useEffect, useState, useRef, } from 'react';
 import {
 	ADD,
 	EDIT,
@@ -11,6 +11,7 @@ import {
 	EDITOR_MODE__ADD,
 	EDITOR_MODE__EDIT,
 	EDITOR_TYPE__SIDE,
+	EDITOR_TYPE__INLINE,
 } from '../../../Constants/Editor.js';
 import Button from '../../Buttons/Button.js';
 import UiGlobals from '../../../UiGlobals.js';
@@ -20,10 +21,10 @@ import _ from 'lodash';
 // 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) => {
+	return forwardRef((props, ref) => {
 
 		if (props.secondaryDisableWithEditor) {
-			return <WrappedComponent {...props} isTree={isTree} />;
+			return <WrappedComponent {...props} ref={ref} isTree={isTree} />;
 		}
 
 		let [secondaryEditorMode, secondarySetEditorMode] = useState(EDITOR_MODE__VIEW); // Can change below, so use 'let'
@@ -52,6 +53,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				secondaryNewEntityDisplayValue,
 				secondaryNewEntityDisplayProperty, // in case the field to set for newEntityDisplayValue is different from model
 				secondaryDefaultValues,
+				secondaryStayInEditModeOnSelectionChange = false,
 
 				// withComponent
 				self,
@@ -132,7 +134,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					// NOTE: This is a hack to prevent adding a new record while the repository is still loading.
 					// This can happen when the repository is still loading, and the user clicks the 'Add' button.
 					setTimeout(() => {
-						doAdd(e, values);
+						secondaryDoAdd(e, values);
 					}, 500);
 					return;
 				}
@@ -169,7 +171,9 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					if (!secondarySelection[0]) {
 						throw Error('Must select a parent node.');
 					}
-					addValues.parentId = secondarySelection[0].id;
+					const parent = secondarySelection[0];
+					addValues.parentId = parent.id;
+					addValues.depth = parent.depth +1;
 				} 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];
@@ -200,10 +204,13 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				setIsSaving(false);
 				setSecondaryIsIgnoreNextSelectionChange(true);
 				secondarySetSelection([entity]);
+				if (getListeners().onAfterAdd) {
+					await getListeners().onAfterAdd(entity);
+				}
 				if (SecondaryRepository.isAutoSave) {
 					// for isAutoSave Repositories, submit the handers right away
-					if (getListeners().onAfterAdd) {
-						await getListeners().onAfterAdd(entity);
+					if (getListeners().onAfterAddSave) {
+						await getListeners().onAfterAddSave(entity);
 					}
 					if (secondaryOnAdd) {
 						await secondaryOnAdd(entity);
@@ -331,6 +338,13 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					showPermissionsError(VIEW, secondaryModel);
 					return;
 				}
+				if (secondaryEditorType === EDITOR_TYPE__INLINE) {
+					alert('Cannot view in inline editor.');
+					return; // inline editor doesn't have a view mode
+				}
+
+				// check permissions for view
+				
 				if (secondarySelection.length !== 1) {
 					return;
 				}
@@ -350,6 +364,10 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					showPermissionsError(DUPLICATE, secondaryModel);
 					return;
 				}
+
+				// check permissions for duplicate
+
+
 				if (secondarySelection.length !== 1) {
 					return;
 				}
@@ -436,8 +454,8 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 						if (secondaryOnAdd) {
 							await secondaryOnAdd(secondarySelection);
 						}
-						if (getListeners().onAfterAdd) {
-							await getListeners().onAfterAdd(secondarySelection);
+						if (getListeners().onAfterAddSave) {
+							await getListeners().onAfterAddSave(secondarySelection);
 						}
 						setIsAdding(false);
 						if (!canUser || canUser(EDIT, secondaryModel)) {
@@ -500,6 +518,16 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				});
 			},
 			calculateEditorMode = (secondaryIsIgnoreNextSelectionChange = false) => {
+			
+				let doStayInEditModeOnSelectionChange = secondaryStayInEditModeOnSelectionChange;
+				if (!_.isNil(UiGlobals.stayInEditModeOnSelectionChange)) {
+					// allow global override to for this property
+					doStayInEditModeOnSelectionChange = UiGlobals.stayInEditModeOnSelectionChange;
+				}
+				if (doStayInEditModeOnSelectionChange) {
+					secondaryIsIgnoreNextSelectionChange = true;
+				}
+			
 				// calculateEditorMode gets called only on selection changes
 				let mode;
 				if (secondaryEditorType === EDITOR_TYPE__SIDE && !_.isNil(UiGlobals.isSideEditorAlwaysEditMode) && UiGlobals.isSideEditorAlwaysEditMode) {
@@ -579,6 +607,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 
 		return <WrappedComponent
 					{...props}
+					ref={ref}
 					secondaryDisableWithEditor={false}
 					secondaryCurrentRecord={secondaryCurrentRecord}
 					secondarySetCurrentRecord={secondarySetCurrentRecord}
@@ -612,5 +641,5 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					secondarySetSelection={secondarySetSelectionDecorated}
 					isTree={isTree}
 				/>;
-	};
+	});
 }

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

@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import {
 	EDITOR_TYPE__SIDE,
 } from '../../../Constants/Editor.js';
@@ -10,20 +11,21 @@ import _ from 'lodash';
 
 
 function withAdditionalProps(WrappedComponent) {
-	return (props) => {
+	return forwardRef((props, ref) => {
 		// provide the editorType to withEditor
 		return <WrappedComponent
 					editorType={EDITOR_TYPE__SIDE}
 					{...props}
+					ref={ref}
 				/>;
-	};
+	});
 }
 
 // NOTE: Effectivtly, the HOC composition is:
 // withAdditionalProps(withSecondaryEditor(withSecondarySideEditor))
 
 export default function withSecondarySideEditor(WrappedComponent, isTree = false) {
-	return withAdditionalProps(withSecondaryEditor((props) => {
+	const SideEditor = forwardRef((props, ref) => {
 		const {
 				SecondaryEditor,
 				secondaryEditorProps = {},
@@ -36,6 +38,7 @@ export default function withSecondarySideEditor(WrappedComponent, isTree = false
 				secondarySelectorId,
 				secondarySelectorSelected,
 				secondarySelectorSelectedField,
+				style,
 				
 				...propsToPass
 			} = props;
@@ -44,8 +47,23 @@ export default function withSecondarySideEditor(WrappedComponent, isTree = false
 			throw Error('SecondaryEditor is not defined');
 		}
 
+		if (isResizable) {
+			secondaryEditorProps.w = 500;
+			secondaryEditorProps.isResizable = true;
+		} else {
+			secondaryEditorProps.flex = secondarySideFlex;
+		}
+
+		if (!secondaryEditorProps.className) {
+			secondaryEditorProps.className = '';
+		}
+		secondaryEditorProps.className += ' border-l-1 border-l-grey-300';
+
 		return <Container
+					parent={self}
+					reference="SideEditor"
 					center={<WrappedComponent
+								ref={ref}
 								isTree={isTree}
 								isSideEditor={true}
 								{...props}
@@ -53,13 +71,11 @@ export default function withSecondarySideEditor(WrappedComponent, isTree = false
 					east={<Editor
 								{...propsToPass}
 								editorType={EDITOR_TYPE__SIDE}
-								flex={secondarySideFlex}
-								borderLeftWidth={1}
-								borderLeftColor="#ccc"
 								{...secondaryEditorProps}
 								parent={self}
 								reference="secondaryEditor"
 							/>}
 				/>;
-	}));
+	});
+	return withAdditionalProps(withSecondaryEditor(SideEditor, isTree));
 }

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

@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import {
 	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
 } from '@project-components/Gluestack';
@@ -13,20 +14,21 @@ import _ from 'lodash';
 
 
 function withAdditionalProps(WrappedComponent) {
-	return (props) => {
+	return forwardRef((props, ref) => {
 		// provide the editorType to withEditor
 		return <WrappedComponent
 					editorType={EDITOR_TYPE__WINDOWED}
 					{...props}
+					ref={ref}
 				/>;
-	};
+	});
 }
 
 // NOTE: Effectivtly, the HOC composition is:
 // withAdditionalProps(withSecondaryEditor(withSecondaryWindowedEditor))
 
 export default function withSecondaryWindowedEditor(WrappedComponent, isTree = false) {
-	return withAdditionalProps(withSecondaryEditor((props) => {
+	const WindowedEditor = forwardRef((props, ref) => {
 		const {
 				secondaryIsEditorShown = false,
 				secondarySetIsEditorShown,
@@ -41,6 +43,7 @@ export default function withSecondaryWindowedEditor(WrappedComponent, isTree = f
 				secondarySelectorSelected,
 				secondarySelectorSelectedField,
 				h,
+				style,
 
 				...propsToPass
 			} = props;
@@ -65,25 +68,28 @@ export default function withSecondaryWindowedEditor(WrappedComponent, isTree = f
 		}
 
 		return <>
-					<WrappedComponent {...props} />
+					<WrappedComponent {...props} ref={ref} />
 					{secondaryIsEditorShown && 
 						<Modal
 							isOpen={true}
 							onClose={() => secondarySetIsEditorShown(false)}
+							className="withSecondaryEditor-Modal"
 						>
-							<ModalBackdrop />
-							<ModalContent>
-								<ModalBody>
-									<SecondaryEditor
-										editorType={EDITOR_TYPE__WINDOWED}
-										{...propsToPass}
-										{...secondaryEditorProps}
-										parent={self}
-										reference="secondaryEditor"
-									/>
-								</ModalBody>
-							</ModalContent>
+							<ModalBackdrop className="withSecondaryEditor-ModalBackdrop" />
+							<SecondaryEditor
+								editorType={EDITOR_TYPE__WINDOWED}
+								{...propsToPass}
+								{...secondaryEditorProps}
+								parent={self}
+								reference="secondaryEditor"
+								className={`
+									bg-white
+									shadow-lg
+									rounded-lg
+								`}
+							/>
 						</Modal>}
 				</>;
-	}, isTree));
+	});
+	return withAdditionalProps(withSecondaryEditor(WindowedEditor, isTree));
 }

package/src/Components/Hoc/withModal.js

@@ -163,13 +163,14 @@ export default function withModal(WrappedComponent) {
 					<Panel
 						title={title}
 						isCollapsible={false}
-						className="bg-white overflow-auto"
+						className="withModal-Panel bg-white"
 						h={h > windowHeight ? windowHeight : h}
 						w={w > windowWidth ? windowWidth : w}
 						isWindow={true}
 						disableAutoFlex={true}
 						onClose={canClose ? hideModal : null}
 						footer={footer}
+						isScrollable={true}
 					>{modalBody}</Panel>
 			}
 		}

package/src/Components/Hoc/withPdfButtons.js

@@ -83,7 +83,13 @@ export default function withPdfButtons(WrappedComponent) {
 
 				if (!_.isEmpty(ancillaryItems)) {
 					const
-						ancillaryItemsClone = _.cloneDeep(ancillaryItems),
+						ancillaryItemsClone = _.cloneDeepWith(ancillaryItems, (value) => {
+							// Exclude the 'parent' property from being cloned, as it would introduce an infinitely recursive loop
+							if (value && value.parent) {
+								const { parent, ...rest } = value;
+								return rest;
+							}
+						}),
 						items = [];
 					_.each(ancillaryItemsClone, (ancillaryItem) => { // clone, as we don't want to alter the item by reference
 						let name;

package/src/Components/Icons/LowPriority.js

@@ -3,7 +3,7 @@ import { Path, Svg } from 'react-native-svg';
 
 const SvgComponent = createIcon({
 	Root: Svg,
-	viewBox: '0 0 512 512',
+	viewBox: '0 0 101.44 83.8',
 	path: <Path d="M58.92 4.5L99.9 68.86c4.12 6.47-.53 14.94-8.2 14.94H9.74c-7.67 0-12.32-8.47-8.2-14.94L42.52 4.5c3.82-6 12.58-6 16.4 0zm-8.2 68.21c3.24 0 5.34-2.34 5.34-5.46-.06-3.18-2.16-5.46-5.34-5.46s-5.4 2.28-5.4 5.46 2.16 5.46 5.4 5.46zm3.42-13.92l1.32-27.18h-9.54l1.38 27.18h6.84z" strokeWidth={0} />
 });
 

package/src/Components/Screens/Manager.js

@@ -1,5 +1,6 @@
 import {
 	HStack,
+	Icon,
 	Text,
 	VStackNative,
 } from '@project-components/Gluestack';
@@ -98,7 +99,16 @@ function ManagerScreen(props) {
 				className="max-h-screen overflow-hidden flex-1 w-full"
 			>
 				<HStack className="h-[80px] items-center border-b-[2px] border-b-[#ccc]">
-					<Text {...textProps} className="pl-5 text-[26px] font-[700]">{title}</Text>
+					{props.icon ? 
+						<Icon
+							as={props.icon}
+							className={`
+								ml-5
+							`}
+							size="xl"
+							color="#000"
+						/> : null}
+					<Text {...textProps} className="pl-4 text-[26px] font-[700]">{title}</Text>
 					{allowSideBySide &&
 						<>
 							<IconButton

package/src/Functions/Cypress/dom_functions.js

@@ -24,9 +24,11 @@ export function getDomNodes(selectors, options = {}) {
 
 /**
  * Builds selector string for data-testid attributes.
- * @argument {string | string[]} selectors - data-testid attribute values
- * If an array is given, these will be considered nested selectors.
+ * It leaves classname, id, and attribute selectors unchanged.
+ * 
+ * If selectors is an array, these will be considered nested selectors.
  * e.g. ['parent', 'child'] will be converted to '[data-testid="parent"] [data-testid="child"]'
+ * @argument {string|string[]} selectors - data-testid attribute values
  * @return {string}
  */
 export function getTestIdSelectors(selectors, isGetFirst = false) {
@@ -34,16 +36,47 @@ export function getTestIdSelectors(selectors, isGetFirst = false) {
 		selectors = [selectors];
 	}
 	const selectorParts = _.map(selectors, (selector) => {
-		if (selector.match(/=/)) { // selector is something like [role="switch"], so don't use data-testid
-			return selector;
-		}
-		if (selector.match(/^\./)) { // selector is something like .my-class, so don't use data-testid
-			return selector;
+		if (!selector.match(/^\./) // className, like .my-class
+			&& !selector.match(/^#/) // id, like @my-id
+			&& !selector.match(/=/) // attribute, like [role="switch"]
+		){
+			selector = '[data-testid="' + selector + '"]';
 		}
-		if (selector.match(/^#/)) { // selector is something like #my-id, so don't use data-testid
-			return selector;
+		if (isGetFirst) {
+			selector += ':first';
 		}
-		return '[data-testid="' + selector + '"]' + (isGetFirst ? ':first' : '');
+		return selector;
 	});
 	return selectorParts.join(' ');
 }
+
+export function drag(draggableSelectors, droppableSelectors, options = {}) {
+	if (typeof options.force === 'undefined') {
+		options.force = true;
+	}
+
+	// getDomNode(getTestIdSelectors(droppableSelectors)).then((node) => {
+	// 	const selectors = getTestIdSelectors(droppableSelectors);
+	// 	debugger;
+	// });
+
+	options = {
+		source: { // applies to the element being dragged
+			x: 10,
+			// y: 100,
+			position: 'left',
+		},
+		target: { // applies to the drop target
+			position: 'left',
+			x: 20,
+		},
+		force: true, // applied to both the source and target element
+	};
+
+
+	return getDomNode(draggableSelectors)
+			.drag(getTestIdSelectors(droppableSelectors), options)
+			.then((success) => {
+				debugger;
+			});
+}

package/src/Styles/Global.css

@@ -1,6 +1,6 @@
 html, body {
-	/* -webkit-user-select: none;
-	user-select: none; */
+	-webkit-user-select: none;
+	user-select: none;
 }
 
 /* to fix the inline editor */