@onehat/ui 0.3.69 → 0.3.70

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.69",
+	"version": "0.3.70",
 	"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 {
+	Button,
 	Modal,
 	Popover,
 	Pressable,
@@ -21,6 +22,7 @@ import emptyFn from '../../../../Functions/emptyFn.js';
 import { Grid, WindowedGridEditor } from '../../../Grid/Grid.js';
 import IconButton from '../../../Buttons/IconButton.js';
 import CaretDown from '../../../Icons/CaretDown.js';
+import Check from '../../../Icons/Check.js';
 import Xmark from '../../../Icons/Xmark.js';
 import _ from 'lodash';
 
@@ -327,7 +329,7 @@ export function ComboComponent(props) {
 					}
 
 				} else {
-					throw Error('Not yet implemented');
+					Repository.clear();
 				}
 			
 			} else {
@@ -427,6 +429,7 @@ export function ComboComponent(props) {
 
 	let xButton = null,
 		inputAndTrigger = null,
+		checkBtn = null,
 		grid = null,
 		dropdownMenu = null,
 		assembledComponents = null;
@@ -734,6 +737,27 @@ export function ComboComponent(props) {
 							</Popover>;
 		}
 		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
+				const isCheckBtnDisabled = _.isEmpty(value);
+				checkBtn = <IconButton
+								_icon={{
+									as: Check,
+									color: isCheckBtnDisabled ? 'disabled' : 'trueGray.600',
+									size: 'sm',
+								}}
+								isDisabled={isCheckBtnDisabled}
+								onPress={acceptSelection}
+								h="100%"
+								borderWidth={1}
+								borderColor="#bbb"
+								borderRadius="md"
+								bg={styles.FORM_COMBO_TRIGGER_BG}
+								_hover={{
+									bg: styles.FORM_COMBO_TRIGGER_HOVER_BG,
+								}}
+							/>;
+			}
 			const inputAndTriggerClone = // for RN, this is the actual input and trigger, as we need them to appear up above in the modal
 				<Row h={10}>
 					{disableDirectEntry ?
@@ -797,6 +821,7 @@ export function ComboComponent(props) {
 							bg: styles.FORM_COMBO_TRIGGER_HOVER_BG,
 						}}
 					/>
+					{checkBtn}
 				</Row>;
 			dropdownMenu = <Modal
 								isOpen={true}
@@ -810,6 +835,7 @@ export function ComboComponent(props) {
 							>
 								{inputAndTriggerClone}
 								{grid}
+								<Button mt={2} onPress={() => setIsMenuShown(false)}>Close</Button>
 							</Modal>;
 		}
 	}

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

@@ -290,11 +290,11 @@ export function DateElement(props) {
 									color: styles.FORM_DATE_ICON_COLOR,
 									size: 'sm',
 								}}
-								isDisabled={isDisabled}
 								onPress={onTriggerPress}
 								onBlur={onTriggerBlur}
-								h="100%"
+								h={10}
 								w={10}
+								isDisabled={isDisabled}
 								borderWidth={1}
 								borderColor="#bbb"
 								borderLeftRadius="md"
@@ -334,20 +334,21 @@ export function DateElement(props) {
 								<Input
 									ref={inputRef}
 									value={textInputValue}
-									autoSubmit={true}
-									isDisabled={isDisabled}
+									// setValue={onInputSetValue}
 									onChangeValue={onInputChangeText}
 									onKeyPress={onInputKeyPress}
-									onFocus={onInputFocus}
 									onBlur={onInputBlur}
-									onLayout={(e) => {
-										const {
-												height,
-												width,
-											} = e.nativeEvent.layout;
-										setWidth(Math.round(width));
-										setTop(Math.round(height));
-									}}
+									onFocus={onInputFocus}
+									autoSubmit={true}
+									isDisabled={isDisabled}
+									// onLayout={(e) => {
+									// 	const {
+									// 			height,
+									// 			width,
+									// 		} = e.nativeEvent.layout;
+									// 	setWidth(Math.round(width));
+									// 	setTop(Math.round(height));
+									// }}
 									flex={1}
 									h="100%"
 									m={0}
@@ -455,6 +456,7 @@ export function DateElement(props) {
 									minWidth={menuMinWidth}
 									overflow="auto"
 									bg="#fff"
+									{...translateProps}
 								>
 									<Popover.Body
 										ref={pickerRef}