@onehat/ui 0.3.23 → 0.3.25

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.23",
+	"version": "0.3.25",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -26,7 +26,7 @@
 	"license": "UNLICENSED",
 	"dependencies": {
 		"@gluestack-style/react": "^0.2.38",
-		"@gluestack-ui/themed": "^0.1.21",
+		"@gluestack-ui/themed": "^0.1.53",
 		"@hookform/resolvers": "^3.3.1",
 		"@k-renwick/colour-mixer": "^1.2.1",
 		"@onehat/data": "^1.19.0",

package/src/Components/Editor/Editor.js

@@ -1,16 +1,12 @@
-import {
-	Box,
-} from 'native-base';
 import {
 	EDITOR_MODE__VIEW,
 } from '../../Constants/Editor.js';
+import Form from '../Form/Form.js';
+import Viewer from '../Viewer/Viewer.js';
 import _ from 'lodash';
 
-
 export default function Editor(props) {
 	const {
-			Form,
-			Viewer,
 			isEditorViewOnly,
 			onEditorCancel: onCancel,
 			onEditorSave: onSave,
@@ -19,9 +15,6 @@ export default function Editor(props) {
 			editorMode,
 			onEditMode,
 
-			// withData
-			Repository,
-
 			// withSelection
 			selection,
 
@@ -46,9 +39,6 @@ export default function Editor(props) {
 				/>;
 	}
 
-	// NOTE: Ideally, this form should use multiple columns when screen is wide enough,
-	// and only show in one column when it's not.
-
 	return <Form
 				{...props}
 				record={selection}

package/src/Components/Form/FieldSet.js

@@ -29,7 +29,7 @@ export default function FieldSet(props) {
 				borderWidth={1}
 				borderColor="trueGray.400"
 				bg={styles.FORM_FIELDSET_BG}
-				m={2}
+				mb={4}
 				pb={1}
 				{...propsToPass}
 			>

package/src/Components/Form/Form.js

@@ -96,7 +96,6 @@ function Form(props) {
 
 			// withAlert
 			alert,
-			confirm,
 		} = props,
 		styles = UiGlobals.styles,
 		record = props.record?.length === 1 ? props.record[0] : props.record,
@@ -269,14 +268,14 @@ function Form(props) {
 					onChange: onEditorChange,
 					useSelectorId = false,
 					...propsToPass
-				} = item;
-			let editorTypeProps = {};
+				} = item,
+				editorTypeProps = {};
 
 			const propertyDef = name && Repository?.getSchema().getPropertyDefinition(name);
 			if (propertyDef?.isEditingDisabled) {
 				isEditable = false;
 			}
-			if (!type && Repository) {
+			if (!type) {
 				if (isEditable) {
 					const
 						{
@@ -553,15 +552,15 @@ function Form(props) {
 		formComponents = buildFromItems();
 		const formAncillaryComponents = buildAncillary();
 		editor = <>
-					<Row>{formComponents}</Row>
+					<Column p={4}>{formComponents}</Column>
 					<Column pt={4}>{formAncillaryComponents}</Column>
 				</>;
 	} else {
 		formComponents = buildFromItems();
 		const formAncillaryComponents = buildAncillary();
 		editor = <ScrollView _web={{ height: 1 }} width="100%" pb={1}>
-					<Row>{formComponents}</Row>
-					<Column pt={4}>{formAncillaryComponents}</Column>
+					<Column p={4}>{formComponents}</Column>
+					<Column m={2} pt={4}>{formAncillaryComponents}</Column>
 				</ScrollView>;
 	}
 
@@ -617,7 +616,7 @@ function Form(props) {
 					</Row>}
 				
 				{editor}
-
+				
 				<Footer justifyContent="flex-end" {...footerProps}  {...savingProps}>
 					{onDelete && editorMode === EDITOR_MODE__EDIT && isSingle &&
 						<Row flex={1} justifyContent="flex-start">

package/src/Components/Grid/Grid.js

@@ -195,7 +195,8 @@ function GridComponent(props) {
 				let newSelection = selection;
 				if (isInSelection(item)) {
 					// Already selected
-					if (allowToggle) {
+					const isSingle = selection.length === 1;
+					if (allowToggle || isSingle) {
 						// Create empty selection
 						newSelection = [];
 					} else {

package/src/Components/Viewer/Viewer.js

@@ -10,37 +10,115 @@ import {
 	EDITOR_TYPE__SIDE,
 } from '../../Constants/Editor.js';
 import UiGlobals from '../../UiGlobals.js';
+import inArray from '../../Functions/inArray.js';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
 import Label from '../Form/Label.js';
 import Pencil from '../Icons/Pencil.js';
 import Footer from '../Layout/Footer.js';
 import _ from 'lodash';
 
-// This is a wrapper for the Viewer subcomponent passed to props,
-// that adds buttons and a footer
-
 export default function Viewer(props) {
 	const {
-			additionalViewButtons = [],
-			ancillaryItems = [],
 			viewerCanDelete = false,
-
-			// withData
+			items = [], // Columns, FieldSets, Fields, etc to define the form
+			ancillaryItems = [], // additional items which are not controllable form elements, but should appear in the form
+			columnDefaults = {}, // defaults for each Column defined in items (above)
 			record,
+			additionalViewButtons = [],
 
-			// parent container
-			selectorSelected,
+			// withData
+			Repository,
 
 			// withEditor
 			editorType,
 			onEditMode,
 			onClose,
 			onDelete,
+
+			// parent container
+			selectorId,
+			selectorSelected,
+
 		} = props,
 		isMultiple = _.isArray(record),
 		isSideEditor = editorType === EDITOR_TYPE__SIDE,
 		styles = UiGlobals.styles,
 		flex = props.flex || 1,
+		buildFromItems = () => {
+			return _.map(items, (item, ix) => buildNextLayer(item, ix, columnDefaults));
+		},
+		buildNextLayer = (item, ix, defaults) => {
+			let {
+					type,
+					title,
+					name,
+					label,
+					items,
+					// onChange: onEditorChange,
+					useSelectorId = false,
+					...propsToPass
+				} = item,
+				editorTypeProps = {};
+
+			const propertyDef = name && Repository?.getSchema().getPropertyDefinition(name);
+			if (!type) {
+				if (propertyDef.viewerType) {
+					const
+						{
+							type: t,
+							...p
+						} =  propertyDef.viewerType;
+					type = t
+				} else {
+					type = 'Text';
+				}
+			}
+			if (type?.match && type.match(/Combo$/) && Repository?.isRemote && !Repository?.isLoaded) {
+				editorTypeProps.autoLoad = true;
+			}
+			const Element = getComponentFromType(type);
+			let children;
+
+			if (inArray(type, ['Column', 'FieldSet'])) {
+				if (_.isEmpty(items)) {
+					return null;
+				}
+				const defaults = item.defaults;
+				children = _.map(items, (item, ix) => {
+					return buildNextLayer(item, ix, defaults);
+				});
+				return <Element key={ix} title={title} {...defaults} {...propsToPass} {...editorTypeProps}>{children}</Element>;
+			}
+
+			if (!label && Repository && propertyDef.title) {
+				label = propertyDef.title;
+			}
+
+			let value = record?.properties[name]?.displayValue || null;
+			const
+				schema = record?.repository.getSchema(),
+				propertyDefinition = schema?.getPropertyDefinition(name);
+			if (propertyDefinition?.isFk) {
+				// value above is the id, get the actual display value
+				const fkDisplayField = propertyDefinition.fkDisplayField;
+				if (record.properties[fkDisplayField]) {
+					value = record.properties[fkDisplayField].displayValue;
+				}
+			}
+			
+			let element = <Element
+								value={value}
+								{...propsToPass}
+							/>;
+			if (label) {
+				const labelProps = {};
+				if (defaults?.labelWidth) {
+					labelProps.w = defaults.labelWidth;
+				}
+				element = <><Label {...labelProps}>{label}</Label>{element}</>;
+			}
+			return <Row key={ix}>{element}</Row>;
+		},
 		buildAncillary = () => {
 			const components = [];
 			if (ancillaryItems.length) {
@@ -86,7 +164,7 @@ export default function Viewer(props) {
 
 	return <Column flex={flex} {...props}>
 				<ScrollView width="100%" _web={{ height: 1 }}>
-					<Column m={2}>
+					<Column p={4}>
 						{onEditMode && <Row mb={4} justifyContent="flex-end">
 											<Button
 												key="editBtn"
@@ -101,7 +179,7 @@ export default function Viewer(props) {
 								{additionalViewButtons}
 							</Row>}
 
-						{props.children}
+						{buildFromItems()}
 
 						{buildAncillary()}