@onehat/ui 0.3.262 → 0.3.264

package/src/Components/Form/Label.js

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

package/src/Components/Grid/Grid.js

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

package/src/Components/Grid/GridHeaderRow.js

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

package/src/Components/Grid/GridRow.js

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

package/src/Components/Grid/HeaderColumnSelectorHandle.js

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

package/src/Components/Grid/HeaderReorderHandle.js

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

package/src/Components/Grid/HeaderResizeHandle.js

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

package/src/Components/Grid/NoRecordsFound.js

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

package/src/Components/Grid/RowDragHandle.js

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

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

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

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

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

package/src/Components/Hoc/withAlert.js

@@ -1,13 +1,13 @@
-import React, { useState, useRef, } from 'react';
+import React, { useState, useRef, useEffect, } from 'react';
 import {
 	AlertDialog,
 	Button,
-	ButtonText,
-	VStack,
+	Column,
 	Icon,
-	HStack,
+	Modal,
+	Row,
 	Text,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import {
 	ALERT_MODE_OK,
 	ALERT_MODE_YES,
@@ -129,9 +129,7 @@ export default function withAlert(WrappedComponent) {
 								colorScheme="coolGray"
 								variant="ghost" // or unstyled
 								ref={cancelRef}
-							>
-								<ButtonText>Cancel</ButtonText>
-							</Button>);
+							>Cancel</Button>);
 		}
 		switch(mode) {
 			case ALERT_MODE_OK:
@@ -141,9 +139,7 @@ export default function withAlert(WrappedComponent) {
 								ref={autoFocusRef}
 								onPress={onOk}
 								color="#fff"
-							>
-								<ButtonText>OK</ButtonText>
-							</Button>);
+							>OK</Button>);
 				break;
 			case ALERT_MODE_YES:
 				buttons.push(<Button
@@ -152,9 +148,7 @@ export default function withAlert(WrappedComponent) {
 								onPress={onYes}
 								color="#fff"
 								colorScheme="danger"
-							>
-								<ButtonText>Yes</ButtonText>
-							</Button>);
+							>Yes</Button>);
 				break;
 			case ALERT_MODE_YES_NO:
 				// TODO: need to create a new colorScheme so this can be black with blank background
