@onehat/ui 0.3.262 → 0.3.263

package/src/Components/Panel/Header.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import {
-	VStack,
+	Column,
 	Icon,
 	Pressable,
-	HStack,
+	Row,
 	Text,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import {
 	HORIZONTAL,
 	VERTICAL,
@@ -80,12 +80,12 @@ export default function Header(props) {
 								}
 							}}
 						>
-							 <VStack alignItems="center" justifyContent="flex-start" h="100%" w="100%" bg={styles.PANEL_HEADER_BG_VERTICAL} style={{ userSelect: 'none', }} testID={testID}>
+							 <Column alignItems="center" justifyContent="flex-start" h="100%" w="100%" bg={styles.PANEL_HEADER_BG_VERTICAL} style={{ userSelect: 'none', }} testID={testID}>
 								{collapseBtn}
 								<div style={{ textOrientation: 'mixed', writingMode: 'vertical-rl', }}>
 									<Text flex={1} fontSize={styles.PANEL_HEADER_TEXT_FONTSIZE} color={styles.PANEL_HEADER_TEXT_COLOR} numberOfLines={1} ellipsizeMode="head" testID="text">{title}</Text>
 								</div>
-							</VStack>
+							</Column>
 						</div>;
 			}
 		}
@@ -99,11 +99,11 @@ export default function Header(props) {
 						}
 					}}
 				>
-					<HStack alignItems="center" justifyContent="flex-start" px={styles.PANEL_HEADER_PX} py={styles.PANEL_HEADER_PY} bg={styles.PANEL_HEADER_BG} style={{ userSelect: 'none', }} testID={testID}>
+					<Row alignItems="center" justifyContent="flex-start" px={styles.PANEL_HEADER_PX} py={styles.PANEL_HEADER_PY} bg={styles.PANEL_HEADER_BG} style={{ userSelect: 'none', }} testID={testID}>
 						{closeBtn}
 						<Text flex={1} fontSize={styles.PANEL_HEADER_TEXT_FONTSIZE} color={styles.PANEL_HEADER_TEXT_COLOR} numberOfLines={1} ellipsizeMode="head" testID="text">{title}</Text>
 						{collapseBtn}
-					</HStack>
+					</Row>
 				</div>;
 
 	} else if (CURRENT_MODE === UI_MODE_REACT_NATIVE) {
@@ -122,7 +122,7 @@ export default function Header(props) {
 								}
 							}}
 						>
-							 <VStack
+							 <Column
 							 	alignItems="center"
 								justifyContent="flex-start"
 								h="100%" 
@@ -130,7 +130,7 @@ export default function Header(props) {
 								bg={styles.PANEL_HEADER_BG_VERTICAL}
 							>
 								{collapseBtn}
-								<VStack
+								<Column
 									alignItems="center"
 									justifyContent="center"
 									flex={1} 
@@ -145,8 +145,8 @@ export default function Header(props) {
 										w={200}
 										style={{ transform: [{ rotate: '-90deg'}] }}
 									>{title}</Text>
-								</VStack>
-							</VStack>
+								</Column>
+							</Column>
 						</Pressable>;
 			}
 		}
@@ -161,7 +161,7 @@ export default function Header(props) {
 						}
 					}}
 				>
-					<HStack
+					<Row
 						alignItems="center"
 						justifyContent="flex-start"
 						px={styles.PANEL_HEADER_PX}
@@ -177,7 +177,7 @@ export default function Header(props) {
 							ellipsizeMode="head"
 						>{title}</Text>
 						{collapseBtn}
-					</HStack>
+					</Row>
 				</Pressable>;
 
 	}

package/src/Components/Panel/Mask.js

