@onehat/ui 0.3.74 → 0.3.76

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.74",
+	"version": "0.3.76",
 	"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>;
 			}
@@ -495,8 +499,18 @@ function Form(props) {
 											</Row>;
 							}
 								
-							let requiredIndicator = null;
-							if (propertyDef?.validator?.spec && !propertyDef.validator.spec.optional) {
+							let isRequired = false,
+								requiredIndicator = null;
+							if (editorType === EDITOR_TYPE__PLAIN) {
+								// submitted validator
+								if (validator?.fields && validator.fields[name]?.exclusiveTests?.required) {
+									isRequired = true;
+								}
+							} else if (propertyDef?.validator?.spec && !propertyDef.validator.spec.optional) {
+								// property definition
+								isRequired = true;
+							}
+							if (isRequired) {
 								requiredIndicator = <Text color="#f00" fontSize="30px" pr={1}>*</Text>;
 							}
 							if (!disableLabels && label && editorType !== EDITOR_TYPE__INLINE) {
@@ -504,10 +518,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 +782,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/Hoc/withPdfButton.js

@@ -43,6 +43,7 @@ export default function withPdfButton(WrappedComponent) {
 			} = props,
 			[isModalShown, setIsModalShown] = useState(false),
 			[width, height] = useAdjustedWindowSize(500, 800),
+			propertyNames = [],
 			buildModalItems = () => {
 				const modalItems = _.map(_.cloneDeep(items), (item, ix) => buildNextLayer(item, ix, columnDefaults)); // clone, as we don't want to alter the item by reference
 
@@ -57,10 +58,8 @@ export default function withPdfButton(WrappedComponent) {
 						} else {
 							name = ancillaryItem.title;
 						}
-						if (!inArray(name, ['Photos', 'Videos', 'Files'])) {
-							return;
-						}
 						name = 'ancillary___' + name;
+						propertyNames.push(name); // for validator
 						items.push({
 							title: ancillaryItem.title,
 							label: ancillaryItem.title,
@@ -77,6 +76,7 @@ export default function withPdfButton(WrappedComponent) {
 						items,
 						showToggleAllCheckbox: true,
 						isCollapsible: false,
+						ml: 3, // since it's not in a column, which normally adds pl: 3
 					});
 				}
 	
@@ -112,14 +112,18 @@ export default function withPdfButton(WrappedComponent) {
 						item.title = propertyDef.title;
 					}
 				}
+				if (name) {
+					propertyNames.push(name); // for validator
+				}
 				item.type = 'Checkbox';
 				return item;
 			},
-			buildValidator = (modalItems) => {
-
-				// TODO: Build a real validator that checks all modalItems as booleans
-
-				return yup.object();
+			buildValidator = () => {
+				const propertyValidatorDefs = {};
+				_.each(propertyNames, (name) => {
+					propertyValidatorDefs[name] = yup.boolean().required();
+				});
+				return yup.object(propertyValidatorDefs);
 			},
 			getStartingValues = (modalItems) => {
 				const startingValues = {};
@@ -171,7 +175,7 @@ export default function withPdfButton(WrappedComponent) {
 			const
 				modalItems = buildModalItems(),
 				startingValues = getStartingValues(modalItems),
-				validator = buildValidator(modalItems);
+				validator = buildValidator();
 			modal = <Modal
 						isOpen={true}
 						onClose={() => setIsModalShown(false)}

package/src/Components/Icons/Bookmark.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"
+      height={16}
+      width={12}
+      viewBox="0 0 384 512"
+      {...props}
+    >
+      <Path d="M0 48v439.7C0 501.1 10.9 512 24.3 512c5 0 9.9-1.5 14-4.4L192 400l153.7 107.6c4.1 2.9 9 4.4 14 4.4 13.4 0 24.3-10.9 24.3-24.3V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48z" />
+    </Icon>
+  )
+}
+
+export default SvgComponent

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}>

package/src/Constants/AppStates.js

@@ -0,0 +1,3 @@
+export const APP_STATE_ACTIVE = 'active';
+export const APP_STATE_INACTIVE = 'inactive';
+export const APP_STATE_BACKGROUND = 'background';