@@ -165,18 +159,14 @@ export default function withAlert(WrappedComponent) {
 								variant="ghost"
 								// colorScheme="neutral"
 								mr={2}
-							>
-								<ButtonText>No</ButtonText>
-							</Button>);
+							>No</Button>);
 				buttons.push(<Button
 								key="yesBtn"
 								ref={autoFocusRef}
 								onPress={onYes}
 								color="#fff"
 								colorScheme="danger"
-							>
-								<ButtonText>Yes</ButtonText>
-							</Button>);
+							>Yes</Button>);
 				break;
 			case ALERT_MODE_CUSTOM:
 				_.each(customButtons, (button) => {
@@ -204,12 +194,12 @@ export default function withAlert(WrappedComponent) {
 							{canClose && <AlertDialog.CloseButton />}
 							<AlertDialog.Header>{title}</AlertDialog.Header>
 							<AlertDialog.Body>
-								<HStack alignItems="center">
-									<VStack w="40px" p={0} mr={5}>
+								<Row alignItems="center">
+									<Column w="40px" p={0} mr={5}>
 										<Icon as={mode === ALERT_MODE_INFO ? CircleInfo : TriangleExclamation} size={10} color={mode === ALERT_MODE_INFO ? '#000' : '#f00'} />
-									</VStack>
+									</Column>
 									<Text flex={1}>{message}</Text>
-								</HStack>
+								</Row>
 							</AlertDialog.Body>
 							<AlertDialog.Footer>
 								{buttons}

package/src/Components/Hoc/withBlank.js

@@ -1,3 +1,5 @@
+import {
+} from 'native-base';
 import _ from 'lodash';
 
 export default function withBlank(WrappedComponent) {

package/src/Components/Hoc/withContextMenu.js

@@ -1,10 +1,15 @@
 import React, { useState, useEffect, } from 'react';
 import {
-	VStack,
+	Box,
+	Column,
+	FlatList,
+	Icon,
 	Modal,
 	Pressable,
+	Row,
+	Spacer,
 	Text,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import {
 	UI_MODE_WEB,
 	CURRENT_MODE,
@@ -161,9 +166,9 @@ export default function withContextMenu(WrappedComponent) {
 						isOpen={isContextMenuShown && !disableContextMenu}
 						onClose={() => setIsContextMenuShown(false)}
 					>
-						<VStack bg="#fff" w={CONTEXT_MENU_WIDTH} position="absolute" top={contextMenuY} left={contextMenuX} onLayout={onLayout}>
+						<Column bg="#fff" w={CONTEXT_MENU_WIDTH} position="absolute" top={contextMenuY} left={contextMenuX} onLayout={onLayout}>
 							{contextMenuItemComponents}
-						</VStack>
+						</Column>
 					</Modal>
 				</>;
 	};

package/src/Components/Hoc/withEditor.js

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

package/src/Components/Hoc/withEvents.js

@@ -1,3 +1,5 @@
+import {
+} from 'native-base';
 import _ from 'lodash';
 
 export default function withEvents(WrappedComponent) {

package/src/Components/Hoc/withFilters.js

@@ -1,11 +1,11 @@
 import { useState, useEffect, useRef, } from 'react';
 import {
-	VStack,
+	Column,
 	Modal,
-	HStack,
+	Row,
 	ScrollView,
 	Text,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import {
 	EDITOR_TYPE__PLAIN,
 } from '../../Constants/Editor.js';
@@ -318,10 +318,10 @@ export default function withFilters(WrappedComponent) {
 												{...elementProps}
 											/>;
 						if (showLabels && field !== 'q') {
-							filterElement = <HStack key={'label-' + ix} alignItems="center" h="100%">
+							filterElement = <Row key={'label-' + ix} alignItems="center" h="100%">
 												<Text ml={2} mr={1} fontSize={UiGlobals.styles.FILTER_LABEL_FONTSIZE}>{title}</Text>
 												{filterElement}
-											</HStack>;
+											</Row>;
 						}
 						filterElements.push(filterElement);
 					});
@@ -427,13 +427,13 @@ export default function withFilters(WrappedComponent) {
 				renderedFilters = renderFilters(),
 				hasFilters = !!renderedFilters.length;
 			topToolbar = <Toolbar>
-							<HStack flex={1} alignItems="center">
+							<Row flex={1} alignItems="center">
 								<ScrollView horizontal={true} contentContainerStyle={{ alignItems: 'center' }}>
 									<Text fontStyle="italic" pr={2} userSelect="none">Filters:{hasFilters ? '' : ' None'}</Text>
 									{renderedFilters}
 								</ScrollView>
-							</HStack>
-							<HStack flex={hasFilters ? null : 1} alignItems="center" alignSelf="flex-end">
+							</Row>
+							<Row flex={hasFilters ? null : 1} alignItems="center" alignSelf="flex-end">
 								{showClearFiltersButton && <IconButton
 									key="clearFiltersBtn"
 									_icon={{
@@ -458,7 +458,7 @@ export default function withFilters(WrappedComponent) {
 									}}
 									tooltip="Swap filters"
 								/>}
-							</HStack>
+							</Row>
 						</Toolbar>;
 
 			if (isFilterSelectorShown) { // this is always false when isUsingCustomFilters
@@ -541,7 +541,7 @@ export default function withFilters(WrappedComponent) {
 							isOpen={true}
 							onClose={() => setIsFilterSelectorShown(false)}
 						>
-							<VStack bg="#fff" w={500}>
+							<Column bg="#fff" w={500}>
 								<FormPanel
 									title="Filter Selector"
 									instructions="Please select which fields to filter by."
@@ -590,7 +590,7 @@ export default function withFilters(WrappedComponent) {
 										setModalSlots(slots);
 									}}
 								/>
-							</VStack>
+							</Column>
 						</Modal>;
 			}
 

package/src/Components/Hoc/withInlineEditor.js

@@ -1,8 +1,11 @@
-import React, { useState, useRef, } from 'react';
+import React, { useState, useEffect, useRef, } from 'react';
 import {
 	Box,
-	VStack,
-} from '@gluestack-ui/themed';
+	Column,
+	Modal,
+	Row,
+	Text,
+} from 'native-base';
 import {
 	EDITOR_TYPE__INLINE,
 } from '../../Constants/Editor.js';
@@ -133,7 +136,7 @@ export default function withInlineEditor(WrappedComponent, skipWrappers = false)
 														}
 													}}
 												></Box>}
-								<VStack
+								<Column
 									ref={inlineEditorRef}
 									position="absolute"
 									zIndex={10}
@@ -165,7 +168,7 @@ export default function withInlineEditor(WrappedComponent, skipWrappers = false)
 											py={1}
 											px={0}
 										/>}
-								</VStack>
+								</Column>
 							</>;
 		}
 	

package/src/Components/Hoc/withPdfButton.js

@@ -1,8 +1,9 @@
 import { useState, } from 'react';
 import {
-	VStack,
+	Column,
+	Button,
 	Modal,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import * as yup from 'yup'; // https://github.com/jquense/yup#string
 import Inflector from 'inflector-js';
 import qs from 'qs';
@@ -179,7 +180,7 @@ export default function withPdfButton(WrappedComponent) {
 						isOpen={true}
 						onClose={() => setIsModalShown(false)}
 					>
-						<VStack bg="#fff" w={width} h={height}>
+						<Column bg="#fff" w={width} h={height}>
 							<FormPanel
 								title="PDF Fields to Show"
 								instructions="Please select which fields to show in the PDF."
@@ -200,7 +201,7 @@ export default function withPdfButton(WrappedComponent) {
 								submitBtnLabel="View PDF"
 								useAdditionalEditButtons={false}
 							/>
-						</VStack>
+						</Column>
 					</Modal>;
 		}
 		return <>

package/src/Components/Hoc/withPresetButtons.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, } from 'react';
 import {
 	Modal,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import Clipboard from '../Icons/Clipboard.js';
 import Duplicate from '../Icons/Duplicate.js';
 import Edit from '../Icons/Edit.js';

package/src/Components/Hoc/withTooltip.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {
 	Tooltip,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 
 // NOTE: Can't seem to get this working for some elements like Combo or File
 
@@ -11,9 +11,9 @@ export default function withTooltip(WrappedComponent) {
 				tooltip,
 				tooltipPlacement = 'bottom',
 			} = props;
-		// if (!tooltip) {
+		if (!tooltip) {
 			return <WrappedComponent {...props} />;
-		// }
+		}
 		return <Tooltip label={tooltip} placement={tooltipPlacement}>
 					<WrappedComponent {...props} />
 				</Tooltip>;

package/src/Components/Hoc/withWindowedEditor.js

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