@onehat/ui 0.3.128 → 0.3.132

package/package.json

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

package/src/Components/Editor/Editor.js

@@ -30,6 +30,8 @@ function Editor(props) {
 		return null; // hide the editor when no selection
 	}
 
+	const propsToPass = _.omit(props, ['self', 'reference', 'parent']);
+
 	// Repository?.isRemotePhantomMode && selection.length === 1 && 
 	if (editorMode === EDITOR_MODE__VIEW || isEditorViewOnly) {
 		const record = selection[0];
@@ -37,19 +39,20 @@ function Editor(props) {
 			return null;
 		}
 		return <Viewer
-					{...props}
+					{...propsToPass}
+					{..._viewer}
 					record={record}
 					onEditMode={isEditorViewOnly ? null : onEditMode}
 					onClose={onClose}
 					onDelete={onDelete}
 					parent={self}
 					reference="viewer"
-					{..._viewer}
 				/>;
 	}
 
 	return <Form
-				{...props}
+				{...propsToPass}
+				{..._form}
 				record={selection}
 				onCancel={onCancel}
 				onSave={onSave}
@@ -57,7 +60,6 @@ function Editor(props) {
 				onDelete={onDelete}
 				parent={self}
 				reference="form"
-				{..._form}
 			/>;
 }
 

package/src/Components/Form/Field/Combo/Combo.js

