@onehat/ui 0.2.65 → 0.2.67

package/package.json

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

package/src/Components/Editor/Editor.js

@@ -14,6 +14,7 @@ export default function Editor(props) {
 			onEditorCancel: onCancel,
 			onEditorSave: onSave,
 			onEditorClose: onClose,
+			onEditorDelete: onDelete,
 			editorMode,
 			setEditorMode,
 
@@ -37,11 +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}
-					{...props}
+					// onDelete={onDelete}
 				/>;
 	}
 
@@ -49,11 +50,12 @@ export default function Editor(props) {
 	// and only show in one column when it's not.
 
 	return <Form
+				{...props}
 				record={selection}
 				onViewMode={onViewMode}
 				onCancel={onCancel}
 				onSave={onSave}
 				onClose={onClose}
-				{...props}
+				onDelete={onDelete}
 			/>;
 }

package/src/Components/Editor/Viewer.js

@@ -0,0 +1,105 @@
+import {
+	Button,
+	Column,
+	Icon,
+	ScrollView,
+	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 buttons and a footer
+
+export default function Viewer(props) {
+	const {
+			additionalViewButtons = [],
+			ancillaryItems = [],
+			record,
+			onEditMode,
+			onClose,
+			onDelete,
+		} = 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%">
+					<Column m={2}>
+						{onEditMode && <Row mb={4} justifyContent="flex-end">
+											<Button
+												key="editBtn"
+												onPress={onEditMode}
+												leftIcon={<Icon as={Pencil} color="#fff" size="sm" />}	
+												color="#fff"
+											>To Edit</Button>
+										</Row>}
+						
+						{!_.isEmpty(additionalViewButtons) && 
+							<Row p={2} alignItems="center" justifyContent="flex-end">
+								{additionalViewButtons}
+							</Row>}
+
+						{props.children}
+
+						{buildAncillary()}
+
+					</Column>
+				</ScrollView>
+				<Footer justifyContent="flex-end">
+					{onDelete && <Row flex={1} justifyContent="flex-start">
+											<Button
+												key="deleteBtn"
+												onPress={() => {
+													confirm('Are you sure you want to delete this record?', onDelete);
+												}}
+												bg="warning"
+												_hover={{
+													bg: 'warningHover',
+												}}
+												color="#fff"
+											>Delete</Button>
+										</Row>}
+					<Button.Group space={2}>
+						<Button
+							key="closeBtn"
+							onPress={onClose}
+							color="#fff"
+						>Close</Button>
+					</Button.Group>
+				</Footer>
+			</Column>;
+}

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
@@ -65,8 +67,7 @@ function Form(props) {
 			onBack,
 			onReset,
 			onViewMode,
-			additionalButtons = [],
-			ancillaryComponents = [],
+			additionalEditButtons = [],
 			
 			// sizing of outer container
 			h,
@@ -83,9 +84,9 @@ function Form(props) {
 			isViewOnly = false,
 			editorMode,
 			onCancel,
-			onEditorSave,
-			onSave = onEditorSave,
+			onSave,
 			onClose,
+			onDelete,
 
 			// DataMgt
 			selectorId,
@@ -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
@@ -121,7 +123,7 @@ function Form(props) {
 			mode: 'onChange', // onChange | onBlur | onSubmit | onTouched | all
 			// reValidateMode: 'onChange', // onChange | onBlur | onSubmit
 			defaultValues,
-			// values: defaultValues, // NOTE: This will cause a looping re-render if not used carefully!
+			// values: defaultValues,
 			// resetOptions: {
 			// 	keepDirtyValues: false, // user-interacted input will be retained
 			// 	keepErrors: false, // input errors will be retained with value update
@@ -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>;
 	}
 
@@ -478,6 +509,14 @@ function Form(props) {
 			editorModeF = isMultiple ? 'Edit Multiple' : 'Edit';
 			break;
 	}
+
+	let isSaveDisabled = false;
+	if (!_.isEmpty(formState.errors)) {
+		isSaveDisabled = true;
+	}
+	if (_.isEmpty(formState.dirtyFields) && !record?.isRemotePhantom) {
+		isSaveDisabled = true;
+	}
 	
 	return <Column {...sizeProps} onLayout={onLayout}>
 
@@ -504,15 +543,29 @@ function Form(props) {
 							color="#fff"
 						>To View</Button>}
 				</Row>
-				{!_.isEmpty(additionalButtons) && 
+				{editorMode === EDITOR_MODE__EDIT && !_.isEmpty(additionalEditButtons) && 
 					<Row p={2} alignItems="center" justifyContent="flex-end">
-						{additionalButtons}
+						{additionalEditButtons}
 					</Row>}
 				
 				{editor}
 
 				<Footer justifyContent="flex-end" {...footerProps}>
+					{onDelete && <Row flex={1} justifyContent="flex-start">
+										<Button
+											key="deleteBtn"
+											onPress={() => {
+												confirm('Are you sure you want to delete this record?', onDelete);
+											}}
+											bg="warning"
+											_hover={{
+												bg: 'warningHover',
+											}}
+											color="#fff"
+										>Delete</Button>
+									</Row>}
 					<Button.Group space={2} {...buttonGroupProps}>
+				
 						{!isViewOnly && <IconButton
 											key="resetBtn"
 											onPress={() => {
@@ -538,7 +591,7 @@ function Form(props) {
 						{!isViewOnly && onSave && <Button
 														key="saveBtn"
 														onPress={(e) => handleSubmit(onSave, onSubmitError)(e)}
-														isDisabled={!_.isEmpty(formState.errors) || (!isSingle && !record?.isPhantom && !_.isEmpty(formState.dirtyFields))}
+														isDisabled={isSaveDisabled}
 														color="#fff"
 													>{editorMode === EDITOR_MODE__ADD ? 'Add' : 'Save'}</Button>}
 						{isViewOnly && onClose && <Button

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/Components/Hoc/withEditor.js

@@ -23,7 +23,7 @@ export default function withEditor(WrappedComponent) {
 					if (selection.length > 1) {
 						return 'records?';
 					}
-					return 'record' + (selection[0].displayValue ? ' ' + selection[0].displayValue : '') + '?';
+					return 'record' + (selection[0].displayValue ? ' "' + selection[0].displayValue + '"' : '') + '?';
 				},
 				record,
 
@@ -45,10 +45,7 @@ export default function withEditor(WrappedComponent) {
 			[isEditorShown, setIsEditorShown] = useState(false),
 			[isEditorViewOnly, setIsEditorViewOnly] = useState(false),
 			[lastSelection, setLastSelection] = useState(),
-			addRecord = async () => {
-				if (!userCanEdit || disableAdd) {
-					return;
-				}
+			onAdd = async () => {
 				const defaultValues = Repository.getSchema().model.defaultValues;
 				let addValues = _.clone(defaultValues);
 
@@ -75,30 +72,24 @@ export default function withEditor(WrappedComponent) {
 				setEditorMode(EDITOR_MODE__ADD);
 				setIsEditorShown(true);
 			},
-			editRecord = () => {
-				if (!userCanEdit || disableEdit) {
-					return;
-				}
+			onEdit = () => {
 				setIsEditorViewOnly(false);
 				setEditorMode(EDITOR_MODE__EDIT);
 				setIsEditorShown(true);
 			},
-			deleteRecord = (e) => {
-				if (!userCanEdit || disableDelete) {
-					return;
-				}
+			onDelete = () => {
 				const
 					isSingle = selection.length === 1,
 					isPhantom = selection[0] && selection[0].isPhantom;
 
 				if (isSingle && isPhantom) {
-					onDelete();
+					deleteRecord();
 				} else {
 					const identifier = getRecordIdentifier(selection);
-					confirm('Are you sure you want to delete the ' + identifier, onDelete);
+					confirm('Are you sure you want to delete the ' + identifier, deleteRecord);
 				}
 			},
-			onDelete = async () => {
+			deleteRecord = async () => {
 				await Repository.delete(selection);
 				if (!Repository.isAutoSave) {
 					await Repository.save();
@@ -160,7 +151,7 @@ export default function withEditor(WrappedComponent) {
 					isSingle = selection.length === 1,
 					isPhantom = selection[0] && selection[0].isPhantom;
 				if (isSingle && isPhantom) {
-					await onDelete();
+					await deleteRecord();
 				}
 				setEditorMode(EDITOR_MODE__VIEW);
 				setIsEditorShown(false);
@@ -168,6 +159,11 @@ export default function withEditor(WrappedComponent) {
 			onEditorClose = () => {
 				setIsEditorShown(false);
 			},
+			onEditorDelete = async () => {
+				await deleteRecord();
+				setEditorMode(EDITOR_MODE__VIEW);
+				setIsEditorShown(false);
+			},
 			calculateEditorMode = () => {
 				let mode = EDITOR_MODE__VIEW;
 				if (userCanEdit) {
@@ -208,13 +204,14 @@ export default function withEditor(WrappedComponent) {
 					editorMode={editorMode}
 					setEditorMode={setEditorMode}
 					setIsEditorShown={setIsEditorShown}
-					onAdd={addRecord}
-					onEdit={editRecord}
-					onDelete={deleteRecord}
+					onAdd={(!userCanEdit || disableAdd) ? null : onAdd}
+					onEdit={(!userCanEdit || disableEdit) ? null : onEdit}
+					onDelete={(!userCanEdit || disableDelete || (editorMode === EDITOR_MODE__ADD && (selection[0]?.isPhantom || currentRecord?.isPhantom))) ? null : onDelete}
 					onView={viewRecord}
 					onDuplicate={duplicateRecord}
 					onEditorSave={onEditorSave}
 					onEditorCancel={onEditorCancel}
+					onEditorDelete={(!userCanEdit || disableDelete || (editorMode === EDITOR_MODE__ADD && (selection[0]?.isPhantom || currentRecord?.isPhantom))) ? null : onEditorDelete}
 					onEditorClose={onEditorClose}
 					useEditor={useEditor}
 					userCanEdit={userCanEdit}

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;

package/src/Styles/ThemeOverrides.js

@@ -23,6 +23,7 @@ const ThemeOverrides = {
 		vip: '#3a78bc',
 		navBlue: '#3b82f6',
 		warning: '#d92b2b',
+		warningHover: '#af1313',
 		orange: '#de9000',
 		greens: {
 			100: '#4CAF50',