@onehat/ui 0.2.78 → 0.2.79

package/package.json

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

package/src/Components/Editor/Editor.js

@@ -14,6 +14,7 @@ export default function Editor(props) {
 			onEditorClose: onClose,
 			onEditorDelete: onDelete,
 			editorMode,
+			onEditMode,
 
 			// withData
 			Repository,
@@ -21,7 +22,7 @@ export default function Editor(props) {
 			// withSelection
 			selection,
 
-		} = prop;
+		} = props;
 
 	if (_.isEmpty(selection)) {
 		return null;
@@ -33,7 +34,7 @@ export default function Editor(props) {
 					record={selection[0]}
 					onEditMode={isViewOnly ? null : onEditMode}
 					onClose={onClose}
-					// onDelete={onDelete}
+					onDelete={onDelete}
 				/>;
 	}
 

package/src/Components/Editor/Viewer.js

@@ -20,7 +20,12 @@ export default function Viewer(props) {
 	const {
 			additionalViewButtons = [],
 			ancillaryItems = [],
+			viewerCanDelete = false,
+
+			// withData
 			record,
+
+			// withEditor
 			onEditMode,
 			onClose,
 			onDelete,
@@ -80,19 +85,18 @@ export default function Viewer(props) {
 					</Column>
 				</ScrollView>
 				<Footer justifyContent="flex-end">
-					{onDelete && <Row flex={1} justifyContent="flex-start">
-											<Button
-												key="deleteBtn"
-												onPress={() => {
-													confirm('Are you sure you want to delete this record?', onDelete);
-												}}
-												bg="warning"
-												_hover={{
-													bg: 'warningHover',
-												}}
-												color="#fff"
-											>Delete</Button>
-										</Row>}
+					{onDelete && viewerCanDelete && 
+						<Row flex={1} justifyContent="flex-start">
+							<Button
+								key="deleteBtn"
+								onPress={onDelete}
+								bg="warning"
+								_hover={{
+									bg: 'warningHover',
+								}}
+								color="#fff"
+							>Delete</Button>
+						</Row>}
 					<Button.Group space={2}>
 						<Button
 							key="closeBtn"

package/src/Components/Form/Field/Combo/Combo.js

@@ -12,12 +12,15 @@ import {
 } from '../../../../Constants/UiModes.js';
 import UiGlobals from '../../../../UiGlobals.js';
 import Input from '../Input.js';
+import withAlert from '../../../Hoc/withAlert.js';
 import withData from '../../../Hoc/withData.js';
 import withEvents from '../../../Hoc/withEvents.js';
+import withPresetButtons from '../../../Hoc/withPresetButtons.js';
 import withSelection from '../../../Hoc/withSelection.js';
 import withValue from '../../../Hoc/withValue.js';
+import withWindowedEditor from '../../../Hoc/withWindowedEditor.js';
 import emptyFn from '../../../../Functions/emptyFn.js';
-import { Grid } from '../../../Grid/Grid.js';
+import { Grid, WindowedGridEditor } from '../../../Grid/Grid.js';
 import IconButton from '../../../Buttons/IconButton.js';
 import CaretDown from '../../../Icons/CaretDown.js';
 import _ from 'lodash';
@@ -26,7 +29,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 Combo(props) {
+export function ComboComponent(props) {
 	const {
 			additionalButtons,
 			autoFocus = false,
@@ -36,7 +39,9 @@ export function Combo(props) {
 			menuMinWidth = 150,
 			disableDirectEntry = false,
 			disablePagination = true,
+			hideMenuOnSelection = true,
 			_input = {},
+			isEditor = false,
 
 			// withValue
 			value,
@@ -341,6 +346,8 @@ export function Combo(props) {
 	if (tooltipRef) {
 		refProps.ref = tooltipRef;
 	}
+
+	const WhichGrid = isEditor ? WindowedGridEditor : Grid;
 	
 	let comboComponent = <Row {...refProps} justifyContent="center" alignItems="center" h={styles.FORM_COMBO_HEIGHT} flex={1} onLayout={() => setIsRendered(true)}>
 								{disableDirectEntry ?
@@ -474,7 +481,7 @@ export function Combo(props) {
 											borderTopWidth={0}
 											p={0}
 										>
-											<Grid
+											<WhichGrid
 												showHeaders={false}
 												showHovers={true}
 												shadow={1}
@@ -489,13 +496,16 @@ export function Combo(props) {
 													};
 												}}
 												{...props}
+												disablePresetButtons={!isEditor}
 												disablePagination={disablePagination}
 												fireEvent={onEvent}
 												setSelection={(selection) => {
 													// Decorator fn to add local functionality
 													// Close the menu when row is selected on grid
 													setSelection(selection);
-													hideMenu();
+													if (hideMenuOnSelection) {
+														hideMenu();
+													}
 												}}
 												selectionMode={selectionMode}
 												setValue={(value) => {
@@ -515,13 +525,30 @@ export function Combo(props) {
 	return comboComponent;
 }
 
-export default 
-				// withEvents(
-					withData(
+export const Combo = withData(
 						withValue(
 							withSelection(
-								Combo
+								ComboComponent
 							)
 						)
 					);
-				// );
+
+
+
+function withAdditionalProps(WrappedComponent) {
+	return (props) => {
+		return <WrappedComponent
+					isEditor={true}
+					hideMenuOnSelection={false}
+					disableView={true}
+					disableCopy={true}
+					disableDuplicate={true}
+					disablePrint={true}
+					{...props}
+				/>;
+	};
+}
+
+export const ComboEditor = withAdditionalProps(Combo);
+
+export default Combo;

package/src/Components/Form/Form.js

@@ -559,19 +559,18 @@ function Form(props) {
 				{editor}
 
 				<Footer justifyContent="flex-end" {...footerProps}>
-					{onDelete && <Row flex={1} justifyContent="flex-start">
-										<Button
-											key="deleteBtn"
-											onPress={() => {
-												confirm('Are you sure you want to delete this record?', onDelete);
-											}}
-											bg="warning"
-											_hover={{
-												bg: 'warningHover',
-											}}
-											color="#fff"
-										>Delete</Button>
-									</Row>}
+					{onDelete && editorMode === EDITOR_MODE__EDIT && 
+						<Row flex={1} justifyContent="flex-start">
+							<Button
+								key="deleteBtn"
+								onPress={onDelete}
+								bg="warning"
+								_hover={{
+									bg: 'warningHover',
+								}}
+								color="#fff"
+							>Delete</Button>
+						</Row>}
 					<Button.Group space={2} {...buttonGroupProps}>
 				
 						{!isViewOnly && <IconButton

package/src/Components/Grid/GridRow.js

@@ -69,6 +69,16 @@ export default function GridRow(props) {
 									'showDragHandles',
 								]);
 
+								if (!extraProps._web) {
+									extraProps._web = {};
+								}
+								if (!extraProps._web.style) {
+									extraProps._web.style = {};
+								}
+								extraProps._web.style = {
+									userSelect: 'none',
+								};
+
 								return <Row key={key} {...propsToPass} {...extraProps}>{config.renderer(item)}</Row>;
 							}
 							if (config.fieldName) {
@@ -103,7 +113,9 @@ export default function GridRow(props) {
 									overflow="hidden"
 									textOverflow="ellipsis"
 									alignSelf="center"
-									style={{ userSelect: 'none', }}
+									style={{
+										userSelect: 'none',
+									}}
 									fontSize={styles.GRID_CELL_FONTSIZE}
 									px={styles.GRID_CELL_PX}
 									py={styles.GRID_CELL_PY}

package/src/Components/Hoc/withContextMenu.js

@@ -64,6 +64,12 @@ export default function withContextMenu(WrappedComponent) {
 					};
 					icon = React.cloneElement(icon, {...iconProps});
 				}
+
+				// <div style={{
+				// 	userSelect: 'none',
+				// }}>
+				// </div>
+
 				return <Pressable
 							key={ix}
 							onPress={() => {
@@ -79,6 +85,10 @@ export default function withContextMenu(WrappedComponent) {
 								bg: '#ffc',
 							}}
 							isDisabled={isDisabled}
+							style={{
+								userSelect: 'none',
+							}}
+							userSelect="none"
 						>
 							{icon}
 							<Text
@@ -86,6 +96,10 @@ export default function withContextMenu(WrappedComponent) {
 								color={isDisabled ? 'disabled' : 'trueGray.800'}
 								numberOfLines={1}
 								ellipsizeMode="head"
+								style={{
+									userSelect: 'none',
+								}}
+								userSelect="none"
 							>{text}</Text>
 						</Pressable>;
 			});
@@ -96,6 +110,7 @@ export default function withContextMenu(WrappedComponent) {
 													flex={1}
 													py={2}
 													px={4}
+													userSelect="none"
 												>id: {selection?.[0]?.id}</Text>);
 			}
 			setContextMenuItemComponents(contextMenuItemComponents);

package/src/Components/Hoc/withEditor.js

@@ -115,7 +115,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				setEditorMode(EDITOR_MODE__EDIT);
 				setIsEditorShown(true);
 			},
-			onDelete = async () => {
+			onDelete = async (cb) => {
 				if (getListeners().onBeforeDelete) {
 					const listenerResult = await getListeners().onBeforeDelete();
 					if (listenerResult === false) {
@@ -126,7 +126,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					isSingle = selection.length === 1,
 					firstSelection = selection[0],
 					isTree = firstSelection?.isTree,
-					hasChildren = firstSelection?.hasChildren,
+					hasChildren = isTree ? firstSelection?.hasChildren : false,
 					isPhantom = firstSelection?.isPhantom;
 
 				if (isSingle && isTree && hasChildren) {
@@ -135,10 +135,10 @@ export default function withEditor(WrappedComponent, isTree = false) {
 						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">
+							<Button colorScheme="danger" onPress={() => onMoveChildren(cb)} key="moveBtn">
 								Move Children
 							</Button>,
-							<Button colorScheme="danger" onPress={onDeleteChildren} key="deleteBtn">
+							<Button colorScheme="danger" onPress={() => onDeleteChildren(cb)} key="deleteBtn">
 								Delete Children
 							</Button>
 						],
@@ -146,21 +146,21 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					});
 				} else
 				if (isSingle && isPhantom) {
-					deleteRecord();
+					deleteRecord(cb);
 				} else {
 					const identifier = getRecordIdentifier(selection);
-					confirm('Are you sure you want to delete the ' + identifier, deleteRecord);
+					confirm('Are you sure you want to delete the ' + identifier, () => deleteRecord(cb));
 				}
 			},
-			onMoveChildren = () => {
+			onMoveChildren = (cb) => {
 				hideAlert();
-				deleteRecord(true);
+				deleteRecord(true, cb);
 			},
-			onDeleteChildren = () => {
+			onDeleteChildren = (cb) => {
 				hideAlert();
-				deleteRecord();
+				deleteRecord(false, cb);
 			},
-			deleteRecord = async (moveSubtreeUp) => {
+			deleteRecord = async (moveSubtreeUp, cb) => {
 				if (getListeners().onBeforeDeleteSave) {
 					await getListeners().onBeforeDeleteSave(selection);
 				}
@@ -172,6 +172,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				if (getListeners().onAfterDelete) {
 					await getListeners().onAfterDelete(selection);
 				}
+				if (cb) {
+					cb();
+				}
 			},
 			viewRecord = async () => {
 				if (!userCanView) {
@@ -259,17 +262,10 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				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);
-				}
+				onDelete(() => {
+					setEditorMode(EDITOR_MODE__VIEW);
+					setIsEditorShown(false);
+				});
 			},
 			calculateEditorMode = () => {
 				let mode = EDITOR_MODE__VIEW;

package/src/Components/Hoc/withInlineEditor.js

@@ -58,9 +58,6 @@ export default function withInlineEditor(WrappedComponent) {
 				moveEditor(currentRow);
 			},
 			moveEditor = (currentRow) => {
-				if (!inlineEditorRef.current) {
-					debugger;
-				}
 				const 
 					rowBounds = currentRow.getBoundingClientRect(),
 					editor = inlineEditorRef.current,

package/src/Components/Hoc/withPresetButtons.js

@@ -24,6 +24,12 @@ const presetButtons = [
 
 export default function withPresetButtons(WrappedComponent, isGrid = false) {
 	return (props) => {
+
+		if (props.disablePresetButtons) {
+			// bypass everything
+			return <WrappedComponent {...props} />;
+		}
+
 		const {
 				// extract and pass
 				contextMenuItems,

package/src/Components/index.js

@@ -13,7 +13,7 @@ import BooleanCombo from './Form/Field/Combo/BooleanCombo.js';
 import CheckboxGroup from './Form/Field/CheckboxGroup/CheckboxGroup.js';
 import Color from './Form/Field/Color.js';
 import Combo from './Form/Field/Combo/Combo.js';
-// import ComboEditor from '../Components/Form/Field/Combo/ComboEditor.js';
+// import { ComboEditor } from '../Components/Form/Field/Combo/Combo.js';
 import Container from './Container/Container.js';
 import DataMgt from './Screens/DataMgt.js';
 import Date from './Form/Field/Date.js';

package/src/Components/Form/Field/Combo/ComboEditor.js

@@ -1,22 +0,0 @@
-import withAlert from '../../../Hoc/withAlert.js';
-import withData from '../../../Hoc/withData.js';
-import withPresetButtons from '../../../Hoc/withPresetButtons.js';
-import withSelection from '../../../Hoc/withSelection.js';
-import withValue from '../../../Hoc/withValue.js';
-import withWindowedEditor from '../../../Hoc/withWindowedEditor.js';
-import { Combo } from './Combo.js';
-
-export default
-				// withAlert(
-					withData(
-						withValue(
-							withSelection(
-								withWindowedEditor(
-									withPresetButtons(
-										Combo
-									)
-								)
-							)
-						)
-					);
-				//);