@onehat/ui 0.3.262 → 0.3.264

package/src/Components/Viewer/Viewer.js

@@ -1,13 +1,11 @@
 import { useRef, useState, } from 'react';
 import {
-	Button,
-	ButtonText,
-	HStack,
+	Column,
 	Icon,
 	ScrollView,
+	Row,
 	Text,
-	VStack,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 import {
 	EDITOR_TYPE__SIDE,
 } from '../../Constants/Editor.js';
@@ -17,7 +15,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';
@@ -163,10 +161,10 @@ function Viewer(props) {
 							/>;
 
 			if (item.additionalViewButtons) {
-				element = <HStack flexWrap="wrap">
+				element = <Row flexWrap="wrap">
 								{element}
 								{buildAdditionalButtons(item.additionalViewButtons, self)}
-							</HStack>;
+							</Row>;
 			}
 
 			if (label) {
@@ -176,7 +174,7 @@ function Viewer(props) {
 				}
 				element = <><Label {...labelProps}>{label}</Label>{element}</>;
 			}
-			return <HStack key={ix}>{element}</HStack>;
+			return <Row key={ix}>{element}</Row>;
 		},
 		buildAncillary = () => {
 			const components = [];
@@ -217,7 +215,7 @@ function Viewer(props) {
 									fontWeight="bold"
 								>{title}</Text>;
 					}
-					components.push(<VStack key={'ancillary-' + ix} my={5}>{title}{element}</VStack>);
+					components.push(<Column key={'ancillary-' + ix} my={5}>{title}{element}</Column>);
 				});
 			}
 			return components;
@@ -248,33 +246,33 @@ function Viewer(props) {
 		canEdit = false;
 	}
 
-	return <VStack flex={flex} {...props} onLayout={onLayout}>
+	return <Column flex={flex} {...props} onLayout={onLayout}>
 				{containerWidth && <>
 
 					<ScrollView _web={{ height: 1 }} width="100%" pb={1} ref={scrollViewRef}>
 						{canEdit && onEditMode &&
-							<HStack px={4} pt={4} alignItems="center" justifyContent="flex-end">
+							<Row 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>
-							</HStack>}
+							</Row>}
 						{!_.isEmpty(additionalButtons) && 
-							<HStack p={4} alignItems="center" justifyContent="flex-end" flexWrap="wrap">
+							<Row p={4} alignItems="center" justifyContent="flex-end" flexWrap="wrap">
 								{additionalButtons}
-							</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>
+							</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>
 					</ScrollView>
 					{(showDeleteBtn || showCloseBtn) && 
 						<Footer justifyContent="flex-end">
 							{showDeleteBtn && 
-								<HStack flex={1} justifyContent="flex-start">
+								<Row flex={1} justifyContent="flex-start">
 									<Button
 										key="deleteBtn"
 										onPress={onDelete}
@@ -283,22 +281,18 @@ function Viewer(props) {
 											bg: 'warningHover',
 										}}
 										color="#fff"
-									>
-										<ButtonText>Delete</ButtonText>
-									</Button>
-								</HStack>}
+									>Delete</Button>
+								</Row>}
 							{onClose && showCloseBtn &&
 								<Button
 									key="closeBtn"
 									onPress={onClose}
 									color="#fff"
-								>
-									<ButtonText>Close</ButtonText>
-								</Button>}
+								>Close</Button>}
 						</Footer>}
 
 				</>}
-			</VStack>;
+			</Column>;
 }
 
 export default withComponent(withPdfButton(Viewer));

package/src/Components/WaitModal.js

@@ -1,8 +1,8 @@
 import {
 	Modal,
-	HStack,
+	Row,
 	Text,
-} from '@gluestack-ui/themed';
+} from 'native-base';
 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>
-						<HStack justifyContent="center" alignItems="center">
+						<Row 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} */}
-						</HStack>
+						</Row>
 					</Modal.Body>
 				</Modal.Content>
 			</Modal>;

package/src/Components/Window/Editor.js

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

package/src/Functions/buildAdditionalButtons.js

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

package/src/PlatformImports/Web/Attachments.js

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

package/src/PlatformImports/Web/File.js

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