@onehat/ui 0.2.42 → 0.2.44

package/package.json

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

@@ -83,7 +83,7 @@ function Form(props) {
 			onSave = onEditorSave,
 			onClose,
 
-			// withSelection
+			// DataMgt
 			selectorId,
 			selectorSelected,
 

package/src/Components/Grid/Grid.js

@@ -82,6 +82,7 @@ export function Grid(props) {
 			hideNavColumn = true,
 			noneFoundText,
 			disableLoadingIndicator = false,
+			disableSelectorSelected = false,
 			showRowExpander = false,
 			rowExpanderTpl = '',
 			showHeaders = true,
@@ -129,10 +130,9 @@ export function Grid(props) {
 			isInSelection,
 			noSelectorMeansNoResults = false,
 
-			// selectorSelected
+			// DataMgt
 			selectorId,
 			selectorSelected,
-			disableSelectorSelected = false,
 
 			// withInlineEditor
 			inlineEditorRef,
@@ -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

@@ -27,6 +27,10 @@ export default function withEditor(WrappedComponent) {
 				},
 				record,
 
+				// DataMgt
+				selectorId,
+				selectorSelected,
+
 				// withData
 				Repository,
 
@@ -47,7 +51,13 @@ export default function withEditor(WrappedComponent) {
 				}
 				const
 					defaultValues = Repository.getSchema().model.defaultValues,
-					entity = await Repository.add(defaultValues, false, true, true);
+					addValues = _.clone(defaultValues);
+
+				if (selectorId && !_.isEmpty(selectorSelected)) {
+					addValues[selectorId] = selectorSelected.id;
+				}
+
+				const entity = await Repository.add(addValues, false, true, true);
 				setSelection([entity]);
 				setIsEditorViewOnly(false);
 				setEditorMode(EDITOR_MODE__ADD);
@@ -118,11 +128,15 @@ export default function withEditor(WrappedComponent) {
 				} else if (selection.length > 1) {
 					// Edit multiple entities
 
-
-					debugger;
-
-
-
+					// Loop through all entities and change fields that are not null
+					const propertyNames = Object.getOwnPropertyNames(data);
+					_.each(propertyNames, (propertyName) => {
+						if (!_.isNil(data[propertyName])) {
+							_.each(what, (rec) => {
+								rec[propertyName] = data[propertyName]
+							});
+						}
+					});
 				}
 				await Repository.save();
 				setIsEditorShown(false);
@@ -148,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

@@ -33,12 +33,6 @@ export default function withPresetButtons(WrappedComponent) {
 			} = props,
 			{
 				// for local use
-				selection,
-				onAdd,
-				onEdit,
-				onDelete,
-				onView,
-				onDuplicate,
 				useEditor = true,
 				disableAdd = false,
 				disableEdit = false,
@@ -51,6 +45,19 @@ export default function withPresetButtons(WrappedComponent) {
 				// withEditor
 				userCanEdit = true,
 				userCanView = true,
+				onAdd,
+				onEdit,
+				onDelete,
+				onView,
+				onDuplicate,
+
+				// withSelection
+				selection,
+				setSelection,
+
+				// DataMgt
+				selectorId,
+				selectorSelected,
 			} = props,
 			[isReady, setIsReady] = useState(false),
 			[localContextMenuItems, setLocalContextMenuItems] = useState([]),
@@ -119,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';
@@ -210,7 +247,7 @@ export default function withPresetButtons(WrappedComponent) {
 			if (!isReady) {
 				setIsReady(true);
 			}
-		}, [selection, localColumnsConfig]);
+		}, [selection, selectorSelected, localColumnsConfig]);
 
 		if (!isReady) {
 			return null;
@@ -229,6 +266,7 @@ export default function withPresetButtons(WrappedComponent) {
 		if (additionalToolbarButtons) {
 			additionalToolbarButtonsToPass.concat(additionalToolbarButtons);
 		}
+
 		return <WrappedComponent
 					{...propsToPass}
 					contextMenuItems={contextMenuItemsToPass}

package/src/Components/Screens/DataMgt.js

@@ -44,8 +44,8 @@ export default function DataMgt(props) {
 		[isWestCollapsed, setIsWestCollapsed] = useState(westStartsCollapsed),
 		[isEastCollapsed, setIsEastCollapsed] = useState(eastStartsCollapsed),
 		[isFullscreen, setIsFullscreen] = useState(false),
-		[westSelected, setWestSelectedRaw] = useState([]),
-		[centerSelected, setCenterSelected] = useState([]),
+		[westSelected, setWestSelectedRaw] = useState(),
+		[centerSelected, setCenterSelected] = useState(),
 		setWestSelected = (selected) => {
 			setWestSelectedRaw(selected);
 			setCenterSelected(); // clear selection in center
@@ -156,7 +156,7 @@ export default function DataMgt(props) {
 					autoLoad={!showSelector}
 					uniqueRepository={true}
 					selectorId={showSelector ? westSelector_id : null}
-					selectorSelected={westSelected}
+					selectorSelected={westSelected?.[0]}
 					noSelectorMeansNoResults={centerNoSelectorMeansNoResults}
 					onChangeSelection={setCenterSelected}
 					onEvent={onEvent}
@@ -167,7 +167,7 @@ export default function DataMgt(props) {
 		isFullscreen,
 		showSelector,
 		westSelected,
-		westSelected?.hash,
+		westSelected?.[0]?.hash,
 		centerNoSelectorMeansNoResults,
 		// {...centerProps}
 	])
@@ -191,7 +191,7 @@ export default function DataMgt(props) {
 					controlledByCenter = typeof associatedPanel.props.controlledByCenter === 'undefined' ? true : associatedPanel.props.controlledByCenter,
 					thisAssociatedPanelProps = {
 						selectorId: controlledByCenter ? centerSelector_id : westSelector_id,
-						selectorSelected: controlledByCenter ? centerSelected : westSelected,
+						selectorSelected: controlledByCenter ? centerSelected?.[0] : westSelected?.[0],
 						...associatedPanel.props,
 					};
 				return React.cloneElement(associatedPanel, { key: ix, reference: 'associatedPanel' + ix, ...allAssociatedPanelProps, ...thisAssociatedPanelProps, });

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;
+};