@@ -1,6 +1,6 @@
 import {
 	Box,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import {
 	CURRENT_MODE,
 	UI_MODE_WEB,

package/src/Components/Panel/Panel.js

@@ -1,8 +1,10 @@
 import { useEffect, useState, } from 'react';
 import {
-	VStack,
+	Column,
+	Row,
 	ScrollView,
-} from '@gluestack-ui/themed';
+	Text,
+} from 'native-base';
 import {
 	HORIZONTAL,
 	VERTICAL,
@@ -145,26 +147,26 @@ function Panel(props) {
 
 	if (isCollapsed) {
 		if (collapseDirection === HORIZONTAL) {
-			return <VStack overflow="hidden" {...propsToPass} {...framePropsToUse}  {...sizeProps} w="33px">
+			return <Column overflow="hidden" {...propsToPass} {...framePropsToUse}  {...sizeProps} w="33px">
 						{isDisabled && <Mask />}
 						{headerComponent}
-					</VStack>;
+					</Column>;
 		}
-		return <VStack overflow="hidden" {...propsToPass} {...framePropsToUse}  {...sizeProps} h="33px">
+		return <Column overflow="hidden" {...propsToPass} {...framePropsToUse}  {...sizeProps} h="33px">
 					{isDisabled && <Mask />}
 					{headerComponent}
-				</VStack>;
+				</Column>;
 	}
-	return <VStack overflow="hidden" {...propsToPass} {...framePropsToUse} {...sizeProps} onLayout={onLayout}>
+	return <Column overflow="hidden" {...propsToPass} {...framePropsToUse} {...sizeProps} onLayout={onLayout}>
 				{isDisabled && <Mask />}
 				{headerComponent}
 				{topToolbar}
-				<VStack flex={1} w="100%" overflow="hidden">
+				<Column flex={1} w="100%" overflow="hidden">
 					{isScrollable ? <ScrollView>{children}</ScrollView> : children}
-				</VStack>
+				</Column>
 				{bottomToolbar}
 				{footer}
-			</VStack>;
+			</Column>;
 
 }
 

package/src/Components/Picker/Picker.js

@@ -1,9 +1,9 @@
 import {
 	Icon,
-	HStack,
+	Row,
 	Select,
 	Tooltip,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import CaretDown from '../Icons/CaretDown.js';
 import testProps from '../../Functions/testProps.js';
 import _ from 'lodash';
@@ -55,10 +55,10 @@ export default function Picker(props) {
 					>{items}</Select>;
 	if (tooltip) {
 		//TODO: This doesn't yet work, but doesn't do anything harmful either!
-		// select = <Tooltip label={tooltip} placement={tooltipPlacement}>{select}</Tooltip>;
+		select = <Tooltip label={tooltip} placement={tooltipPlacement}>{select}</Tooltip>;
 	}
-	return <HStack {...props}>
+	return <Row {...props}>
 				{select}
-			</HStack>;
+			</Row>;
 }
 

package/src/Components/Report/Report.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import {
-	VStack,
+	Column,
 	Icon,
-	HStack,
+	Row,
 	Text,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import { EDITOR_TYPE__PLAIN } from '../../Constants/Editor';
 import {
 	UI_MODE_WEB,
@@ -102,20 +102,20 @@ function Report(props) {
 			ml: 1,
 		});
 	}
-	return <VStack w="100%" borderWidth={1} borderColor="primary.300" pt={4} mb={3}>
-				<HStack>
-					{icon && <VStack>{icon}</VStack>}
-					<VStack flex={1}>
+	return <Column w="100%" borderWidth={1} borderColor="primary.300" pt={4} mb={3}>
+				<Row>
+					{icon && <Column>{icon}</Column>}
+					<Column flex={1}>
 						<Text fontSize="2xl" maxWidth="100%">{title}</Text>
 						<Text fontSize="sm">{description}</Text>
-					</VStack>
-				</HStack>
+					</Column>
+				</Row>
 				<Form
 					type={EDITOR_TYPE__PLAIN}
 					additionalFooterButtons={buttons}
 					{...props._form}
 				/>
-			</VStack>;
+			</Column>;
 }
 
 export default withComponent(Report);

package/src/Components/Screens/Manager.js

@@ -1,9 +1,9 @@
 import React, { useState, useEffect, } from 'react';
 import {
-	VStack,
-	HStack,
+	Column,
+	Row,
 	Text,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import withComponent from '../Hoc/withComponent.js';
 import UiGlobals from '../../UiGlobals.js';
 import IconButton from '../Buttons/IconButton';
@@ -84,8 +84,8 @@ function ManagerScreen(props) {
 		};
 	}
 
-	return <VStack maxHeight="100vh" overflow="hidden" flex={1} w="100%" onLayout={onLayout}>
-				<HStack
+	return <Column maxHeight="100vh" overflow="hidden" flex={1} w="100%" onLayout={onLayout}>
+				<Row
 					h="80px"
 					py={2}
 					borderBottomWidth={2}
@@ -115,9 +115,9 @@ function ManagerScreen(props) {
 								tooltip="Side Editor"
 							/>
 						</>}
-				</HStack>
+				</Row>
 				{isRendered && isModeSet && whichComponent}
-			</VStack>;
+			</Column>;
 }
 
 export default withComponent(ManagerScreen);

package/src/Components/Tab/TabBar.js

@@ -1,12 +1,12 @@
 import React, { useState, useEffect, } from 'react';
 import {
 	Button,
-	VStack,
+	Column,
 	Icon,
-	HStack,
+	Row,
 	ScrollView,
 	Text,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import {
 	HORIZONTAL,
 	VERTICAL,
@@ -237,11 +237,11 @@ function TabBar(props) {
 								bg={isCurrentTab ? styles.TAB_ACTIVE_BG : styles.TAB_BG}
 								tooltip={tab.title}
 							/>;
-					// button = <HStack
+					// button = <Row
 					// 			key={'tab' + ix}
 					// 		>
 					// 			{button}
-					// 		</HStack>;
+					// 		</Row>;
 				} else {
 					button = <Button
 								key={'tabButton' + ix}
@@ -410,7 +410,7 @@ function TabBar(props) {
 
 	let tabBar = null;
 	if (direction === VERTICAL) {
-		tabBar = <VStack
+		tabBar = <Column
 						alignItems="center"
 						justifyContent="flex-start"
 						py={2}
@@ -419,25 +419,25 @@ function TabBar(props) {
 						w={isCollapsed ? '50px' : tabWidth}
 					>
 						{renderedTabs}
-						<VStack flex={1} w="100%" justifyContent="flex-end">
+						<Column flex={1} w="100%" justifyContent="flex-end">
 							{renderedToggleButton}
-						</VStack>
-					</VStack>;
+						</Column>
+					</Column>;
 		if (renderedCurrentTabContent) {
-			tabBar = <HStack flex={1} w="100%" {...propsToPass}>
+			tabBar = <Row flex={1} w="100%" {...propsToPass}>
 						{tabBar}
-						<VStack
+						<Column
 							alignItems="center"
 							justifyContent="flex-start"
 							flex={1}
 						>
 							{renderedCurrentTabContent}
-						</VStack>
-					</HStack>;
+						</Column>
+					</Row>;
 		}
 	}
 	if (direction === HORIZONTAL) {
-		tabBar = <HStack
+		tabBar = <Row
 					alignItems="center"
 					justifyContent="flex-start"
 					p={2}
@@ -451,23 +451,23 @@ function TabBar(props) {
 					>
 						{renderedTabs}
 					</ScrollView>
-					<HStack flex={1} h="100%" justifyContent="flex-end">
-						<HStack h="100%">
+					<Row flex={1} h="100%" justifyContent="flex-end">
+						<Row h="100%">
 							{renderedToggleButton}
-						</HStack>
-					</HStack>
-				</HStack>;
+						</Row>
+					</Row>
+				</Row>;
 		if (renderedCurrentTabContent) {
-			tabBar = <VStack flex={1} w="100%" {...propsToPass}>
+			tabBar = <Column flex={1} w="100%" {...propsToPass}>
 						{tabBar}
-						<VStack
+						<Column
 							alignItems="center"
 							justifyContent="flex-start"
 							flex={1}
 						>
 							{renderedCurrentTabContent}
-						</VStack>
-					</VStack>;
+						</Column>
+					</Column>;
 		}
 	}
 	return tabBar;

package/src/Components/Toolbar/FilterToolbar.js

@@ -1,6 +1,6 @@
 import {
-	HStack,
-} from '@gluestack-ui/themed';
+	Row,
+} from 'native-base';
 import Toolbar from './Toolbar.js'
 import _ from 'lodash';
 
@@ -15,6 +15,6 @@ export default function FilterToolbar(props) {
 				borderTopColor="trueGray.400"
 				w="100%"
 			>
-				{toolbarItems.length ? <HStack flex={1} borderLeftWidth={1} borderLeftColor="trueGray.100">{toolbarItems}</HStack> : null}
+				{toolbarItems.length ? <Row flex={1} borderLeftWidth={1} borderLeftColor="trueGray.100">{toolbarItems}</Row> : null}
 			</Toolbar>;
 };

package/src/Components/Toolbar/Pagination.js

@@ -1,13 +1,11 @@
 import { useEffect, useMemo, } from 'react';
 import {
-	Button,
-	ButtonText,
-	HStack,
 	Icon,
+	Row,
 	Text,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import useForceUpdate from '../../Hooks/useForceUpdate.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 AnglesLeft from '../Icons/AnglesLeft.js';
@@ -72,9 +70,7 @@ export default function Pagination(props) {
 								onPress={() => Repository.showMore()}
 								isDisabled={isDisabled}
 								tooltip="Show More"
-							>
-								<ButtonText>Show More</ButtonText>
-							</Button>);
+							>Show More</Button>);
 			}
 			if (!Repository.isLocal) {
 				items.push(<IconButton
@@ -112,7 +108,7 @@ export default function Pagination(props) {
 								tooltip="Previous Page"
 							/>);
 				if (!minimize) {
-					items.push(<HStack
+					items.push(<Row
 									key="pageSelector"
 									mx={3}
 									justifyContent="center"
@@ -131,7 +127,7 @@ export default function Pagination(props) {
 										tooltip="Set Page"
 									/>
 									<Text ml={2}>of {totalPages}</Text>
-								</HStack>);
+								</Row>);
 				}
 
 				isDisabled = page === totalPages || totalPages <= 1;
@@ -180,7 +176,7 @@ export default function Pagination(props) {
 			}
 		}
 		
-		return <HStack
+		return <Row
 					justifyContent="flex-start"
 					alignItems="center"
 					px={2}
@@ -188,7 +184,7 @@ export default function Pagination(props) {
 					{...props}
 				>
 					{items}
-				</HStack>;
+				</Row>;
 	}, [
 		Repository?.hash,
 		showPagination,

package/src/Components/Toolbar/PaginationToolbar.js

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import {
-	HStack,
-} from '@gluestack-ui/themed';
+	Row,
+} from 'native-base';
 import Pagination from './Pagination.js'
 import Toolbar from './Toolbar.js'
 import _ from 'lodash';
@@ -50,6 +50,6 @@ export default function PaginationToolbar(props) {
 				onLayout={(e) => onLayout(e)}
 			>
 				<Pagination {...propsToPass} showPagination={showPagination} w={toolbarItems.length ? null : '100%'} minimize={minimize} disablePageSize={disablePageSize} />
-				{toolbarItems.length ? <HStack flex={1} {...toolbarProps}>{toolbarItems}</HStack> : null}
+				{toolbarItems.length ? <Row flex={1} {...toolbarProps}>{toolbarItems}</Row> : null}
 			</Toolbar>;
 };

package/src/Components/Toolbar/Toolbar.js

@@ -1,11 +1,11 @@
 import {
-	HStack,
-} from '@gluestack-ui/themed';
+	Row,
+} from 'native-base';
 import UiGlobals from '../../UiGlobals.js';
 
 export default function Toolbar(props) {
 	const styles = UiGlobals.styles;
-	return <HStack
+	return <Row
 				w="100%"
 				justifyContent="flex-start"
 				bg="trueGray.200"
@@ -17,5 +17,5 @@ export default function Toolbar(props) {
 				{...props}
 			>
 				{props.children}
-			</HStack>;
+			</Row>;
 };

package/src/Components/Tree/Tree.js

@@ -1,10 +1,13 @@
 import { useState, useEffect, useRef, useMemo, } from 'react';
 import {
-	VStack,
+	Column,
+	FlatList,
 	Modal,
 	Pressable,
-	HStack,
-} from '@gluestack-ui/themed';
+	Icon,
+	Row,
+	Text,
+} from 'native-base';
 import {
 	SELECTION_MODE_SINGLE,
 	SELECTION_MODE_MULTI,
@@ -1106,15 +1109,15 @@ function TreeComponent(props) {
 	}
 
 	return <>
-				<VStack
+				<Column
 					{...testProps('Tree')}
 					flex={1}
 					w="100%"
 				>
 					{topToolbar}
-					{headerToolbarItemComponents?.length && <HStack>{headerToolbarItemComponents}</HStack>}
+					{headerToolbarItemComponents?.length && <Row>{headerToolbarItemComponents}</Row>}
 
-					<VStack
+					<Column
 						ref={treeRef}
 						w="100%"
 						flex={1}
@@ -1128,16 +1131,16 @@ function TreeComponent(props) {
 					>
 						{!treeNodes?.length ? <NoRecordsFound text={noneFoundText} onRefresh={reloadTree} /> :
 							treeNodes}
-					</VStack>
+					</Column>
 
 					{treeFooterComponent}
-				</VStack>
+				</Column>
 
 				<Modal
 					isOpen={isSearchModalShown}
 					onClose={() => setIsSearchModalShown(false)}
 				>
-					<VStack bg="#fff" w={300}>
+					<Column bg="#fff" w={300}>
 						<FormPanel
 							title="Choose Tree Node"
 							instructions="Multiple tree nodes matched your search. Please select which one to show."
@@ -1173,7 +1176,7 @@ function TreeComponent(props) {
 								setIsSearchModalShown(false);
 							}}
 						/>
-					</VStack>
+					</Column>
 				</Modal>
 			</>;
 

package/src/Components/Tree/TreeNode.js

@@ -2,10 +2,10 @@ import { useMemo, } from 'react';
 import {
 	Box,
 	Icon,
-	HStack,
+	Row,
 	Spinner,
 	Text,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import UiGlobals from '../../UiGlobals.js';
 import withDraggable from '../Hoc/withDraggable.js';
 import IconButton from '../Buttons/IconButton.js';
@@ -42,7 +42,7 @@ export default function TreeNode(props) {
 
 	return useMemo(() => {
 		
-		return <HStack
+		return <Row
 					alignItems="center"
 					flexGrow={1}
 					{...nodeProps}
@@ -68,7 +68,7 @@ export default function TreeNode(props) {
 						{...propsToPass}
 					>{text}</Text>
 
-				</HStack>;
+				</Row>;
 	}, [
 		nodeProps,
 		adjustedBg,