@onehat/ui 0.3.260 → 0.3.262

package/src/Components/Tab/TabBar.js

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

package/src/Components/Toolbar/FilterToolbar.js

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

package/src/Components/Toolbar/Pagination.js

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

package/src/Components/Toolbar/PaginationToolbar.js

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import {
-	Row,
-} from 'native-base';
+	HStack,
+} from '@gluestack-ui/themed';
 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 ? <Row flex={1} {...toolbarProps}>{toolbarItems}</Row> : null}
+				{toolbarItems.length ? <HStack flex={1} {...toolbarProps}>{toolbarItems}</HStack> : null}
 			</Toolbar>;
 };

package/src/Components/Toolbar/Toolbar.js

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

package/src/Components/Tree/Tree.js

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

package/src/Components/Tree/TreeNode.js

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

package/src/Components/Viewer/Viewer.js

@@ -1,11 +1,13 @@
 import { useRef, useState, } from 'react';
 import {
-	Column,
+	Button,
+	ButtonText,
+	HStack,
 	Icon,
 	ScrollView,
-	Row,
 	Text,
-} from 'native-base';
+	VStack,
+} from '@gluestack-ui/themed';
 import {
 	EDITOR_TYPE__SIDE,
 } from '../../Constants/Editor.js';
@@ -15,7 +17,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 Label from '../Form/Label.js';
 import Pencil from '../Icons/Pencil.js';
 import Footer from '../Layout/Footer.js';
@@ -71,13 +73,17 @@ function Viewer(props) {
 					items,
 					// onChange: onEditorChange,
 					useSelectorId = false,
+					isHidden = false,
 					isHiddenInViewMode = false,
 					...propsToPass
 				} = item,
 				editorTypeProps = {};
 
+			if (isHidden) {
+				return null;
+			}
 			if (isHiddenInViewMode) {
-				return;
+				return null;
 			}
 			const propertyDef = name && Repository?.getSchema().getPropertyDefinition(name);
 			if (!type) {
@@ -157,10 +163,10 @@ function Viewer(props) {
 							/>;
 
 			if (item.additionalViewButtons) {
-				element = <Row flexWrap="wrap">
+				element = <HStack flexWrap="wrap">
 								{element}
 								{buildAdditionalButtons(item.additionalViewButtons, self)}
-							</Row>;
+							</HStack>;
 			}
 
 			if (label) {
@@ -170,7 +176,7 @@ function Viewer(props) {
 				}
 				element = <><Label {...labelProps}>{label}</Label>{element}</>;
 			}
-			return <Row key={ix}>{element}</Row>;
+			return <HStack key={ix}>{element}</HStack>;
 		},
 		buildAncillary = () => {
 			const components = [];
@@ -203,12 +209,15 @@ function Viewer(props) {
 										canRowsReorder={false}
 									/>;
 					if (title) {
+						if (record?.displayValue) {
+							title += ' for ' + record.displayValue;
+						}
 						title = <Text
 									fontSize={styles.VIEWER_ANCILLARY_FONTSIZE}
 									fontWeight="bold"
 								>{title}</Text>;
 					}
-					components.push(<Column key={'ancillary-' + ix} my={5}>{title}{element}</Column>);
+					components.push(<VStack key={'ancillary-' + ix} my={5}>{title}{element}</VStack>);
 				});
 			}
 			return components;
@@ -239,33 +248,33 @@ function Viewer(props) {
 		canEdit = false;
 	}
 
