@onehat/ui 0.3.381 → 0.4.0

package/src/Components/Messages/ErrorMessage.js

@@ -1,40 +1,46 @@
 import {
 	Box,
-	Button,
+	ButtonText,
 	Icon,
-	Modal,
+	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
 	Text,
-} from 'native-base';
+} from '../Gluestack';
+import Button from '../Buttons/Button';
 import testProps from '../../Functions/testProps.js';
 import TriangleExclamation from '../Icons/TriangleExclamation.js';
 
 export default function ErrorMessage(props) {
 	const {
 			text = 'Error',
-			color = 'red.500',
+			color = 'red-500',
 			onOk,
 		} = props;
 
-	return <Modal isOpen={true} {...props} _backdrop={{ bg: "#000" }} {...testProps('ErrorMessage')}>
-				<Modal.Content>
-					<Modal.Header>Alert</Modal.Header>
-					<Modal.Body
-						borderTopWidth={0}
-						bg="#fff"
-						p={3}
-						justifyContent="center"
-						alignItems="center"
-						borderRadius={5}
-						flexDirection="row"
+	return <Modal isOpen={true} {...props} {...testProps('ErrorMessage')}>
+				<ModalBackdrop />
+				<ModalContent>
+					<ModalHeader>Alert</ModalHeader>
+					<ModalBody
+						className={`
+							flex-row
+							align-center
+							justify-center
+							p-3
+							bg-white
+							border-t-0
+							rounded-md
+						`}
 					>
-						<Box w="50px" mx={2}>
-							<Icon as={TriangleExclamation} color="red.500" size="10" />
+						<Box className="w-[50px] mx-1">
+							<Icon as={TriangleExclamation} size="10" className="text-red-500" />
 						</Box>
-						<Text flex={1} color={color} fontSize="18px">{text}</Text>
-					</Modal.Body>
-					<Modal.Footer py={2} pr={4}>
-						<Button color="primary.800" onPress={onOk}>OK</Button>
-					</Modal.Footer>
-				</Modal.Content>
+						<Text className={` text-${color} flex-1 text-[18px] `}>{text}</Text>
+					</ModalBody>
+					<ModalFooter className="py-2 pr-4">
+						<Button onPress={onOk} className="text-primary-800">
+							<ButtonText>OK</ButtonText>
+						</Button>
+					</ModalFooter>
+				</ModalContent>
 			</Modal>;
 }

package/src/Components/Messages/Loading.js

@@ -1,20 +1,22 @@
 import {
-	Row,
+	HStack,
+	HStackNative,
 	Spinner,
 	Text,
-} from 'native-base';
+} from '../Gluestack';
 import ScreenContainer from '../Container/ScreenContainer.js';
 
 export default function Loading(props) {
+
 	if (props.isScreen) {
 		return <ScreenContainer {...props}>
-					<Row flex={1} justifyContent="center" alignItems="center">
-						<Spinner color="primary.500" mr={2} />
+					<HStack className="flex-1 justify-center items-center">
+						<Spinner className="text-primary-500 mr-1" />
 						<Text>Loading</Text>
-					</Row>
+					</HStack>
 				</ScreenContainer>;
 	}
-	return <Row justifyContent="center" minHeight={100} {...props}>
-				<Spinner flex={1} color="primary.500" />
-			</Row>;
+	return <HStackNative {...props} className="justify-center min-h-[100px]">
+				<Spinner className="flex-1 text-primary-500" />
+			</HStackNative>;
 }

package/src/Components/Messages/OkMessage.js

@@ -1,9 +1,8 @@
- import {
-	Button,
-	Modal,
-	Row,
+import {
+	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
 	Text,
-} from 'native-base';
+} from '../Gluestack';
+import Button from '../Buttons/Button';
 
 export default function OkMessage(props) {
 	const {
@@ -12,13 +11,31 @@ export default function OkMessage(props) {
 		} = props;
 
 	return <Modal {...props} _backdrop={{ bg: "#000" }}>
-				<Modal.Content maxWidth="400px">
-					<Modal.Body p={5} pb={0} borderTopWidth={0}>
-						<Text color="#000">{textMessage}</Text>
-					</Modal.Body>
-					<Modal.Footer p={0} pr={4} borderTopWidth={0}>
-						<Button variant="ghost" color="primary.800" onPress={onClose}>OK</Button>
-					</Modal.Footer>
-				</Modal.Content>
+				<ModalBackdrop />
+				<ModalContent maxWidth="400px">
+					<ModalBody
+						className={`
+							p-5
+							pb-0
+							border-t-0
+						`}
+					>
+						<Text className="text-black">{textMessage}</Text>
+					</ModalBody>
+					<ModalFooter
+						className={`
+							p-0
+							pr-4
+							border-t-0
+						`}
+					>
+						<Button
+							variant="outline"
+							onPress={onClose}
+							className="text-primary-800"
+							text="OK"
+						/>
+					</ModalFooter>
+				</ModalContent>
 			</Modal>;
 }

package/src/Components/Messages/Unauthorized.js

@@ -1,17 +1,14 @@
 import {
-	Column,
 	Text,
-} from 'native-base';
+	VStack,
+} from '../Gluestack';
 
 export default function Unauthorized(props) {
 	const 
 		{
 			text = 'Unauthorized.',
 		} = props;
-	return <Column justifyContent="center" alignItems="center" w="100%" flex={1}>
-				<Text
-					textAlign="center"
-					color="#f00"
-				>{text}</Text>
-			</Column>;
+	return <VStack className="w-full flex-1 justify-center items-center">
+				<Text className="text-center text-[#f00]">{text}</Text>
+			</VStack>;
 }

package/src/Components/Messages/WaitMessage.js

