@onehat/ui 0.3.260 → 0.3.262

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

@@ -4,10 +4,10 @@ import {
 	Modal,
 	Popover,
 	Pressable,
-	Row,
+	HStack,
 	Text,
 	Tooltip,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import {
 	UI_MODE_REACT_NATIVE,
 	UI_MODE_WEB,
@@ -104,7 +104,7 @@ export function ComboComponent(props) {
 			if (isMenuShown) {
 				return;
 			}
-			if (UiGlobals.mode === UI_MODE_WEB && inputRef.current.getBoundingClientRect) {
+			if (UiGlobals.mode === UI_MODE_WEB && inputRef.current?.getBoundingClientRect) {
 				// For web, ensure it's in the proper place
 				const
 					rect = inputRef.current.getBoundingClientRect(),
@@ -855,7 +855,7 @@ export function ComboComponent(props) {
 							/>;
 			}
 			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}>
+				<HStack h={10}>
 					{xButton}
 					{eyeButton}
 					{disableDirectEntry ?
@@ -922,7 +922,7 @@ export function ComboComponent(props) {
 						}}
 					/>
 					{checkButton}
-				</Row>;
+				</HStack>;
 			dropdownMenu = <Modal
 								isOpen={true}
 								safeAreaTop={true}
@@ -947,26 +947,26 @@ export function ComboComponent(props) {
 	if (isRendered && additionalButtons?.length && containerWidth < 500) {
 		// be responsive for small screen sizes and bump additionalButtons to the next line
 		assembledComponents = 
-			<Column>
-				<Row {...refProps} justifyContent="center" alignItems="center" flex={1} h="100%">
+			<VStack>
+				<HStack {...refProps} justifyContent="center" alignItems="center" flex={1} h="100%">
 					{xButton}
 					{eyeButton}
 					{inputAndTrigger}
 					{dropdownMenu}
-				</Row>
-				<Row mt={2}>
+				</HStack>
+				<HStack mt={2}>
 					{additionalButtons}
-				</Row>
-			</Column>;
+				</HStack>
+			</VStack>;
 	} else {
 		assembledComponents = 
-			<Row {...refProps} justifyContent="center" alignItems="center" flex={1} h="100%" onLayout={onLayout}>
+			<HStack {...refProps} justifyContent="center" alignItems="center" flex={1} h="100%" onLayout={onLayout}>
 				{xButton}
 				{eyeButton}
 				{inputAndTrigger}
 				{additionalButtons}
 				{dropdownMenu}
-			</Row>;
+			</HStack>;
 	}
 	
 	if (isViewerShown && Editor) {

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

@@ -1,7 +1,7 @@
 import { useMemo, } from 'react';
 import {
-	Row,
-} from 'native-base';
+	HStack,
+} from '@gluestack-ui/themed';
 import ArrayCombo from './ArrayCombo.js';
 
 export default function PageSizeCombo(props) {
@@ -11,7 +11,7 @@ export default function PageSizeCombo(props) {
 		} = props;
 
 	return useMemo(() => {
-		return <Row
+		return <HStack
 					w="100px"
 					ml={2}
 				>
@@ -30,7 +30,7 @@ export default function PageSizeCombo(props) {
 						allowNull={false}
 						disableDirectEntry={true}
 					/>
-				</Row>;
+				</HStack>;
 	}, [
 		Repository,
 		pageSize,

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

@@ -1,14 +1,13 @@
-import React, { useState, useEffect, useRef, } from 'react';
+import React, { useState, useRef, } from 'react';
 import {
 	Box,
-	Icon,
 	Modal,
 	Popover,
 	Pressable,
-	Row,
+	HStack,
 	Text,
 	Tooltip,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import {
 	DATE,
 	TIME,
@@ -502,7 +501,7 @@ export function DateElement(props) {
 		}
 		if (UiGlobals.mode === UI_MODE_REACT_NATIVE) {
 			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}>
+				<HStack h={10}>
 					<IconButton
 						_icon={{
 							as: Calendar,
@@ -568,7 +567,7 @@ export function DateElement(props) {
 							placeholder={placeholder}
 							{..._input}
 						/>}
-				</Row>;
+				</HStack>;
 			dropdownMenu = <Modal
 								isOpen={true}
 								safeAreaTop={true}
@@ -608,17 +607,17 @@ export function DateElement(props) {
 	if (tooltipRef) {
 		refProps.ref = tooltipRef;
 	}
-	assembledComponents = <Row {...refProps} justifyContent="center" alignItems="center" h={styles.FORM_COMBO_HEIGHT} flex={1} onLayout={() => setIsRendered(true)}>
+	assembledComponents = <HStack {...refProps} justifyContent="center" alignItems="center" h={styles.FORM_COMBO_HEIGHT} flex={1} onLayout={() => setIsRendered(true)}>
 							{xButton}
 							{inputAndTrigger}
 							{additionalButtons}
 							{dropdownMenu}
-						</Row>;
+						</HStack>;
 	
 	if (tooltip) {
-		assembledComponents = <Tooltip label={tooltip} placement={tooltipPlacement}>
-							{assembledComponents}
-						</Tooltip>;
+		// assembledComponents = <Tooltip label={tooltip} placement={tooltipPlacement}>
+		// 					{assembledComponents}
+		// 				</Tooltip>;
 	}
 	
 	return assembledComponents;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import {
 	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import UiGlobals from '../../../UiGlobals.js';
 import withComponent from '../../Hoc/withComponent.js';
 import withTooltip from '../../Hoc/withTooltip.js';

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

@@ -2,10 +2,10 @@ import React, { useState, useEffect, useRef, } from 'react';
 import {
 	Box,
 	Icon,
-	Row,
+	HStack,
 	Text,
 	Tooltip,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import {
 	CURRENT_MODE,
 	UI_MODE_WEB,
@@ -168,7 +168,7 @@ function FileElement(props) {
 		
 	return <div ref={dragRef} style={{ flex: 1, height: '100%', }} onDragEnter={onDragEnter} onDragLeave={onDragLeave} onDragOver={onDragOver} onDrop={onDrop}>
 				<Tooltip label={tooltip} placement={tooltipPlacement}>
-					<Row flex={1} h={10} alignItems="center">
+					<HStack flex={1} h={10} alignItems="center">
 						{isDropping && <Box position="absolute" borderWidth={isDropping ? 2 : 0} borderColor="primary.800" top={0} left={0} w="100%" h="100%" bg="trueGray.200" zIndex={10000} justifyContent="center" alignItems="center">
 											<Text>Set File</Text>
 										</Box>}
@@ -215,7 +215,7 @@ function FileElement(props) {
 														borderWidth={1}
 													/>}
 						<input type="file" ref={fileInputRef} name={name} onChange={onChangeFile} style={{ position: 'absolute', opacity: 0, height: 0, width: 0, }} />
-					</Row>
+					</HStack>
 				</Tooltip>
 			</div>;
 }

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, } from 'react';
 import {
 	Input,
 	Tooltip,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import UiGlobals from '../../../UiGlobals.js';
 import withComponent from '../../Hoc/withComponent.js';
 import withValue from '../../Hoc/withValue.js';
@@ -86,9 +86,9 @@ function InputElement(props) {
 						value={localValue}
 					/>;
 	if (tooltip) {
-		component = <Tooltip label={tooltip} placement={tooltipPlacement}>
-						{component}
-					</Tooltip>;
+		// component = <Tooltip label={tooltip} placement={tooltipPlacement}>
+		// 				{component}
+		// 			</Tooltip>;
 	}
 	return component;
 }

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

@@ -3,8 +3,8 @@ import React, { useState, useEffect, useRef, } from 'react';
 import {
 	Icon,
 	Input,
-	Row,
-} from 'native-base';
+	HStack,
+} from '@gluestack-ui/themed';
 import UiGlobals from '../../../UiGlobals.js';
 import IconButton from '../../Buttons/IconButton.js';
 import withComponent from '../../Hoc/withComponent.js';
@@ -118,7 +118,7 @@ function NumberElement(props) {
 		isIncrementDisabled = typeof maxValue !== 'undefined' && value === maxValue,
 		isDecrementDisabled = typeof minValue !== 'undefined' && (value === minValue || (!value && minValue === 0));
 
-	return <Row flex={1} h="100%" p={0} borderWidth={1} borderColor="trueGray.400" borderRadius={6} {...props}>
+	return <HStack flex={1} h="100%" p={0} borderWidth={1} borderColor="trueGray.400" borderRadius={6} {...props}>
 				<IconButton
 					icon={<Icon as={Minus} color={(isDecrementDisabled || isDisabled) ? 'disabled' : 'trueGray.500'} />}
 					onPress={onDecrement}
@@ -162,7 +162,7 @@ function NumberElement(props) {
 					borderLeftRadius={0}
 					zIndex={10}
 				/>
-			</Row>;
+			</HStack>;
 }
 
 export default withComponent(withValue(NumberElement));

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

@@ -1,9 +1,7 @@
 import React, { useState, useEffect, } from 'react';
 import {
-	Column,
 	Radio,
-	Row,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import withComponent from '../../../Hoc/withComponent.js';
 import withData from '../../../Hoc/withData.js';
 import withValue from '../../../Hoc/withValue.js';

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

@@ -1,9 +1,9 @@
 import { useState, useRef, } from 'react';
 import {
-	Column,
+	VStack,
 	Modal,
-	Row,
-} from 'native-base';
+	HStack,
+} from '@gluestack-ui/themed';
 import {
 	EDITOR_TYPE__WINDOWED,
 } from '../../../../Constants/Editor.js';
@@ -237,13 +237,13 @@ function TagComponent(props) {
 	}
 
 	return <>
-				<Column
+				<VStack
 					{...props}
 					{...sizeProps}
 					px={0}
 					py={0}
 				>
-					<Row
+					<HStack
 						w="100%"
 						borderWidth={1}
 						borderColor="trueGray.300"
@@ -253,7 +253,7 @@ function TagComponent(props) {
 						mb={styles.FORM_TAG_MB}
 						minHeight={styles.FORM_TAG_MIN_HEIGHT}
 						flexWrap="wrap"
-					>{valueBoxes}</Row>
+					>{valueBoxes}</HStack>
 					{!isViewOnly && <WhichCombo
 										Repository={props.Repository}
 										Editor={props.Editor}
@@ -267,7 +267,7 @@ function TagComponent(props) {
 										tooltip={tooltip}
 										{..._combo}
 									/>}
-				</Column>
+				</VStack>
 				{isViewerShown && 
 					<Modal
 						isOpen={true}

package/src/Components/Form/Field/Tag/ValueBox.js

@@ -1,7 +1,7 @@
 import {
-	Row,
+	HStack,
 	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import IconButton from '../../../Buttons/IconButton.js';
 import Eye from '../../../Icons/Eye.js';
 import Xmark from '../../../Icons/Xmark.js';
@@ -15,7 +15,7 @@ export default function ValueBox(props) {
 			onDelete,
 		} = props,
 		styles = UiGlobals.styles;
-	return <Row
+	return <HStack
 				borderWidth={1}
 				borderColor="trueGray.400"
 				borderRadius="md"
@@ -48,5 +48,5 @@ export default function ValueBox(props) {
 						onPress={onDelete}
 						h="100%"
 					/>}
-			</Row>;
+			</HStack>;
 }

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import {
 	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import UiGlobals from '../../../UiGlobals.js';
 import withComponent from '../../Hoc/withComponent.js';
 import withTooltip from '../../Hoc/withTooltip.js';

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, } from 'react';
 import {
-	TextArea,
-} from 'native-base';
+	Textarea,
+} from '@gluestack-ui/themed';
 import UiGlobals from '../../../UiGlobals.js';
 import withComponent from '../../Hoc/withComponent.js';
 import withTooltip from '../../Hoc/withTooltip.js';
@@ -50,7 +50,7 @@ const
 			localValue = ''; // If the value is null or undefined, don't let this be an uncontrolled input
 		}
 
-		return <TextArea
+		return <Textarea
 					ref={props.outerRef}
 					onChangeText={onChangeTextLocal}
 					flex={1}

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

@@ -2,10 +2,10 @@ import React, { useRef, } from 'react';
 import {
 	Icon,
 	Pressable,
-	Row,
+	HStack,
 	Switch,
 	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import UiGlobals from '../../../UiGlobals.js';
 import IconButton from '../../Buttons/IconButton.js';
 import Na from '../../Icons/Na.js';
@@ -51,7 +51,7 @@ const
 					/>;
 		}
 
-		return <Row alignItems="center">
+		return <HStack alignItems="center">
 					<Pressable onPress={onNullify}>
 						<Switch
 							ref={props.outerRef}
@@ -71,7 +71,7 @@ const
 					<Pressable onPress={onToggle}>
 						<Text ml={2} fontSize={styles.FORM_TOGGLE_FONTSIZE}>{_.isNil(value) ? 'N/A' : (!!value ? 'Yes' : 'No')}</Text>
 					</Pressable>
-				</Row>;
+				</HStack>;
 	},
 	ToggleField = withComponent(withValue(ToggleElement));
 

package/src/Components/Form/FieldSet.js

@@ -1,10 +1,9 @@
 import { useState, useRef, } from 'react';
 import {
 	Box,
-	Column,
-	Row,
+	HStack,
 	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import FieldSetContext from '../../Contexts/FieldSetContext.js';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
 import UiGlobals from '../../UiGlobals.js';
@@ -86,7 +85,7 @@ export default function FieldSet(props) {
 				{...propsToPass}
 			>
 				{title &&
-					<Row
+					<HStack
 						w="100%"
 						borderBottomWidth={1}
 						borderBottomColor="trueGray.200"
@@ -102,7 +101,7 @@ export default function FieldSet(props) {
 							numberOfLines={1}
 							ellipsizeMode="head"
 						>{title}</Text>
-						{showToggleAllCheckbox && <Row alignSelf="right">
+						{showToggleAllCheckbox && <HStack alignSelf="right">
 														<Text
 															fontSize={styles.FORM_FIELDSET_FONTSIZE}
 															py={1}
@@ -117,7 +116,7 @@ export default function FieldSet(props) {
 																size: 'lg',
 															}}
 														/>
-													</Row>}
+													</HStack>}
 						{isCollapsible && <IconButton
 												_icon={{
 													as: isLocalCollapsed ? <CaretDown /> : <CaretUp />,
@@ -126,7 +125,7 @@ export default function FieldSet(props) {
 												}}
 												onPress={onToggleCollapse}
 											/>}
-					</Row>}
+					</HStack>}
 				{helpText && <Text>{helpText}</Text>}
 				{!isLocalCollapsed && <FieldSetContext.Provider value={{ registerChild, onChangeValue, }}>
 											{children}

package/src/Components/Form/FiltersForm.js

@@ -1,12 +1,3 @@
-import { useState, useEffect, } from 'react';
-import {
-	Button,
-	Column,
-	Icon,
-	Row,
-	ScrollView,
-	Text,
-} from 'native-base';
 import Form from './Form.js';
 import _ from 'lodash';