@onehat/ui 0.2.81 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.2.81",
+	"version": "0.3.0",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -25,12 +25,14 @@
 	},
 	"license": "UNLICENSED",
 	"dependencies": {
-		"@onehat/data": "^1.18.7",
-		"@hookform/resolvers": "^3.1.1",
+		"@onehat/data": "^1.19.0",
+		"@hookform/resolvers": "^3.3.1",
 		"@k-renwick/colour-mixer": "^1.2.1",
+		"@reduxjs/toolkit": "^1.9.5",
 		"js-cookie": "^3.0.5",
 		"native-base": "^3.4.28",
 		"react-hook-form": "^7.45.0",
+		"react-redux": "^8.1.2",
 		"yup": "^1.2.0"
 	},
 	"peerDependencies": {

package/src/Components/Editor/Editor.js

@@ -1,3 +1,6 @@
+import {
+	Box,
+} from 'native-base';
 import {
 	EDITOR_MODE__VIEW,
 } from '../../Constants/Editor.js';
@@ -25,10 +28,11 @@ export default function Editor(props) {
 		} = props;
 
 	if (_.isEmpty(selection)) {
-		return null;
+		return null; // hide the editor when no selection
+		return <Box {...props} bg="#ddd" />;
 	}
 
-	if (Repository.isRemotePhantomMode && selection.length === 1 && editorMode === EDITOR_MODE__VIEW) {
+	if (Repository?.isRemotePhantomMode && selection.length === 1 && editorMode === EDITOR_MODE__VIEW) {
 		return <Viewer
 					{...props}
 					record={selection[0]}

package/src/Components/Editor/Viewer.js

@@ -31,6 +31,7 @@ export default function Viewer(props) {
 			onDelete,
 		} = props,
 		styles = UiGlobals.styles,
+		flex = props.flex || 1,
 		buildAncillary = () => {
 			let components = [];
 			if (ancillaryItems.length) {
@@ -55,14 +56,14 @@ export default function Viewer(props) {
 									fontWeight="bold"
 								>{title}</Text>;
 					}
-					return <Column key={'ancillary-' + ix} px={2} pb={1}>{title}{element}</Column>;
+					return <Column key={'ancillary-' + ix} my={5}>{title}{element}</Column>;
 				});
 			}
 			return components;
 		};
 
-	return <Column flex={1} w="100%">
-				<ScrollView flex={1} w="100%">
+	return <Column flex={flex} {...props}>
+				<ScrollView width="100%" _web={{ height: 1 }}>
 					<Column m={2}>
 						{onEditMode && <Row mb={4} justifyContent="flex-end">
 											<Button

package/src/Components/Form/Form.js

@@ -287,12 +287,14 @@ function Form(props) {
 				return <Element key={ix} title={title} {...defaults} {...propsToPass} {...editorTypeProps}>{children}</Element>;
 			}
 
+			if (!label && Repository && model[name].title) {
+				label = model[name].title;
+			}
+
 			if (isViewOnly || !isEditable) {
-				const Text = getComponentFromType('Text');
-				if (!label && Repository && model.titles?.[name]) {
-					label = model.titles[name];
-				}
-				const value = (record && record[name]) || (startingValues && startingValues[name]) || null;
+				const
+					Text = getComponentFromType('Text'),
+					value = (record && record[name]) || (startingValues && startingValues[name]) || null;
 				let element = <Text
 									value={value}
 									{...propsToPass}
@@ -307,9 +309,6 @@ function Form(props) {
 				return <Row key={ix} px={2} pb={1}>{element}</Row>;
 			}
 
-			if (!label && Repository && model.titles?.[name]) {
-				label = model.titles[name];
-			}
 
 		
 			// // These rules are for fields *outside* the model
@@ -427,7 +426,7 @@ function Form(props) {
 									fontWeight="bold"
 								>{title}</Text>;
 					}
-					return <Column key={'ancillary-' + ix} px={2} pb={1}>{title}{element}</Column>;
+					return <Column key={'ancillary-' + ix} mx={2} my={5}>{title}{element}</Column>;
 				});
 			}
 			return components;
