@onehat/ui 0.2.66 → 0.2.67

package/package.json

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

package/src/Components/Editor/Editor.js

@@ -38,12 +38,11 @@ export default function Editor(props) {
 
 	if (Repository.isRemotePhantomMode && selection.length === 1 && editorMode === EDITOR_MODE__VIEW) {
 		return <Viewer
+					{...props}
 					record={selection[0]}
-					Repository={Repository}
 					onEditMode={isViewOnly ? null : onEditMode}
 					onClose={onClose}
-					onDelete={onDelete}
-					{...props}
+					// onDelete={onDelete}
 				/>;
 	}
 

package/src/Components/Editor/Viewer.js

@@ -6,23 +6,55 @@ import {
 	Row,
 	Text,
 } from 'native-base';
+import UiGlobals from '../../UiGlobals.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
-
+// This is a wrapper for the Viewer subcomponent passed to props,
+// that adds buttons and a footer
 
 export default function Viewer(props) {
 	const {
-			Viewer, // Subcomponent
 			additionalViewButtons = [],
+			ancillaryItems = [],
+			record,
 			onEditMode,
 			onClose,
 			onDelete,
-		} = props;
+		} = props,
+		styles = UiGlobals.styles,
+		buildAncillary = () => {
+			let components = [];
+			if (ancillaryItems.length) {
+				components = _.map(ancillaryItems, (item, ix) => {
+					let {
+						type,
+						title = null,
+						selectorId,
+						...propsToPass
+					} = item;
+					const
+						Element = getComponentFromType(type),
+						element = <Element
+										selectorId={selectorId}
+										selectorSelected={selectorId ? record : selectorSelected}
+										flex={1}
+										{...propsToPass}
+									/>;
+					if (title) {
+						title = <Text
+									fontSize={styles.VIEWER_ANCILLARY_FONTSIZE}
+									fontWeight="bold"
+								>{title}</Text>;
+					}
+					return <Column key={'ancillary-' + ix} px={2} pb={1}>{title}{element}</Column>;
+				});
+			}
+			return components;
+		};
 
 	return <Column flex={1} w="100%">
 				<ScrollView flex={1} w="100%">
@@ -41,7 +73,9 @@ export default function Viewer(props) {
 								{additionalViewButtons}
 							</Row>}
 
-						<Viewer {...props} />
+						{props.children}
+
+						{buildAncillary()}
 
 					</Column>
 				</ScrollView>

package/src/Components/Form/Form.js

@@ -22,6 +22,7 @@ import { useForm, Controller } from 'react-hook-form'; // https://react-hook-for
 import * as yup from 'yup'; // https://github.com/jquense/yup#string
 import { yupResolver } from '@hookform/resolvers/yup';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
+import UiGlobals from '../../UiGlobals.js';
 import withAlert from '../Hoc/withAlert.js';
 import withEditor from '../Hoc/withEditor.js';
 import inArray from '../../Functions/inArray.js';
@@ -57,6 +58,7 @@ function Form(props) {
 			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
+			ancillaryItems = [], // additional items which are not controllable form elements, but should appear in 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
@@ -66,7 +68,6 @@ function Form(props) {
 			onReset,
 			onViewMode,
 			additionalEditButtons = [],
-			ancillaryComponents = [],
 			
 			// sizing of outer container
 			h,
@@ -95,6 +96,7 @@ function Form(props) {
 			alert,
 			confirm,
 		} = props,
+		styles = UiGlobals.styles,
 		record = props.record?.length === 1 ? props.record[0] : props.record,
 		isMultiple = _.isArray(record),
 		isSingle = !isMultiple, // for convenience
@@ -239,9 +241,7 @@ function Form(props) {
 			return <Row>{elements}</Row>;
 		},
 		buildFromItems = () => {
-			const
-				regularItems = _.map(items, (item, ix) => buildNextLayer(item, ix, columnDefaults));
-				return [...regularItems, ...ancillaryComponents];
+			return _.map(items, (item, ix) => buildNextLayer(item, ix, columnDefaults));
 		},
 		buildNextLayer = (item, ix, defaults) => {
 			let {
@@ -399,6 +399,35 @@ function Form(props) {
 						}}
 					/>;
 		},
+		buildAncillary = () => {
+			let components = [];
+			if (ancillaryItems.length) {
+				components = _.map(ancillaryItems, (item, ix) => {
+					let {
+						type,
+						title = null,
+						selectorId,
+						...propsToPass
+					} = item;
+					const
+						Element = getComponentFromType(type),
+						element = <Element
+										selectorId={selectorId}
+										selectorSelected={selectorId ? record : selectorSelected}
+										flex={1}
+										{...propsToPass}
+									/>;
+					if (title) {
+						title = <Text
+									fontSize={styles.FORM_ANCILLARY_TITLE_FONTSIZE}
+									fontWeight="bold"
+								>{title}</Text>;
+					}
+					return <Column key={'ancillary-' + ix} px={2} pb={1}>{title}{element}</Column>;
+				});
+			}
+			return components;
+		},
 		onSubmitError = (errors, e) => {
 			debugger;
 			if (editorType === EDITOR_TYPE__INLINE) {
@@ -459,10 +488,12 @@ function Form(props) {
 					borderBottomColor="primary.100"
 				>{formComponents}</ScrollView>;
 	} else {
-		// for Windowed editor
+		// for all other editor types
 		formComponents = buildFromItems();
+		const formAncillaryComponents = buildAncillary();
 		editor = <ScrollView flex={1} width="100%" pb={1}>
-					<Row flex={1}>{formComponents}</Row>
+					<Row>{formComponents}</Row>
+					<Column pt={4}>{formAncillaryComponents}</Column>
 				</ScrollView>;
 	}
 

package/src/Components/Grid/Grid.js

@@ -85,6 +85,9 @@ export function Grid(props) {
 			bottomToolbar = 'pagination',
 			topToolbar = null,
 			additionalToolbarButtons = [],
+			h,
+			flex,
+			bg,
 
 			// withEditor
 			onAdd,
@@ -784,10 +787,17 @@ export function Grid(props) {
 		}
 	}
 	
+	const sizeProps = {};
+	if (!_.isNil(h)) {
+		sizeProps.h = h;
+	} else {
+		sizeProps.flex = flex ?? 1;
+	}
 	return <Column
 				{...testProps('Grid')}
-				flex={1}
 				w="100%"
+				bg={bg}
+				{...sizeProps}
 			>
 				{topToolbar}
 

package/src/Constants/Styles.js

@@ -7,6 +7,7 @@ const
 
 const defaults = {
 	FILTER_LABEL_FONTSIZE: DEFAULT_FONTSIZE,
+	FORM_ANCILLARY_TITLE_FONTSIZE: 22,
 	FORM_COLOR_READOUT_FONTSIZE: DEFAULT_FONTSIZE,
 	FORM_COLOR_INPUT_BG: WHITE,
 	FORM_COLOR_INPUT_FOCUS_BG: FOCUS,
@@ -99,6 +100,7 @@ const defaults = {
 	TREE_TOOLBAR_ITEMS_COLOR: 'trueGray.800',
 	TREE_TOOLBAR_ITEMS_DISABLED_COLOR: 'disabled',
 	TREE_TOOLBAR_ITEMS_ICON_SIZE: 'sm',
+	VIEWER_ANCILLARY_FONTSIZE: 22,
 };
 
 export default defaults;