@onehat/ui 0.3.281 → 0.3.283

package/package.json

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

package/src/Components/Editor/InlineEditor.js

@@ -0,0 +1,163 @@
+import { useState, useEffect, useRef, } from 'react';
+import {
+	Box,
+	Column,
+	Row,
+	Text,
+} from 'native-base';
+import withComponent from '../Hoc/withComponent.js';
+import {
+	UI_MODE_WEB,
+	UI_MODE_REACT_NATIVE,
+} from '../../Constants/UiModes.js';
+import {
+	EDITOR_TYPE__INLINE,
+} from '../../Constants/Editor.js';
+import testProps from '../../Functions/testProps.js';
+import UiGlobals from '../../UiGlobals.js';
+import Form from '../Form/Form.js';
+import _ from 'lodash';
+
+function InlineEditor(props) {
+
+	if (UiGlobals.mode === UI_MODE_REACT_NATIVE) {
+		throw new Error('Not yet implemented for RN.');
+	}
+	
+	const {
+			isEditorShown = false,
+			columnsConfig,
+			setIsEditorShown,
+			isEditorViewOnly,
+			onEditorCancel,
+			onEditorSave,
+			onEditorClose,
+			editorStateRef,
+
+			// withComponent
+			self,
+
+			// withSelection
+			selection,
+
+			// withData
+			Repository,
+		} = props,
+		styles = UiGlobals.styles,
+		maskRef = useRef(),
+		inlineEditorRef = useRef(),
+		[currentRow, setCurrentRow] = useState(),
+		onScreenResize = () => {
+			// TODO: Attach a div with zIndex 0 to body to monitor resize events. THis is handler
+
+			moveEditor(currentRow);
+		},
+		moveEditor = (currentRow) => {
+			const 
+				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) + 'px';
+		},
+		onEditorShown = () => {
+			// determine which row to move the editor to
+			const
+				data = self.parent.gridRef.current.props.data, // This is okay, because (for now) the inlineEditor is only for use with grids
+				ix = data.indexOf(selection[0]),
+				gridRowsContainer = self.parent.gridRef.current._listRef._scrollRef.childNodes[0],
+				currentRow = gridRowsContainer.childNodes[ix];
+
+			// TODO: verify it works if not using a Repository
+
+			moveEditor(currentRow);
+			setCurrentRow(currentRow);
+		};
+	
+	useEffect(() => {
+		if (maskRef.current) {
+			maskRef.current.focus();
+		}
+		if (isEditorShown) {
+			onEditorShown();
+		}
+	}, [isEditorShown]);
+
+	if (!isEditorShown) {
+		return null;
+	}
+
+	if (selection.length < 1) {
+		return null; // phantom record may have just been deleted
+	}
+	if (selection.length !== 1) {
+		throw new Error('Can only edit one at a time with inline editor!');
+	}
+	if (!Repository) {
+		throw new Error('Must use a Repository');
+	}
+
+	return <>
+				<Box
+					ref={maskRef}
+					position="fixed"
+					w="100vw"
+					h="100vh"
+					top="0"
+					left="0"
+					bg="#000"
+					opacity={0.3}
+					zIndex={0}
+					onClick={(e) => {
+						e.preventDefault();
+						e.stopPropagation();
+						onEditorCancel();
+					}}
+					tabIndex={-1}
+					onKeyDown={(e) => {
+						if (e.key === 'Escape') {
+							onEditorCancel();
+						}
+					}}
+				/>
+				<Column
+					ref={inlineEditorRef}
+					position="absolute"
+					zIndex={10}
+					{...testProps('inlineEditor')}
+					h={isEditorShown ? '100px' : 0}
+					minWidth="100%"
+					display="inline-block"
+					whiteSpace="nowrap"
+				>
+					<Form
+						editorType={EDITOR_TYPE__INLINE}
+						editorStateRef={editorStateRef}
+
+						Repository={Repository}
+						isMultiple={selection.length > 1}
+						isEditorViewOnly={isEditorViewOnly}
+						columnsConfig={columnsConfig}
+						bg="#fff"
+						borderTopWidth={4}
+						borderTopColor={styles.GRID_INLINE_EDITOR_BORDER_COLOR}
+						borderBottomWidth={4}
+						borderBottomColor={styles.GRID_INLINE_EDITOR_BORDER_COLOR}
+						py={1}
+						px={0}
+
+						record={selection[0]}
+						onCancel={onEditorCancel}
+						onSave={onEditorSave}
+						onClose={onEditorClose}
+						parent={self}
+						reference="form"
+					/>
+				</Column>
+			</>;
+
+}
+
+export default withComponent(InlineEditor);

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

