@onehat/ui 0.2.35 → 0.2.37

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.2.35",
+	"version": "0.2.37",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -19,7 +19,7 @@
 	},
 	"license": "UNLICENSED",
 	"dependencies": {
-		"@onehat/data": "^1.15.7",
+		"@onehat/data": "^1.16.0",
 		"@hookform/resolvers": "^2.9.11",
 		"ckeditor5-custom-build": "file:ckeditor5",
 		"js-cookie": "^3.0.1",

package/src/Components/Form/Form.js

@@ -9,11 +9,12 @@ import {
 	Text,
 } from 'native-base';
 import {
-	EDITOR_TYPE_INLINE,
-	EDITOR_TYPE_WINDOWED,
-	EDITOR_TYPE_SMART,
-	EDITOR_TYPE_PLAIN,
-} from '../../Constants/EditorTypes.js';
+	EDITOR_TYPE__INLINE,
+	EDITOR_TYPE__WINDOWED,
+	EDITOR_TYPE__SIDE,
+	EDITOR_TYPE__SMART,
+	EDITOR_TYPE__PLAIN,
+} from '../../Constants/Editor.js';
 import { useForm, Controller } from 'react-hook-form'; // https://react-hook-form.com/api/
 import * as yup from 'yup'; // https://github.com/jquense/yup#string
 import { yupResolver } from '@hookform/resolvers/yup';
@@ -32,27 +33,27 @@ import _ from 'lodash';
 // TODO: memoize field Components
 
 // Modes:
-// EDITOR_TYPE_INLINE
+// EDITOR_TYPE__INLINE
 // Form is a single scrollable row, based on columnsConfig and Repository
 //
-// EDITOR_TYPE_WINDOWED
+// EDITOR_TYPE__WINDOWED
 // Form is a popup window, used for editing items in a grid. Integrated with Repository
 //
-// EDITOR_TYPE_SMART
+// EDITOR_TYPE__SMART
 // Form is a standalone editor
 //
