@onehat/ui 0.2.73 → 0.2.75

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.2.73",
+	"version": "0.2.75",
 	"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/Grid/Grid.js

@@ -35,6 +35,7 @@ import withMultiSelection from '../Hoc/withMultiSelection.js';
 import withSelection from '../Hoc/withSelection.js';
 import withWindowedEditor from '../Hoc/withWindowedEditor.js';
 import withInlineEditor from '../Hoc/withInlineEditor.js';
+import getIconButtonFromConfig from '../../Functions/getIconButtonFromConfig.js';
 import testProps from '../../Functions/testProps.js';
 import nbToRgb from '../../Functions/nbToRgb.js';
 import GridHeaderRow from './GridHeaderRow.js';
@@ -52,7 +53,7 @@ import _ from 'lodash';
 // The default export is *with* the HOC. A separate *raw* component is
 // exported which can be combined with many HOCs for various functionality.
 
-export function GridComponent(props) {
+function GridComponent(props) {
 	const {
 
 			columnsConfig = [], // json configurations for each column
@@ -217,42 +218,8 @@ export function GridComponent(props) {
 			}
 		},
 		getFooterToolbarItems = () => {
-			const
-				iconButtonProps = {
-					_hover: {
-						bg: 'trueGray.400',
-					},
-					mx: 1,
-					px: 3,
-				},
-				iconProps = {
-					alignSelf: 'center',
-					size: styles.GRID_TOOLBAR_ITEMS_ICON_SIZE,
-					h: 20,
-					w: 20,
-				},
-				items = _.map(additionalToolbarButtons, (config, ix) => {
-					let {
-							text,
-							handler,
-							icon = null,
-							isDisabled = false,
-						} = config;
-					if (icon) {
-						const thisIconProps = {
-							color: isDisabled ? styles.GRID_TOOLBAR_ITEMS_DISABLED_COLOR : styles.GRID_TOOLBAR_ITEMS_COLOR,
-						};
-						icon = React.cloneElement(icon, {...iconProps, ...thisIconProps});
-					}
-					return <IconButton
-								key={ix}
-								{...iconButtonProps}
-								onPress={handler}
-								icon={icon}
-								isDisabled={isDisabled}
-								tooltip={text}
-							/>;
-				});
+			const items = _.map(additionalToolbarButtons, getIconButtonFromConfig);
+
 			if (canRowsReorder) {
 				items.unshift(<IconButton
 					key="reorderBtn"
@@ -851,21 +818,19 @@ export function GridComponent(props) {
 
 }
 
-const Grid = withAlert(
+export const Grid = withAlert(
 				withEvents(
 					withData(
 						withMultiSelection(
 							withSelection(
-								// withSideEditor(
-									withFilters(
-										withPresetButtons(
-											withContextMenu(
-												GridComponent
-											),
-											true // isGrid
-										)
+								withFilters(
+									withPresetButtons(
+										withContextMenu(
+											GridComponent
+										),
+										true // isGrid
 									)
-								// )
+								)
 							)
 						)
 					)
@@ -920,13 +885,13 @@ export const InlineGridEditor = withAlert(
 											withMultiSelection(
 												withSelection(
 													withInlineEditor(
-														withPresetButtons(
-															withContextMenu(
-																withFilters(
+														withFilters(
+															withPresetButtons(
+																withContextMenu(
 																	GridComponent
-																),
-																true // isGrid
-															)
+																)
+															),
+															true // isGrid
 														)
 													)
 												)

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,4 +1,7 @@
-import { useEffect, useState, } from 'react';
+import { useEffect, useState, useRef, } from 'react';
+import {
+	Button,
+} from 'native-base';
 import {
 	EDITOR_MODE__VIEW,
 	EDITOR_MODE__ADD,
@@ -6,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'
@@ -39,12 +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);
@@ -53,35 +67,84 @@ export default function withEditor(WrappedComponent) {
 					addValues[selectorId] = selectorSelected.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();
+				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;
+				} 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 {
@@ -89,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;
 				}
@@ -105,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) {
@@ -143,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
@@ -160,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;
@@ -213,6 +312,7 @@ export default function withEditor(WrappedComponent) {
 					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}

package/src/Components/Hoc/withPresetButtons.js

@@ -34,6 +34,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 			{
 				// for local use
 				isEditor = false,
+				isTree = false,
 				useEditor = true,
 				disableAdd = !isEditor,
 				disableEdit = !isEditor,
@@ -125,6 +126,9 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						if (selectorId && !selectorSelected) {
 							isDisabled = true;
 						}
+						if (isTree && _.isEmpty(selection)) {
+							isDisabled = true;
+						}
 						break;
 					case 'edit':
 						text = 'Edit';

package/src/Components/Hoc/withSideEditor.js

@@ -6,7 +6,7 @@ import withEditor from './withEditor.js';
 import _ from 'lodash';
 
 
-export default function withSideEditor(WrappedComponent) {
+export default function withSideEditor(WrappedComponent, isTree = false) {
 	return withEditor((props) => {
 		const {
 				Editor,
@@ -19,7 +19,7 @@ export default function withSideEditor(WrappedComponent) {
 		}
 
 		return <Container
-					center={<WrappedComponent {...props} />}
+					center={<WrappedComponent isTree={isTree} {...props} />}
 					east={<Editor
 								editorType={EDITOR_TYPE__SIDE}
 								flex={sideFlex}

package/src/Components/Hoc/withWindowedEditor.js

@@ -25,7 +25,7 @@ import _ from 'lodash';
 // then switch position to absolute, draggable area would be header of panel
 // const DraggableColumn = withAdditionalProps(withDraggable(Column));
 
-export default function withWindowedEditor(WrappedComponent) {
+export default function withWindowedEditor(WrappedComponent, isTree = false) {
 	return withEditor((props) => {
 		const {
 				useEditor = false,
@@ -40,7 +40,7 @@ export default function withWindowedEditor(WrappedComponent) {
 		}
 
 		return <>
-					<WrappedComponent {...props} />
+					<WrappedComponent isTree={isTree} {...props} />
 					{useEditor && isEditorShown && 
 						<Modal
 							isOpen={true}