@onehat/ui 0.2.80 → 0.2.84

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.2.80",
+	"version": "0.2.84",
 	"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.18.12",
+		"@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

@@ -427,7 +427,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 +499,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

@@ -19,13 +19,18 @@ export default function withSideEditor(WrappedComponent, isTree = false) {
 		}
 
 		return <Container
-					center={<WrappedComponent {...props} />}
+					center={<WrappedComponent
+								isTree={isTree}
+								{...props}
+							/>}
 					east={<Editor
+								{...props}
 								editorType={EDITOR_TYPE__SIDE}
 								flex={sideFlex}
-								{...props}
+								borderLeftWidth={1}
+								borderLeftColor="#ccc"
 								{...editorProps}
 							/>}
 				/>;
-	}, isTree);
+	});
 }

package/src/Components/Icons/FullWidth.js

@@ -0,0 +1,28 @@
+import * as React from "react"
+import Svg, { Defs, G, Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+  return (
+    <Icon
+      id="Layer_2"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 237.17 235.06"
+      {...props}
+    >
+      <Defs></Defs>
+      <G id="Layer_1-2">
+        <Path
+          className="cls-1"
+          d="M237.17 235.06H0V0h237.17v235.06zM13.46 221.59H223.7V13.47H13.47V221.6z"
+        />
+        <Path
+          className="cls-1"
+          d="M200.77 192.33H36.4V42.74h164.36v149.59zm-150.9-13.47H187.3V56.2H49.87v122.66z"
+        />
+      </G>
+    </Icon>
+  )
+}
+
+export default SvgComponent

package/src/Components/Icons/SideBySide.js

@@ -0,0 +1,23 @@
+import * as React from "react"
+import Svg, { G, Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+  return (
+    <Icon
+      id="Layer_2"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 237.17 235.06"
+      {...props}
+    >
+      <G id="Layer_1-2">
+        <Path
+          d="M85.22 235.06H0V0h85.22v235.06zm-71.75-13.47h58.29V13.47H13.47V221.6zM237.17 235.06H109.74V0h127.43v235.06zm-113.96-13.47h100.5V13.47h-100.5V221.6z"
+          strokeWidth={0}
+        />
+      </G>
+    </Icon>
+  )
+}
+
+export default SvgComponent

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

@@ -0,0 +1,94 @@
+import React, { useState, useEffect, } from 'react';
+import {
+	Column,
+	Row,
+	Text,
+} from 'native-base';
+import IconButton from '../Buttons/IconButton';
+import FullWidth from '../Icons/FullWidth';
+import SideBySide from '../Icons/SideBySide';
+import getSaved from '../../Functions/getSaved.js';
+import setSaved from '../../Functions/setSaved.js';
+import _ from 'lodash';
+
+const
+	MODE_FULL = 'MODE_FULL',
+	MODE_SIDE = 'MODE_SIDE';
+
+export default function ManagerScreen(props) {
+	const {
+			title,
+			sideModeComponent,
+			fullModeComponent,
+			id,
+		} = props,
+		[isReady, setIsReady] = useState(false),
+		[mode, setModeRaw] = useState(MODE_FULL),
+		setMode = (newMode) => {
+			if (newMode === mode) {
+				return; // no change
+			}
+			setModeRaw(newMode);
+			setSaved(id + '-mode', newMode);
+		};
+
+	useEffect(() => {
+		// Restore saved settings
+		(async () => {
+
+			let key, val;
+			key = id + '-mode';
+			val = await getSaved(key);
+			if (!_.isNil(val)) {
+				setMode(val);
+			}
+
+			if (!isReady) {
+				setIsReady(true);
+			}
+		})();
+	}, []);
+
+	if (!isReady) {
+		return null;
+	}
+
+	let whichComponent;
+	if (mode === MODE_FULL) {
+		whichComponent = fullModeComponent;
+	} else if (mode === MODE_SIDE) {
+		whichComponent = sideModeComponent;
+	}
+
+	return <Column flex={1} w="100%">
+				<Row
+					h="80px"
+					py={2}
+					borderBottomWidth={2}
+					borderBottomColor="#ccc"
+				>
+					<Text p={4} fontSize="26" fontWeight={700}>{title}</Text>
+					<IconButton
+						icon={FullWidth}
+						_icon={{
+							size: '30px',
+							color: mode === MODE_FULL ? 'primary.100' : '#000',
+						}}
+						disabled={mode === MODE_FULL}
+						onPress={() => setMode(MODE_FULL)}
+						tooltip="Full Width"
+					/>
+					<IconButton
+						icon={SideBySide}
+						_icon={{
+							size: '30px',
+							color: mode === MODE_SIDE ? 'primary.100' : '#000',
+						}}
+						disabled={mode === MODE_SIDE}
+						onPress={() => setMode(MODE_SIDE)}
+						tooltip="Side Editor"
+					/>
+				</Row>
+				{whichComponent}
+			</Column>;
+}

package/src/Components/Tab/TabBar.js

@@ -32,7 +32,6 @@ export default function TabBar(props) {
 			startsCollapsed = true,
 			onChangeCurrentTab,
 			onChangeIsCollapsed,
-			saveCurrentTab = true,
 			...propsToPass
 		} = props,
 		styles = UiGlobals.styles,
@@ -55,15 +54,16 @@ export default function TabBar(props) {
 			return currentTabIx;
 		},
 		setCurrentTab = (ix) => {
+			if ((useLocal && ix === currentTabIxLocal) || ix === currentTabIx) {
+				return; // no change
+			}
 			if (useLocal) {
 				setCurrentTabIxLocal(ix);
+				setSaved(id + '-currentTabIx', ix);
 			}
 			if (onChangeCurrentTab) {
 				onChangeCurrentTab(ix);
 			}
-			if (saveCurrentTab) {
-				setSaved(id + '-currentTabIx', ix);
-			}
 		},
 		onToggleCollapse = () => {
 			setIsCollapsed(!isCollapsed);
@@ -310,7 +310,7 @@ export default function TabBar(props) {
 				setIsCollapsed(val);
 			}
 
-			if (saveCurrentTab) {
+			if (useLocal) {
 				key = id + '-currentTabIx';
 				val = await getSaved(key);
 				if (!_.isNil(val)) {

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;
+}