-	return <Column flex={flex} {...props} onLayout={onLayout}>
+	return <VStack flex={flex} {...props} onLayout={onLayout}>
 				{containerWidth && <>
 
 					<ScrollView _web={{ height: 1 }} width="100%" pb={1} ref={scrollViewRef}>
 						{canEdit && onEditMode &&
-							<Row px={4} pt={4} alignItems="center" justifyContent="flex-end">
+							<HStack px={4} pt={4} alignItems="center" justifyContent="flex-end">
 								<Button
 									key="editBtn"
 									onPress={onEditMode}
 									leftIcon={<Icon as={Pencil} color="#fff" size="sm" />}	
 									color="#fff"
 								>To Edit</Button>
-							</Row>}
+							</HStack>}
 						{!_.isEmpty(additionalButtons) && 
-							<Row p={4} alignItems="center" justifyContent="flex-end" flexWrap="wrap">
+							<HStack p={4} alignItems="center" justifyContent="flex-end" flexWrap="wrap">
 								{additionalButtons}
-							</Row>}
-						<Column>
-							{containerWidth >= CONTAINER_THRESHOLD ? <Row p={4} pl={0}>{viewerComponents}</Row> : null}
-							{containerWidth < CONTAINER_THRESHOLD ? <Column p={4}>{viewerComponents}</Column> : null}
-							<Column m={2} pt={4}>{ancillaryComponents}</Column>
-						</Column>
+							</HStack>}
+						<VStack>
+							{containerWidth >= CONTAINER_THRESHOLD ? <HStack p={4} pl={0}>{viewerComponents}</HStack> : null}
+							{containerWidth < CONTAINER_THRESHOLD ? <VStack p={4}>{viewerComponents}</VStack> : null}
+							<VStack m={2} pt={4}>{ancillaryComponents}</VStack>
+						</VStack>
 					</ScrollView>
 					{(showDeleteBtn || showCloseBtn) && 
 						<Footer justifyContent="flex-end">
 							{showDeleteBtn && 
-								<Row flex={1} justifyContent="flex-start">
+								<HStack flex={1} justifyContent="flex-start">
 									<Button
 										key="deleteBtn"
 										onPress={onDelete}
@@ -274,18 +283,22 @@ function Viewer(props) {
 											bg: 'warningHover',
 										}}
 										color="#fff"
-									>Delete</Button>
-								</Row>}
+									>
+										<ButtonText>Delete</ButtonText>
+									</Button>
+								</HStack>}
 							{onClose && showCloseBtn &&
 								<Button
 									key="closeBtn"
 									onPress={onClose}
 									color="#fff"
-								>Close</Button>}
+								>
+									<ButtonText>Close</ButtonText>
+								</Button>}
 						</Footer>}
 
 				</>}
-			</Column>;
+			</VStack>;
 }
 
 export default withComponent(withPdfButton(Viewer));

package/src/Components/WaitModal.js

