@onehat/ui 0.3.259 → 0.3.262

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.259",
+	"version": "0.3.262",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -25,8 +25,9 @@
 	},
 	"license": "UNLICENSED",
 	"dependencies": {
-		"@gluestack-style/react": "^0.2.38",
-		"@gluestack-ui/themed": "^1.1.22",
+		"@gluestack-style/react": "^1.0.56",
+		"@gluestack-ui/config": "^1.1.18",
+		"@gluestack-ui/themed": "^1.1.26",
 		"@hookform/resolvers": "^3.3.1",
 		"@k-renwick/colour-mixer": "^1.2.1",
 		"@onehat/data": "^1.20.0",

package/src/Components/Accordion/Accordion.js

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

package/src/Components/Blank.js

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

package/src/Components/Buttons/BackButton.js

@@ -2,7 +2,7 @@ import {
 	Icon,
 	Pressable,
 	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 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 'native-base';
+} from '@gluestack-ui/themed';
 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 'native-base';
+} from '@gluestack-ui/themed';
 import {
 	Ionicons,
 } from '@expo/vector-icons';

package/src/Components/Buttons/IconButton.js

@@ -1,10 +1,13 @@
 import React, { useRef, } from 'react';
 import {
+	Button,
+	ButtonText,
+	ButtonIcon,
 	Icon,
 	Pressable,
 	Spinner,
 	Tooltip,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import withComponent from '../Hoc/withComponent.js';
 import UiGlobals from '../../UiGlobals.js';
 import _ from 'lodash';
@@ -69,7 +72,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 {
-	Row,
+	HStack,
 	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 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 <Row {...props}>
-					<Row alignItems="center">
+		return <HStack {...props}>
+					<HStack alignItems="center">
 						<IconButton
 							icon={<Minus color="#fff" />}
 							onPress={minusHandler}
@@ -32,8 +32,8 @@ const PlusMinusButton = React.forwardRef((props, ref) => {
 							isDisabled={isPlusDisabled}
 							ml={1}
 						/>
-					</Row>
-				</Row>;
+					</HStack>
+				</HStack>;
 
 });
 

package/src/Components/Buttons/SquareButton.js

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

package/src/Components/Container/ScreenContainer.js

@@ -4,10 +4,10 @@ import {
 	useWindowDimensions,
 } from 'react-native';
 import {
-	Column,
+	VStack,
 	ScrollView,
 	KeyboardAvoidingView,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 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 = <Column
+	const column = <VStack
 						// {...testProps(screenName)}
 						alignItems="center"
 						justifyContent="flex-start"
@@ -48,7 +48,7 @@ function ScreenContainer(props) {
 						{...safeAreaProps}
 					>
 						{props.children}
-					</Column>;
+					</VStack>;
 	
 	if (scrollEnabled) {
 		const scrollViewProps = {};

package/src/Components/Container/Splitter.js

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

package/src/Components/Filter/DateRange.js

@@ -1,8 +1,8 @@
 import { useState, useEffect } from 'react';
 import {
-	Row,
+	HStack,
 	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 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 <Row
+		return <HStack
 					justifyContent="center"
 					alignItems="center"
 					flex={1}
@@ -93,7 +93,7 @@ const
 						// maxValue={maxValue}
 						tooltip={(tooltip ? tooltip + ' ' : '') + 'High'}
 					/>
-				</Row>;
+				</HStack>;
 	},
 	DateRangeField = withValue(DateRange);
 

package/src/Components/Filter/NumberRange.js

@@ -1,8 +1,8 @@
 import React, { useState, useEffect, } from 'react';
 import {
-	Row,
+	HStack,
 	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 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 <Row
+			return <HStack
 						justifyContent="center"
 						alignItems="center"
 						flex={1}
@@ -86,7 +86,7 @@ import _ from 'lodash';
 							tooltip={(tooltip ? tooltip + ' ' : '') + 'High'}
 							maxWidth={120}
 						/>
-					</Row>;
+					</HStack>;
 		},
 		NumberRangeField = withValue(NumberRange);
 

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, } from 'react';
 import {
-	Row,
-} from 'native-base';
+	HStack,
+} from '@gluestack-ui/themed';
 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 <Row h={h} flex={1} ref={props.outerRef} {...props}>
+		return <HStack h={h} flex={1} ref={props.outerRef} {...props}>
 					<CKEditor
 						editor={Editor}
 						config={config}
@@ -45,7 +45,7 @@ const
 							debouncedSetValueRef.current(value);
 						}}
 					/>
-				</Row>;
+				</HStack>;
 	},
 	CKEditorField = withComponent(withValue(CKEditorElement));
 	

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

@@ -1,9 +1,7 @@
 import React, { useState, useEffect, } from 'react';
 import {
-	Column,
 	Checkbox,
-	Row,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 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,11 +1,10 @@
-import React, { useState, useEffect, useRef, } from 'react';
+import React, { useState, useRef, } from 'react';
 import {
 	Popover,
 	Pressable,
-	Row,
-	Text,
+	HStack,
 	Tooltip,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import { SketchPicker } from 'react-color';
 import {
 	UI_MODE_WEB,
@@ -134,94 +133,101 @@ export function ColorElement(props) {
 
 
 	// Web version
-	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}
+	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}
 					>
-						<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>;
+						<SketchPicker
+							disableAlpha={true}
+							color={value}
+							onChange={(color) => setValue(color.hex)}
+							{...props}
+						/>
+					</Popover.Body>
+				</Popover.Content>
+			</Popover>
+		</HStack>;
+
 
 	// React Native v1
 	
 	
 	// React Native v2
 	
+	if (tooltip) {
+		// assembledComponents = <Tooltip label={tooltip} placement={tooltipPlacement}>
+		// 					{assembledComponents}
+		// 				</Tooltip>;
+	}
+	return assembledComponents;
 }
 
 export default withComponent(withValue(ColorElement));