@onehat/ui 0.3.31 → 0.3.33

package/src/Components/Form/Form.js

@@ -1,7 +1,6 @@
 import { useEffect, useState, isValidElement, } from 'react';
 import {
 	Box,
-	Button,
 	Column,
 	Icon,
 	Row,
@@ -24,10 +23,12 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
 import UiGlobals from '../../UiGlobals.js';
 import withAlert from '../Hoc/withAlert.js';
+import withComponent from '../Hoc/withComponent.js';
 import withEditor from '../Hoc/withEditor.js';
 import withPdfButton from '../Hoc/withPdfButton.js';
 import inArray from '../../Functions/inArray.js';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
+import Button from '../Buttons/Button.js';
 import IconButton from '../Buttons/IconButton.js';
 import AngleLeft from '../Icons/AngleLeft.js';
 import Eye from '../Icons/Eye.js';
@@ -71,16 +72,20 @@ function Form(props) {
 			onViewMode,
 			submitBtnLabel,
 			onSubmit,
-			additionalEditButtons = [],
+			additionalEditButtons,
 			
 			// sizing of outer container
 			h,
 			maxHeight,
+			minHeight = 0,
 			w,
 			maxWidth,
 			flex,
 			onLayout, // onLayout handler for main view
 
+			// withComponent
+			self,
+
 			// withData
 			Repository,
 			
@@ -236,6 +241,8 @@ function Form(props) {
 																onBlur={onBlur}
 																flex={1}
 																{...editorProps}
+																parent={self}
+																reference={fieldName}
 																// {...defaults}
 																// {...propsToPass}
 															/>;
@@ -294,7 +301,7 @@ function Form(props) {
 							type: t,
 							...p
 						} =  propertyDef.viewerType;
-					type = t
+					type = t;
 				} else {
 					type = 'Text';
 				}
@@ -324,6 +331,8 @@ function Form(props) {
 				const value = (record && record[name]) || (startingValues && startingValues[name]) || null;
 				let element = <Element
 									value={value}
+									parent={self}
+									reference={name}
 									{...propsToPass}
 								/>;
 				if (label) {
@@ -400,6 +409,8 @@ function Form(props) {
 												}}
 												onBlur={onBlur}
 												flex={1}
+												parent={self}
+												reference={name}
 												{...defaults}
 												{...propsToPass}
 												{...editorTypeProps}
@@ -455,6 +466,7 @@ function Form(props) {
 										selectorSelected={selectorSelected || record}
 										flex={1}
 										uniqueRepository={true}
+										parent={self}
 										{...propsToPass}
 									/>;
 					if (title) {
@@ -468,6 +480,43 @@ function Form(props) {
 			}
 			return components;
 		},
+		buildAdditionalButtons = (configs) => {
+			const additionalButtons = [];
+			_.each(additionalEditButtons, (config) => {
+				const {
+						key,
+						text,
+						handler,
+						icon,
+						isDisabled,
+						color = '#fff',
+					} = config,
+					buttonProps = {};
+				if (key) {
+					buttonProps.key = key;
+					buttonProps.reference = key;
+				}
+				if (handler) {
+					buttonProps.onPress = handler;
+				}
+				if (icon) {
+					buttonProps.leftIcon = <Icon as={icon} color="#fff" size="sm" />;
+				}
+				if (isDisabled) {
+					buttonProps.isDisabled = isDisabled;
+				}
+				
+				const button = <Button
+									color={color}
+									ml={2}
+									parent={self}
+									reference={key}
+									{...buttonProps}
+								>{text}</Button>;
+				additionalButtons.push(button);
+			});
+			return additionalButtons;
+		},
 		onSubmitError = (errors, e) => {
 			debugger;
 			if (editorType === EDITOR_TYPE__INLINE) {
@@ -569,7 +618,7 @@ function Form(props) {
 	} else {
 		formComponents = buildFromItems();
 		const formAncillaryComponents = buildAncillary();
-		editor = <ScrollView _web={{ height: 1 }} width="100%" pb={1}>
+		editor = <ScrollView _web={{ minHeight, }} width="100%" pb={1}>
 					<Column p={4}>{formComponents}</Column>
 					<Column m={2} pt={4}>{formAncillaryComponents}</Column>
 				</ScrollView>;
@@ -603,11 +652,12 @@ function Form(props) {
 		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';
 	}
+
+	const additionalButtons = buildAdditionalButtons(additionalEditButtons);
 	
 	return <Column {...sizeProps} onLayout={onLayout}>
 
 				<Row px={4} pt={4} alignItems="center" justifyContent="flex-end">
-					{/* <Text mr={2} fontSize={18}>{editorModeF} Mode</Text> */}
 					{isSingle && editorMode === EDITOR_MODE__EDIT && onBack && 
 						<Button
 							key="backBtn"
@@ -623,9 +673,9 @@ function Form(props) {
 							color="#fff"
 						>To View</Button>}
 				</Row>
-				{editorMode === EDITOR_MODE__EDIT && !_.isEmpty(additionalEditButtons) && 
+				{editorMode === EDITOR_MODE__EDIT && !_.isEmpty(additionalButtons) && 
 					<Row p={4} alignItems="center" justifyContent="flex-end">
-						{additionalEditButtons}
+						{additionalButtons}
 					</Row>}
 				
 				{editor}
@@ -643,43 +693,41 @@ function Form(props) {
 								color="#fff"
 							>Delete</Button>
 						</Row>}
-					<Button.Group space={2} {...buttonGroupProps}>
 				
-						{!isEditorViewOnly && <IconButton
-											key="resetBtn"
-											onPress={() => {
-												if (onReset) {
-													onReset();
-												}
-												reset();
-											}}
-											icon={<Rotate color="#fff" />}
-										/>}
-						{!isEditorViewOnly && isSingle && onCancel && <Button
-														key="cancelBtn"
-														variant="ghost"
-														onPress={onCancel}
-														color="#fff"
-													>Cancel</Button>}
-						{!isEditorViewOnly && onSave && <Button
-														key="saveBtn"
-														onPress={(e) => handleSubmit(onSaveDecorated, onSubmitError)(e)}
-														isDisabled={isSaveDisabled}
-														color="#fff"
-													>{editorMode === EDITOR_MODE__ADD ? 'Add' : 'Save'}</Button>}
-						{onSubmit && <Button
-										key="submitBtn"
-										onPress={(e) => handleSubmit(onSubmitDecorated, onSubmitError)(e)}
-										isDisabled={isSubmitDisabled}
-										color="#fff"
-									>{submitBtnLabel || 'Submit'}</Button>}
-			
-						{isEditorViewOnly && onClose && editorType !== EDITOR_TYPE__SIDE && <Button
-														key="closeBtn"
-														onPress={onClose}
-														color="#fff"
-													>Close</Button>}
-					</Button.Group>
+					{!isEditorViewOnly && <IconButton
+										key="resetBtn"
+										onPress={() => {
+											if (onReset) {
+												onReset();
+											}
+											reset();
+										}}
+										icon={<Rotate color="#fff" />}
+									/>}
+					{!isEditorViewOnly && isSingle && onCancel && <Button
+													key="cancelBtn"
+													variant="ghost"
+													onPress={onCancel}
+													color="#fff"
+												>Cancel</Button>}
+					{!isEditorViewOnly && onSave && <Button
+													key="saveBtn"
+													onPress={(e) => handleSubmit(onSaveDecorated, onSubmitError)(e)}
+													isDisabled={isSaveDisabled}
+													color="#fff"
+												>{editorMode === EDITOR_MODE__ADD ? 'Add' : 'Save'}</Button>}
+					{onSubmit && <Button
+									key="submitBtn"
+									onPress={(e) => handleSubmit(onSubmitDecorated, onSubmitError)(e)}
+									isDisabled={isSubmitDisabled}
+									color="#fff"
+								>{submitBtnLabel || 'Submit'}</Button>}
+		
+					{isEditorViewOnly && onClose && editorType !== EDITOR_TYPE__SIDE && <Button
+													key="closeBtn"
+													onPress={onClose}
+													color="#fff"
+												>Close</Button>}
 				</Footer>
 			</Column>;
 }
@@ -728,6 +776,6 @@ function getNullFieldValues(initialValues, Repository) {
 	return ret;
 }
 
-export const FormEditor = withAlert(withEditor(withPdfButton(Form)));
+export const FormEditor = withComponent(withAlert(withEditor(withPdfButton(Form))));
 
-export default withAlert(withPdfButton(Form));
+export default withComponent(withAlert(withPdfButton(Form)));

package/src/Components/Grid/Grid.js

@@ -31,6 +31,7 @@ import UiGlobals from '../../UiGlobals.js';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
 import withContextMenu from '../Hoc/withContextMenu.js';
 import withAlert from '../Hoc/withAlert.js';
+import withComponent from '../Hoc/withComponent.js';
 import withData from '../Hoc/withData.js';
 import withEvents from '../Hoc/withEvents.js';
 import withSideEditor from '../Hoc/withSideEditor.js';
@@ -96,6 +97,9 @@ function GridComponent(props) {
 			flex,
 			bg,
 
+			// withComponent
+			self,
+
 			// withEditor
 			onAdd,
 			onEdit,
@@ -224,11 +228,13 @@ function GridComponent(props) {
 			}
 		},
 		getFooterToolbarItems = () => {
-			const items = _.map(additionalToolbarButtons, getIconButtonFromConfig);
+			const items = _.map(additionalToolbarButtons, (config, ix) => getIconButtonFromConfig(config, ix, self));
 
 			if (canRowsReorder) {
 				items.unshift(<IconButton
 					key="reorderBtn"
+					parent={self}
+					reference="reorderBtn"
 					onPress={() => setIsDragMode(!isDragMode)}
 					icon={<Icon as={isDragMode ? NoReorderRows : ReorderRows} color={styles.GRID_TOOLBAR_ITEMS_COLOR} />}
 				/>);
@@ -866,37 +872,41 @@ function GridComponent(props) {
 
 }
 
-export const Grid = withAlert(
-				withEvents(
-					withData(
-						withMultiSelection(
-							withSelection(
-								withFilters(
-									withPresetButtons(
-										withContextMenu(
-											GridComponent
-										),
-										true // isGrid
+export const Grid = withComponent(
+						withAlert(
+							withEvents(
+								withData(
+									withMultiSelection(
+										withSelection(
+											withFilters(
+												withPresetButtons(
+													withContextMenu(
+														GridComponent
+													),
+													true // isGrid
+												)
+											)
+										)
 									)
 								)
 							)
 						)
-					)
-				)
-			);
-
-export const SideGridEditor = withAlert(
-									withEvents(
-										withData(
-											withMultiSelection(
-												withSelection(
-													withSideEditor(
-														withFilters(
-															withPresetButtons(
-																withContextMenu(
-																	GridComponent
-																),
-																true // isGrid
+					);
+
+export const SideGridEditor = withComponent(
+									withAlert(
+										withEvents(
+											withData(
+												withMultiSelection(
+													withSelection(
+														withSideEditor(
+															withFilters(
+																withPresetButtons(
+																	withContextMenu(
+																		GridComponent
+																	),
+																	true // isGrid
+																)
 															)
 														)
 													)
@@ -906,18 +916,20 @@ export const SideGridEditor = withAlert(
 									)
 								);
 
-export const WindowedGridEditor = withAlert(
-									withEvents(
-										withData(
-											withMultiSelection(
-												withSelection(
-													withWindowedEditor(
-														withFilters(
-															withPresetButtons(
-																withContextMenu(
-																	GridComponent
-																),
-																true // isGrid
+export const WindowedGridEditor = withComponent(
+									withAlert(
+										withEvents(
+											withData(
+												withMultiSelection(
+													withSelection(
+														withWindowedEditor(
+															withFilters(
+																withPresetButtons(
+																	withContextMenu(
+																		GridComponent
+																	),
+																	true // isGrid
+																)
 															)
 														)
 													)
@@ -927,19 +939,21 @@ export const WindowedGridEditor = withAlert(
 									)
 								);
 
-export const InlineGridEditor = withAlert(
-									withEvents(
-										withData(
-											withMultiSelection(
-												withSelection(
-													withInlineEditor(
-														withFilters(
-															withPresetButtons(
-																withContextMenu(
-																	GridComponent
-																)
-															),
-															true // isGrid
+export const InlineGridEditor = withComponent(
+									withAlert(
+										withEvents(
+											withData(
+												withMultiSelection(
+													withSelection(
+														withInlineEditor(
+															withFilters(
+																withPresetButtons(
+																	withContextMenu(
+																		GridComponent
+																	)
+																),
+																true // isGrid
+															)
 														)
 													)
 												)

package/src/Components/Grid/GridHeaderRow.js

@@ -327,6 +327,10 @@ export default function GridHeaderRow(props) {
 						propsToPass.minWidth = styles.INLINE_EDITOR_MIN_WIDTH;
 					}
 
+					const textProps = {};
+					if (UiGlobals.mode === UI_MODE_WEB) {
+						textProps.textOverflow = 'ellipsis';
+					}
 					return <Pressable
 								key={ix}
 								onPress={(e) => {
@@ -375,12 +379,10 @@ export default function GridHeaderRow(props) {
 													return proxy;
 												}}
 											/>}
-								
 								<Text
 									key="Text"
 									fontSize={styles.GRID_HEADER_FONTSIZE}
 									overflow="hidden"
-									textOverflow="ellipsis"
 									flex={1}
 									h="100%"
 									px={styles.GRID_HEADER_CELL_PX}
@@ -389,6 +391,7 @@ export default function GridHeaderRow(props) {
 									justifyContent="center"
 									numberOfLines={1}
 									ellipsizeMode="head"
+									{...textProps}
 								>{header}</Text>
 								
 								{isSorter && <Icon key="Icon" as={isSortDirectionAsc ? SortDown : SortUp} textAlign="center" size="sm" mt={3} mr={2} color="trueGray.500" />}

package/src/Components/Grid/GridRow.js

@@ -7,6 +7,9 @@ import {
 import {
 	VERTICAL,
 } from '../../Constants/Directions.js';
+import {
+	UI_MODE_WEB,
+} from '../../Constants/UiModes.js';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
 import UiGlobals from '../../UiGlobals.js';
 import withDraggable from '../Hoc/withDraggable.js';
@@ -100,11 +103,14 @@ export default function GridRow(props) {
 
 									if (property?.viewerType?.type) {
 										const Element = getComponentFromType(property?.viewerType?.type);
+										const elementProps = {};
+										if (UiGlobals.mode === UI_MODE_WEB) {
+											elementProps.textOverflow = 'ellipsis';
+										}
 										return <Element
 													value={value}
 													key={key}
 													overflow="hidden"
-													textOverflow="ellipsis"
 													alignSelf="center"
 													style={{
 														userSelect: 'none',
@@ -115,7 +121,7 @@ export default function GridRow(props) {
 													numberOfLines={1}
 													ellipsizeMode="head"
 													{...propsToPass}
-													{...propsToPass}
+													{...elementProps}
 												/>;
 									}
 								} else if (item[config.fieldName]) {

package/src/Components/Hoc/withAlert.js

@@ -168,9 +168,7 @@ export default function withAlert(WrappedComponent) {
 								</Row>
 							</AlertDialog.Body>
 							<AlertDialog.Footer>
-								<Button.Group space={2}>
-									{buttons}
-								</Button.Group>
+								{buttons}
 							</AlertDialog.Footer>
 						</AlertDialog.Content>
 					</AlertDialog>

package/src/Components/Hoc/withComponent.js

@@ -0,0 +1,65 @@
+import React, { useState, useRef, useEffect, } from 'react';
+import _ from 'lodash';
+
+// This HOC establishes a parent-child relationship between components.
+// Basically anything wrapped in withComponent registers itself with a parent
+// and allows children to register.
+
+export default function withComponent(WrappedComponent) {
+	return (props) => {
+		const {
+				// self: parent,
+				parent,
+				componentMethods,
+				...propsToPass
+			} = props,
+			{ reference } = props,
+			childrenRef = useRef({}),
+			selfRef = useRef({
+				parent,
+				reference,
+				registerChild: (childRef) => {
+					const {
+							reference,
+						} = childRef;
+					if (typeof childrenRef.current[reference] !== 'undefined') {
+						throw Error('reference already exists!');
+					}
+					childrenRef.current[reference] = childRef; // so we can do component addresses like self.children.workOrdersGridEditor
+				},
+				unregisterChild: (childRef) => {
+					const {
+							reference,
+						} = childRef;
+					if (typeof childrenRef.current[reference] !== 'undefined') {
+						delete childrenRef.current[reference];
+					}
+				},
+				children: childrenRef.current,
+			});
+
+		useEffect(() => {
+			if (componentMethods) {
+				_.each(componentMethods, (method, name) => {
+					selfRef.current[name] = method;
+				});
+			}
+			if (parent && reference) {
+				parent.registerChild(selfRef.current);
+			}
+			return () => {
+				if (parent && reference) {
+					parent.unregisterChild(selfRef.current);
+				}
+				childrenRef.current = {};
+			};
+		}, []);
+
+		return <WrappedComponent
+					// parent={parent}
+					self={selfRef.current}
+					{...propsToPass}
+				/>;
+
+	};
+}

package/src/Components/Hoc/withData.js

@@ -28,6 +28,9 @@ export default function withData(WrappedComponent) {
 				displayField = 'value',
 				idIx,
 				displayIx,
+
+				// withComponent
+				self,
 			} = props,
 			propsToPass = _.omit(props, ['model']), // passing 'model' would mess things up if withData gets called twice (e.g. withData(...withData(...)) ), as we'd be trying to recreate Repository twice
 			localIdIx = idIx || (fields && idField ? fields.indexOf(idField) : null),
@@ -64,6 +67,9 @@ export default function withData(WrappedComponent) {
 				if (setRepository) { // pass it on up to higher components
 					setRepository(Repository);
 				}
+				if (self) {
+					self.repository = Repository;
+				}
 				setIsReady(true);
 			})();