@onehat/ui 0.2.74 → 0.2.76

package/package.json

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

package/src/Components/Buttons/IconButton.js

@@ -6,6 +6,7 @@ import {
 	Tooltip,
 } from 'native-base';
 import styles from '../../Constants/Styles.js';
+import _ from 'lodash';
 
 const IconButton = React.forwardRef((props, ref) => {
 	const {
@@ -17,12 +18,16 @@ const IconButton = React.forwardRef((props, ref) => {
 			tooltipPlacement = 'bottom',
 		} = props;
 	const propsIcon = props._icon || {};
-	let icon = props.icon || <Icon {...propsIcon} />,
+	let icon = props.icon,
 		ret;
 	if (isLoading) {
 		icon = <Spinner {..._spinner} />;
 	}
-	if (!React.isValidElement(icon)) {
+	if (React.isValidElement(icon)) {
+		if (!_.isEmpty(propsIcon)) {
+			icon = React.cloneElement(icon, {...propsIcon});
+		}
+	} else {
 		icon = <Icon as={icon} {...propsIcon} />;
 	}
 	const pressable = <Pressable

package/src/Components/Hoc/withAlert.js

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect, } from 'react';
 import {
+	AlertDialog,
 	Button,
 	Column,
 	Icon,
@@ -30,26 +31,29 @@ export default function withAlert(WrappedComponent) {
 			[customButtons, setCustomButtons] = useState(),
 			[mode, setMode] = useState(ALERT_MODE_OK),
 			autoFocusRef = useRef(null),
-			onAlert = (arg1, callback, includeCancel = false) => {
+			cancelRef = useRef(null),
+			onAlert = (arg1, okCallback, includeCancel = false) => {
 				clearAll();
 				if (_.isString(arg1)) {
 					setMode(ALERT_MODE_OK);
 					setTitle('Alert');
 					setMessage(arg1);
-					setOkCallback(() => callback);
+					setOkCallback(() => okCallback);
+					setIncludeCancel(includeCancel);
 				} else if (_.isPlainObject(arg1)) {
 					// custom
 					const {
 							title = 'Alert',
 							message,
 							buttons,
+							includeCancel,
 						} = arg1;
 					setMode(ALERT_MODE_CUSTOM);
 					setTitle(title);
 					setMessage(message);
 					setCustomButtons(buttons);
+					setIncludeCancel(includeCancel);
 				}
-				setIncludeCancel(includeCancel);
 				showAlert();
 			},
 			onConfirm = (message, callback, includeCancel = false) => {
@@ -65,31 +69,29 @@ export default function withAlert(WrappedComponent) {
 				setIsAlertShown(false);
 			},
 			onOk = () => {
-				const callback = okCallback;
-				hideAlert();
-				if (callback) {
-					callback();
+				if (okCallback) {
+					okCallback();
 				}
+				hideAlert();
 			},
 			onYes = () => {
-				const callback = yesCallback;
-				hideAlert();
-				if (callback) {
-					callback();
+				if (yesCallback) {
+					yesCallback();
 				}
+				hideAlert();
 			},
 			onNo = () => {
-				const callback = noCallback;
-				hideAlert();
-				if (callback) {
-					callback();
+				if (noCallback) {
+					noCallback();
 				}
+				hideAlert();
 			},
 			showAlert = () => {
 				setIsAlertShown(true);
 			},
 			hideAlert = () => {
 				setIsAlertShown(false);
+				clearAll();
 			},
 			clearAll = () => {
 				setOkCallback();
@@ -104,7 +106,9 @@ export default function withAlert(WrappedComponent) {
 								key="cancelBtn"
 								onPress={onCancel}
 								color="#fff"
-								variant="ghost"
+								colorScheme="coolGray"
+								variant="ghost" // or unstyled
+								ref={cancelRef}
 							>Cancel</Button>);
 		}
 		switch(mode) {
@@ -128,10 +132,13 @@ export default function withAlert(WrappedComponent) {
 								ref={autoFocusRef}
 								onPress={onYes}
 								color="#fff"
+								colorScheme="danger"
 							>Yes</Button>);
 				break;
 			case ALERT_MODE_CUSTOM:
-				buttons = customButtons;
+				_.each(customButtons, (button) => {
+					buttons.push(button);
+				});
 				break;
 			default:
 		}
@@ -141,36 +148,32 @@ export default function withAlert(WrappedComponent) {
 						{...props}
 						alert={onAlert}
 						confirm={onConfirm}
+						hideAlert={hideAlert}
 					/>
-					<Modal
+
+					<AlertDialog
+						leastDestructiveRef={cancelRef}
 						isOpen={isAlertShown}
-						onOpen={() => {debugger;}}
 						onClose={() => setIsAlertShown(false)}
 					>
-						<Column bg="#fff" w={400} onLayout={() => {
-							if (autoFocusRef.current) {
-								autoFocusRef.current.focus();
-							}
-						}}>
-							<Panel
-								title={title}
-								isCollapsible={false}
-								p={0}
-								footer={<Footer justifyContent="flex-end" >
-											<Button.Group space={2}>
-												{buttons}
-											</Button.Group>
-										</Footer>}
-								>
-								<Row flex={1} p={5}>
+						<AlertDialog.Content>
+							<AlertDialog.CloseButton />
+							<AlertDialog.Header>{title}</AlertDialog.Header>
+							<AlertDialog.Body>
+								<Row>
 									<Column w="40px" p={0} mr={5}>
 										<Icon as={TriangleExclamation} size={10} color="#f00" />
 									</Column>
-									<Text>{message}</Text>
+									<Text flex={1}>{message}</Text>
 								</Row>
-							</Panel>
-						</Column>
-					</Modal>
+							</AlertDialog.Body>
+							<AlertDialog.Footer>
+								<Button.Group space={2}>
+									{buttons}
+								</Button.Group>
+							</AlertDialog.Footer>
+						</AlertDialog.Content>
+					</AlertDialog>
 				</>;
 	};
 }

package/src/Components/Hoc/withEditor.js

@@ -1,8 +1,6 @@
-import { useEffect, useState, } from 'react';
+import { useEffect, useState, useRef, } from 'react';
 import {
-	Column,
-	Modal,
-	Text,
+	Button,
 } from 'native-base';
 import {
 	EDITOR_MODE__VIEW,
@@ -11,7 +9,7 @@ import {
 } from '../../Constants/Editor.js';
 import _ from 'lodash';
 
-export default function withEditor(WrappedComponent) {
+export default function withEditor(WrappedComponent, isTree = false) {
 	return (props) => {
 
 		let [editorMode, setEditorMode] = useState(EDITOR_MODE__VIEW); // Can change below, so use 'let'
@@ -24,7 +22,6 @@ export default function withEditor(WrappedComponent) {
 				disableDelete = false,
 				disableDuplicate = false,
 				disableView = false,
-				isTree = false,
 				getRecordIdentifier = (selection) => {
 					if (selection.length > 1) {
 						return 'records?';
@@ -45,13 +42,23 @@ export default function withEditor(WrappedComponent) {
 				setSelection,
 
 				// withAlert
+				alert,
 				confirm,
+				hideAlert,
 			} = props,
+			listeners = useRef({}),
 			[currentRecord, setCurrentRecord] = useState(null),
 			[isEditorShown, setIsEditorShown] = useState(false),
 			[isEditorViewOnly, setIsEditorViewOnly] = useState(false),
 			[isModalShown, setIsModalShown] = useState(false),
 			[lastSelection, setLastSelection] = useState(),
+			getListeners = () => {
+				return listeners.current;
+			},
+			setListeners = (obj) => {
+				listeners.current = obj;
+				// forceUpdate(); // we don't want to get into an infinite loop of renders. Simply directly assign the listeners in every child render
+			},
 			onAdd = async () => {
 				const defaultValues = Repository.getSchema().model.defaultValues;
 				let addValues = _.clone(defaultValues);
@@ -60,42 +67,84 @@ export default function withEditor(WrappedComponent) {
 					addValues[selectorId] = selectorSelected.id;
 				}
 
+				if (getListeners().onBeforeAdd) {
+					const listenerResult = await getListeners().onBeforeAdd();
+					if (listenerResult === false) {
+						return;
+					}
+				}
+
 				if (isTree) {
 					if (!selection[0]) {
 						throw Error('Must select a parent node.');
 					}
 					addValues.parentId = selection[0].id;
-				}
-
-				// 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 = Repository.sorters[0];
-				if (currentSorter.name !== Repository.schema.model.idProperty || currentSorter.direction !== 'DESC') {
-					Repository.pauseEvents();
-					Repository.sort(Repository.schema.model.idProperty, 'DESC');
-					Repository.setPage(1);
-					Repository.resumeEvents();
-					await Repository.reload();
+				} 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 = Repository.sorters[0];
+					if (currentSorter.name !== Repository.schema.model.idProperty || currentSorter.direction !== 'DESC') {
+						Repository.pauseEvents();
+						Repository.sort(Repository.schema.model.idProperty, 'DESC');
+						Repository.setPage(1);
+						Repository.resumeEvents();
+						await Repository.reload();
+					}
 				}
 
 				// Unmap the values, so we can input true originalData
 				addValues = Repository.unmapData(addValues);
 
-				const entity = await Repository.add(addValues, false, true, true);
+				const entity = await Repository.add(addValues, false, true);
 				setSelection([entity]);
 				setIsEditorViewOnly(false);
 				setEditorMode(EDITOR_MODE__ADD);
 				setIsEditorShown(true);
+
+				if (getListeners().onAfterAdd) {
+					await getListeners().onAfterAdd(entity);
+				}
 			},
-			onEdit = () => {
+			onEdit = async () => {
+				if (getListeners().onBeforeEdit) {
+					const listenerResult = await getListeners().onBeforeEdit();
+					if (listenerResult === false) {
+						return;
+					}
+				}
 				setIsEditorViewOnly(false);
 				setEditorMode(EDITOR_MODE__EDIT);
 				setIsEditorShown(true);
 			},
-			onDelete = () => {
+			onDelete = async () => {
+				if (getListeners().onBeforeDelete) {
+					const listenerResult = await getListeners().onBeforeDelete();
+					if (listenerResult === false) {
+						return;
+					}
+				}
 				const
 					isSingle = selection.length === 1,
-					isPhantom = selection[0] && selection[0].isPhantom;
+					firstSelection = selection[0],
+					isTree = firstSelection?.isTree,
+					hasChildren = firstSelection?.hasChildren,
+					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={onMoveChildren} key="moveBtn">
+								Move Children
+							</Button>,
+							<Button colorScheme="danger" onPress={onDeleteChildren} key="deleteBtn">
+								Delete Children
+							</Button>
+						],
+						includeCancel: true,
+					});
+				} else
 				if (isSingle && isPhantom) {
 					deleteRecord();
 				} else {
@@ -103,13 +152,28 @@ export default function withEditor(WrappedComponent) {
 					confirm('Are you sure you want to delete the ' + identifier, deleteRecord);
 				}
 			},
-			deleteRecord = async () => {
+			onMoveChildren = () => {
+				hideAlert();
+				deleteRecord(true);
+			},
+			onDeleteChildren = () => {
+				hideAlert();
+				deleteRecord();
+			},
+			deleteRecord = async (moveSubtreeUp) => {
+				if (getListeners().onBeforeDeleteSave) {
+					await getListeners().onBeforeDeleteSave(selection);
+				}
+
 				await Repository.delete(selection);
 				if (!Repository.isAutoSave) {
 					await Repository.save();
 				}
+				if (getListeners().onAfterDelete) {
+					await getListeners().onAfterDelete(selection);
+				}
 			},
-			viewRecord = () => {
+			viewRecord = async () => {
 				if (!userCanView) {
 					return;
 				}
@@ -119,6 +183,10 @@ export default function withEditor(WrappedComponent) {
 				setIsEditorViewOnly(true);
 				setEditorMode(EDITOR_MODE__VIEW);
 				setIsEditorShown(true);
+
+				if (getListeners().onAfterDelete) {
+					await getListeners().onAfterDelete(entity);
+				}
 			},
 			duplicateRecord = async () => {
 				if (!userCanEdit || disableDuplicate) {
@@ -157,8 +225,17 @@ export default function withEditor(WrappedComponent) {
 						}
 					});
 				}
+
+				if (getListeners().onBeforeEditSave) {
+					await getListeners().onBeforeEditSave(what);
+				}
+
 				await Repository.save();
 				setIsEditorShown(false);
+				
+				if (getListeners().onAfterEdit) {
+					await getListeners().onAfterEdit(what);
+				}
 			},
 			onEditorCancel = async () => {
 				const
@@ -174,9 +251,17 @@ export default function withEditor(WrappedComponent) {
 				setIsEditorShown(false);
 			},
 			onEditorDelete = async () => {
+				if (getListeners().onBeforeDeleteSave) {
+					await getListeners().onBeforeDeleteSave(selection);
+				}
+
 				await deleteRecord();
 				setEditorMode(EDITOR_MODE__VIEW);
 				setIsEditorShown(false);
+				
+				if (getListeners().onAfterDelete) {
+					await getListeners().onAfterDelete(selection);
+				}
 			},
 			calculateEditorMode = () => {
 				let mode = EDITOR_MODE__VIEW;
@@ -209,42 +294,34 @@ export default function withEditor(WrappedComponent) {
 			editorMode = calculateEditorMode();
 		}
 
-		return <>
-					<WrappedComponent
-						{...props}
-						currentRecord={currentRecord}
-						setCurrentRecord={setCurrentRecord}
-						isEditorShown={isEditorShown}
-						isEditorViewOnly={isEditorViewOnly}
-						editorMode={editorMode}
-						setEditorMode={setEditorMode}
-						setIsEditorShown={setIsEditorShown}
-						onAdd={(!userCanEdit || disableAdd) ? null : onAdd}
-						onEdit={(!userCanEdit || disableEdit) ? null : onEdit}
-						onDelete={(!userCanEdit || disableDelete || (editorMode === EDITOR_MODE__ADD && (selection[0]?.isPhantom || currentRecord?.isPhantom))) ? null : onDelete}
-						onView={viewRecord}
-						onDuplicate={duplicateRecord}
-						onEditorSave={onEditorSave}
-						onEditorCancel={onEditorCancel}
-						onEditorDelete={(!userCanEdit || disableDelete || (editorMode === EDITOR_MODE__ADD && (selection[0]?.isPhantom || currentRecord?.isPhantom))) ? null : onEditorDelete}
-						onEditorClose={onEditorClose}
-						isEditor={true}
-						useEditor={useEditor}
-						userCanEdit={userCanEdit}
-						userCanView={userCanView}
-						disableAdd={disableAdd}
-						disableEdit={disableEdit}
-						disableDelete={disableDelete}
-						disableDuplicate={disableDuplicate}
-						disableView ={disableView}
-					/>
-					{isTree && isModalShown && 
-						<Modal
-							isOpen={true}
-							onClose={() => setIsModalShown(false)}
-						>
-
-						</Modal>}
-				</>;
+		return <WrappedComponent
+					{...props}
+					currentRecord={currentRecord}
+					setCurrentRecord={setCurrentRecord}
+					isEditorShown={isEditorShown}
+					isEditorViewOnly={isEditorViewOnly}
+					editorMode={editorMode}
+					setEditorMode={setEditorMode}
+					setIsEditorShown={setIsEditorShown}
+					onAdd={(!userCanEdit || disableAdd) ? null : onAdd}
+					onEdit={(!userCanEdit || disableEdit) ? null : onEdit}
+					onDelete={(!userCanEdit || disableDelete || (editorMode === EDITOR_MODE__ADD && (selection[0]?.isPhantom || currentRecord?.isPhantom))) ? null : onDelete}
+					onView={viewRecord}
+					onDuplicate={duplicateRecord}
+					onEditorSave={onEditorSave}
+					onEditorCancel={onEditorCancel}
+					onEditorDelete={(!userCanEdit || disableDelete || (editorMode === EDITOR_MODE__ADD && (selection[0]?.isPhantom || currentRecord?.isPhantom))) ? null : onEditorDelete}
+					onEditorClose={onEditorClose}
+					setWithEditListeners={setListeners}
+					isEditor={true}
+					useEditor={useEditor}
+					userCanEdit={userCanEdit}
+					userCanView={userCanView}
+					disableAdd={disableAdd}
+					disableEdit={disableEdit}
+					disableDelete={disableDelete}
+					disableDuplicate={disableDuplicate}
+					disableView ={disableView}
+				/>;
 	};
 }

package/src/Components/Hoc/withSideEditor.js

@@ -19,7 +19,7 @@ export default function withSideEditor(WrappedComponent, isTree = false) {
 		}
 
 		return <Container
-					center={<WrappedComponent isTree={isTree} {...props} />}
+					center={<WrappedComponent {...props} />}
 					east={<Editor
 								editorType={EDITOR_TYPE__SIDE}
 								flex={sideFlex}
@@ -27,5 +27,5 @@ export default function withSideEditor(WrappedComponent, isTree = false) {
 								{...editorProps}
 							/>}
 				/>;
-	});
+	}, isTree);
 }

package/src/Components/Hoc/withWindowedEditor.js

@@ -40,7 +40,7 @@ export default function withWindowedEditor(WrappedComponent, isTree = false) {
 		}
 
 		return <>
-					<WrappedComponent isTree={isTree} {...props} />
+					<WrappedComponent {...props} />
 					{useEditor && isEditorShown && 
 						<Modal
 							isOpen={true}
@@ -53,5 +53,5 @@ export default function withWindowedEditor(WrappedComponent, isTree = false) {
 							/>
 						</Modal>}
 				</>;
-	});
+	}, isTree);
 }