@@ -1,8 +1,8 @@
 import {
 	Modal,
-	Row,
+	HStack,
 	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import withRedux from '../Data/hoc/withRedux';
 import Loading from './Loading';
 import _ from 'lodash';
@@ -16,11 +16,11 @@ export function WaitModal(props) {
 	return <Modal {...props} _backdrop={{ bg: "#000" }}>
 				<Modal.Content maxWidth="400px">
 					<Modal.Body>
-						<Row justifyContent="center" alignItems="center">
+						<HStack justifyContent="center" alignItems="center">
 							<Loading minHeight="auto" h={5} w={5} mr={2} />
 							<Text color="#000">{textMessage}</Text>
 							{/* {!!waitStack ? <Text color="#000">{_.keys(waitStack).join(', ')}</Text> : null} */}
-						</Row>
+						</HStack>
 					</Modal.Body>
 				</Modal.Content>
 			</Modal>;

package/src/Components/Window/Editor.js

@@ -2,7 +2,7 @@ import {
 	Box,
 	Column,
 	Row,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import Container from '../Container/Container.js';
 import emptyFn from '../../Functions/emptyFn.js';
 import _ from 'lodash';

package/src/Components/Window/UploadsDownloadsWindow.js

@@ -7,7 +7,7 @@
 import { useState, } from 'react';
 import {
 	Icon,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import Excel from '../Icons/Excel';
 import Panel from '../Panel/Panel.js';
 import Form from '../Form/Form.js';

package/src/Components/index.js

@@ -1,7 +1,7 @@
 import {
-	Column,
-	Row,
-} from 'native-base';
+	HStack,
+	VStack,
+} from '@gluestack-ui/themed';
 import AddressBook from '../Components/Icons/AddressBook.js';
 import Alt from '../Components/Icons/Alt.js';
 import AngleLeft from '../Components/Icons/AngleLeft.js';
@@ -236,6 +236,8 @@ import YearsCombo from './Form/Field/Combo/YearsCombo.js';
 import _ from 'lodash';
 
 const components = {
+	Column: VStack,
+	Row: HStack,
 	AddressBook,
 	Alt,
 	AngleLeft,
@@ -431,7 +433,6 @@ const components = {
 	CheckboxGroup,
 	// CKEditor,
 	Color,
-	Column,
 	Combo,
 	// ComboEditor,
 	Container,
@@ -457,7 +458,6 @@ const components = {
 	// Picker,
 	PlusMinusButton,
 	RadioGroup,
-	Row,
 	SquareButton,
 	TabPanel,
 	Tag,

package/src/Functions/buildAdditionalButtons.js

@@ -1,7 +1,9 @@
 import {
+	Button,
+	ButtonText,
 	Icon,
-} from 'native-base';
-import Button from '../Components/Buttons/Button.js';
+} from '@gluestack-ui/themed';
+// import Button from '../Components/Buttons/Button.js';
 import _ from 'lodash';
 
 export default function buildAdditionalButtons(configs, self, handlerArgs = {}) {
@@ -36,7 +38,9 @@ export default function buildAdditionalButtons(configs, self, handlerArgs = {})
 							parent={self}
 							reference={key}
 							{...buttonProps}
-						>{text}</Button>;
+						>
+							<ButtonText>{text}</ButtonText>
+						</Button>;
 		additionalButtons.push(button);
 	});
 	return additionalButtons;

package/src/PlatformImports/Web/Attachments.js

@@ -2,12 +2,13 @@ import { useState, useEffect, useRef, } from 'react';
 import {
 	Box,
 	Button,
-	Column,
+	ButtonText,
+	VStack,
 	Pressable,
-	Row,
+	HStack,
 	Spinner,
 	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import {
 	CURRENT_MODE,
 	UI_MODE_WEB,
@@ -260,12 +261,12 @@ function AttachmentsElement(props) {
 	if (canCrud) {
 		_fileMosaic.onDelete = onFileDelete;
 	}
-	let content = <Column
+	let content = <VStack
 						w="100%"
 						p={2}
 						background={styles.ATTACHMENTS_BG}
 					>
-						<Row flexWrap="wrap">
+						<HStack flexWrap="wrap">
 							{files.map((file) => {
 								return <Box
 											key={file.id}
@@ -285,7 +286,7 @@ function AttachmentsElement(props) {
 												/>}
 										</Box>;
 							})}
-						</Row>
+						</HStack>
 						{Repository.total <= COLLAPSED_MAX ? null :
 							<Button
 								onPress={toggleShowAll}
@@ -297,8 +298,10 @@ function AttachmentsElement(props) {
 									width: '100%',
 								}}
 								variant="ghost"
-							>{'Show ' + (showAll ? ' Less' : ' All ' + Repository.total)}</Button>}
-					</Column>;
+							>
+								<ButtonText>{'Show ' + (showAll ? ' Less' : ' All ' + Repository.total)}</ButtonText>
+							</Button>}
+					</VStack>;
 	
 	if (canCrud) {
 		content = <Dropzone

package/src/PlatformImports/Web/File.js

@@ -1,10 +1,9 @@
 import { useEffect, } from 'react';
 import {
 	Button,
-	Column,
-	Row,
+	HStack,
 	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import {
 	CURRENT_MODE,
 	UI_MODE_WEB,
@@ -101,7 +100,7 @@ function FileComponent(props) {
 	if (_.isEmpty(filesContent)) {
 		assembledComponents = <Button onPress={() => openFilePicker()}>Select File</Button>;
 	} else {
-		assembledComponents = <Row
+		assembledComponents = <HStack
 									px={3}
 									py={1}
 									alignItems="center"
@@ -124,7 +123,7 @@ function FileComponent(props) {
 										mr={1}
 									/>
 									<Text>{plainFiles[0].name}</Text>
-								</Row>;
+								</HStack>;
 	}
 
 	return assembledComponents;