@onehat/ui 0.3.240 → 0.3.241

package/package.json

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

package/src/Components/Form/Form.js

@@ -193,6 +193,7 @@ function Form(props) {
 			_.each(columnsConfig, (config, ix) => {
 				let {
 						fieldName,
+						editField,
 						isEditable,
 						editor,
 						renderer,
@@ -211,9 +212,10 @@ function Form(props) {
 										<Text numberOfLines={1} ellipsizeMode="head">{renderedValue}</Text>
 									</Box>);
 				} else {
+					const fieldToEdit = editField || fieldName;
 					elements.push(<Controller
 										key={'controller-' + ix}
-										name={fieldName}
+										name={fieldToEdit}
 										// rules={rules}
 										control={control}
 										render={(args) => {
@@ -236,7 +238,7 @@ function Form(props) {
 												} = fieldState;
 											let editorProps = {};
 											if (!editor) {
-												const propertyDef = fieldName && Repository?.getSchema().getPropertyDefinition(fieldName);
+												const propertyDef = fieldToEdit && Repository?.getSchema().getPropertyDefinition(fieldToEdit);
 												editor = propertyDef?.editorType;
 												if (_.isPlainObject(editor)) {
 													const {
@@ -277,10 +279,13 @@ function Form(props) {
 																onBlur={onBlur}
 																flex={1}
 																parent={self}
-																reference={fieldName}
+																reference={fieldToEdit}
 																{...editorProps}
 															/>;
 
+											if (editor.match(/Tag/)) {
+												columnProps.overflow = 'auto';
+											}
 											// element = <Tooltip key={ix} label={header} placement="bottom">
 											// 				{element}
 											// 			</Tooltip>;
@@ -901,7 +906,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';
@@ -1155,4 +1156,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,
@@ -84,9 +84,15 @@ export default function withInlineEditor(WrappedComponent) {
 
 				editorStyle.top = (-1 * delta) + 'px';
 			};
+		
+		useEffect(() => {
+			if (maskRef.current) {
+				maskRef.current.focus();
+			}
+		}, [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 +120,12 @@ export default function withInlineEditor(WrappedComponent) {
 														e.stopPropagation();
 														onEditorCancel();
 													}}
+													tabIndex={-1}
+													onKeyDown={(e) => {
+														if (e.key === 'Escape') {
+															onEditorCancel();
+														}
+													}}
 												></Box>}
 								<Column
 									ref={inlineEditorRef}
@@ -158,5 +170,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';