@@ -1,85 +1,49 @@
 import {
-	Box,
+	HStack,
+	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
+	Spinner,
 	Text,
-} from 'native-base';
-import {
-	Modal,
-	View,
-} from 'react-native';
-import {
-	UI_MODE_REACT_NATIVE,
-	UI_MODE_WEB,
-} from '../../Constants/UiModes.js';
-import UiGlobals from '../../UiGlobals.js';
-import Loading from './Loading.js';
-
-const
-	height = 50,
-	width = 200;
-
-// NOTE: This component does NOT use the native-base Modal
-// because we need it to appear on top of all other Modals.
-// Therefore, we're using the ReactNative Modal, which at least for web
-// we can control the zIndex of.
+} from '../Gluestack';
+import testProps from '../../Functions/testProps.js';
 
 export default function WaitMessage(props) {
 	let {
 			text,
 		} = props;
+	
 	if (!text) { // do this here instead of setting default value in deconstructor, so we can use the default for text, even if text is defined and passed as null or empty string
 		text = 'Please wait...';
 	}
-
-	let transform;
-	if (UiGlobals.mode === UI_MODE_WEB) {
-		transform = 'translateX(-50%) translateY(-50%)';
-	}
-	if (UiGlobals.mode === UI_MODE_REACT_NATIVE) {
-		const
-			translatePercentage = -50,
-			translateY = (height * translatePercentage) / 100,
-			translateX = (width * translatePercentage) / 100;
-		transform = [
-			{
-				translateX,
-			},
-			{
-				translateY,
-			},
-		];
-	}
-
-	return <Modal visible={true} transparent={true} {...props}>
-				<View style={{
-					flex: 1,
-					backgroundColor: 'rgba(0, 0, 0, 0.3)',
-					justifyContent: 'center',
-					alignItems: 'center',
-				}}>
-					<View style={{
-						position: 'absolute',
-						top: '50%',
-						left: '50%',
-						transform,
-						height: height + 'px',
-						width: width + 'px',
-						zIndex: 100000, // should be the highest modal
-					}}>
-						<Box
-							borderTopWidth={0}
-							bg="#fff"
-							p={3}
-							h={height + 'px'}
-							w={width + 'px'}
-							justifyContent="center"
-							alignItems="center"
-							borderRadius={5}
-							flexDirection="row"
-						>
-							<Loading minHeight="auto" h={5} w={5} mr={2} />
-							<Text color="#000">{text}</Text>
-						</Box>
-					</View>
-				</View>
+	return <Modal
+				{...testProps('WaitMessage')}
+				isOpen={true}
+				className="Modal"
+				aria-disabled="true"
+			>
+				<ModalBackdrop />
+				<ModalContent
+					className={`
+						ModalContent
+						w-[200px]
+						h-[50px]
+						shadow-lg
+					`}
+				>
+					<HStack
+						className={`
+							HStack
+							items-center
+							justify-center
+						`}
+					>
+						<Spinner
+							className={`
+								mr-2
+								focus:outline-none
+							`}
+						/>
+						<Text className="text-black">{text}</Text>
+					</HStack>
+				</ModalContent>
 			</Modal>;
 }

package/src/Components/Panel/AccordionGridPanel.js

@@ -1,8 +1,8 @@
 import { useState, } from 'react';
 import {
-	Column,
 	ScrollView,
-} from 'native-base';
+	VStack,
+} from '../Gluestack';
 import Accordion from 'react-native-collapsible/Accordion'; // https://www.npmjs.com/package/react-native-collapsible
 import testProps from '../../Functions/testProps';
 import Footer from '../Layout/Footer.js';
@@ -30,12 +30,12 @@ export default function AccordionGridPanel(props) {
 	// 		onChangeSelection = () => {},
 	// 		noneFoundText,
 	// 		containerStyle = {},
-	// 		hideRightColumn = false,
+	// 		hideRightVStack = false,
 	// 		activeSectionIndexes = [0],
 	// 	} = props,
 	// 	[activeSections, setActiveSections] = useState(activeSectionIndexes);
 
-	// return <Column
+	// return <VStack
 	// 			{...testProps('AccorionGridPanel')}
 	// 			flex={1}
 	// 			w="100%"
@@ -74,7 +74,7 @@ export default function AccordionGridPanel(props) {
 	// 									columns={columns}
 	// 									onChangeSelection={onChangeSelection}
 	// 									bottomToolbar={false}
-	// 									hideRightColumn={hideRightColumn}
+	// 									hideRightVStack={hideRightVStack}
 	// 								/>;
 	// 					}}
 	// 				/>
@@ -89,6 +89,6 @@ export default function AccordionGridPanel(props) {
 	// 					)}
 	// 				</Footer>
 	// 			)}
-	// 		</Column>;
+	// 		</VStack>;
 }
  

package/src/Components/Panel/FormPanel.js

@@ -1,6 +1,6 @@
 import {
 	Text,
-} from 'native-base';
+} from '../Gluestack';
 import Panel from './Panel.js';
 import Form, { FormEditor } from '../Form/Form.js';
 import withData from '../Hoc/withData.js';
@@ -14,9 +14,13 @@ export function FormPanel(props) {
 			_form = {},
 		} = props,
 		WhichForm = isEditor ? FormEditor : Form;
+
+	let formClassName = _form.className || '';
+	formClassName += ' px-3 pt-6';
+
 	return <Panel isCollapsible={false} {...props} {..._panel}>
-				{instructions && <Text px={5} pt={3} fontStyle="italic">{instructions}</Text>}
-				<WhichForm px={3} pt={6} {...props} {..._form}/>
+				{instructions && <Text className="px-5 pt-3 italic-italic">{instructions}</Text>}
+				<WhichForm {...props} {..._form} className={formClassName} />
 			</Panel>;
 }