@@ -499,7 +498,7 @@ function Form(props) {
 		// for all other editor types
 		formComponents = buildFromItems();
 		const formAncillaryComponents = buildAncillary();
-		editor = <ScrollView flex={1} width="100%" pb={1}>
+		editor = <ScrollView _web={{ height: 1 }} width="100%" pb={1}>
 					<Row>{formComponents}</Row>
 					<Column pt={4}>{formAncillaryComponents}</Column>
 				</ScrollView>;

package/src/Components/Grid/Grid.js

@@ -774,6 +774,8 @@ function GridComponent(props) {
 				{...testProps('Grid')}
 				w="100%"
 				bg={bg}
+				borderWidth={styles.GRID_BORDER_WIDTH}
+				borderColor={styles.GRID_BORDER_COLOR}
 				{...sizeProps}
 			>
 				{topToolbar}

package/src/Components/Hoc/withEditor.js

@@ -52,6 +52,17 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			[isEditorShown, setIsEditorShown] = useState(false),
 			[isEditorViewOnly, setIsEditorViewOnly] = useState(false),
 			[lastSelection, setLastSelection] = useState(),
+			setSelectionDecorated = (newSelection) => {
+				function doIt() {
+					setSelection(newSelection);
+				}
+				const formState = editorStateRef.current;
+				if (!_.isEmpty(formState?.dirtyFields) && newSelection !== selection && editorMode === EDITOR_MODE__EDIT) {
+					confirm('This record has unsaved changes. Are you sure you want to cancel editing? Changes will be lost.', doIt);
+				} else {
+					doIt();
+				}
+			},
 			getListeners = () => {
 				return listeners.current;
 			},
@@ -342,6 +353,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					disableDelete={disableDelete}
 					disableDuplicate={disableDuplicate}
 					disableView ={disableView}
+					setSelection={setSelectionDecorated}
 				/>;
 	};
 }

package/src/Components/Hoc/withSideEditor.js

@@ -1,4 +1,3 @@
-import { useState, } from 'react';
 import {
 	EDITOR_TYPE__SIDE,
 } from '../../Constants/Editor.js';
@@ -13,9 +12,7 @@ export default function withSideEditor(WrappedComponent, isTree = false) {
 				Editor,
 				editorProps = {},
 				sideFlex = 100,
-			} = props,
-			[selection, setSelection] = useState(null);
-
+			} = props;
 
 		if (!Editor) {
 			throw Error('Editor is not defined');
@@ -25,13 +22,13 @@ export default function withSideEditor(WrappedComponent, isTree = false) {
 					center={<WrappedComponent
 								isTree={isTree}
 								{...props}
-								onSelectionChange={setSelection}	
 							/>}
 					east={<Editor
+								{...props}
 								editorType={EDITOR_TYPE__SIDE}
 								flex={sideFlex}
-								selection={selection} // This needs to be whatever the selection is in the center component
-								// {...props}
+								borderLeftWidth={1}
+								borderLeftColor="#ccc"
 								{...editorProps}
 							/>}
 				/>;

package/src/Components/Panel/GridPanel.js

@@ -28,7 +28,11 @@ export function GridPanel(props) {
 		}
 	}
 
-	return <Panel {...props} {..._panel}>
+	if (!props._panel) {
+		props._panel = {};
+	}
+
+	return <Panel {...props} {...props._panel}>
 				<WhichGrid {...props} />
 			</Panel>;
 }

package/src/Components/Screens/Manager.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo, useId, } from 'react';
+import React, { useState, useEffect, } from 'react';
 import {
 	Column,
 	Row,
@@ -20,8 +20,8 @@ export default function ManagerScreen(props) {
 			title,
 			sideModeComponent,
 			fullModeComponent,
+			id,
 		} = props,
-		id = useId(),
 		[isReady, setIsReady] = useState(false),
 		[mode, setModeRaw] = useState(MODE_FULL),
 		setMode = (newMode) => {
@@ -64,6 +64,8 @@ export default function ManagerScreen(props) {
 				<Row
 					h="80px"
 					py={2}
+					borderBottomWidth={2}
+					borderBottomColor="#ccc"
 				>
 					<Text p={4} fontSize="26" fontWeight={700}>{title}</Text>
 					<IconButton

package/src/Constants/Styles.js

@@ -63,6 +63,8 @@ const defaults = {
 	GRID_ROW_HOVER_BG: 'hover',
 	GRID_ROW_SELECTED_BG: 'selected',
 	GRID_ROW_SELECTED_HOVER_BG: 'selectedHover',
+	GRID_BORDER_WIDTH: 1,
+	GRID_BORDER_COLOR: 'trueGray.300',
 	ICON_BUTTON_BG: 'trueGray.200:alpha.0',
 	ICON_BUTTON_BG_DISABLED: 'trueGray.200',
 	ICON_BUTTON_BG_HOVER: '#000:alpha.20',

package/src/Hooks/useRedux.js

@@ -0,0 +1,40 @@
+import { useSelector, useDispatch } from 'react-redux'
+import _ from 'lodash';
+
+
+// Usage example:
+// const [
+// 		{
+// 			user,
+// 			isLoading,
+// 		},
+// 		dispatch
+// 	] = useRedux([
+// 		'user',
+// 		'isLoading',
+// 	]);
+
+
+export default function useRedux(properties) {
+	let values = {};
+	_.forEach(properties, (property) => {
+		values[property] = useSelector((state) => getPropertyFromState(property, state));
+	});
+
+	return [
+		values,
+		useDispatch(),
+	];
+};
+
+function getPropertyFromState(property, state) {
+	let found;
+	const reducers = _.keys(state);
+	_.each(reducers, (reducer) => {
+		if (state[reducer].hasOwnProperty(property)) {
+			found = state[reducer][property];
+			return false; // break
+		}
+	});
+	return found;
+}