@@ -95,7 +95,7 @@ function TagComponent(props) {
 			});
 			if (exists) {
 				clearComboValue();
-				alert('Value already exists!');
+				// alert('Value already exists!'); // This screws up testing! alerts should be for error conditions, not standard operating conditions
 				return;
 			}
 

package/src/Components/Grid/Grid.js

@@ -324,7 +324,7 @@ function GridComponent(props) {
 			if (row.item.isDestroyed) {
 				return null;
 			}
-			if (row.item.id === 'inlineEditor') {
+			if (row.item.id === 'editor') {
 				return inlineEditor;
 			}
 
@@ -946,7 +946,7 @@ function GridComponent(props) {
 		rowData.unshift({ id: 'headerRow' });
 	}
 	if (inlineEditor) {
-		rowData.push({ id: 'inlineEditor' }); // make editor the last row so it can scroll with all other rows
+		rowData.push({ id: 'editor' }); // make editor the last row so it can scroll with all other rows
 	}
 	const initialNumToRender = rowData?.length || 10;
 
@@ -1014,7 +1014,7 @@ function GridComponent(props) {
 				/>
 	
 	if (CURRENT_MODE === UI_MODE_WEB) {
-		grid = <ScrollView horizontal={false}>{grid}</ScrollView>; // fix scrolling bug on nested FlatLists
+		grid = <ScrollView horizontal={false} testID="ScrollView">{grid}</ScrollView>; // fix scrolling bug on nested FlatLists
 	} else
 	if (CURRENT_MODE === UI_MODE_REACT_NATIVE) {
 		grid = <ScrollView flex={1} w="100%">{grid}</ScrollView>
@@ -1067,7 +1067,6 @@ function GridComponent(props) {
 
 	grid = <Column
 				{...testProps(self)}
-				// testID="outerContainer"
 				ref={containerRef}
 				tabIndex={0}
 				onKeyDown={onGridKeyDown}
@@ -1081,7 +1080,7 @@ function GridComponent(props) {
 				{topToolbar}
 
 				<Column
-					{...testProps('gridContainer')}
+					testID="gridContainer"
 					ref={gridContainerRef}
 					w="100%"
 					flex={1}

package/src/Components/Hoc/withInlineEditor.js

@@ -1,21 +1,8 @@
-import React, { useState, useEffect, useRef, } from 'react';
-import {
-	Box,
-	Column,
-	Modal,
-	Row,
-	Text,
-} from 'native-base';
+import { useState, } from 'react';
 import {
 	EDITOR_TYPE__INLINE,
 } from '../../Constants/Editor.js';
-import {
-	UI_MODE_WEB,
-	UI_MODE_REACT_NATIVE,
-} from '../../Constants/UiModes.js';
-import UiGlobals from '../../UiGlobals.js';
-import testProps from '../../Functions/testProps.js';
-import Form from '../Form/Form.js';
+import InlineEditor from '../Editor/InlineEditor.js';
 import withEditor from './withEditor.js';
 import _ from 'lodash';
 
@@ -35,152 +22,45 @@ function withAdditionalProps(WrappedComponent) {
 // withAdditionalProps(withEditor(withInlineEditor))
 
 export default function withInlineEditor(WrappedComponent, skipWrappers = false) {
-	const InlineEditor = (props) => {
+	const Editor = (props) => {
 		const {
-				editorType,
 				isEditorShown = false,
 				setIsEditorShown,
-				isEditorViewOnly,
-				onEditorCancel,
-				onEditorSave,
-				onEditorClose,
-				editorStateRef,
+				editorProps = {},
 
 				// withComponent
 				self,
 
-				// withSelection
-				selection,
+				// pull these out, as we don't want them going to the Editor
+				selectorId,
+				selectorSelected,
+				h,
 
-				// withData
-				Repository,
+				...propsToPass
 			} = props,
-			styles = UiGlobals.styles,
-			maskRef = useRef(),
-			inlineEditorRef = useRef(),
 			[localColumnsConfig, setLocalColumnsConfig] = useState([]),
-			[currentRow, setCurrentRow] = useState(),
 			onChangeColumnsConfig = (columnsConfig) => {
 				setLocalColumnsConfig(columnsConfig);
-			},
-			onScreenResize = () => {
-				// TODO: Attach a div with zIndex 0 to body to monitor resize events. THis is handler
-
-				moveEditor(currentRow);
-			},
-			moveEditor = (currentRow) => {
-				const 
-					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) + 'px';
-			},
-			onEditorShown = () => {
-				// determine which row to move the editor to
-				const
-					data = self.gridRef.current.props.data, // This is okay, because (for now) the inlineEditor is only for use with grids
-					ix = data.indexOf(selection[0]),
-					gridRowsContainer = self.gridRef.current._listRef._scrollRef.childNodes[0],
-					currentRow = gridRowsContainer.childNodes[ix];
-
-				// TODO: verify it works if not using a Repository
-
-				moveEditor(currentRow);
-				setCurrentRow(currentRow);
 			};
-		
-		useEffect(() => {
-			if (maskRef.current) {
-				maskRef.current.focus();
-			}
-			if (isEditorShown) {
-				onEditorShown();
-			}
-		}, [isEditorShown]);
-
-		if (isEditorShown && selection.length < 1) {
-			return null; // phantom record may have just been deleted
-		}
-		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.');
-		}
 
-		let inlineEditor = null;
-		if (Repository) {
-			inlineEditor = <>
-								{isEditorShown && <Box
-													ref={maskRef}
-													position="fixed"
-													w="100vw"
-													h="100vh"
-													top="0"
-													left="0"
-													bg="#000"
-													opacity={0.3}
-													zIndex={0}
-													onClick={(e) => {
-														e.preventDefault();
-														e.stopPropagation();
-														onEditorCancel();
-													}}
-													tabIndex={-1}
-													onKeyDown={(e) => {
-														if (e.key === 'Escape') {
-															onEditorCancel();
-														}
-													}}
-												></Box>}
-								<Column
-									ref={inlineEditorRef}
-									position="absolute"
-									zIndex={10}
-									{...testProps('inlineEditor')}
-									h={isEditorShown ? '100px' : 0}
-									minWidth="100%"
-									display="inline-block"
-									whiteSpace="nowrap"
-								>
-									{isEditorShown &&
-										<Form
-											parent={self}
-											reference="form"
-											editorType={EDITOR_TYPE__INLINE}
-											editorStateRef={editorStateRef}
-											record={selection[0]}
-											Repository={Repository}
-											isMultiple={selection.length > 1}
-											isEditorViewOnly={isEditorViewOnly}
-											columnsConfig={localColumnsConfig}
-											onCancel={onEditorCancel}
-											onSave={onEditorSave}
-											onClose={onEditorClose}
-											bg="#fff"
-											borderTopWidth={4}
-											borderTopColor={styles.GRID_INLINE_EDITOR_BORDER_COLOR}
-											borderBottomWidth={4}
-											borderBottomColor={styles.GRID_INLINE_EDITOR_BORDER_COLOR}
-											py={1}
-											px={0}
-										/>}
-								</Column>
-							</>;
-		}
-	
 		return <WrappedComponent
-					{...props}
 					onChangeColumnsConfig={onChangeColumnsConfig}
-					inlineEditor={inlineEditor}
 					isInlineEditorShown={isEditorShown}
+					inlineEditor={<InlineEditor
+									{...propsToPass}
+									{...editorProps}
+									parent={self}
+									reference="editor"
+									columnsConfig={localColumnsConfig}
+									isEditorShown={isEditorShown}
+									setIsEditorShown={setIsEditorShown}
+								/>}
+
+					{...props}
 				/>;
 	};
 	if (skipWrappers) {
-		return InlineEditor; // this is for InlineSideEditor, not yet implemented
+		return Editor; // this is for InlineSideEditor, not yet implemented
 	}
-	return withAdditionalProps(withEditor(InlineEditor));
+	return withAdditionalProps(withEditor(Editor));
 }

package/src/Styles/Global.css

@@ -1,4 +1,9 @@
 html, body {
 	-webkit-user-select: none;
 	user-select: none;
+}
+
+/* to fix the inline editor */
+[data-testid="gridContainer"] > [data-testid="ScrollView"] > div {
+	height: 100%;
 }