@onehat/ui 0.3.61 → 0.3.66

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.61",
+	"version": "0.3.66",
 	"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
@@ -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/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)) {