@onehat/ui 0.3.260 → 0.3.262

package/src/Components/Form/Form.js

@@ -1,13 +1,14 @@
 import React, { useEffect, useState, useRef, isValidElement, } from 'react';
-import { View, } from 'react-native';
 import {
 	Box,
-	Column,
+	Button,
+	ButtonText,
+	VStack,
+	HStack,
 	Icon,
-	Row,
 	ScrollView,
 	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import {
 	EDITOR_TYPE__INLINE,
 	EDITOR_TYPE__WINDOWED,
@@ -30,7 +31,7 @@ import withPdfButton from '../Hoc/withPdfButton.js';
 import inArray from '../../Functions/inArray.js';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
 import buildAdditionalButtons from '../../Functions/buildAdditionalButtons.js';
-import Button from '../Buttons/Button.js';
+// import Button from '../Buttons/Button.js';
 import IconButton from '../Buttons/IconButton.js';
 import AngleLeft from '../Icons/AngleLeft.js';
 import Eye from '../Icons/Eye.js';
@@ -369,7 +370,7 @@ function Form(props) {
 								/>);
 			
 			});
-			return <Row>{elements}</Row>;
+			return <HStack>{elements}</HStack>;
 		},
 		buildFromItems = () => {
 			return _.map(items, (item, ix) => buildFromItem(item, ix, columnDefaults));
@@ -511,10 +512,10 @@ function Form(props) {
 					if (containerWidth > STACK_ROW_THRESHOLD) {
 						element = <><Label {...labelProps}>{label}</Label>{element}</>;
 					} else {
-						element = <Column><Label {...labelProps}>{label}</Label>{element}</Column>;
+						element = <VStack><Label {...labelProps}>{label}</Label>{element}</VStack>;
 					}
 				}
-				return <Row key={ix} px={2} pb={1}>{element}</Row>;
+				return <HStack key={ix} px={2} pb={1}>{element}</HStack>;
 			}
 
 
@@ -610,25 +611,25 @@ function Form(props) {
 							if (message) {
 								message = <Text color="#f00">{message}</Text>;
 							}
-							element = <Column pt={1} flex={1}>
+							element = <VStack pt={1} flex={1}>
 										{element}
 										{message}
-									</Column>;
+									</VStack>;
 
 							if (item.additionalEditButtons) {
 								const buttons = buildAdditionalButtons(item.additionalEditButtons, self, { fieldState, formSetValue, formGetValues, formState });
 								if (containerWidth > STACK_ROW_THRESHOLD) {
-									element = <Row flex={1} flexWrap="wrap">
+									element = <HStack flex={1} flexWrap="wrap">
 													{element}
 													{buttons}
-												</Row>;
+												</HStack>;
 								} else {
-									element = <Column flex={1} w="100%">
+									element = <VStack flex={1} w="100%">
 												{element}
-												<Row flex={1} w="100%" mt={2} flexWrap="wrap">
+												<HStack flex={1} w="100%" mt={2} flexWrap="wrap">
 													{buttons}
-												</Row>
-											</Column>;
+												</HStack>
+											</VStack>;
 								}
 							}
 								
@@ -656,25 +657,25 @@ function Form(props) {
 									labelProps.w = defaults.labelWidth;
 								}
 								if (containerWidth > STACK_ROW_THRESHOLD) {
-									element = <Row w="100%" py={1}>
+									element = <HStack w="100%" py={1}>
 													<Label {...labelProps}>{requiredIndicator}{label}</Label>
 													{element}
-												</Row>;
+												</HStack>;
 								} else {
-									element = <Column w="100%" py={1} mt={3}>
+									element = <VStack w="100%" py={1} mt={3}>
 													<Label {...labelProps}>{requiredIndicator}{label}</Label>
 													{element}
-												</Column>;
+												</VStack>;
 								}
 							} else if (disableLabels && requiredIndicator) {
-								element = <Row w="100%" py={1}>
+								element = <HStack w="100%" py={1}>
 												{requiredIndicator}
 												{element}
-											</Row>;
+											</HStack>;
 							}
 
 							const dirtyIcon = isDirty && !disableDirtyIcon ? <Icon as={Pencil} size="2xs" color="trueGray.300" position="absolute" top="2px" left="2px" /> : null;
