@onehat/ui 0.4.70 → 0.4.72

package/src/Components/Messages/ErrorMessage.js

@@ -5,6 +5,7 @@ import {
 	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
 	Text,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import useAdjustedWindowSize from '../../Hooks/useAdjustedWindowSize.js';
 import Button from '../Buttons/Button.js';
 import Panel from '../Panel/Panel.js';
@@ -33,12 +34,12 @@ export default function ErrorMessage(props) {
 					disableAutoFlex={true}
 					onClose={onOk}
 					footer={<Footer
-								className={`
-									justify-end
-									py-2
-									px-4
-									bg-grey-100
-								`}
+								className={clsx(
+									'justify-end',
+									'py-2',
+									'px-4',
+									'bg-grey-100',
+								)}
 							>
 								<Button
 									{...testProps('okBtn')}
@@ -50,40 +51,40 @@ export default function ErrorMessage(props) {
 							</Footer>}
 				>
 					<HStack className="ErrorMessage-HStack flex-1 w-full p-4">
-						<Box className={`
-							ErrorMessage-Box1
-							h-full
-							w-[100px]
-							flex
-							items-center
-							justify-center 
-							pr-3
-						`}>
-							<Icon as={TriangleExclamation} className={`
-								ErrorMessage-Icon
-								h-[40px]
-								w-[40px]
-								text-${color}
-							`} />
+						<Box className={clsx(
+							'ErrorMessage-Box1',
+							'h-full',
+							'w-[100px]',
+							'flex',
+							'items-center',
+							'justify-center',
+							'pr-3',
+						)}>
+							<Icon as={TriangleExclamation} className={clsx(
+								'ErrorMessage-Icon',
+								'h-[40px]',
+								'w-[40px]',
+								`text-${color}`,
+							)} />
 						</Box>
-						<Box className={`
-							ErrorMessage-Box2
-							h-full
-							flex
-							flex-1
-							items-start
-							justify-center
-							overflow-hidden
-						`}>
-							<Text className={`
-								ErrorMessage-Text
-								text-${color}
-								text-[18px]
-								break-words
-								whitespace-normal
-								w-full
-								overflow-auto
-							`}>{text}</Text>
+						<Box className={clsx(
+							'ErrorMessage-Box2',
+							'h-full',
+							'flex',
+							'flex-1',
+							'items-start',
+							'justify-center',
+							'overflow-hidden',
+						)}>
+							<Text className={clsx(
+								'ErrorMessage-Text',
+								`text-${color}`,
+								'text-[18px]',
+								'break-words',
+								'whitespace-normal',
+								'w-full',
+								'overflow-auto',
+							)}>{text}</Text>
 						</Box>
 					</HStack>
 				</Panel>

package/src/Components/Messages/GlobalModals.js

@@ -0,0 +1,47 @@
+
+import { useSelector, useDispatch, } from 'react-redux';
+import {
+	selectIsWaitModalShown,
+	selectAlertMessage,
+	selectDebugMessage,
+	selectInfoMessage,
+	selectWaitMessage,
+	setAlertMessage,
+	setDebugMessage,
+	setInfoMessage,
+} from '@src/models/Slices/DebugSlice';
+import WaitMessage from './WaitMessage';
+import ErrorMessage from './ErrorMessage';
+
+
+
+export default function GlobalModals() {
+	const
+		dispatch = useDispatch(),
+		isWaitModalShown = useSelector(selectIsWaitModalShown),
+		alertMessage = useSelector(selectAlertMessage),
+		debugMessage = useSelector(selectDebugMessage),
+		infoMessage = useSelector(selectInfoMessage),
+		waitMessage = useSelector(selectWaitMessage);
+
+	return <>
+				{isWaitModalShown && <WaitMessage text={waitMessage} />}
+				{!isWaitModalShown && alertMessage && 
+					<ErrorMessage
+						text={alertMessage}
+						onOk={() => dispatch(setAlertMessage(null))}
+					/>}
+				{!isWaitModalShown && debugMessage && 
+					<ErrorMessage
+						text={debugMessage}
+						color="green"
+						onOk={() => dispatch(setDebugMessage(null))}
+					/>}
+				{!isWaitModalShown && infoMessage && 
+					<ErrorMessage
+						text={infoMessage}
+						color="#000"
+						onOk={() => dispatch(setInfoMessage(null))}
+					/>}
+			</>;
+}

package/src/Components/Messages/Loading.js

@@ -4,6 +4,7 @@ import {
 	Spinner,
 	Text,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import ScreenContainer from '../Container/ScreenContainer.js';
 
 export default function Loading(props) {

package/src/Components/Messages/OkMessage.js

@@ -2,6 +2,7 @@ import {
 	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
 	Text,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import Button from '../Buttons/Button';
 
 export default function OkMessage(props) {
@@ -14,20 +15,20 @@ export default function OkMessage(props) {
 				<ModalBackdrop />
 				<ModalContent maxWidth="400px">
 					<ModalBody
-						className={`
-							p-5
-							pb-0
-							border-t-0
-						`}
+						className={clsx(
+							'p-5',
+							'pb-0',
+							'border-t-0',
+						)}
 					>
 						<Text className="text-black">{textMessage}</Text>
 					</ModalBody>
 					<ModalFooter
-						className={`
-							p-0
-							pr-4
-							border-t-0
-						`}
+						className={clsx(
+							'p-0',
+							'pr-4',
+							'border-t-0',
+						)}
 					>
 						<Button
 							variant="outline"

package/src/Components/Messages/Unauthorized.js

@@ -2,6 +2,7 @@ import {
 	Text,
 	VStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 
 export default function Unauthorized(props) {
 	const 

package/src/Components/Messages/WaitMessage.js

@@ -4,6 +4,7 @@ import {
 	Spinner,
 	Text,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import testProps from '../../Functions/testProps.js';
 
 export default function WaitMessage(props) {
@@ -22,25 +23,25 @@ export default function WaitMessage(props) {
 			>
 				<ModalBackdrop />
 				<ModalContent
-					className={`
-						ModalContent
-						w-[200px]
-						h-[50px]
-						shadow-lg
-					`}
+					className={clsx(
+						'ModalContent',
+						'w-[200px]',
+						'h-[50px]',
+						'shadow-lg',
+					)}
 				>
 					<HStack
-						className={`
-							HStack
-							items-center
-							justify-center
-						`}
+						className={clsx(
+							'HStack',
+							'items-center',
+							'justify-center',
+						)}
 					>
 						<Spinner
-							className={`
-								mr-2
-								focus:outline-none
-							`}
+							className={clsx(
+								'mr-2',
+								'focus:outline-none',
+							)}
 						/>
 						<Text className="text-black">{text}</Text>
 					</HStack>

package/src/Components/Panel/AccordionGridPanel.js

@@ -3,6 +3,7 @@ import {
 	ScrollView,
 	VStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 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';

package/src/Components/Panel/FormPanel.js

@@ -1,6 +1,7 @@
 import {
 	Text,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import Panel from './Panel.js';
 import Form, { FormEditor } from '../Form/Form.js';
 import withData from '../Hoc/withData.js';

package/src/Components/Panel/Header.js

@@ -5,6 +5,7 @@ import {
 	TextNative,
 	VStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	HORIZONTAL,
 	VERTICAL,
@@ -41,17 +42,17 @@ export default function Header(props) {
 	let closeBtn = null,
 		collapseBtn = null;
 	if (onClose) {
-		let closeClassName = `
-			Header-closeBtn
-			self-center
-			border
-			border-grey-400
-			h-[20px]
-			w-[20px]
-			px-[2px]
-			py-[2px]
-			${styles.PANEL_HEADER_BG}
-		`;
+		let closeClassName = clsx(
+			'Header-closeBtn',
+			'self-center',
+			'border',
+			'border-grey-400',
+			'h-[20px]',
+			'w-[20px]',
+			'px-[2px]',
+			'py-[2px]',
+			styles.PANEL_HEADER_BG,
+		);
 		if (collapseDirection === HORIZONTAL && isCollapsed) {
 			closeClassName += ' mb-1';
 		}
@@ -67,17 +68,17 @@ export default function Header(props) {
 					/>;
 	}
 	if (isCollapsible) {
-		let collapseClassName = `
-			Header-collapseBtn
-			self-center
-			border
-			border-grey-400
-			h-[20px]
-			w-[20px]
-			px-[2px]
-			py-[2px]
-			${styles.PANEL_HEADER_BG}
-		`;
+		let collapseClassName = clsx(
+			'Header-collapseBtn',
+			'self-center',
+			'border',
+			'border-grey-400',
+			'h-[20px]',
+			'w-[20px]',
+			'px-[2px]',
+			'py-[2px]',
+			styles.PANEL_HEADER_BG,
+		);
 		if (collapseDirection === HORIZONTAL && isCollapsed) {
 			collapseClassName += ' mb-1';
 		}
@@ -97,17 +98,17 @@ export default function Header(props) {
 		doubleClickStyle.cursor = 'pointer';
 	}
 
-	let panelClassName = `
-		Header
-		bg-grey-300
-		items-center
-		justify-start
-		py-1
-		border-b-grey-400
-		border-b-1
-		${isWindow ? 'rounded-t-lg' : ''}
-		${styles.PANEL_HEADER_BG}
-	`;
+	let panelClassName = clsx(
+		'Header',
+		'bg-grey-300',
+		'items-center',
+		'justify-start',
+		'py-1',
+		'border-b-grey-400',
+		'border-b-1',
+		isWindow ? 'rounded-t-lg' : '',
+		styles.PANEL_HEADER_BG,
+	);
 	if (CURRENT_MODE === UI_MODE_WEB) {
 
 		if (isCollapsed) {
@@ -137,12 +138,12 @@ export default function Header(props) {
 									<TextNative
 										numberOfLines={1}
 										ellipsizeMode="head"
-										className={`
-											Header-TextNative1
-											flex-1
-											font-bold
-											${styles.PANEL_HEADER_TEXT_CLASSNAME}
-										`}>{title}</TextNative>
+										className={clsx(
+											'Header-TextNative1',
+											'flex-1',
+											'font-bold',
+											styles.PANEL_HEADER_TEXT_CLASSNAME,
+										)}>{title}</TextNative>
 								</div>
 							</VStack>
 						</div>;
@@ -175,12 +176,12 @@ export default function Header(props) {
 						<TextNative
 							numberOfLines={1}
 							ellipsizeMode="head"
-							className={`
-								Header-TextNative2
-								flex-1
-								font-bold
-								${styles.PANEL_HEADER_TEXT_CLASSNAME}
-							`}
+							className={clsx(
+								'Header-TextNative2',
+								'flex-1',
+								'font-bold',
+								styles.PANEL_HEADER_TEXT_CLASSNAME,
+							)}
 						>{title}</TextNative>
 						{collapseBtn}
 					</HStack>
@@ -215,13 +216,13 @@ export default function Header(props) {
 										numberOfLines={1}
 										ellipsizeMode="head"
 										style={{ transform: [{ rotate: '-90deg'}] }}
-										className={`
-											Header-TextNative3
-											font-bold
-											w-[200px]
-											text-right
-											${styles.PANEL_HEADER_TEXT_CLASSNAME}
-										`}
+										className={clsx(
+											'Header-TextNative3',
+											'font-bold',
+											'w-[200px]',
+											'text-right',
+											styles.PANEL_HEADER_TEXT_CLASSNAME,
+										)}
 									>{title}</TextNative>
 								</VStack>
 							</VStack>
@@ -251,12 +252,12 @@ export default function Header(props) {
 						<TextNative
 							numberOfLines={1}
 							ellipsizeMode="head"
-							className={`
-								Header-TextNative4
-								font-bold
-								flex-1
-								${styles.PANEL_HEADER_TEXT_CLASSNAME}
-							`}>{title}</TextNative>
+							className={clsx(
+								'Header-TextNative4',
+								'font-bold',
+								'flex-1',
+								styles.PANEL_HEADER_TEXT_CLASSNAME,
+							)}>{title}</TextNative>
 						{collapseBtn}
 					</HStack>
 				</Pressable>;

package/src/Components/Panel/Mask.js

@@ -1,6 +1,7 @@
 import {
 	Box,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	CURRENT_MODE,
 	UI_MODE_WEB,

package/src/Components/Panel/Panel.js

@@ -4,6 +4,7 @@ import {
 	VStack,
 	VStackNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	HORIZONTAL,
 	VERTICAL,
@@ -136,12 +137,12 @@ function Panel(props) {
 				{!isCollapsed && <>
 					{topToolbar}
 					<VStack
-						className={`
-							Panel-VSstack
-							flex-1
-							w-full
-							overflow-hidden
-						`}
+						className={clsx(
+							'Panel-VSstack',
+							'flex-1',
+							'w-full',
+							'overflow-hidden',
+						)}
 					>
 						{isScrollable ?
 							<ScrollView

package/src/Components/Picker/Picker.js

@@ -5,6 +5,7 @@ import {
 	Select, SelectItem,
 	Tooltip,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import CaretDown from '../Icons/CaretDown.js';
 import testProps from '../../Functions/testProps.js';
 import _ from 'lodash';

package/src/Components/Report/Report.js

@@ -8,6 +8,7 @@ import {
 	VStack,
 	VStackNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import { EDITOR_TYPE__PLAIN } from '../../Constants/Editor';
 import {
 	UI_MODE_WEB,
@@ -72,11 +73,11 @@ function Report(props) {
 	}
 
 	if (isQuickReport) {
-		let className = `
-			Report
-			max-w-[100px]
-			m-2
-		`;
+		let className = clsx(
+			'Report',
+			'max-w-[100px]',
+			'm-2',
+		);
 		if (props.className) {
 			className += ' ' + props.className;
 		}
@@ -86,28 +87,28 @@ function Report(props) {
 				>
 					<Pressable
 						onPress={onPressQuickReport}
-						className={`
-							flex-1
-							items-center
-							justify-center
-							flex-col
-							bg-white
-							p-3
-							rounded-lg
-							border
-							border-primary-300
-							hover:bg-primary-300
-						`}
+						className={clsx(
+							'flex-1',
+							'items-center',
+							'justify-center',
+							'flex-col',
+							'bg-white',
+							'p-3',
+							'rounded-lg',
+							'border',
+							'border-primary-300',
+							'hover:bg-primary-300',
+						)}
 					>
 						{icon}
 						<Text
-							className={`
-								text-black
-								text-center
-								text-[17px]
-								leading-tight
-								mt-2
-							`}
+							className={clsx(
+								'text-black',
+								'text-center',
+								'text-[17px]',
+								'leading-tight',
+								'mt-2',
+							)}
 						>{title}</Text>
 					</Pressable>
 				</VStackNative>;
@@ -145,16 +146,16 @@ function Report(props) {
 	}
 	return <VStackNative
 				{...testProps('Report-' + reportId)}
-				className={`
-					w-full
-					border
-					border-primary-300
-					p-4
-					mb-3
-					bg-white
-					rounded-lg
-					shadow-sm
-				`}
+				className={clsx(
+					'w-full',
+					'border',
+					'border-primary-300',
+					'p-4',
+					'mb-3',
+					'bg-white',
+					'rounded-lg',
+					'shadow-sm',
+				)}
 			>
 				<HStack>
 					<Box className="w-[50px] mr-4">

package/src/Components/Screens/Manager.js

@@ -1,6 +1,7 @@
 import {
 	VStackNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import React, { useState, useEffect, } from 'react';
 import {
 	SCREEN_MODES__FULL,

package/src/Components/Screens/ReportsManager.js

@@ -5,6 +5,7 @@ import {
 	VStack,
 	VStackNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import ChartPie from '../Icons/ChartPie.js';
 import ScreenHeader from '../Layout/ScreenHeader.js';
 

package/src/Components/Tab/Tab.js

@@ -3,6 +3,7 @@ import {
 	HStack,
 	Icon,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	HORIZONTAL,
 	VERTICAL,