@onehat/ui 0.2.43 → 0.2.44

package/package.json

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

package/src/Components/Editor/Editor.js

@@ -0,0 +1,58 @@
+import {
+	EDITOR_MODE__VIEW,
+	EDITOR_MODE__ADD,
+	EDITOR_MODE__EDIT,
+} from '../../Constants/Editor.js';
+import _ from 'lodash';
+
+
+export default function Editor(props) {
+	const {
+			Form,
+			Viewer,
+			isEditorViewOnly: isViewOnly,
+			onEditorCancel: onCancel,
+			onEditorSave: onSave,
+			onEditorClose: onClose,
+			editorMode,
+			setEditorMode,
+
+			// withData
+			Repository,
+
+			// withSelection
+			selection,
+
+		} = props,
+		onEditMode = () => {
+			setEditorMode(EDITOR_MODE__EDIT);
+		},
+		onBack = () => {
+			setEditorMode(EDITOR_MODE__VIEW);
+		};
+
+	if (_.isEmpty(selection)) {
+		return null;
+	}
+
+	if (Repository.isRemotePhantomMode && selection.length === 1 && editorMode === EDITOR_MODE__VIEW) {
+		return <Viewer
+					record={selection[0]}
+					Repository={Repository}
+					onEditMode={isViewOnly ? null : onEditMode}
+					{...props}
+				/>;
+	}
+
+	// NOTE: Ideally, this form should use multiple columns when screen is wide enough,
+	// and only show in one column when it's not.
+
+	return <Form
+				record={selection}
+				onBack={onBack}
+				onCancel={onCancel}
+				onSave={onSave}
+				onClose={onClose}
+				{...props}
+			/>;
+}

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

@@ -14,7 +14,7 @@ function InputElement(props) {
 	let {
 			value,
 			setValue,
-			autoSubmit = false, // automatically setValue after user stops typing for autoSubmitDelay
+			autoSubmit = true, // automatically setValue after user stops typing for autoSubmitDelay
 			autoSubmitDelay = AUTO_SUBMIT_DELAY,
 			maxLength,
 			onKeyPress,

package/src/Components/Grid/Grid.js

@@ -751,11 +751,11 @@ export function Grid(props) {
 			return () => {};
 		}
 		if (!disableSelectorSelected) {
-			let matches = selectorSelected?.[0]?.id;
+			let id = selectorSelected?.id;
 			if (_.isEmpty(selectorSelected)) {
-				matches = noSelectorMeansNoResults ? 'NO_MATCHES' : null;
+				id = noSelectorMeansNoResults ? 'NO_MATCHES' : null;
 			}
-			Repository.filter(selectorId, matches, false); // so it doesn't clear existing filters
+			Repository.filter(selectorId, id, false); // so it doesn't clear existing filters
 		}
 
 	}, [selectorId, selectorSelected]);

package/src/Components/Grid/GridRow.js

@@ -26,7 +26,7 @@ export default function GridRow(props) {
 		} = props,
 		styles = UiGlobals.styles,
 		isPhantom = item.isPhantom,
-		hash = item.hash || item;
+		hash = item?.hash || item;
 
 		return useMemo(() => {
 			const renderColumns = (item) => {

package/src/Components/Hoc/withEditor.js

@@ -162,7 +162,7 @@ export default function withEditor(WrappedComponent) {
 							// For multiple entities selected, change it to edit multiple mode
 							mode = EDITOR_MODE__EDIT;
 						}
-					} else if (selection.length === 1 && selection.isPhantom) {
+					} else if (selection.length === 1 && selection[0].isPhantom) {
 						if (!disableAdd) {
 							// When a phantom entity is selected, change it to add mode.
 							mode = EDITOR_MODE__ADD;

package/src/Components/Hoc/withPresetButtons.js

@@ -126,29 +126,59 @@ export default function withPresetButtons(WrappedComponent) {
 						text = 'Edit';
 						handler = onEdit;
 						icon = <Edit />;
+						if (selectorId && !selectorSelected) {
+							isDisabled = true;
+						}
+						if (_.isEmpty(selection)) {
+							isDisabled = true;
+						}
 						break;
 					case 'delete':
 						text = 'Delete';
 						handler = onDelete;
 						icon = <Trash />;
+						if (selectorId && !selectorSelected) {
+							isDisabled = true;
+						}
+						if (_.isEmpty(selection) || selection.length > 1) {
+							isDisabled = true;
+						}
 						break;
 					case 'view':
 						text = 'View';
 						handler = onView;
 						icon = <Eye />;
 						isDisabled = !selection.length || selection.length !== 1;
+						if (selectorId && !selectorSelected) {
+							isDisabled = true;
+						}
+						if (_.isEmpty(selection) || selection.length > 1) {
+							isDisabled = true;
+						}
 						break;
 					case 'copy':
 						text = 'Copy to Clipboard';
 						handler = onCopyToClipboard;
 						icon = <Clipboard />;
 						isDisabled = !selection.length;
+						if (selectorId && !selectorSelected) {
+							isDisabled = true;
+						}
+						if (_.isEmpty(selection)) {
+							isDisabled = true;
+						}
 						break;
 					case 'duplicate':
 						text = 'Duplicate';
 						handler = onDuplicate;
 						icon = <Duplicate />;
 						isDisabled = !selection.length || selection.length !== 1;
+						if (selectorId && !selectorSelected) {
+							isDisabled = true;
+						}
+						if (_.isEmpty(selection) || selection.length > 1) {
+							isDisabled = true;
+						}
 						break;
 					// case 'print':
 					// 	text = 'Print';

package/src/Components/Screens/DataMgt.js

@@ -167,7 +167,7 @@ export default function DataMgt(props) {
 		isFullscreen,
 		showSelector,
 		westSelected,
-		westSelected?.[0].hash,
+		westSelected?.[0]?.hash,
 		centerNoSelectorMeansNoResults,
 		// {...centerProps}
 	])

package/src/Hooks/useAdjustedWindowSize.js

@@ -0,0 +1,18 @@
+import useWindowSize from './useWindowSize.js';
+
+// This hook takes the submitted window size and adjusts it
+// to fit the actual screen size
+
+export default function(width, height, percentage = 0.9) {
+
+	const windowSize = useWindowSize();
+	
+	if (width > windowSize.width) {
+		width = windowSize.width * percentage;
+	}
+	if (height > windowSize.height) {
+		height = windowSize.height * percentage;
+	}
+
+	return [ width, height, ];
+}

package/src/Hooks/useWindowSize.js

@@ -0,0 +1,25 @@
+// from https://designcode.io/react-hooks-usewindowsize-hook
+
+import { useLayoutEffect, useState } from 'react';
+
+// For web only!
+export default function useWindowSize() {
+	const [windowSize, setWindowSize] = useState({ width: 0, height: 0 });
+
+	const handleSize = () => {
+		setWindowSize({
+			width: window.innerWidth,
+			height: window.innerHeight
+		});
+	};
+
+	useLayoutEffect(() => {
+		handleSize();
+
+		window.addEventListener('resize', handleSize);
+
+		return () => window.removeEventListener('resize', handleSize);
+	}, []);
+
+	return windowSize;
+};