-							return <Row key={ix} px={2} pb={1} bg={error ? '#fdd' : null}>{dirtyIcon}{element}</Row>;
+							return <HStack key={ix} px={2} pb={1} bg={error ? '#fdd' : null}>{dirtyIcon}{element}</HStack>;
 						}}
 					/>;
 		},
@@ -720,7 +721,7 @@ function Form(props) {
 									fontStyle="italic"
 								>{description}</Text>;
 					}
-					components.push(<Column key={'ancillary-' + ix} mx={2} my={5}>{title}{description}{element}</Column>);
+					components.push(<VStack key={'ancillary-' + ix} mx={2} my={5}>{title}{description}{element}</VStack>);
 				});
 			}
 			return components;
@@ -866,40 +867,44 @@ function Form(props) {
 		// 	formComponents = buildFromItems();
 		// 	const formAncillaryComponents = buildAncillary();
 		// 	editor = <>
-		// 				<Column p={4}>{formComponents}</Column>
-		// 				<Column pt={4}>{formAncillaryComponents}</Column>
+		// 				<VStack p={4}>{formComponents}</VStack>
+		// 				<VStack pt={4}>{formAncillaryComponents}</VStack>
 		// 			</>;
 		} else {
 			formComponents = buildFromItems();
 			const formAncillaryComponents = buildAncillary();
 			editor = <>
-						{containerWidth >= ONE_COLUMN_THRESHOLD ? <Row p={4} pl={0}>{formComponents}</Row> : null}
-						{containerWidth < ONE_COLUMN_THRESHOLD ? <Column p={4}>{formComponents}</Column> : null}
-						<Column m={2} pt={4} px={2}>{formAncillaryComponents}</Column>
+						{containerWidth >= ONE_COLUMN_THRESHOLD ? <HStack p={4} pl={0}>{formComponents}</HStack> : null}
+						{containerWidth < ONE_COLUMN_THRESHOLD ? <VStack p={4}>{formComponents}</VStack> : null}
+						<VStack m={2} pt={4} px={2}>{formAncillaryComponents}</VStack>
 					</>;
 
 			additionalButtons = buildAdditionalButtons(additionalEditButtons);
 
-			formButtons.push(<Row key="buttonsRow" px={4} pt={4} alignItems="center" justifyContent="flex-end">
+			formButtons.push(<HStack key="buttonsRow" px={4} pt={4} alignItems="center" justifyContent="flex-end">
 								{isSingle && editorMode === EDITOR_MODE__EDIT && onBack && 
 									<Button
 										key="backBtn"
 										onPress={onBack}
 										leftIcon={<Icon as={AngleLeft} color="#fff" size="sm" />}	
 										color="#fff"
-									>Back</Button>}
+									>
+										<ButtonText>Back</ButtonText>
+									</Button>}
 								{isSingle && editorMode === EDITOR_MODE__EDIT && onViewMode && !disableView &&
 									<Button
 										key="viewBtn"
 										onPress={onViewMode}
 										leftIcon={<Icon as={Eye} color="#fff" size="sm" />}	
 										color="#fff"
-									>To View</Button>}
-							</Row>);
+									>
+										<ButtonText>To View</ButtonText>
+									</Button>}
+							</HStack>);
 			if (editorMode === EDITOR_MODE__EDIT && !_.isEmpty(additionalButtons)) {
-				formButtons.push(<Row key="additionalButtonsRow" p={4} alignItems="center" justifyContent="flex-end" flexWrap="wrap">
+				formButtons.push(<HStack key="additionalButtonsRow" p={4} alignItems="center" justifyContent="flex-end" flexWrap="wrap">
 									{additionalButtons}
-								</Row>)
+								</HStack>)
 			}
 		}
 
@@ -958,7 +963,7 @@ function Form(props) {
 		}
 	}
 	
