@onehat/ui 0.2.77 → 0.2.78

package/package.json

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

package/src/Components/Editor/Editor.js

@@ -1,7 +1,5 @@
 import {
 	EDITOR_MODE__VIEW,
-	EDITOR_MODE__ADD,
-	EDITOR_MODE__EDIT,
 } from '../../Constants/Editor.js';
 import _ from 'lodash';
 
@@ -16,7 +14,6 @@ export default function Editor(props) {
 			onEditorClose: onClose,
 			onEditorDelete: onDelete,
 			editorMode,
-			setEditorMode,
 
 			// withData
 			Repository,
@@ -24,13 +21,7 @@ export default function Editor(props) {
 			// withSelection
 			selection,
 
-		} = props,
-		onEditMode = () => {
-			setEditorMode(EDITOR_MODE__EDIT);
-		},
-		onViewMode = () => {
-			setEditorMode(EDITOR_MODE__VIEW);
-		};
+		} = prop;
 
 	if (_.isEmpty(selection)) {
 		return null;
@@ -52,7 +43,6 @@ export default function Editor(props) {
 	return <Form
 				{...props}
 				record={selection}
-				onViewMode={onViewMode}
 				onCancel={onCancel}
 				onSave={onSave}
 				onClose={onClose}

package/src/Components/Form/Form.js

@@ -87,6 +87,7 @@ function Form(props) {
 			onSave,
 			onClose,
 			onDelete,
+			editorStateRef,
 
 			// DataMgt
 			selectorId,
@@ -148,6 +149,11 @@ function Form(props) {
 					borderRightColor: 'trueGray.200',
 					px: 1,
 				};
+
+			if (editorType === EDITOR_TYPE__INLINE) {
+				columnProps.minWidth = styles.INLINE_EDITOR_MIN_WIDTH;
+			}
+
 			_.each(columnsConfig, (config, ix) => {
 				let {
 						fieldName,
@@ -159,7 +165,11 @@ function Form(props) {
 					} = config;
 
 				if (!isEditable) {
-					const renderedValue = renderer ? renderer(record) : record[fieldName];
+					let renderedValue = renderer ? renderer(record) : record[fieldName];
+					if (_.isBoolean(renderedValue)) {
+						renderedValue = renderedValue.toString();
+					}
+					renderedValue += "\n(not editable)";
 					elements.push(<Box key={ix} w={w} flex={flex} {...columnProps}>
 										<Text numberOfLines={1} ellipsizeMode="head">{renderedValue}</Text>
 									</Box>);
@@ -200,13 +210,7 @@ function Form(props) {
 												}
 											}
 											const Element = getComponentFromType(editor);
-											if (!Element) {
-												debugger;
-												// LEFT OFF HERE
-												// Trying inline editor, based on columnsConfig
-												// Getting an error that the OrdersEditor is missing users__email.
-												// Why is this even on the OrdersEditor? Runner?
-											}
+
 											let element = <Element
 																name={name}
 																value={value}
@@ -450,6 +454,10 @@ function Form(props) {
 	// if (Repository && (!record || _.isEmpty(record))) {
 	// 	return null;
 	// }
+
+	if (!_.isNil(editorStateRef)) {
+		editorStateRef.current = formState; // Update state so HOC can know what's going on
+	}
 	
 	const sizeProps = {};
 	if (!flex && !h && !w) {
@@ -517,6 +525,12 @@ function Form(props) {
 	if (_.isEmpty(formState.dirtyFields) && !record?.isRemotePhantom) {
 		isSaveDisabled = true;
 	}
+
+	if (editorType === EDITOR_TYPE__INLINE) {
+		buttonGroupProps.position = 'fixed';
+		buttonGroupProps.left = 10; // TODO: I would prefer to have this be centered, but it's a lot more complex than just making it stick to the left
+		footerProps.alignItems = 'flex-start';
+	}
 	
 	return <Column {...sizeProps} onLayout={onLayout}>
 
@@ -532,13 +546,7 @@ function Form(props) {
 					{isSingle && editorMode === EDITOR_MODE__EDIT && onViewMode && 
 						<Button
 							key="viewBtn"
-							onPress={() => {
-								if (!_.isEmpty(formState.dirtyFields)) {
-									confirm('This record has unsaved changes. Are you sure you want to switch to "View" mode? Changes will be lost.', onViewMode);
-								} else {
-									onViewMode();
-								}
-							}}
+							onPress={onViewMode}
 							leftIcon={<Icon as={Eye} color="#fff" size="sm" />}	
 							color="#fff"
 						>To View</Button>}
@@ -579,13 +587,7 @@ function Form(props) {
 						{!isViewOnly && onCancel && <Button
 														key="cancelBtn"
 														variant="ghost"
-														onPress={() => {
-															if (!_.isEmpty(formState.dirtyFields)) {
-																confirm('This record has unsaved changes. Are you sure you want to cancel editing? Changes will be lost.', onCancel);
-															} else {
-																onCancel();
-															}
-														}}
+														onPress={onCancel}
 														color="#fff"
 													>Cancel</Button>}
 						{!isViewOnly && onSave && <Button

package/src/Components/Grid/Grid.js

@@ -127,8 +127,8 @@ function GridComponent(props) {
 			selectorSelected,
 
 			// withInlineEditor
-			inlineEditorRef,
-			onScrollRow,
+			inlineEditor = null,
+			isInlineEditorShown = false,
 			onEditorRowClick,
 
 		} = props,
@@ -137,8 +137,8 @@ function GridComponent(props) {
 		gridRef = useRef(),
 		[isReady, setIsReady] = useState(false),
 		[isLoading, setIsLoading] = useState(false),
-		[isReorderMode, setIsReorderMode] = useState(false),
 		[localColumnsConfig, setLocalColumnsConfigRaw] = useState([]),
+		[isDragMode, setIsDragMode] = useState(false),
 		[dragRowSlot, setDragRowSlot] = useState(null),
 		[dragRowIx, setDragRowIx] = useState(),
 		setLocalColumnsConfig = (config) => {
@@ -148,6 +148,9 @@ function GridComponent(props) {
 			}
 		},
 		onRowClick = (item, e) => {
+			if (isInlineEditorShown) {
+				return;
+			}
 			const
 				{
 					shiftKey,
@@ -223,8 +226,8 @@ function GridComponent(props) {
 			if (canRowsReorder) {
 				items.unshift(<IconButton
 					key="reorderBtn"
-					onPress={() => setIsReorderMode(!isReorderMode)}
-					icon={<Icon as={isReorderMode ? NoReorderRows : ReorderRows} color={styles.GRID_TOOLBAR_ITEMS_COLOR} />}
+					onPress={() => setIsDragMode(!isDragMode)}
+					icon={<Icon as={isDragMode ? NoReorderRows : ReorderRows} color={styles.GRID_TOOLBAR_ITEMS_COLOR} />}
 				/>);
 			}
 			return items;
@@ -233,6 +236,9 @@ function GridComponent(props) {
 			if (row.item.isDestroyed) {
 				return null;
 			}
+			if (row.item.id === 'inlineEditor') {
+				return inlineEditor;
+			}
 
 			let {
 					item,
@@ -248,7 +254,7 @@ function GridComponent(props) {
 							if (e.preventDefault && e.cancelable) {
 								e.preventDefault();
 							}
-							if (isHeaderRow || isReorderMode) {
+							if (isHeaderRow || isDragMode) {
 								return
 							}
 							switch (e.detail) {
@@ -275,7 +281,7 @@ function GridComponent(props) {
 							if (e.preventDefault && e.cancelable) {
 								e.preventDefault();
 							}
-							if (isHeaderRow || isReorderMode) {
+							if (isHeaderRow || isDragMode) {
 								return
 							}
 							
@@ -309,6 +315,7 @@ function GridComponent(props) {
 											setSelection={setSelection}
 											gridRef={gridRef}
 											isHovered={isHovered}
+											isInlineEditorShown={isInlineEditorShown}
 										/>;
 							}
 
@@ -331,7 +338,7 @@ function GridComponent(props) {
 							}
 							let WhichGridRow = GridRow,
 								rowReorderProps = {};
-							if (canRowsReorder && isReorderMode) {
+							if (canRowsReorder && isDragMode) {
 								WhichGridRow = ReorderableGridRow;
 								rowReorderProps = {
 									mode: VERTICAL,
@@ -353,6 +360,7 @@ function GridComponent(props) {
 										hideNavColumn={hideNavColumn}
 										bg={bg}
 										item={item}
+										isInlineEditorShown={isInlineEditorShown}
 										{...rowReorderProps}
 									/>;
 						}}
@@ -660,10 +668,10 @@ function GridComponent(props) {
 							...propsToPass,
 						};
 
-					if (!config.w && !config.flex) {
+					if (!(config.w || config.width) && !config.flex) {
 						// Neither is set
 						config.w = 100; // default
-					} else if (config.flex && config.width) {
+					} else if (config.flex && (config.w || config.width)) {
 						// Both are set. Width overrules flex.
 						delete config.flex;
 					}
@@ -729,7 +737,7 @@ function GridComponent(props) {
 
 	}, [selectorId, selectorSelected]);
 
-	const footerToolbarItemComponents = useMemo(() => getFooterToolbarItems(), [additionalToolbarButtons, isReorderMode]);
+	const footerToolbarItemComponents = useMemo(() => getFooterToolbarItems(), [additionalToolbarButtons, isDragMode]);
 
 	if (!isReady) {
 		return null;
@@ -741,6 +749,9 @@ function GridComponent(props) {
 	if (showHeaders) {
 		rowData.unshift({ id: 'headerRow' });
 	}
+	if (inlineEditor) {
+		rowData.push({ id: 'inlineEditor' }); // make editor the last row so it can scroll with all other rows
+	}
 	const initialNumToRender = rowData.length || 10;
 
 	// headers & footers
@@ -768,7 +779,7 @@ function GridComponent(props) {
 				{topToolbar}
 
 				<Column w="100%" flex={1} borderTopWidth={isLoading ? 2 : 1} borderTopColor={isLoading ? '#f00' : 'trueGray.300'} onClick={() => {
-					if (!isReorderMode) {
+					if (!isDragMode && !isInlineEditorShown) {
 						deselectAll();
 					}
 				}}>
@@ -781,8 +792,8 @@ function GridComponent(props) {
 							nestedScrollEnabled={true}
 							contentContainerStyle={{
 								overflow: 'auto',
-								borderWidth: isReorderMode ? styles.REORDER_BORDER_WIDTH : 0,
-								borderColor: isReorderMode ? styles.REORDER_BORDER_COLOR : null,
+								borderWidth: isDragMode ? styles.REORDER_BORDER_WIDTH : 0,
+								borderColor: isDragMode ? styles.REORDER_BORDER_COLOR : null,
 								borderStyle: styles.REORDER_BORDER_STYLE,
 								flex: 1,
 							}}

package/src/Components/Grid/GridHeaderRow.js

@@ -40,6 +40,7 @@ export default function GridHeaderRow(props) {
 			setSelection,
 			gridRef,
 			isHovered,
+			isInlineEditorShown,
 		} = props,
 		styles = UiGlobals.styles,
 		sortFn = Repository && Repository.getSortFn(),
@@ -316,6 +317,10 @@ export default function GridHeaderRow(props) {
 						}
 					}
 
+					if (isInlineEditorShown) {
+						propsToPass.minWidth = styles.INLINE_EDITOR_MIN_WIDTH;
+					}
+
 					return <Pressable
 								key={ix}
 								onPress={(e) => {
@@ -453,6 +458,7 @@ export default function GridHeaderRow(props) {
 		isSortDirectionAsc,
 		sortFn,
 		sortField,
+		isInlineEditorShown,
 	]);
 }
 

package/src/Components/Grid/GridRow.js

@@ -23,6 +23,7 @@ export default function GridRow(props) {
 			hideNavColumn,
 			bg,
 			item,
+			isInlineEditorShown,
 		} = props,
 		styles = UiGlobals.styles,
 		isPhantom = item.isPhantom,
@@ -44,6 +45,10 @@ export default function GridRow(props) {
 						propsToPass.p = 1;
 						propsToPass.justifyContent = 'center';
 
+						if (isInlineEditorShown) {
+							propsToPass.minWidth = styles.INLINE_EDITOR_MIN_WIDTH;
+						}
+
 						let value;
 						if (_.isPlainObject(config)) {
 							if (config.renderer) {
@@ -141,6 +146,7 @@ export default function GridRow(props) {
 			item,
 			isPhantom,
 			hash, // this is an easy way to determine if the data has changed and the item needs to be rerendered
+			isInlineEditorShown,
 		]);
 }
 

package/src/Components/Hoc/withEditor.js

@@ -47,10 +47,10 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				hideAlert,
 			} = props,
 			listeners = useRef({}),
+			editorStateRef = useRef(),
 			[currentRecord, setCurrentRecord] = useState(null),
 			[isEditorShown, setIsEditorShown] = useState(false),
 			[isEditorViewOnly, setIsEditorViewOnly] = useState(false),
-			[isModalShown, setIsModalShown] = useState(false),
 			[lastSelection, setLastSelection] = useState(),
 			getListeners = () => {
 				return listeners.current;
@@ -237,15 +237,23 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					await getListeners().onAfterEdit(what);
 				}
 			},
-			onEditorCancel = async () => {
-				const
-					isSingle = selection.length === 1,
-					isPhantom = selection[0] && selection[0].isPhantom;
-				if (isSingle && isPhantom) {
-					await deleteRecord();
+			onEditorCancel =  () => {
+				async function doIt() {
+					const
+						isSingle = selection.length === 1,
+						isPhantom = selection[0] && selection[0].isPhantom;
+					if (isSingle && isPhantom) {
+						await deleteRecord();
+					}
+					setEditorMode(EDITOR_MODE__VIEW);
+					setIsEditorShown(false);
+				}
+				const formState = editorStateRef.current;
+				if (!_.isEmpty(formState.dirtyFields)) {
+					confirm('This record has unsaved changes. Are you sure you want to cancel editing? Changes will be lost.', doIt);
+				} else {
+					doIt();
 				}
-				setEditorMode(EDITOR_MODE__VIEW);
-				setIsEditorShown(false);
 			},
 			onEditorClose = () => {
 				setIsEditorShown(false);
@@ -279,6 +287,20 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					}
 				}
 				return mode;
+			},
+			onEditMode = () => {
+				setEditorMode(EDITOR_MODE__EDIT);
+			},
+			onViewMode = () => {
+				function doIt() {
+					setEditorMode(EDITOR_MODE__VIEW);
+				}
+				const formState = editorStateRef.current;
+				if (!_.isEmpty(formState.dirtyFields)) {
+					confirm('This record has unsaved changes. Are you sure you want to switch to "View" mode? Changes will be lost.', doIt);
+				} else {
+					doIt();
+				}
 			};
 
 		useEffect(() => {
@@ -301,7 +323,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					isEditorShown={isEditorShown}
 					isEditorViewOnly={isEditorViewOnly}
 					editorMode={editorMode}
-					setEditorMode={setEditorMode}
+					onEditMode={onEditMode}
+					onViewMode={onViewMode}
+					editorStateRef={editorStateRef}
 					setIsEditorShown={setIsEditorShown}
 					onAdd={(!userCanEdit || disableAdd) ? null : onAdd}
 					onEdit={(!userCanEdit || disableEdit) ? null : onEdit}

package/src/Components/Hoc/withInlineEditor.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef, } from 'react';
 import {
+	Box,
 	Column,
 	Modal,
 	Row,
@@ -28,6 +29,7 @@ export default function withInlineEditor(WrappedComponent) {
 				onEditorCancel,
 				onEditorSave,
 				onEditorClose,
+				editorStateRef,
 
 				// withSelection
 				selection,
@@ -36,6 +38,7 @@ export default function withInlineEditor(WrappedComponent) {
 				Repository,
 			} = props,
 			styles = UiGlobals.styles,
+			maskRef = useRef(),
 			inlineEditorRef = useRef(),
 			[localColumnsConfig, setLocalColumnsConfig] = useState([]),
 			[currentRow, setCurrentRow] = useState(),
@@ -55,36 +58,56 @@ export default function withInlineEditor(WrappedComponent) {
 				moveEditor(currentRow);
 			},
 			moveEditor = (currentRow) => {
+				if (!inlineEditorRef.current) {
+					debugger;
+				}
 				const 
-					bounds = currentRow.getBoundingClientRect(),
-					r = inlineEditorRef.current.style;
-				r.top = bounds.top -8 + 'px';
-				r.left = bounds.left + 'px';
-				r.width = bounds.width + 'px';
+					rowBounds = currentRow.getBoundingClientRect(),
+					editor = inlineEditorRef.current,
+					editorStyle = editor.style,
+					editorBounds = editor.parentElement.getBoundingClientRect(), // reference parentElement, because this doesn't change based on last moveEditor call
+					delta = editorBounds.top - rowBounds.top;
+
+				editorStyle.top = (-1 * delta) -20 + 'px';
 			};
 
+		if (isEditorShown && selection.length < 1) {
+			throw new Error('Lost the selection!');
+		}
 		if (isEditorShown && selection.length !== 1) {
 			throw new Error('Can only edit one at a time with inline editor!');
 		}
 		if (UiGlobals.mode === UI_MODE_REACT_NATIVE) {
 			throw new Error('Not yet implemented for RN.');
 		}
-	
-		return <>
-					<WrappedComponent
-						{...props}
-						inlineEditorRef={inlineEditorRef}
-						onChangeColumnsConfig={onChangeColumnsConfig}
-						onEditorRowClick={onRowClick}
-					/>
-					{useEditor && editorType === EDITOR_TYPE__INLINE && Repository && 
-							<Modal
-								isOpen={isEditorShown}
-								onClose={() => setIsEditorShown(false)}
-							>
-								<Column position="absolute" ref={inlineEditorRef}>
+
+		let inlineEditor = null;
+		if (useEditor && Repository) {
+			inlineEditor = <>
+								{isEditorShown && <Box
+													ref={maskRef}
+													position="fixed"
+													w="100vw"
+													h="100vh"
+													top="0"
+													left="0"
+													bg="#000"
+													opacity={0.35}
+													zIndex={0}
+													onClick={(e) => {
+														e.preventDefault();
+														e.stopPropagation();
+														onEditorCancel();
+													}}
+												></Box>}
+								<Column
+									ref={inlineEditorRef}
+									position="absolute"
+									zIndex={10}
+								>
 									{isEditorShown && <Form
-															editorType={EDITOR_TYPE__INLINE} 
+															editorType={EDITOR_TYPE__INLINE}
+															editorStateRef={editorStateRef}
 															record={selection[0]}
 															Repository={Repository}
 															isMultiple={selection.length > 1}
@@ -113,7 +136,15 @@ export default function withInlineEditor(WrappedComponent) {
 															px={0}
 														/>}
 								</Column>
-							</Modal>}
-				</>;
+							</>;
+		}
+	
+		return <WrappedComponent
+					{...props}
+					onChangeColumnsConfig={onChangeColumnsConfig}
+					onEditorRowClick={onRowClick}
+					inlineEditor={inlineEditor}
+					isInlineEditorShown={isEditorShown}
+				/>;
 	});
 }

package/src/Constants/Styles.js

@@ -67,6 +67,7 @@ const defaults = {
 	ICON_BUTTON_BG_DISABLED: 'trueGray.200',
 	ICON_BUTTON_BG_HOVER: '#000:alpha.20',
 	ICON_BUTTON_BG_PRESSED: '#000:alpha.30',
+	INLINE_EDITOR_MIN_WIDTH: 150,
 	PANEL_FOOTER_BG: 'primary.100', // :alpha.50
 	PANEL_HEADER_BG: 'primary.100',
 	PANEL_HEADER_BG_VERTICAL: 'primary.100',