@@ -51,6 +51,7 @@ export function ComboComponent(props) {
 			onRowPress,
 			icon,
 			Editor, // only used for the eyeButton
+			onSave, // to hook into when menu saves (ComboEditor only)
 
 			// withComponent
 			self,
@@ -81,6 +82,7 @@ export function ComboComponent(props) {
 		[isRendered, setIsRendered] = useState(false),
 		[isReady, setIsReady] = useState(false),
 		[isSearchMode, setIsSearchMode] = useState(false),
+		[containerWidth, setContainerWidth] = useState(),
 		[gridSelection, setGridSelection] = useState(null),
 		[textInputValue, setTextInputValue] = useState(''),
 		[newEntityDisplayValue, setNewEntityDisplayValue] = useState(null),
@@ -88,6 +90,10 @@ export function ComboComponent(props) {
 		[width, setWidth] = useState(0),
 		[top, setTop] = useState(0),
 		[left, setLeft] = useState(0),
+		onLayout = (e) => {
+			setIsRendered(true);
+			setContainerWidth(e.nativeEvent.layout.width);
+		},
 		showMenu = async () => {
 			if (isMenuShown) {
 				return;
@@ -120,7 +126,7 @@ export function ComboComponent(props) {
 				}
 			}
 			if (Repository && !Repository.isLoaded) {
-				await Repository.load();
+				// await Repository.load(); // this breaks when the menu (Grid) has selectorSelected
 			}
 			setIsMenuShown(true);
 		},
@@ -738,6 +744,9 @@ export function ComboComponent(props) {
 							const id = entity.id;
 							setValue(id);
 						}
+						if (onSave) {
+							onSave(selection);
+						}
 					}}
 					onRowPress={(item, e) => {
 						if (onRowPress) {
@@ -896,15 +905,49 @@ export function ComboComponent(props) {
 	if (tooltipRef) {
 		refProps.ref = tooltipRef;
 	}
-	assembledComponents = <Row {...refProps} justifyContent="center" alignItems="center" h={styles.FORM_COMBO_HEIGHT} flex={1} onLayout={() => setIsRendered(true)}>
-							{xButton}
-							{eyeButton}
-							{inputAndTrigger}
-							{additionalButtons}
-							{dropdownMenu}
-						</Row>;
+
+	if (isRendered && additionalButtons?.length && containerWidth < 500) {
+		// be responsive for small screen sizes and bump additionalButtons to the next line
+		assembledComponents = 
+			<Column>
+				<Row {...refProps} justifyContent="center" alignItems="center" h={styles.FORM_COMBO_HEIGHT} flex={1}>
+					{xButton}
+					{eyeButton}
+					{inputAndTrigger}
+					{dropdownMenu}
+				</Row>
+				<Row mt={2}>
+					{additionalButtons}
+				</Row>
+			</Column>;
+	} else {
+		assembledComponents = 
+			<Row {...refProps} justifyContent="center" alignItems="center" h={styles.FORM_COMBO_HEIGHT} flex={1} onLayout={onLayout}>
+				{xButton}
+				{eyeButton}
+				{inputAndTrigger}
+				{additionalButtons}
+				{dropdownMenu}
+			</Row>;
+	}
 	
 	if (isViewerShown && Editor) {
+		const propsForViewer = _.pick(props, [
+			'disableCopy',
+			'disableDuplicate',
+			'disablePrint',
+			'disableView',
+			'value',
+			'Repository',
+			'data',
+			'displayField',
+			'displayIx',
+			'fields',
+			'idField',
+			'idIx',
+			'model',
+			'name',
+		]);
 		assembledComponents = 
 				<>
 					{assembledComponents}
@@ -913,7 +956,7 @@ export function ComboComponent(props) {
 						onClose={onViewerClose}
 					>
 						<Editor
-							{...props}
+							{...propsForViewer}
 							editorType={EDITOR_TYPE__WINDOWED}
 							px={0}
 							py={0}

package/src/Components/Form/Form.js

@@ -227,7 +227,7 @@ function Form(props) {
 											let editorProps = {};
 											if (!editor) {
 												const propertyDef = fieldName && Repository?.getSchema().getPropertyDefinition(fieldName);
-												editor = propertyDef[fieldName].editorType;
+												editor = propertyDef && propertyDef[fieldName].editorType;
 												if (_.isPlainObject(editor)) {
 													const {
 															type,
@@ -323,15 +323,15 @@ function Form(props) {
 						{
 							type: t,
 							...p
-						} =  propertyDef.editorType;
+						} = propertyDef?.editorType;
 					type = t;
 					editorTypeProps = p;
-				} else if (propertyDef.viewerType) {
+				} else if (propertyDef?.viewerType) {
 					const
 						{
 							type: t,
 							...p
-						} =  propertyDef.viewerType;
+						} =  propertyDef?.viewerType;
 					type = t;
 				} else {
 					type = 'Text';
@@ -521,10 +521,20 @@ function Form(props) {
 							}
 
 							if (item.additionalEditButtons) {
-								element = <Row flex={1} flexWrap="wrap">
+								const buttons = buildAdditionalButtons(item.additionalEditButtons, self, { fieldState, formSetValue, formGetValues, formState });
+								if (containerWidth > 400) {
+									element = <Row flex={1} flexWrap="wrap">
+													{element}
+													{buttons}
+												</Row>;
+								} else {
+									element = <Column flex={1} w="100%">
 												{element}
-												{buildAdditionalButtons(item.additionalEditButtons, self, { fieldState, formSetValue, formGetValues, formState })}
-											</Row>;
+												<Row flex={1} w="100%" mt={2} flexWrap="wrap">
+													{buttons}
+												</Row>
+											</Column>;
+								}
 							}
 								
 							let isRequired = false,
@@ -693,6 +703,8 @@ function Form(props) {
 	if (self) {
 		self.ref = formRef;
 		self.formState = formState;
+		self.formSetValue = formSetValue;
+		self.formGetValues = formGetValues;
 	}
 	
 	const sizeProps = {};

package/src/Components/Hoc/withFilters.js

@@ -483,7 +483,7 @@ export default function withFilters(WrappedComponent) {
 
 						// basic property filter
 						const propertyDef = Repository.getSchema().getPropertyDefinition(filterField);
-						data.push([ filterField, propertyDef.title ]);
+						data.push([ filterField, propertyDef?.title ]);
 					});
 
 					// sort by title

package/src/Components/Hoc/withPdfButton.js

@@ -108,7 +108,7 @@ export default function withPdfButton(WrappedComponent) {
 
 				if (!item.title) {
 					const propertyDef = name && Repository?.getSchema().getPropertyDefinition(name);
-					if (propertyDef.title) {
+					if (propertyDef?.title) {
 						item.title = propertyDef.title;
 					}
 				}

package/src/Components/Icons/RightLeft.js

@@ -0,0 +1,14 @@
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+  return (
+    <Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>
+      <Path d="M32 96h320V32c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l96 96c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-96 96c-9.2 9.2-22.9 11.9-34.9 6.9S352 236.8 352 223.8V160H32c-17.7 0-32-14.3-32-32s14.3-32 32-32zm448 256c17.7 0 32 14.3 32 32s-14.3 32-32 32H160v64c0 12.9-7.8 24.6-19.8 29.6s-25.7 2.2-34.9-6.9l-96-96c-6-6-9.4-14.1-9.4-22.6s3.4-16.6 9.4-22.6l96-96c9.2-9.2 22.9-11.9 34.9-6.9s19.8 16.6 19.8 29.6v64h320z" />
+    </Icon>
+  )
+}
+
+export default SvgComponent

package/src/Components/Viewer/Viewer.js

@@ -73,12 +73,12 @@ function Viewer(props) {
 
 			const propertyDef = name && Repository?.getSchema().getPropertyDefinition(name);
 			if (!type) {
-				if (propertyDef.viewerType) {
+				if (propertyDef?.viewerType) {
 					const
 						{
 							type: t,
 							...p
-						} =  propertyDef.viewerType;
+						} = propertyDef.viewerType;
 					type = t
 				} else {
 					type = 'Text';
@@ -121,7 +121,7 @@ function Viewer(props) {
 				return <Element key={ix} title={title} {...defaults} {...propsToPass} {...editorTypeProps}>{children}</Element>;
 			}
 
-			if (!label && Repository && propertyDef.title) {
+			if (!label && Repository && propertyDef?.title) {
 				label = propertyDef.title;
 			}
 

package/src/Components/index.js

@@ -144,6 +144,7 @@ import RectangleXmark from '../Components/Icons/RectangleXmark.js';
 import RectangleXmarkRegular from '../Components/Icons/RectangleXmarkRegular.js';
 import ReorderRows from '../Components/Icons/ReorderRows.js';
 import RightFromBracket from '../Components/Icons/RightFromBracket.js';
+import RightLeft from '../Components/Icons/RightLeft.js';
 import RightToBracket from '../Components/Icons/RightToBracket.js';
 import Rotate from '../Components/Icons/Rotate.js';
 import RotateLeft from '../Components/Icons/RotateLeft.js';
@@ -374,6 +375,7 @@ const components = {
 	RectangleXmarkRegular,
 	ReorderRows,
 	RightFromBracket,
+	RightLeft,
 	RightToBracket,
 	Rotate,
 	RotateLeft,