@onehat/ui 0.3.74 → 0.3.75

package/package.json

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

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

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef, } from 'react';
 import {
+	Icon,
 	Modal,
 	Popover,
 	Pressable,
@@ -43,6 +44,7 @@ export function ComboComponent(props) {
 			tooltipPlacement = 'bottom',
 			placeholder,
 			onRowPress,
+			icon,
 
 			// withComponent
 			self,
@@ -215,10 +217,10 @@ export function ComboComponent(props) {
 				// 	showMenu();
 				// 	selectNext();
 				// 	setTimeout(() => {
-				// 		if (!self.children?.dropdownGrid?.selectPrev) {
+				// 		if (!self.children?.grid?.selectPrev) {
 				// 			debugger;
 				// 		}
-				// 		self.children.dropdownGrid.selectNext();
+				// 		self.children.grid.selectNext();
 				// 	}, 10);
 				// 	break;
 				// case 'ArrowUp':
@@ -226,7 +228,7 @@ export function ComboComponent(props) {
 				// 	showMenu();
 				// 	selectPrev();
 				// 	setTimeout(() => {
-				// 		self.children.dropdownGrid.selectPrev();
+				// 		self.children.grid.selectPrev();
 				// 	}, 10);
 				// 	break;
 				default:
@@ -285,13 +287,13 @@ export function ComboComponent(props) {
 			resetTextInputValue();
 			hideMenu();
 		},
-		onClearBtn = () => {
-			setTextInputValue('');
+		onXButtonPress = () => {
 			setValue(null);
+			clearGridFilters();
+			clearGridSelection();
 		},
-		onXBtnPress = () => {
+		onCheckButtonPress = () => {
 			hideMenu();
-			setValue(null);
 		},
 		isEventStillInComponent = (e) => {
 			const {
@@ -341,6 +343,11 @@ export function ComboComponent(props) {
 				setFilteredData(data);
 			}
 		},
+		clearGridSelection = () => {
+			if (self?.children.grid?.deselectAll) {
+				self?.children.grid?.deselectAll();
+			}
+		},
 		searchForMatches = async (value) => {
 			if (!isMenuShown) {
 				showMenu();
@@ -427,13 +434,10 @@ export function ComboComponent(props) {
 		return null;
 	}
 
-	if (self) {
-		self.clear = onClearBtn;
-	}
-
+	const inputIconElement = icon ? <Icon as={icon} color="trueGray.300" size="md" ml={2} mr={3} /> : null;
 	let xButton = null,
 		inputAndTrigger = null,
-		checkBtn = null,
+		checkButton = null,
 		grid = null,
 		dropdownMenu = null,
 		assembledComponents = null;
@@ -446,7 +450,7 @@ export function ComboComponent(props) {
 							size: 'sm',
 						}}
 						isDisabled={isDisabled}
-						onPress={onXBtnPress}
+						onPress={onXButtonPress}
 						h="100%"
 						bg={styles.FORM_COMBO_TRIGGER_BG}
 						_hover={{
@@ -462,25 +466,24 @@ export function ComboComponent(props) {
 									onPress={toggleMenu}
 									flex={1}
 									h="100%"
+									flexDirection="row"
+									borderWidth={1}
+									borderColor="trueGray.400"
+									borderTopRightRadius={0}
+									borderBottomRightRadius={0}
+									bg={styles.FORM_COMBO_INPUT_BG}
+									m={0}
+									p={2}
 								>
+									{inputIconElement}
 									<Text
 										ref={inputRef}
 										flex={1}
 										h="100%"
 										numberOfLines={1}
 										ellipsizeMode="head"
-										m={0}
-										p={2}
-										borderWidth={1}
-										borderColor="trueGray.400"
-										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,
-										}}
 									>{_.isEmpty(textInputValue) ? placeholder : textInputValue}</Text>
 								</Pressable> :
 								<Input
@@ -496,6 +499,7 @@ export function ComboComponent(props) {
 									flex={1}
 									h="100%"
 									m={0}
+									InputLeftElement={inputIconElement}
 									autoSubmitDelay={0}
 									borderTopRightRadius={0}
 									borderBottomRightRadius={0}
@@ -539,24 +543,23 @@ export function ComboComponent(props) {
 							<Pressable
 								onPress={showMenu}
 								flex={1}
+								flexDirection="row"
+								borderWidth={1}
+								borderColor="trueGray.400"
+								borderTopRightRadius={0}
+								borderBottomRightRadius={0}
+								bg={styles.FORM_COMBO_INPUT_BG}
+								m={0}
+								p={2}
 							>
+								{inputIconElement}
 								<Text
 									flex={1}
 									h="100%"
 									numberOfLines={1}
 									ellipsizeMode="head"
-									m={0}
-									p={2}
-									borderWidth={1}
-									borderColor="trueGray.400"
-									borderTopRightRadius={0}
-									borderBottomRightRadius={0}
 									color={_.isEmpty(displayValue) ? 'trueGray.400' : '#000'}
 									fontSize={styles.FORM_COMBO_INPUT_FONTSIZE}
-									bg={styles.FORM_COMBO_INPUT_BG}
-									_focus={{
-										bg: styles.FORM_COMBO_INPUT_FOCUS_BG,
-									}}
 								>{_.isEmpty(displayValue) ? placeholder : displayValue}</Text>
 							</Pressable>
 							<IconButton
@@ -614,7 +617,7 @@ export function ComboComponent(props) {
 					autoAdjustPageSizeToHeight={false}
 					{...gridProps}
 					data={filteredData}
-					reference="dropdownGrid"
+					reference="grid"
 					parent={self}
 					h={UiGlobals.mode === UI_MODE_WEB ? styles.FORM_COMBO_MENU_HEIGHT + 'px' : null}
 					newEntityDisplayValue={newEntityDisplayValue}
@@ -737,13 +740,14 @@ export function ComboComponent(props) {
 		if (UiGlobals.mode === UI_MODE_REACT_NATIVE) {
 			if (isEditor) {
 				// in RN, an editor has no way to accept the selection of the grid, so we need to add a check button to do this
-				checkBtn = <IconButton
+				checkButton = <IconButton
 								_icon={{
 									as: Check,
 									color: 'trueGray.600',
 									size: 'sm',
 								}}
-								onPress={onXBtnPress}
+								onPress={onCheckButtonPress}
+								isDisabled={!value}
 								h="100%"
 								borderWidth={1}
 								borderColor="#bbb"
@@ -789,6 +793,7 @@ export function ComboComponent(props) {
 							flex={1}
 							h="100%"
 							m={0}
+							InputLeftElement={inputIconElement}
 							autoSubmitDelay={0}
 							borderTopRightRadius={0}
 							borderBottomRightRadius={0}
@@ -819,7 +824,7 @@ export function ComboComponent(props) {
 							bg: styles.FORM_COMBO_TRIGGER_HOVER_BG,
 						}}
 					/>
-					{checkBtn}
+					{checkButton}
 				</Row>;
 			dropdownMenu = <Modal
 								isOpen={true}

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

@@ -17,6 +17,7 @@ function InputElement(props) {
 			setValue,
 			autoSubmit = true, // automatically setValue after user stops typing for autoSubmitDelay
 			autoSubmitDelay = AUTO_SUBMIT_DELAY,
+			autoCapitalize = 'none',
 			maxLength,
 			onKeyPress,
 			onChangeText,
@@ -82,6 +83,7 @@ function InputElement(props) {
 						_focus={{
 							bg: styles.FORM_INPUT_FOCUS_BG,
 						}}
+						autoCapitalize={autoCapitalize}
 						{...sizeProps}
 						{...props}
 						value={localValue}

package/src/Components/Form/Form.js

@@ -393,7 +393,11 @@ function Form(props) {
 					if (defaults?.labelWidth) {
 						labelProps.w = defaults.labelWidth;
 					}
-					element = <><Label {...labelProps}>{label}</Label>{element}</>;
+					if (containerWidth > 400) {
+						element = <><Label {...labelProps}>{label}</Label>{element}</>;
+					} else {
+						element = <Column><Label {...labelProps}>{label}</Label>{element}</Column>;
+					}
 				}
 				return <Row key={ix} px={2} pb={1}>{element}</Row>;
 			}
@@ -504,10 +508,17 @@ function Form(props) {
 								if (defaults?.labelWidth) {
 									labelProps.w = defaults.labelWidth;
 								}
-								element = <Row w="100%" py={1}>
-												<Label {...labelProps}>{requiredIndicator}{label}</Label>
-												{element}
-											</Row>;
+								if (containerWidth > 400) {
+									element = <Row w="100%" py={1}>
+													<Label {...labelProps}>{requiredIndicator}{label}</Label>
+													{element}
+												</Row>;
+								} else {
+									element = <Column w="100%" py={1} mt={3}>
+													<Label {...labelProps}>{requiredIndicator}{label}</Label>
+													{element}
+												</Column>;
+								}
 							} else if (disableLabels && requiredIndicator) {
 								element = <Row w="100%" py={1}>
 												{requiredIndicator}
@@ -761,7 +772,7 @@ function Form(props) {
 		}
 	}
 	
-	return <Column {...sizeProps} pb={10} onLayout={onLayoutDecorated} ref={formRef}>
+	return <Column {...sizeProps} onLayout={onLayoutDecorated} ref={formRef}>
 				{!!containerWidth && <>
 					{editorType === EDITOR_TYPE__INLINE &&
 						<ScrollView

package/src/Components/Icons/ClipboardList.js

@@ -0,0 +1,20 @@
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+  return (
+    <Icon
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 384 512"
+      {...props}
+    >
+      <Path
+        d="M192 0c-41.8 0-77.4 26.7-90.5 64H64C28.7 64 0 92.7 0 128v320c0 35.3 28.7 64 64 64h256c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64h-37.5C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 110 64 32 32 0 110-64zM72 272a24 24 0 1148 0 24 24 0 11-48 0zm104-16h128c8.8 0 16 7.2 16 16s-7.2 16-16 16H176c-8.8 0-16-7.2-16-16s7.2-16 16-16zM72 368a24 24 0 1148 0 24 24 0 11-48 0zm88 0c0-8.8 7.2-16 16-16h128c8.8 0 16 7.2 16 16s-7.2 16-16 16H176c-8.8 0-16-7.2-16-16z"
+      />
+    </Icon>
+  )
+}
+
+export default SvgComponent

package/src/Components/Messages/Loading.js

@@ -1,13 +1,17 @@
 import {
 	Row,
 	Spinner,
+	Text,
 } from 'native-base';
 import ScreenContainer from '../Container/ScreenContainer.js';
 
 export default function Loading(props) {
 	if (props.isScreen) {
 		return <ScreenContainer {...props}>
-					<Spinner flex={1} color="primary.500" />
+					<Row flex={1} justifyContent="center" alignItems="center">
+						<Spinner color="primary.500" mr={2} />
+						<Text>Loading</Text>
+					</Row>
 				</ScreenContainer>;
 	}
 	return <Row justifyContent="center" minHeight={100} {...props}>