@onehat/ui 0.3.240 → 0.3.242

package/package.json

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

package/src/Components/Form/Form.js

@@ -173,129 +173,197 @@ function Form(props) {
 			context: { isPhantom },
 		}),
 		buildFromColumnsConfig = () => {
-			// For InlineEditor
+			// Only used in InlineEditor
 			// Build the fields that match the current columnsConfig in the grid
 			const
-				model = Repository.getSchema().model,
 				elements = [],
-				columnProps = {
+				columnProps = { // props applied to every column
 					justifyContent: 'center',
 					alignItems: 'center',
 					borderRightWidth: 1,
 					borderRightColor: 'trueGray.200',
 					px: 1,
+					minWidth: styles.INLINE_EDITOR_MIN_WIDTH,
 				};
-
-			if (editorType === EDITOR_TYPE__INLINE) {
-				columnProps.minWidth = styles.INLINE_EDITOR_MIN_WIDTH;
-			}
-
 			_.each(columnsConfig, (config, ix) => {
 				let {
 						fieldName,
-						isEditable,
-						editor,
+						isEditable = false,
+						editor = null,
+						editField,
 						renderer,
 						w,
 						flex,
+						onChange: onEditorChange,
 						useSelectorId = false,
-					} = config;
-
-				if (!isEditable) {
-					let renderedValue = renderer ? renderer(record) : record[fieldName];
-					if (_.isBoolean(renderedValue)) {
-						renderedValue = renderedValue.toString();
+						getDynamicProps,
+						getIsRequired,
+						...propsToPass
+					} = config,
+					type,
+					editorTypeProps = {},
+					viewerTypeProps = {};
+				
+				if (editField) {
+					// Sometimes, columns will be configured to display one field
+					// and edit a different field
+					fieldName = editField;
+				}
+				const propertyDef = fieldName && Repository?.getSchema().getPropertyDefinition(fieldName);
+				if (propertyDef?.isEditingDisabled && checkIsEditingDisabled) {
+					isEditable = false;
+				}
+				if (!_.isNil(editor)) {
+					// if editor is defined on column, use it
+					if (_.isString(editor)) {
+						type = editor;
+					} else if (_.isPlainObject(editor)) {
+						const {
+								type: t,
+								...p
+							} = editor;
+						type = t;
+						editorTypeProps = p;
 					}
-					renderedValue += "\n(not editable)";
-					elements.push(<Box key={ix} w={w} flex={flex} {...columnProps}>
-										<Text numberOfLines={1} ellipsizeMode="head">{renderedValue}</Text>
-									</Box>);
 				} else {
-					elements.push(<Controller
-										key={'controller-' + ix}
-										name={fieldName}
-										// rules={rules}
-										control={control}
-										render={(args) => {
-											const {
-													field,
-													fieldState,
-													// formState,
-												} = args,
-												{
-													onChange,
-													onBlur,
-													name,
-													value,
-													// ref,
-												} = field,
-												{
-													isTouched,
-													isDirty,
-													error,
-												} = fieldState;
-											let editorProps = {};
-											if (!editor) {
-												const propertyDef = fieldName && Repository?.getSchema().getPropertyDefinition(fieldName);
-												editor = propertyDef?.editorType;
-												if (_.isPlainObject(editor)) {
-													const {
-															type,
-															onChange: onEditorChange,
-															...p
-														} = editor;
-													editorProps = p;
-													editor = type;
-												}
-											}
-											if (!editor) {
-												editor = 'Text';
-											}
-											if (!editor.match(/Toggle/)) {
-												editorProps.h = '40px'; // Toggle height gets applied incorrectly; just skip it
-											}
+					// editor is not defined, fall back to property definition
+					if (isEditable) {
+						const
+							{
+								type: t,
+								...p
+							} = propertyDef?.editorType;
+						type = t;
+						editorTypeProps = p;
+					} else if (propertyDef?.viewerType) {
+						const
+							{
+								type: t,
+								...p
+							} =  propertyDef?.viewerType;
+						type = t;
+						viewerTypeProps = p;
+					} else {
+						type = 'Text';
+					}
+				}
+				const isCombo = type?.match && type.match(/Combo/);
+				if (config.hasOwnProperty('autoLoad')) {
+					editorTypeProps.autoLoad = config.autoLoad;
+				} else {
+					if (isCombo && Repository?.isRemote && !Repository?.isLoaded) {
+						editorTypeProps.autoLoad = true;
+					}
+				}
+				if (isCombo) {
+					// editorTypeProps.showEyeButton = true;
+					if (_.isNil(propsToPass.showXButton)) {
+						editorTypeProps.showXButton = true;
+					}
+				}
+				const Element = getComponentFromType(type);
 
-											const Element = getComponentFromType(editor);
+				if (isEditorViewOnly || !isEditable) {
+					let value = null;
+					if (renderer) {
+						value = renderer(record);
+					} else {
+						if (record?.properties && record.properties[fieldName]) {
+							value = record.properties[fieldName].displayValue;
+						}
+						if (_.isNil(value) && record && record[fieldName]) {
+							value = record[fieldName];
+						}
+						if (_.isNil(value) && startingValues && startingValues[fieldName]) {
+							value = startingValues[fieldName];
+						}
+					}
 
-											if (useSelectorId) {
-												editorProps.selectorId = selectorId;
-												editorProps.selectorSelected = editorProps;
-											}
-											
-											let element = <Element
-																name={name}
-																value={value}
-																onChangeValue={(newValue) => {
-																	if (newValue === undefined) {
-																		newValue = null; // React Hook Form doesn't respond well when setting value to undefined
-																	}
-																	onChange(newValue);
-																	if (typeof onEditorChange !== 'undefined' && onEditorChange) {
-																		onEditorChange(newValue, formSetValue, formGetValues, formState);
-																	}
-																}}
-																onBlur={onBlur}
-																flex={1}
-																parent={self}
-																reference={fieldName}
-																{...editorProps}
-															/>;
-
-											// element = <Tooltip key={ix} label={header} placement="bottom">
-											// 				{element}
-											// 			</Tooltip>;
-											// if (error) {
-											// 	element = <Column pt={1} flex={1}>
-											// 				{element}
-											// 				<Text color="#f00">{error.message}</Text>
-											// 			</Column>;
-											// }
-
-											const dirtyIcon = isDirty && !disableDirtyIcon ? <Icon as={Pencil} size="2xs" color="trueGray.300" position="absolute" top="2px" left="2px" /> : null;
-											return <Row key={ix} bg={error ? '#fdd' : '#fff'} w={w} flex={flex} {...columnProps}>{dirtyIcon}{element}</Row>;
-										}}
-									/>);
+					let element = <Element
+										value={value}
+										parent={self}
+										reference={fieldName}
+										{...propsToPass}
+										{...viewerTypeProps}
+									/>;
+					elements.push(<Box key={ix} w={w} flex={flex} {...columnProps}>{element}</Box>);
+					return;
 				}
+
+				elements.push(<Controller
+									key={'controller-' + ix}
+									name={fieldName}
+									// rules={rules}
+									control={control}
+									render={(args) => {
+										const {
+												field,
+												fieldState,
+												// formState,
+											} = args,
+											{
+												onChange,
+												onBlur,
+												name,
+												value,
+												// ref,
+											} = field,
+											{
+												isTouched,
+												isDirty,
+												error,
+											} = fieldState;
+
+										if (isValidElement(Element)) {
+											throw new Error('Should not yet be valid React element. Did you use <Element> instead of () => <Element> when defining it?')
+										}
+
+										if (useSelectorId) { // This causes the whole form to use selectorId
+											editorTypeProps.selectorId = selectorId;
+										}
+										if (propsToPass.selectorId || editorTypeProps.selectorId) { // editorTypeProps.selectorId causes just this one field to use selectorId
+											if (_.isNil(propsToPass.selectorSelected)) {
+												editorTypeProps.selectorSelected = record;
+											}
+										}
+										let dynamicProps = {};
+										if (getDynamicProps) {
+											dynamicProps = getDynamicProps({ fieldState, formSetValue, formGetValues, formState });
+										}
+
+										if (type.match(/Tag/)) {
+											editorTypeProps.overflow = 'auto';
+										}
+										if (!type.match(/Toggle/)) {
+											editorTypeProps.h = '40px';
+										}
+
+										let element = <Element
+															name={name}
+															value={value}
+															onChangeValue={(newValue) => {
+																if (newValue === undefined) {
+																	newValue = null; // React Hook Form doesn't respond well when setting value to undefined
+																}
+																onChange(newValue);
+																if (onEditorChange) {
+																	onEditorChange(newValue, formSetValue, formGetValues, formState, trigger);
+																}
+															}}
+															onBlur={onBlur}
+															flex={1}
+															parent={self}
+															reference={name}
+															{...propsToPass}
+															{...editorTypeProps}
+															{...dynamicProps}
+														/>;
+
+										const dirtyIcon = isDirty && !disableDirtyIcon ? <Icon as={Pencil} size="2xs" color="trueGray.300" position="absolute" top="2px" left="2px" /> : null;
+										return <Row key={ix} bg={error ? '#fdd' : '#fff'} w={w} flex={flex} {...columnProps}>{dirtyIcon}{element}</Row>;
+									}}
+								/>);
+			
 			});
 			return <Row>{elements}</Row>;
 		},
@@ -323,7 +391,8 @@ function Form(props) {
 					getIsRequired,
 					...propsToPass
 				} = item,
-				editorTypeProps = {};
+				editorTypeProps = {},
+				viewerTypeProps = {};
 
 			if (isHidden) {
 				return null;
@@ -354,6 +423,7 @@ function Form(props) {
 							...p
 						} =  propertyDef?.viewerType;
 					type = t;
+					viewerTypeProps = p;
 				} else {
 					type = 'Text';
 				}
@@ -373,9 +443,9 @@ function Form(props) {
 				}
 			}
 			const Element = getComponentFromType(type);
-			let children;
 			
 			if (inArray(type, ['Column', 'Row', 'FieldSet'])) {
+				let children;
 				if (_.isEmpty(items)) {
 					return null;
 				}
@@ -427,6 +497,7 @@ function Form(props) {
 									parent={self}
 									reference={name}
 									{...propsToPass}
+									{...viewerTypeProps}
 								/>;
 				if (!disableLabels && label) {
 					const labelProps = {};
@@ -487,6 +558,7 @@ function Form(props) {
 									isDirty,
 									error,
 								} = fieldState;
+							
 							if (isValidElement(Element)) {
 								throw new Error('Should not yet be valid React element. Did you use <Element> instead of () => <Element> when defining it?')
 							}
@@ -901,7 +973,7 @@ function Form(props) {
 							{editor}
 						</ScrollView>}
 					
-					<Footer justifyContent="flex-end" {...footerProps}  {...savingProps}>
+					<Footer justifyContent="flex-end" {...footerProps} {...savingProps}>
 						{onDelete && editorMode === EDITOR_MODE__EDIT && isSingle &&
 
 							<Row flex={1} justifyContent="flex-start">

package/src/Components/Grid/Grid.js

@@ -44,6 +44,7 @@ import withMultiSelection from '../Hoc/withMultiSelection.js';
 import withSelection from '../Hoc/withSelection.js';
 import withWindowedEditor from '../Hoc/withWindowedEditor.js';
 import withInlineEditor from '../Hoc/withInlineEditor.js';
+import withInlineSideEditor from '../Hoc/withInlineSideEditor.js';
 import getSaved from '../../Functions/getSaved.js';
 import setSaved from '../../Functions/setSaved.js';
 import getIconButtonFromConfig from '../../Functions/getIconButtonFromConfig.js';
@@ -886,6 +887,7 @@ function GridComponent(props) {
 
 	if (self) {
 		self.ref = containerRef;
+		self.gridRef = gridRef;
 	}
 
 	isAddingRef.current = isAdding;
@@ -1155,4 +1157,29 @@ export const InlineGridEditor = withComponent(
 									)
 								);
 
+// export const InlineSideGridEditor = withComponent(
+// 									withAlert(
+// 										withEvents(
+// 											withData(
+// 												withDropTarget(
+// 													withMultiSelection(
+// 														withSelection(
+// 															withInlineSideEditor(
+// 																withFilters(
+// 																	withPresetButtons(
+// 																		withContextMenu(
+// 																			GridComponent
+// 																		)
+// 																	),
+// 																	true // isGrid
+// 																)
+// 															)
+// 														)
+// 													)
+// 												)
+// 											)
+// 										)
+// 									)
+// 								);
+
 export default Grid;

package/src/Components/Hoc/withInlineEditor.js

@@ -31,10 +31,10 @@ function withAdditionalProps(WrappedComponent) {
 }
 
 // NOTE: Effectivtly, the HOC composition is:
-// withAdditionalProps(withEditor(withWindowedEditor))
+// withAdditionalProps(withEditor(withInlineEditor))
 
-export default function withInlineEditor(WrappedComponent) {
-	return withAdditionalProps(withEditor((props) => {
+export default function withInlineEditor(WrappedComponent, skipWrappers = false) {
+	const InlineEditor = (props) => {
 		const {
 				editorType,
 				isEditorShown = false,
@@ -62,13 +62,6 @@ export default function withInlineEditor(WrappedComponent) {
 			onChangeColumnsConfig = (columnsConfig) => {
 				setLocalColumnsConfig(columnsConfig);
 			},
-			onRowClick = (item, rowIndex, e) => {
-				// move the editor up to the appropriate row
-				const currentRow = e.currentTarget;
-				moveEditor(currentRow);
-
-				setCurrentRow(currentRow);
-			},
 			onScreenResize = () => {
 				// TODO: Attach a div with zIndex 0 to body to monitor resize events. THis is handler
 
@@ -83,10 +76,32 @@ export default function withInlineEditor(WrappedComponent) {
 					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) {
-			throw new Error('Lost the selection!');
+			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!');
@@ -114,6 +129,12 @@ export default function withInlineEditor(WrappedComponent) {
 														e.stopPropagation();
 														onEditorCancel();
 													}}
+													tabIndex={-1}
+													onKeyDown={(e) => {
+														if (e.key === 'Escape') {
+															onEditorCancel();
+														}
+													}}
 												></Box>}
 								<Column
 									ref={inlineEditorRef}
@@ -158,5 +179,9 @@ export default function withInlineEditor(WrappedComponent) {
 					inlineEditor={inlineEditor}
 					isInlineEditorShown={isEditorShown}
 				/>;
-	}));
+	};
+	if (skipWrappers) {
+		return InlineEditor; // this is for InlineSideEditor, not yet implemented
+	}
+	return withAdditionalProps(withEditor(InlineEditor));
 }

package/src/Components/Hoc/withInlineSideEditor.js

@@ -0,0 +1,9 @@
+
+import withInlineEditor from './withInlineEditor.js';
+import withSideEditor from './withSideEditor.js';
+
+
+export default function withInlineSideEditor(WrappedComponent) {
+	throw Error('Not yet implemented');
+	return withSideEditor(withInlineEditor(WrappedComponent, true));
+}

package/src/Components/Hoc/withSideEditor.js

@@ -20,7 +20,7 @@ function withAdditionalProps(WrappedComponent) {
 // withAdditionalProps(withEditor(withSideEditor))
 
 export default function withSideEditor(WrappedComponent, isTree = false) {
-	return withAdditionalProps(withEditor((props) => {
+	const SideEditor = (props) => {
 		const {
 				Editor,
 				editorProps = {},
@@ -57,5 +57,6 @@ export default function withSideEditor(WrappedComponent, isTree = false) {
 								reference="editor"
 							/>}
 				/>;
-	}));
+	};
+	return withAdditionalProps(withEditor(SideEditor));
 }

package/src/Components/Hoc/withWindowedEditor.js

@@ -42,7 +42,7 @@ function withAdditionalProps(WrappedComponent) {
 // withAdditionalProps(withEditor(withWindowedEditor))
 
 export default function withWindowedEditor(WrappedComponent, isTree = false) {
-	return withAdditionalProps(withEditor((props) => {
+	const WindowedEditor = (props) => {
 		const {
 				isEditorShown = false,
 				setIsEditorShown,
@@ -81,5 +81,6 @@ export default function withWindowedEditor(WrappedComponent, isTree = false) {
 							/>
 						</Modal>}
 				</>;
-	}, isTree));
+	};
+	return withAdditionalProps(withEditor(WindowedEditor, isTree));
 }

package/src/Constants/Editor.js

@@ -1,6 +1,7 @@
 export const EDITOR_TYPE__INLINE = 'EDITOR_TYPE__INLINE';
 export const EDITOR_TYPE__WINDOWED = 'EDITOR_TYPE__WINDOWED';
 export const EDITOR_TYPE__SIDE = 'EDITOR_TYPE__SIDE';
+export const EDITOR_TYPE__INLINE_SIDE = 'EDITOR_TYPE__INLINE_SIDE';
 export const EDITOR_TYPE__SMART = 'EDITOR_TYPE__SMART';
 export const EDITOR_TYPE__PLAIN = 'EDITOR_TYPE__PLAIN';
 export const EDITOR_MODE__VIEW = 'EDITOR_MODE__VIEW';