@onehat/ui 0.3.61 → 0.3.67

package/package.json

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

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

@@ -38,6 +38,7 @@ export function ComboComponent(props) {
 			isEditor = false,
 			isDisabled = false,
 			tooltipPlacement = 'bottom',
+			placeholder,
 			onRowPress,
 
 			// withComponent
@@ -60,7 +61,7 @@ export function ComboComponent(props) {
 		inputRef = useRef(),
 		triggerRef = useRef(),
 		menuRef = useRef(),
-		displayValueRef = useRef(null),
+		displayValueRef = useRef(),
 		typingTimeout = useRef(),
 		[isMenuShown, setIsMenuShown] = useState(false),
 		[isRendered, setIsRendered] = useState(false),
@@ -117,6 +118,58 @@ export function ComboComponent(props) {
 		toggleMenu = () => {
 			setIsMenuShown(!isMenuShown);
 		},
+		getDisplayValue = () => {
+			return displayValueRef.current;
+		},
+		setDisplayValue = async (value) => {
+			let displayValue = '';
+			if (_.isNil(value)) {
+				// do nothing
+			} else if (_.isArray(value)) {
+				displayValue = [];
+				if (Repository) {
+					if (!Repository.isLoaded) {
+						throw Error('Not yet implemented'); // Would a Combo ever have multiple remote selections? Shouldn't that be a Tag field??
+					}
+					if (Repository.isLoading) {
+						await Repository.waitUntilDoneLoading();
+					}
+					displayValue = _.each(value, (id) => {
+						const entity = Repository.getById(id);
+						if (entity) {
+							displayValue.push(entity.displayValue)
+						}
+					});
+				} else {
+					displayValue = _.each(value, (id) => {
+						const item = _.find(data, (datum) => datum[idIx] === id);
+						if (item) {
+							displayValue.push(item[displayIx]);
+						}
+					});
+				}
+				displayValue = displayValue.join(', ');
+			} else {
+				if (Repository) {
+					let entity;
+					if (!Repository.isLoaded) {
+						entity = await Repository.getSingleEntityFromServer(value);
+					} else {
+						if (Repository.isLoading) {
+							await Repository.waitUntilDoneLoading();
+						}
+						entity = Repository.getById(value);
+					}
+					displayValue = entity?.displayValue || '';
+				} else {
+					const item = _.find(data, (datum) => datum[idIx] === value);
+					displayValue = (item && item[displayIx]) || '';
+				}
+			}
+
+			displayValueRef.current = displayValue;
+			resetInputTextValue();
+		},
 		resetInputTextValue = () => {
 			setTextInputValue(getDisplayValue());
 		},
@@ -343,57 +396,6 @@ export function ComboComponent(props) {
 				// 	setTextInputValue(newTextValue);
 				// }
 			}
-		},
-		getDisplayValue = () => {
-			return displayValueRef.current;
-		},
-		setDisplayValue = async (value) => {
-			let displayValue = '';
-			if (_.isNil(value)) {
-				// do nothing
-			} else if (_.isArray(value)) {
-				displayValue = [];
-				if (Repository) {
-					if (!Repository.isLoaded) {
-						throw Error('Not yet implemented'); // Would a Combo ever have multiple remote selections? Shouldn't that be a Tag field??
-					}
-					if (Repository.isLoading) {
-						await Repository.waitUntilDoneLoading();
-					}
-					displayValue = _.each(value, (id) => {
-						const entity = Repository.getById(id);
-						if (entity) {
-							displayValue.push(entity.displayValue)
-						}
-					});
-				} else {
-					displayValue = _.each(value, (id) => {
-						const item = _.find(data, (datum) => datum[idIx] === id);
-						if (item) {
-							displayValue.push(item[displayIx]);
-						}
-					});
-				}
-				displayValue = displayValue.join(', ');
-			} else {
-				if (Repository) {
-					let entity;
-					if (!Repository.isLoaded) {
-						entity = await Repository.getSingleEntityFromServer(value);
-					} else {
-						if (Repository.isLoading) {
-							await Repository.waitUntilDoneLoading();
-						}
-						entity = Repository.getById(value);
-					}
-					displayValue = entity?.displayValue || '';
-				} else {
-					const item = _.find(data, (datum) => datum[idIx] === value);
-					displayValue = (item && item[displayIx]) || '';
-				}
-			}
-
-			displayValueRef.current = displayValue;
 		};
 
 	useEffect(() => {
@@ -411,7 +413,6 @@ export function ComboComponent(props) {
 		(async () => {
 			setIsSearchMode(false);
 			await setDisplayValue(value);
-			resetInputTextValue();
 			if (!isReady) {
 				setIsReady(true);
 			}
@@ -470,11 +471,12 @@ export function ComboComponent(props) {
 										borderTopRightRadius={0}
 										borderBottomRightRadius={0}
 										fontSize={styles.FORM_COMBO_INPUT_FONTSIZE}
+										color={_.isEmpty(textInputValue) ? 'trueGray.400' : '#000'}
 										bg={styles.FORM_COMBO_INPUT_BG}
 										_focus={{
 											bg: styles.FORM_COMBO_INPUT_FOCUS_BG,
 										}}
-									>{textInputValue}</Text>
+									>{_.isEmpty(textInputValue) ? placeholder : textInputValue}</Text>
 								</Pressable> :
 								<Input
 									ref={inputRef}
@@ -504,6 +506,7 @@ export function ComboComponent(props) {
 									_focus={{
 										bg: styles.FORM_COMBO_INPUT_FOCUS_BG,
 									}}
+									placeholder={placeholder}
 									{..._input}
 								/>}
 							<IconButton
@@ -549,12 +552,13 @@ export function ComboComponent(props) {
 									borderColor="trueGray.400"
 									borderTopRightRadius={0}
 									borderBottomRightRadius={0}
+									color={_.isEmpty(textInputValue) ? 'trueGray.400' : '#000'}
 									fontSize={styles.FORM_COMBO_INPUT_FONTSIZE}
 									bg={styles.FORM_COMBO_INPUT_BG}
 									_focus={{
 										bg: styles.FORM_COMBO_INPUT_FOCUS_BG,
 									}}
-								>{textInputValue}</Text>
+								>{_.isEmpty(textInputValue) ? placeholder : textInputValue}</Text>
 							</Pressable>
 							<IconButton
 								ref={triggerRef}
@@ -772,6 +776,7 @@ export function ComboComponent(props) {
 							_focus={{
 								bg: styles.FORM_COMBO_INPUT_FOCUS_BG,
 							}}
+							placeholder={placeholder}
 							{..._input}
 						/>}
 					<IconButton
@@ -796,11 +801,13 @@ export function ComboComponent(props) {
 				</Row>;
 			dropdownMenu = <Modal
 								isOpen={true}
+								safeAreaTop={true}
 								onClose={() => setIsMenuShown(false)}
-								top="30%"
+								mt="auto"
+								mb="auto"
 								w="100%"
 								h={400}
-								px={5}
+								p={5}
 							>
 								{inputAndTriggerClone}
 								{grid}

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

@@ -65,6 +65,11 @@ function InputElement(props) {
 	if (localValue === null || typeof localValue === 'undefined') {
 		localValue = ''; // If the value is null or undefined, don't let this be an uncontrolled input
 	}
+
+	const sizeProps = {};
+	if (!props.flex && !props.w) {
+		sizeProps.flex = 1;
+	}
 	
 	let component = <Input
 						ref={props.outerRef}
@@ -72,12 +77,12 @@ function InputElement(props) {
 						_input={{
 							onKeyPress: onKeyPressLocal,
 						}}
-						flex={1}
 						fontSize={styles.FORM_INPUT_FONTSIZE}
 						bg={styles.FORM_INPUT_BG}
 						_focus={{
 							bg: styles.FORM_INPUT_FOCUS_BG,
 						}}
+						{...sizeProps}
 						{...props}
 						value={localValue}
 					/>;

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

@@ -18,6 +18,9 @@ const
 					onChangeText={props.setValue}
 					flex={1}
 					bg={styles.FORM_TEXTAREA_BG}
+					_focus={{
+						bg: styles.FORM_TEXTAREA_BG,
+					}}
 					fontSize={styles.FORM_TEXTAREA_FONTSIZE}
 					h={styles.FORM_TEXTAREA_HEIGHT}
 					{...props}

package/src/Components/Form/Form.js

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef, isValidElement, } from 'react';
+import React, { useEffect, useState, useRef, isValidElement, } from 'react';
 import { View, } from 'react-native';
 import {
 	Box,
@@ -72,6 +72,7 @@ function Form(props) {
 			buttonGroupProps = {}, // buttons in footer
 			checkIsEditingDisabled = true,
 			disableLabels = false,
+			disableDirtyIcon = false,
 			onBack,
 			onReset,
 			onViewMode,
@@ -267,7 +268,7 @@ function Form(props) {
 											// 			</Column>;
 											// }
 
-											const dirtyIcon = isDirty ? <Icon as={Pencil} size="2xs" color="trueGray.300" position="absolute" top="2px" left="2px" /> : null;
+											const dirtyIcon = isDirty && !disableDirtyIcon ? <Icon as={Pencil} size="2xs" color="trueGray.300" position="absolute" top="2px" left="2px" /> : null;
 											return <Row key={ix} bg={error ? '#fdd' : '#fff'} w={w} flex={flex} {...columnProps}>{dirtyIcon}{element}</Row>;
 										}}
 									/>);
@@ -279,6 +280,9 @@ function Form(props) {
 			return _.map(items, (item, ix) => buildFromItem(item, ix, columnDefaults));
 		},
 		buildFromItem = (item, ix, defaults) => {
+			if (React.isValidElement(item)) {
+				return item;
+			}
 			let {
 					type,
 					title,
@@ -510,7 +514,7 @@ function Form(props) {
 											</Row>;
 							}
 
-							const dirtyIcon = isDirty ? <Icon as={Pencil} size="2xs" color="trueGray.300" position="absolute" top="2px" left="2px" /> : null;
+							const dirtyIcon = isDirty && !disableDirtyIcon ? <Icon as={Pencil} size="2xs" color="trueGray.300" position="absolute" top="2px" left="2px" /> : null;
 							return <Row key={ix} px={2} pb={1} bg={error ? '#fdd' : null}>{dirtyIcon}{element}</Row>;
 						}}
 					/>;

package/src/Components/Hoc/withAlert.js

@@ -66,7 +66,7 @@ export default function withAlert(WrappedComponent) {
 			},
 			onConfirm = (message, callback, includeCancel = false) => {
 				clearAll();
-				setMode(ALERT_MODE_YES_NO);
+				setMode(includeCancel ? ALERT_MODE_YES : ALERT_MODE_YES_NO);
 				setTitle('Confirm');
 				setMessage(message);
 				setIncludeCancel(includeCancel);

package/src/Components/Hoc/withComponent.js

@@ -1,4 +1,7 @@
 import React, { useState, useRef, useEffect, } from 'react';
+import {
+	v4 as uuid,
+} from 'uuid';
 import _ from 'lodash';
 
 // This HOC establishes a parent-child relationship between components.
@@ -7,13 +10,14 @@ import _ from 'lodash';
 
 export default function withComponent(WrappedComponent) {
 	return (props) => {
+
 		const {
 				// self: parent,
 				parent,
 				componentMethods,
 				...propsToPass
 			} = props,
-			{ reference } = props,
+			reference = _.isEmpty(props.reference) ? uuid() : props.reference,
 			childrenRef = useRef({}),
 			selfRef = useRef({
 				parent,

package/src/Components/Hoc/withPdfButton.js

@@ -187,7 +187,7 @@ export default function withPdfButton(WrappedComponent) {
 								startingValues={startingValues}
 								validator={validator}
 								checkIsEditingDisabled={false}
-								onCancel={(e) => {
+								onClose={(e) => {
 									setIsModalShown(false);
 								}}
 								onSubmit={(data, e) => {

package/src/Components/index.js

@@ -1,5 +1,6 @@
 import {
 	Column,
+	Row,
 } from 'native-base';
 // import AccordionGridPanel from '../Components/Panel/AccordionGridPanel.js';
 import ArrayCheckboxGroup from './Form/Field/Checkbox/ArrayCheckboxGroup.js';
@@ -90,6 +91,7 @@ const components = {
 	// Picker,
 	PlusMinusButton,
 	RadioGroup,
+	Row,
 	SquareButton,
 	TabPanel,
 	Tag,

package/src/PlatformImports/Web/Attachments.js

@@ -171,6 +171,7 @@ function AttachmentsElement(props) {
 		},
 		doDelete = (id) => {
 			Repository.deleteById(id);
+			Repository.save();
 		};
 
 	if (!_.isEqual(modelidCalc, modelid.current)) {