-	return <Column {...sizeProps} onLayout={onLayoutDecorated} ref={formRef} testID="form">
+	return <VStack {...sizeProps} onLayout={onLayoutDecorated} ref={formRef} testID="form">
 				{!!containerWidth && <>
 					{editorType === EDITOR_TYPE__INLINE &&
 						<Row
@@ -980,7 +985,7 @@ function Form(props) {
 					<Footer justifyContent="flex-end" {...footerProps} {...savingProps}>
 						{onDelete && editorMode === EDITOR_MODE__EDIT && isSingle &&
 
-							<Row flex={1} justifyContent="flex-start">
+							<HStack flex={1} justifyContent="flex-start">
 								<Button
 									key="deleteBtn"
 									onPress={onDelete}
@@ -989,8 +994,10 @@ function Form(props) {
 										bg: 'warningHover',
 									}}
 									color="#fff"
-								>Delete</Button>
-							</Row>}
+								>
+									<ButtonText>Delete</ButtonText>
+								</Button>
+							</HStack>}
 
 						{showResetBtn && 
 							<IconButton
@@ -1010,7 +1017,9 @@ function Form(props) {
 								variant="ghost"
 								onPress={onCancel}
 								color="#fff"
-							>Cancel</Button>}
+							>
+								<ButtonText>Cancel</ButtonText>
+							</Button>}
 							
 						{showCloseBtn && 
 							<Button
@@ -1018,7 +1027,9 @@ function Form(props) {
 								variant="ghost"
 								onPress={onClose}
 								color="#fff"
-							>Close</Button>}
+							>
+								<ButtonText>Close</ButtonText>
+							</Button>}
 
 						{showSaveBtn && 
 							<Button
@@ -1026,7 +1037,9 @@ function Form(props) {
 								onPress={(e) => handleSubmit(onSaveDecorated, onSubmitError)(e)}
 								isDisabled={isSaveDisabled}
 								color="#fff"
-							>{editorMode === EDITOR_MODE__ADD ? 'Add' : 'Save'}</Button>}
+							>
+								<ButtonText>{editorMode === EDITOR_MODE__ADD ? 'Add' : 'Save'}</ButtonText>
+							</Button>}
 						
 						{showSubmitBtn && 
 							<Button
@@ -1034,17 +1047,21 @@ function Form(props) {
 								onPress={(e) => handleSubmit(onSubmitDecorated, onSubmitError)(e)}
 								isDisabled={isSubmitDisabled}
 								color="#fff"
-							>{submitBtnLabel || 'Submit'}</Button>}
+							>
+								<ButtonText>{submitBtnLabel || 'Submit'}</ButtonText>
+							</Button>}
 					
 						{additionalFooterButtons && _.map(additionalFooterButtons, (props) => {
 							return <Button
 										{...props}
 										onPress={(e) => handleSubmit(props.onPress, onSubmitError)(e)}
-									>{props.text}</Button>;
+									>
+										<ButtonText>{props.text}</ButtonText>
+									</Button>;
 						})}
 					</Footer>
 				</>}
-			</Column>;
+			</VStack>;
 }
 
 // helper fns

package/src/Components/Form/Label.js

