@onehat/ui 0.3.282 → 0.3.284

package/package.json

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

package/src/Components/Editor/Editor.js

@@ -1,7 +1,6 @@
 import {
 	EDITOR_MODE__VIEW,
 } from '../../Constants/Editor.js';
-import testProps from '../../Functions/testProps.js';
 import withComponent from '../Hoc/withComponent.js';
 import Form from '../Form/Form.js';
 import Viewer from '../Viewer/Viewer.js';

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/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/Functions/Cypress/button_functions.js

@@ -0,0 +1,84 @@
+
+import {
+	getDomNode,
+	getDomNodes,
+} from './dom_functions';
+import _ from 'lodash';
+const $ = Cypress.$;
+
+
+export function clickAddButton(parentSelectors) {
+	return clickButton(parentSelectors, 'addBtn');
+}
+export function clickSaveButton(parentSelectors) {
+	return clickButton(parentSelectors, 'saveBtn');
+}
+export function clickEditButton(parentSelectors) {
+	return clickButton(parentSelectors, 'editBtn');
+}
+export function clickDeleteButton(parentSelectors) {
+	return clickButton(parentSelectors, 'deleteBtn');
+}
+export function clickDuplicateButton(parentSelectors) {
+	return clickButton(parentSelectors, 'duplicateBtn');
+}
+export function clickReloadButton(parentSelectors) {
+	return clickButton(parentSelectors, 'reloadPageBtn');
+}
+export function clickCloseButton(parentSelectors) {
+	return clickButton(parentSelectors, 'closeBtn');
+}
+export function clickCancelButton(parentSelectors) {
+	return clickButton(parentSelectors, 'cancelBtn');
+}
+export function clickOkButton(parentSelectors) {
+	return clickButton(parentSelectors, 'okBtn');
+}
+export function clickYesButton(parentSelectors) {
+	return clickButton(parentSelectors, 'yesBtn');
+}
+export function clickNoButton(parentSelectors) {
+	return clickButton(parentSelectors, 'noBtn');
+}
+export function clickXButton(parentSelectors) {
+	return clickButton(parentSelectors, 'xBtn');
+}
+export function clickTrigger(parentSelectors) {
+	return clickButton(parentSelectors, 'trigger');
+}
+export function clickToEditButton(parentSelectors) {
+	return clickButton(parentSelectors, 'toEditBtn');
+}
+export function clickToEditButtonIfExists(parentSelectors) {
+	return clickButtonIfExists(parentSelectors, 'toEditBtn');
+}
+export function clickToViewButton(parentSelectors) {
+	return clickButton(parentSelectors, 'toViewBtn');
+}
+export function clickToViewButtonIfExists(parentSelectors) {
+	return clickButtonIfExists(parentSelectors, 'toViewBtn');
+}
+export function toFullMode(parentSelectors) {
+	return clickButton(parentSelectors, 'fullModeBtn');
+}
+export function toSideMode(parentSelectors) {
+	return clickButton(parentSelectors, 'sideModeBtn');
+}
+export function clickButton(parentSelectors, name) {
+	if (_.isString(parentSelectors)) {
+		parentSelectors = [parentSelectors];
+	}
+	return getDomNode([...parentSelectors, name])
+				// .scrollIntoView()
+				.click({ force: true });
+}
+export function clickButtonIfExists(parentSelectors, name) {
+	if (_.isString(parentSelectors)) {
+		parentSelectors = [parentSelectors];
+	}
+	return getDomNode([...parentSelectors, name]).then((node) => {
+		if (node) {
+			node.click();
+		}
+	});
+}

package/src/Functions/Cypress/common_functions.js

@@ -0,0 +1,108 @@
+import {
+	getDomNode,
+	getDomNodes,
+} from './dom_functions';
+
+
+export function markForPageReload() {
+	// See https://github.com/cypress-io/cypress/issues/1805#issuecomment-525482440
+	cy.window()
+		.then((win) => {
+			win.beforeReload = true;
+		});
+}
+export function waitForPageReload() {
+	// See https://github.com/cypress-io/cypress/issues/1805#issuecomment-525482440
+	cy.window({ timeout: 30000 })
+		.should('not.have.prop', 'beforeReload');
+}
+export function waitForNavigationTo(url) {
+	return cy.location('pathname', { timeout: 30000 })
+		.should('include', url);
+}
+
+
+
+//     __  ___                                ____
+//    /  |/  /__  ______________ _____ ____  / __ )____  _  __
+//   / /|_/ / _ \/ ___/ ___/ __ `/ __ `/ _ \/ __  / __ \| |/_/
+//  / /  / /  __(__  |__  ) /_/ / /_/ /  __/ /_/ / /_/ />  <
+// /_/  /_/\___/____/____/\__,_/\__, /\___/_____/\____/_/|_|
+//                             /____/
+export function clickMessageBoxDefaultButton() {
+	getDomNode(['AlertDialogue', 'okBtn'])
+		.click();
+}
+export function verifyNoErrorBox() {
+	getDomNode('ErrorMessage', { timeout: 1000 })
+		.should('not.exist', 'Error dialogue popped up.');
+}
+
+
+
+// export function verifyNoErrorMessage() {
+// 	// cy.wait(1000);
+// 	cy.get('input[data-testid="ErrorMessage"]').should('not.exist');
+// }
+
+// export function checkForErrors() {
+// 	cy.get('html')
+// 		.first()
+// 		.then((el) => {
+// 			const result = hasError(el[0].innerHTML);
+// 			expect(result).to.eq(false, 'Page has errors!' + (result && result.title));
+// 		});
+// }
+
+// // Helpers for checkForErrors()
+// function hasError(html) {
+// 	return hasNotice(html) || hasWarning(html) || hasException(html);
+// }
+// function hasNotice(html) {
+// 	const result = /<b>Notice<\/b> \(/is.test(html);
+// 	if (result) {
+// 		// Try to determine error message
+// 		const re = /<b>Notice<\/b> \([\d]+\)<\/a>: ([^\[]+)\[([^\]]+)\]/is,
+// 			result2 = html.match(re);
+// 		return {
+// 			title: result2[1],
+// 			line: result2[2],
+// 		};
+// 	}
+// 	return false;
+// }
+// function hasWarning(html) {
+// 	const result = /<b>Warning<\/b> \(/is.test(html);
+// 	if (result) {
+// 		// Try to determine error message
+// 		const re = /<b>Warning<\/b> \([\d]+\)<\/a>: ([^\[]+)\[([^\]]+)\]/is,
+// 			result2 = html.match(re);
+// 		return {
+// 			title: result2[1],
+// 			line: result2[2],
+// 		};
+// 	}
+// 	return false;
+// }
+// function hasException(html) {
+// 	let result = /An Internal Error Has Occurred/is.test(html); // 'debug' mode is off
+// 	if (result) {
+// 		return {
+// 			title: 'An Internal Error Has Occurred',
+// 			line: null,
+// 		};
+// 	}
+
+// 	result = /Exception/ism.test(html) && /stack-trace/is.test(html); // 'debug' mode is on
+// 	if (result) {
+// 		// Try to determine error message
+// 		const re = /<h1 class="header-title">(.*)<\/h1>/is, // this is from DebugKit
+// 			result2 = html.match(re);
+// 		return {
+// 			title: result2[1],
+// 			line: result2[2],
+// 		};
+// 	}
+	
+// 	return false;
+// }