-// EDITOR_TYPE_PLAIN
+// EDITOR_TYPE__PLAIN
 // Form is embedded on screen in some other way. Mainly use startingValues, items, validator
 
 function Form(props) {
 	const
 		{
-			editorType = EDITOR_TYPE_WINDOWED, // EDITOR_TYPE_INLINE | EDITOR_TYPE_WINDOWED | EDITOR_TYPE_PLAIN
+			editorType = EDITOR_TYPE__WINDOWED, // EDITOR_TYPE__INLINE | EDITOR_TYPE__WINDOWED | EDITOR_TYPE__SIDE | EDITOR_TYPE__SMART | EDITOR_TYPE__PLAIN
 			startingValues = {},
 			items = [], // Columns, FieldSets, Fields, etc to define the form
 			columnDefaults = {}, // defaults for each Column defined in items (above)
-			columnsConfig, // Which columns are shown in Grid, so the inline editor can match. Used only for EDITOR_TYPE_INLINE
-			validator, // custom validator, mainly for EDITOR_TYPE_PLAIN
+			columnsConfig, // Which columns are shown in Grid, so the inline editor can match. Used only for EDITOR_TYPE__INLINE
+			validator, // custom validator, mainly for EDITOR_TYPE__PLAIN
 			footerProps = {},
 			buttonGroupProps = {}, // buttons in footer
 			
@@ -356,7 +357,7 @@ function Form(props) {
 												{...editorTypeProps}
 											/>;
 							if (error) {
-								if (editorType !== EDITOR_TYPE_INLINE) {
+								if (editorType !== EDITOR_TYPE__INLINE) {
 									element = <Column pt={1} flex={1}>
 												{element}
 												<Text color="#f00">{error.message}</Text>
@@ -367,7 +368,7 @@ function Form(props) {
 
 								}
 							}
-							if (label && editorType !== EDITOR_TYPE_INLINE) {
+							if (label && editorType !== EDITOR_TYPE__INLINE) {
 								const labelProps = {};
 								if (defaults?.labelWidth) {
 									labelProps.w = defaults.labelWidth;
@@ -385,7 +386,7 @@ function Form(props) {
 		},
 		onSubmitError = (errors, e) => {
 			debugger;
-			if (editorType === EDITOR_TYPE_INLINE) {
+			if (editorType === EDITOR_TYPE__INLINE) {
 				alert(errors.message);
 			}
 		};
@@ -429,7 +430,7 @@ function Form(props) {
 
 	let formComponents,
 		editor;
-	if (editorType === EDITOR_TYPE_INLINE) {
+	if (editorType === EDITOR_TYPE__INLINE) {
 		// for inline editor
 		formComponents = buildFromColumnsConfig();
 		editor = <ScrollView

package/src/Components/Grid/Grid.js

@@ -27,6 +27,7 @@ import withContextMenu from '../Hoc/withContextMenu.js';
 import withAlert from '../Hoc/withAlert.js';
 import withData from '../Hoc/withData.js';
 import withEvents from '../Hoc/withEvents.js';
+import withSideEditor from '../Hoc/withSideEditor.js';
 import withFilters from '../Hoc/withFilters.js';
 import withPresetButtons from '../Hoc/withPresetButtons.js';
 import withMultiSelection from '../Hoc/withMultiSelection.js';
@@ -839,6 +840,26 @@ export function Grid(props) {
 
 }
 
+export const SideGridEditor = withAlert(
+									withEvents(
+										withData(
+											withMultiSelection(
+												withSelection(
+													withSideEditor(
+														withFilters(
+															withPresetButtons(
+																withContextMenu(
+																	Grid
+																)
+															)
+														)
+													)
+												)
+											)
+										)
+									)
+								);
+
 export const WindowedGridEditor = withAlert(
 									withEvents(
 										withData(

package/src/Components/Hoc/withEditor.js

@@ -1,4 +1,9 @@
 import { useState, } from 'react';
+import {
+	EDITOR_VIEW_MODE__VIEW,
+	EDITOR_VIEW_MODE__ADD,
+	EDITOR_VIEW_MODE__EDIT,
+} from '../../Constants/Editor.js';
 import _ from 'lodash';
 
 export default function withEditor(WrappedComponent) {
@@ -33,6 +38,7 @@ export default function withEditor(WrappedComponent) {
 			[currentRecord, setCurrentRecord] = useState(null),
 			[isEditorShown, setIsEditorShown] = useState(false),
 			[isEditorViewOnly, setIsEditorViewOnly] = useState(false),
+			[editorViewMode, setEditorViewMode] = useState(EDITOR_VIEW_MODE__VIEW),
 			addRecord = async () => {
 				if (!userCanEdit) {
 					return;
@@ -42,6 +48,7 @@ export default function withEditor(WrappedComponent) {
 					entity = await Repository.add(defaultValues, false, true, true);
 				setSelection([entity]);
 				setIsEditorViewOnly(false);
+				setEditorViewMode(EDITOR_VIEW_MODE__ADD);
 				setIsEditorShown(true);
 			},
 			editRecord = () => {
@@ -49,6 +56,7 @@ export default function withEditor(WrappedComponent) {
 					return;
 				}
 				setIsEditorViewOnly(false);
+				setEditorViewMode(EDITOR_VIEW_MODE__EDIT);
 				setIsEditorShown(true);
 			},
 			deleteRecord = (e) => {
@@ -80,6 +88,7 @@ export default function withEditor(WrappedComponent) {
 					return;
 				}
 				setIsEditorViewOnly(true);
+				setEditorViewMode(EDITOR_VIEW_MODE__VIEW);
 				setIsEditorShown(true);
 			},
 			duplicateRecord = async () => {
@@ -138,6 +147,7 @@ export default function withEditor(WrappedComponent) {
 					setCurrentRecord={setCurrentRecord}
 					isEditorShown={isEditorShown}
 					isEditorViewOnly={isEditorViewOnly}
+					editorViewMode={editorViewMode}
 					setIsEditorShown={setIsEditorShown}
 					onAdd={addRecord}
 					onEdit={editRecord}

package/src/Components/Hoc/withInlineEditor.js

@@ -6,8 +6,8 @@ import {
 	Text,
 } from 'native-base';
 import {
-	EDITOR_TYPE_INLINE,
-} from '../../Constants/EditorTypes.js';
+	EDITOR_TYPE__INLINE,
+} from '../../Constants/Editor.js';
 import {
 	UI_MODE_WEB,
 	UI_MODE_REACT_NATIVE,
@@ -77,14 +77,14 @@ export default function withInlineEditor(WrappedComponent) {
 						onChangeColumnsConfig={onChangeColumnsConfig}
 						onEditorRowClick={onRowClick}
 					/>
-					{useEditor && editorType === EDITOR_TYPE_INLINE && Repository && 
+					{useEditor && editorType === EDITOR_TYPE__INLINE && Repository && 
 							<Modal
 								isOpen={isEditorShown}
 								onClose={() => setIsEditorShown(false)}
 							>
 								<Column position="absolute" ref={inlineEditorRef}>
 									{isEditorShown && <Form
-															editorType={EDITOR_TYPE_INLINE} 
+															editorType={EDITOR_TYPE__INLINE} 
 															record={selection[0]}
 															Repository={Repository}
 															isMultiple={selection.length > 1}

package/src/Components/Hoc/withSideEditor.js

@@ -0,0 +1,25 @@
+import {
+	EDITOR_TYPE__SIDE,
+} from '../../Constants/Editor.js';
+import Container from '../Container/Container.js';
+import withEditor from './withEditor.js';
+import _ from 'lodash';
+
+
+export default function withSideEditor(WrappedComponent) {
+	return withEditor((props) => {
+		const {
+				Editor,
+				editorProps = {},
+			} = props;
+
+		return <Container
+					center={<WrappedComponent {...props} />}
+					east={<Editor
+								editorType={EDITOR_TYPE__SIDE}
+								{...props}
+								{...editorProps}
+							/>}
+				/>;
+	});
+}

package/src/Components/Hoc/withWindowedEditor.js

@@ -4,8 +4,8 @@ import {
 	Text,
 } from 'native-base';
 import {
-	EDITOR_TYPE_WINDOWED,
-} from '../../Constants/EditorTypes.js';
+	EDITOR_TYPE__WINDOWED,
+} from '../../Constants/Editor.js';
 import withEditor from './withEditor.js';
 // import withDraggable from './withDraggable.js';
 import _ from 'lodash';
@@ -31,7 +31,8 @@ export default function withWindowedEditor(WrappedComponent) {
 				useEditor = false,
 				isEditorShown,
 				setIsEditorShown,
-				EditorWindow,
+				Editor,
+				editorProps = {},
 			} = props;
 
 		return <>
@@ -41,9 +42,10 @@ export default function withWindowedEditor(WrappedComponent) {
 							isOpen={true}
 							onClose={() => setIsEditorShown(false)}
 						>
-							<EditorWindow
-								editorType={EDITOR_TYPE_WINDOWED}
+							<Editor
+								editorType={EDITOR_TYPE__WINDOWED}
 								{...props}
+								{...editorProps}
 							/>
 						</Modal>}
 				</>;

package/src/Components/Panel/GridPanel.js

@@ -2,9 +2,10 @@ import { useEffect, useState, } from 'react';
 import Panel from './Panel.js';
 import Grid, { InlineGridEditor, } from '../Grid/Grid.js';
 import {
-	EDITOR_TYPE_INLINE,
-	EDITOR_TYPE_WINDOWED,
-} from '../../Constants/EditorTypes.js';
+	EDITOR_TYPE__INLINE,
+	EDITOR_TYPE__WINDOWED,
+	EDITOR_TYPE__SIDE,
+} from '../../Constants/Editor.js';
 import _ from 'lodash';
 
 export function GridPanel(props) {
@@ -14,7 +15,7 @@ export function GridPanel(props) {
 			selectorSelected,
 		} = props,
 		originalTitle = props.title,
-		WhichGrid = (editorType === EDITOR_TYPE_INLINE) ? InlineGridEditor : Grid,
+		WhichGrid = (editorType === EDITOR_TYPE__INLINE) ? InlineGridEditor : Grid,
 		[isReady, setIsReady] = useState(disableTitleChange),
 		[title, setTitle] = useState(originalTitle);
 

package/src/Constants/Editor.js

@@ -0,0 +1,8 @@
+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__SMART = 'EDITOR_TYPE__SMART';
+export const EDITOR_TYPE__PLAIN = 'EDITOR_TYPE__PLAIN';
+export const EDITOR_VIEW_MODE__VIEW = 'EDITOR_VIEW_MODE__VIEW';
+export const EDITOR_VIEW_MODE__ADD = 'EDITOR_VIEW_MODE__ADD';
+export const EDITOR_VIEW_MODE__EDIT = 'EDITOR_VIEW_MODE__EDIT';

package/src/Constants/EditorTypes.js

@@ -1,4 +0,0 @@
-export const EDITOR_TYPE_INLINE = 'EDITOR_TYPE_INLINE';
-export const EDITOR_TYPE_WINDOWED = 'EDITOR_TYPE_WINDOWED';
-export const EDITOR_TYPE_SMART = 'EDITOR_TYPE_SMART';
-export const EDITOR_TYPE_PLAIN = 'EDITOR_TYPE_PLAIN';