@onehat/ui 0.3.262 → 0.3.263

package/package.json

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

package/src/Components/Accordion/Accordion.js

@@ -1,10 +1,12 @@
 import { useState, useEffect, useRef, } from 'react';
 import {
-	HStack,
+	Box,
+	Column,
 	Pressable,
+	Row,
 	ScrollView,
-	VStack,
-} from '@gluestack-ui/themed';
+	Text,
+} from 'native-base';
 import inArray from '../../Functions/inArray.js';
 import emptyFn from '../../Functions/emptyFn.js';
 import _ from 'lodash';
@@ -71,7 +73,7 @@ export default function Accordion(props) {
 				rowProps.overflow = 'hidden'; // otherwise some elements mistakenly show
 			}
 
-			return <VStack key={ix}>
+			return <Column key={ix}>
 						<Pressable
 							onPress={(e) => {
 								let newActiveSections = [];
@@ -92,10 +94,10 @@ export default function Accordion(props) {
 						>
 							{header}
 						</Pressable>
-						<HStack {...rowProps} bg="#f00">
+						<Row {...rowProps} bg="#f00">
 							{content}
-						</HStack>
-					</VStack>;
+						</Row>
+					</Column>;
 		});
 
 	useEffect(() => {
@@ -114,16 +116,14 @@ export default function Accordion(props) {
 		if (activeSections?.length && sections?.length) {
 			scrollTo = sectionHeight * activeIx;
 		}
-		if (scrollView) {
-			setTimeout(()=> {
-				scrollView.scrollTo({ x: 0, y: scrollTo, animated: true });
-			}, 10); // delay so render can finish
-		}
+		setTimeout(()=> {
+			scrollView.scrollTo({ x: 0, y: scrollTo, animated: true });
+		}, 10); // delay so render can finish
 
 	}, [activeSections, isRendered]);
 	
 	return <ScrollView ref={scrollViewRef} keyboardShouldPersistTaps="always" flex={1} w="100%">
-				<VStack
+				<Column
 					{...propsToPass}
 					pb={(onlyOne ? calculateExtraPadding() : 0) + 'px'}
 					onLayout={(e) => {
@@ -138,6 +138,6 @@ export default function Accordion(props) {
 					}}
 				>
 					{items}
-				</VStack>
+				</Column>
 			</ScrollView>;
 }

package/src/Components/Blank.js

@@ -1,6 +1,6 @@
 import {
 	Box,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import _ from 'lodash';
 
 export default function Blank(props) {

package/src/Components/Buttons/BackButton.js

@@ -2,7 +2,7 @@ import {
 	Icon,
 	Pressable,
 	Text,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import AngleLeft from '../Icons/AngleLeft.js';
 
 export default function BackButton(props) {

package/src/Components/Buttons/Button.js

@@ -1,7 +1,7 @@
 import { useRef, } from 'react';
 import {
 	Button,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import withComponent from '../Hoc/withComponent.js';
 
 const ButtonComponent = function(props) {

package/src/Components/Buttons/CartButtonWithBadge.js

@@ -3,7 +3,7 @@ import {
 	Icon,
 	Pressable,
 	Text,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import {
 	Ionicons,
 } from '@expo/vector-icons';

package/src/Components/Buttons/IconButton.js

@@ -1,13 +1,10 @@
 import React, { useRef, } from 'react';
 import {
-	Button,
-	ButtonText,
-	ButtonIcon,
 	Icon,
 	Pressable,
 	Spinner,
 	Tooltip,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import withComponent from '../Hoc/withComponent.js';
 import UiGlobals from '../../UiGlobals.js';
 import _ from 'lodash';
@@ -72,7 +69,7 @@ const
 							</Pressable>;
 		ret = pressable;
 		if (tooltip) {
-			// ret = <Tooltip label={tooltip} placement={tooltipPlacement}>{ret}</Tooltip>;
+			ret = <Tooltip label={tooltip} placement={tooltipPlacement}>{ret}</Tooltip>;
 		}
 		return ret;
 	},

package/src/Components/Buttons/PlusMinusButton.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import {
-	HStack,
+	Row,
 	Text,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import IconButton from './IconButton.js';
 import Plus from '../Icons/Plus.js';
 import Minus from '../Icons/Minus.js';
@@ -17,8 +17,8 @@ const PlusMinusButton = React.forwardRef((props, ref) => {
 			minusHandler = () => {},
 		} = props;
 
-		return <HStack {...props}>
-					<HStack alignItems="center">
+		return <Row {...props}>
+					<Row alignItems="center">
 						<IconButton
 							icon={<Minus color="#fff" />}
 							onPress={minusHandler}
@@ -32,8 +32,8 @@ const PlusMinusButton = React.forwardRef((props, ref) => {
 							isDisabled={isPlusDisabled}
 							ml={1}
 						/>
-					</HStack>
-				</HStack>;
+					</Row>
+				</Row>;
 
 });
 

package/src/Components/Buttons/SquareButton.js

@@ -3,7 +3,7 @@ import {
 	Icon,
 	Pressable,
 	Text,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import IconButton from './IconButton.js';
 import UiGlobals from '../../UiGlobals.js';
 

package/src/Components/Container/Container.js

@@ -1,8 +1,8 @@
 import React, { useState, useEffect, } from 'react';
 import {
-	VStack,
-	HStack,
-} from '@gluestack-ui/themed';
+	Column,
+	Row,
+} from 'native-base';
 import {
 	HORIZONTAL,
 	VERTICAL,
@@ -286,21 +286,21 @@ function Container(props) {
 		componentProps = {};
 	}
 	
-	return <VStack w="100%" flex={1}>
+	return <Column w="100%" flex={1}>
 				{northComponent}
 				{(!isNorthCollapsed && !localIsNorthCollapsed) && northSplitter}
-				<HStack w="100%" flex={100}>
+				<Row w="100%" flex={100}>
 					{westComponent}
 					{(!isWestCollapsed && !localIsWestCollapsed) && westSplitter}
-					<VStack h="100%" flex={100}>
+					<Column h="100%" flex={100}>
 						{centerComponent}
-					</VStack>
+					</Column>
 					{(!isEastCollapsed && !localIsEastCollapsed) && eastSplitter}
 					{eastComponent}
-				</HStack>
+				</Row>
 				{(!isSouthCollapsed && !localIsSouthCollapsed) && southSplitter}
 				{southComponent}
-			</VStack>;
+			</Column>;
 }
 
 export default withComponent(Container);

package/src/Components/Container/ScreenContainer.js

@@ -4,10 +4,10 @@ import {
 	useWindowDimensions,
 } from 'react-native';
 import {
-	VStack,
+	Column,
 	ScrollView,
 	KeyboardAvoidingView,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import withComponent from '../Hoc/withComponent.js';
 // import { useHeaderHeight } from '@react-navigation/elements';
 // import testProps from '../OneHat/functions/testProps';
@@ -35,7 +35,7 @@ function ScreenContainer(props) {
 		safeAreaProps.safeArea = true;
 	}
 
-	const column = <VStack
+	const column = <Column
 						// {...testProps(screenName)}
 						alignItems="center"
 						justifyContent="flex-start"
@@ -48,7 +48,7 @@ function ScreenContainer(props) {
 						{...safeAreaProps}
 					>
 						{props.children}
-					</VStack>;
+					</Column>;
 	
 	if (scrollEnabled) {
 		const scrollViewProps = {};

package/src/Components/Container/Splitter.js

@@ -1,7 +1,8 @@
 import {
-	VStack,
-	HStack,
-} from '@gluestack-ui/themed';
+	Column,
+	Row,
+	Text,
+} from 'native-base';
 import {
 	HORIZONTAL,
 	VERTICAL,
@@ -20,7 +21,7 @@ function Splitter(props) {
 		} = props;
 
 	if (mode === VERTICAL) {
-		return <HStack
+		return <Row
 					testID="Splitter"
 					bg={isDragging ? 'secondary.600' : 'primary.600'}
 					h="3px"
@@ -28,10 +29,10 @@ function Splitter(props) {
 					alignItems="center"
 					justifyContent="center"
 				>
-					<HStack testID="handle" h="2px" w="10%" bg="#ccc"></HStack>
-				</HStack>;
+					<Row testID="handle" h="2px" w="10%" bg="#ccc"></Row>
+				</Row>;
 	}
-	return <VStack
+	return <Column
 				testID="Splitter"
 				bg={isDragging ? 'secondary.600' : 'primary.600'}
 				h="100%"
@@ -40,8 +41,8 @@ function Splitter(props) {
 				justifyContent="center"
 				style={styles.ewResize}
 			>
-				<VStack testID="handle" w="2px" h="10%" bg="#ccc"></VStack>
-			</VStack>;
+				<Column testID="handle" w="2px" h="10%" bg="#ccc"></Column>
+			</Column>;
 }
 
 function withAdditionalProps(WrappedComponent) {

package/src/Components/Filter/DateRange.js

@@ -1,8 +1,8 @@
 import { useState, useEffect } from 'react';
 import {
-	HStack,
+	Row,
 	Text,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import Date from '../Form/Field/Date.js';
 import withTooltip from '../Hoc/withTooltip.js';
 import withValue from '../Hoc/withValue.js';
@@ -70,7 +70,7 @@ const
 			return null;
 		}
 		
-		return <HStack
+		return <Row
 					justifyContent="center"
 					alignItems="center"
 					flex={1}
@@ -93,7 +93,7 @@ const
 						// maxValue={maxValue}
 						tooltip={(tooltip ? tooltip + ' ' : '') + 'High'}
 					/>
-				</HStack>;
+				</Row>;
 	},
 	DateRangeField = withValue(DateRange);
 

package/src/Components/Filter/NumberRange.js

@@ -1,8 +1,8 @@
 import React, { useState, useEffect, } from 'react';
 import {
-	HStack,
+	Row,
 	Text,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import Number from '../Form/Field/Number.js';
 import withTooltip from '../Hoc/withTooltip.js';
 import withValue from '../Hoc/withValue.js';
@@ -61,7 +61,7 @@ import _ from 'lodash';
 	
 			}, [value]);
 
-			return <HStack
+			return <Row
 						justifyContent="center"
 						alignItems="center"
 						flex={1}
@@ -86,7 +86,7 @@ import _ from 'lodash';
 							tooltip={(tooltip ? tooltip + ' ' : '') + 'High'}
 							maxWidth={120}
 						/>
-					</HStack>;
+					</Row>;
 		},
 		NumberRangeField = withValue(NumberRange);
 

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, } from 'react';
 import {
-	HStack,
-} from '@gluestack-ui/themed';
+	Row,
+} from 'native-base';
 import UiGlobals from '../../../../UiGlobals.js';
 import { CKEditor } from '@ckeditor/ckeditor5-react'; // https://ckeditor.com/docs/ckeditor5/latest/installation/frameworks/react.html
 import './ckeditor.css';
@@ -32,7 +32,7 @@ const
 			debouncedSetValueRef.current = _.debounce(setValue, autoSubmitDelay);
 		}, [setValue]);
 
-		return <HStack h={h} flex={1} ref={props.outerRef} {...props}>
+		return <Row h={h} flex={1} ref={props.outerRef} {...props}>
 					<CKEditor
 						editor={Editor}
 						config={config}
@@ -45,7 +45,7 @@ const
 							debouncedSetValueRef.current(value);
 						}}
 					/>
-				</HStack>;
+				</Row>;
 	},
 	CKEditorField = withComponent(withValue(CKEditorElement));
 	

package/src/Components/Form/Field/Checkbox/CheckboxGroup.js

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

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

@@ -1,10 +1,11 @@
-import React, { useState, useRef, } from 'react';
+import React, { useState, useEffect, useRef, } from 'react';
 import {
 	Popover,
 	Pressable,
-	HStack,
+	Row,
+	Text,
 	Tooltip,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import { SketchPicker } from 'react-color';
 import {
 	UI_MODE_WEB,
@@ -133,101 +134,94 @@ export function ColorElement(props) {
 
 
 	// Web version
-	let assembledComponents = null;
-	assembledComponents =
-		<HStack flex={1} h="100%" alignItems="center" onLayout={() => setIsRendered(true)}>
-			<Pressable
-				ref={triggerRef}
-				onPress={onTriggerPress}
-				onBlur={onTriggerBlur}
-				h={10}
-				w={10}
-				bg={value}
-				borderTopLeftRadius={6}
-				borderBottomLeftRadius={6}
-				borderTopRightRadius={0}
-				borderBottomRightRadius={0}
-				borderWidth={1}
-				borderColor="trueGray.300"
-			/>
-			<Input
-				ref={inputRef}
-				value={value}
-				setValue={setValue}
-				maxLength={7}
-				onBlur={onInputBlur}
-				onClick={onInputClick}
-				flex={1}
-				h="100%"
-				p={2}
-				borderWidth={1}
-				borderColor="trueGray.300"
-				borderLeftWidth={0}
-				borderTopLeftRadius={0}
-				borderBottomLeftRadius={0}
-				borderTopRightRadius={6}
-				borderBottomRightRadius={6}
-				fontSize={styles.FORM_COLOR_READOUT_FONTSIZE}
-				bg={styles.FORM_COLOR_INPUT_BG}
-				_focus={{
-					bg: styles.FORM_COLOR_INPUT_FOCUS_BG,
-				}}
-				onLayout={(e) => {
-					// On web, this is not needed, but on RN it might be, so leave it in for now
-					const {
-							height,
-							top,
-							left,
-						} = e.nativeEvent.layout;
-					setTop(top + height);
-					setLeft(left);
-				}}
-			/>
-			<Popover
-				isOpen={isPickerShown}
-				onClose={() => {
-					hidePicker();
-				}}
-				trigger={emptyFn}
-				trapFocus={true}
-				placement={'auto'}
-				{...props}
-			>
-				<Popover.Content
-					position="absolute"
-					top={top + 'px'}
-					left={left + 'px'}
-					w={220}
-					h={287}
-					{...translateProps}
-				>
-					<Popover.Body
-						ref={pickerRef}
-						p={0}
+	return <Tooltip label={tooltip} placement={tooltipPlacement}>
+				<Row flex={1} h="100%" alignItems="center" onLayout={() => setIsRendered(true)}>
+					<Pressable
+						ref={triggerRef}
+						onPress={onTriggerPress}
+						onBlur={onTriggerBlur}
+						h={10}
+						w={10}
+						bg={value}
+						borderTopLeftRadius={6}
+						borderBottomLeftRadius={6}
+						borderTopRightRadius={0}
+						borderBottomRightRadius={0}
+						borderWidth={1}
+						borderColor="trueGray.300"
+					/>
+					<Input
+						ref={inputRef}
+						value={value}
+						setValue={setValue}
+						maxLength={7}
+						onBlur={onInputBlur}
+						onClick={onInputClick}
+						flex={1}
+						h="100%"
+						p={2}
+						borderWidth={1}
+						borderColor="trueGray.300"
+						borderLeftWidth={0}
+						borderTopLeftRadius={0}
+						borderBottomLeftRadius={0}
+						borderTopRightRadius={6}
+						borderBottomRightRadius={6}
+						fontSize={styles.FORM_COLOR_READOUT_FONTSIZE}
+						bg={styles.FORM_COLOR_INPUT_BG}
+						_focus={{
+							bg: styles.FORM_COLOR_INPUT_FOCUS_BG,
+						}}
+						onLayout={(e) => {
+							// On web, this is not needed, but on RN it might be, so leave it in for now
+							const {
+									height,
+									top,
+									left,
+								} = e.nativeEvent.layout;
+							setTop(top + height);
+							setLeft(left);
+						}}
+					/>
+					<Popover
+						isOpen={isPickerShown}
+						onClose={() => {
+							hidePicker();
+						}}
+						trigger={emptyFn}
+						trapFocus={true}
+						placement={'auto'}
+						{...props}
 					>
-						<SketchPicker
-							disableAlpha={true}
-							color={value}
-							onChange={(color) => setValue(color.hex)}
-							{...props}
-						/>
-					</Popover.Body>
-				</Popover.Content>
-			</Popover>
-		</HStack>;
-
+						<Popover.Content
+							position="absolute"
+							top={top + 'px'}
+							left={left + 'px'}
+							w={220}
+							h={287}
+							{...translateProps}
+						>
+							<Popover.Body
+								ref={pickerRef}
+								p={0}
+							>
+								<SketchPicker
+									disableAlpha={true}
+									color={value}
+									onChange={(color) => setValue(color.hex)}
+									{...props}
+								/>
+							</Popover.Body>
+						</Popover.Content>
+					</Popover>
+				</Row>
+			</Tooltip>;
 
 	// React Native v1
 	
 	
 	// React Native v2
 	
-	if (tooltip) {
-		// assembledComponents = <Tooltip label={tooltip} placement={tooltipPlacement}>
-		// 					{assembledComponents}
-		// 				</Tooltip>;
-	}
-	return assembledComponents;
 }
 
 export default withComponent(withValue(ColorElement));

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

@@ -4,10 +4,10 @@ import {
 	Modal,
 	Popover,
 	Pressable,
-	HStack,
+	Row,
 	Text,
 	Tooltip,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 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
-				<HStack h={10}>
+				<Row h={10}>
 					{xButton}
 					{eyeButton}
 					{disableDirectEntry ?
@@ -922,7 +922,7 @@ export function ComboComponent(props) {
 						}}
 					/>
 					{checkButton}
-				</HStack>;
+				</Row>;
 			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 = 
-			<VStack>
-				<HStack {...refProps} justifyContent="center" alignItems="center" flex={1} h="100%">
+			<Column>
+				<Row {...refProps} justifyContent="center" alignItems="center" flex={1} h="100%">
 					{xButton}
 					{eyeButton}
 					{inputAndTrigger}
 					{dropdownMenu}
-				</HStack>
-				<HStack mt={2}>
+				</Row>
+				<Row mt={2}>
 					{additionalButtons}
-				</HStack>
-			</VStack>;
+				</Row>
+			</Column>;
 	} else {
 		assembledComponents = 
-			<HStack {...refProps} justifyContent="center" alignItems="center" flex={1} h="100%" onLayout={onLayout}>
+			<Row {...refProps} justifyContent="center" alignItems="center" flex={1} h="100%" onLayout={onLayout}>
 				{xButton}
 				{eyeButton}
 				{inputAndTrigger}
 				{additionalButtons}
 				{dropdownMenu}
-			</HStack>;
+			</Row>;
 	}
 	
 	if (isViewerShown && Editor) {