@@ -1,14 +1,14 @@
 import {
-	Row,
+	HStack,
 	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import styles from '../../Constants/Styles.js';
 
 export default function Label(props) {
 	const {
 			w = styles.FORM_LABEL_WIDTH,
 		} = props;
-	return <Row
+	return <HStack
 				w={w}
 				minWidth="120px"
 				// maxWidth="50%"
@@ -21,5 +21,5 @@ export default function Label(props) {
 					numberOfLines={1}
 					ellipsizeMode="head"
 				>{props.children}</Text>
-			</Row>;
+			</HStack>;
 }

package/src/Components/Grid/Grid.js

@@ -1,15 +1,13 @@
 import React, { useState, useEffect, useRef, useMemo, useCallback, } from 'react';
 import {
 	Box,
-	Column,
 	FlatList,
 	Modal,
 	Pressable,
 	Icon,
-	Row,
 	ScrollView,
-	Text,
-} from 'native-base';
+	VStack,
+} from '@gluestack-ui/themed';
 import {
 	SELECTION_MODE_SINGLE,
 	SELECTION_MODE_MULTI,
@@ -518,7 +516,7 @@ function GridComponent(props) {
 
 			if (showRowExpander && !isHeaderRow) {
 				const isExpanded = getIsExpanded(index);
-				rowComponent = <Column>
+				rowComponent = <VStack>
 									<Row>
 										<ExpandButton
 											isExpanded={isExpanded}
@@ -532,7 +530,7 @@ function GridComponent(props) {
 										{rowComponent}
 									</Row>
 									{isExpanded ? getExpandedRowContent(row) : null}
-								</Column>
+								</VStack>
 			}
 			return rowComponent;
 		},
@@ -922,7 +920,7 @@ function GridComponent(props) {
 
 	if (!isInited) {
 		// first time through, render a placeholder so we can get container dimensions
-		return <Column
+		return <VStack
 					flex={1}
 					w="100%"
 					onLayout={(e) => {
@@ -1059,7 +1057,7 @@ function GridComponent(props) {
 						</Modal>;
 	}
 
-	grid = <Column
+	grid = <VStack
 				{...testProps('Grid')}
 				testID="outerContainer"
 				ref={containerRef}
@@ -1074,7 +1072,7 @@ function GridComponent(props) {
 			>
 				{topToolbar}
 
-				<Column
+				<VStack
 					testID="gridContainer"
 					ref={gridContainerRef}
 					w="100%"
@@ -1088,13 +1086,13 @@ function GridComponent(props) {
 					}}
 				>
 					{grid}
-				</Column>
+				</VStack>
 
 				{listFooterComponent}
 
 				{columnSelector}
 
-			</Column>
+			</VStack>
 
 	if (isDropTarget) {
 		grid = <Box

package/src/Components/Grid/GridHeaderRow.js

@@ -3,9 +3,9 @@ import {
 	Box,
 	Icon,
 	Pressable,
-	Row,
+	HStack,
 	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import {
 	SORT_ASCENDING,
 	SORT_DESCENDING,
@@ -475,7 +475,7 @@ export default function GridHeaderRow(props) {
 				return headerColumns;
 			};
 
-		return <Row
+		return <HStack
 					w="100%"
 					bg="trueGray.200"
 					style={{
@@ -483,7 +483,7 @@ export default function GridHeaderRow(props) {
 					}}
 				> 
 					{renderHeaders()}
-				</Row>;
+				</HStack>;
 
 	}, [
 		Repository,

package/src/Components/Grid/GridRow.js

@@ -1,9 +1,9 @@
 import { useEffect, useMemo, useRef, } from 'react';
 import {
 	Box,
-	Row,
+	HStack,
 	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import {
 	UI_MODE_WEB,
 } from '../../Constants/UiModes.js';
@@ -102,7 +102,7 @@ function GridRow(props) {
 								userSelect: 'none',
 							};
 
-							return <Row key={key} {...propsToPass} {...extraProps}>{config.renderer(item)}</Row>;
+							return <HStack key={key} {...propsToPass} {...extraProps}>{config.renderer(item)}</HStack>;
 						}
 						if (config.fieldName) {
 							if (item?.properties && item.properties[config.fieldName]) {
@@ -204,19 +204,19 @@ function GridRow(props) {
 						</>;
 
 		if (dragSourceRef) {
-			rowContents = <Row flexGrow={1} flex={1} w="100%" bg={bg} ref={dragSourceRef}>{rowContents}</Row>;
+			rowContents = <HStack flexGrow={1} flex={1} w="100%" bg={bg} ref={dragSourceRef}>{rowContents}</HStack>;
 		}
 		if (dropTargetRef) {
-			rowContents = <Row flexGrow={1} flex={1} w="100%" bg={bg} ref={dropTargetRef}>{rowContents}</Row>;
+			rowContents = <HStack flexGrow={1} flex={1} w="100%" bg={bg} ref={dropTargetRef}>{rowContents}</HStack>;
 		}
 
-		return <Row
+		return <HStack
 					alignItems="center"
 					flexGrow={1}
 					{...rowProps}
 					bg={bg}
 					key={hash}
-				>{rowContents}</Row>;
+				>{rowContents}</HStack>;
 	}, [
 		columnsConfig,
 		columnProps,

package/src/Components/Grid/HeaderColumnSelectorHandle.js

@@ -1,7 +1,7 @@
 import {
 	Icon,
 	Pressable,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import Gear from '../Icons/Gear.js';
 import _ from 'lodash';
 

package/src/Components/Grid/HeaderReorderHandle.js

@@ -1,9 +1,7 @@
 import {
-	Column,
+	VStack,
 	Icon,
-	Row,
-	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import styles from '../../Styles/StyleSheets.js';
 import withDraggable from '../Hoc/withDraggable.js';
 import GripVertical from '../Icons/GripVertical.js';
@@ -13,7 +11,7 @@ function HeaderReorderHandle(props) {
 			isDragging,
 		} = props;
 
-	return <Column
+	return <VStack
 				testID="HeaderReorderHandle"
 				bg={isDragging ? 'trueGray.300' : 'trueGray.100'}
 				h="100%"
@@ -23,7 +21,7 @@ function HeaderReorderHandle(props) {
 				style={styles.ewResize}
 			>
 				<Icon as={GripVertical} testID="handle" size="xs" w="100%" h="100%" color="#ccc" />
-			</Column>;
+			</VStack>;
 }
 
 function withAdditionalProps(WrappedComponent) {

package/src/Components/Grid/HeaderResizeHandle.js

@@ -1,9 +1,7 @@
 import {
-	Column,
+	VStack,
 	Icon,
-	Row,
-	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import styles from '../../Styles/StyleSheets.js';
 import withDraggable from '../Hoc/withDraggable.js';
 import GripLinesVertical from '../Icons/GripLinesVertical.js';
@@ -13,7 +11,7 @@ function HeaderResizeHandle(props) {
 			isDragging,
 		} = props;
 
-	return <Column
+	return <VStack
 				testID="HeaderResizeHandle"
 				bg={isDragging ? 'trueGray.300' : 'trueGray.100'}
 				h="100%"
@@ -23,7 +21,7 @@ function HeaderResizeHandle(props) {
 				style={styles.ewResize}
 			>
 				<Icon as={GripLinesVertical} testID="handle" size="sm" color="#ccc" />
-			</Column>;
+			</VStack>;
 }
 
 function withAdditionalProps(WrappedComponent) {

package/src/Components/Grid/NoRecordsFound.js

@@ -1,8 +1,8 @@
 import {
-	Column,
-	Row,
+	VStack,
+	HStack,
 	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import IconButton from '../Buttons/IconButton.js';
 import Rotate from '../Icons/Rotate.js';
 
@@ -18,7 +18,7 @@ export default function NoRecordsFound(props) {
 
 	let component = textComponent;
 	if (onRefresh) {
-		component = <Row justifyContent="center" alignItems="center" w="100%" flex={1}>
+		component = <HStack justifyContent="center" alignItems="center" w="100%" flex={1}>
 						<IconButton
 							_icon={{
 								as: Rotate,
@@ -35,11 +35,11 @@ export default function NoRecordsFound(props) {
 							ml={-4}
 						/>
 						{textComponent}
-					</Row>;
+					</HStack>;
 	} else {
-		component = <Column justifyContent="center" alignItems="center" w="100%" flex={1}>
+		component = <VStack justifyContent="center" alignItems="center" w="100%" flex={1}>
 						{textComponent}
-					</Column>;
+					</VStack>;
 	}
 	return component;
 }

package/src/Components/Grid/RowDragHandle.js

@@ -1,14 +1,12 @@
 import {
-	Column,
+	VStack,
 	Icon,
-	Row,
-	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import styles from '../../Styles/StyleSheets.js';
 import GripVertical from '../Icons/GripVertical.js';
 
 function RowDragHandle(props) {
-	return <Column
+	return <VStack
 				testID="HeaderReorderHandle"
 				bg="trueGray.100"
 				// h="100%"
@@ -18,7 +16,7 @@ function RowDragHandle(props) {
 				style={styles.ewResize}
 			>
 				<Icon as={GripVertical} testID="handle" size="xs" w="100%" h="100%" color="#ccc" />
-			</Column>;
+			</VStack>;
 }
 
 export default RowDragHandle;

package/src/Components/Hoc/Secondary/withSecondaryEditor.js

@@ -1,7 +1,8 @@
 import { useEffect, useState, useRef, } from 'react';
 import {
 	Button,
-} from 'native-base';
+	ButtonText,
+} from '@gluestack-ui/themed';
 import {
 	EDITOR_MODE__VIEW,
 	EDITOR_MODE__ADD,

package/src/Components/Hoc/Secondary/withSecondaryWindowedEditor.js

@@ -1,8 +1,6 @@
 import {
-	Column,
 	Modal,
-	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import {
 	EDITOR_TYPE__WINDOWED,
 } from '../../../Constants/Editor.js';