@onehat/ui 0.3.60 → 0.3.66

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.60",
+	"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}
@@ -717,8 +721,6 @@ export function ComboComponent(props) {
 									minWidth={menuMinWidth}
 									overflow="auto"
 									bg="#fff"
-
-									h={200}
 								>
 									<Popover.Body
 										ref={menuRef}
@@ -774,6 +776,7 @@ export function ComboComponent(props) {
 							_focus={{
 								bg: styles.FORM_COMBO_INPUT_FOCUS_BG,
 							}}
+							placeholder={placeholder}
 							{..._input}
 						/>}
 					<IconButton
@@ -798,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/Grid/Grid.js

@@ -868,6 +868,41 @@ function GridComponent(props) {
 		sizeProps.flex = flex ?? 1;
 	}
 
+	let grid = <FlatList
+					ref={gridRef}
+					scrollEnabled={CURRENT_MODE === UI_MODE_WEB}
+					nestedScrollEnabled={true}
+					contentContainerStyle={{
+						overflow: 'auto',
+						borderWidth: isDragMode ? styles.REORDER_BORDER_WIDTH : 0,
+						borderColor: isDragMode ? styles.REORDER_BORDER_COLOR : null,
+						borderStyle: styles.REORDER_BORDER_STYLE,
+						flex: 1,
+					}}
+					refreshing={isLoading}
+					onRefresh={pullToRefresh ? onRefresh : null}
+					progressViewOffset={100}
+					data={rowData}
+					keyExtractor={(item) => {
+						let id;
+						if (item.id) {
+							id = item.id;
+						} else if (fields) {
+							id = item[idIx];
+						}
+						return String(id);
+					}}
+					initialNumToRender={initialNumToRender}
+					initialScrollIndex={0}
+					renderItem={renderRow}
+					bg="trueGray.100"
+					{...flatListProps}
+				/>
+	if (CURRENT_MODE === UI_MODE_REACT_NATIVE) {
+		grid = <ScrollView flex={1} w="100%">{grid}</ScrollView>
+	}
+
+
 	return <Column
 				{...testProps('Grid')}
 				ref={containerRef}
@@ -885,40 +920,7 @@ function GridComponent(props) {
 						deselectAll();
 					}
 				}}>
-					{!entities?.length ? 
-						<NoRecordsFound text={noneFoundText} onRefresh={onRefresh} /> :
-						<ScrollView flex={1} w="100%">
-							<FlatList
-								ref={gridRef}
-								scrollEnabled={false}
-								nestedScrollEnabled={true}
-								contentContainerStyle={{
-									overflow: 'auto',
-									borderWidth: isDragMode ? styles.REORDER_BORDER_WIDTH : 0,
-									borderColor: isDragMode ? styles.REORDER_BORDER_COLOR : null,
-									borderStyle: styles.REORDER_BORDER_STYLE,
-									flex: 1,
-								}}
-								refreshing={isLoading}
-								onRefresh={pullToRefresh ? onRefresh : null}
-								progressViewOffset={100}
-								data={rowData}
-								keyExtractor={(item) => {
-									let id;
-									if (item.id) {
-										id = item.id;
-									} else if (fields) {
-										id = item[idIx];
-									}
-									return String(id);
-								}}
-								initialNumToRender={initialNumToRender}
-								initialScrollIndex={0}
-								renderItem={renderRow}
-								bg="trueGray.100"
-								{...flatListProps}
-							/>
-						</ScrollView>}
+					{!entities?.length ? <NoRecordsFound text={noneFoundText} onRefresh={onRefresh} /> : grid}
 				</Column>
 
 				{listFooterComponent}

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)) {