@onehat/ui 0.4.69 → 0.4.71

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,

package/src/Components/Tab/TabBar.js

@@ -8,6 +8,7 @@ import {
 	VStack,
 	VStackNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	HORIZONTAL,
 	VERTICAL,
@@ -130,11 +131,11 @@ function TabBar(props) {
 							tooltip={isCollapsed ? 'Expand' : 'Collapse'}
 						/>;
 			} else {
-				tabClassName += `
-					${direction === VERTICAL ? 'w-[200px]' : ''}
-					pr-0
-					mr-0
-				`;
+				tabClassName += clsx(
+					direction === VERTICAL ? 'w-[200px]' : '',
+					'pr-0',
+					'mr-0',
+				);
 				_icon.as = Minimize;
 				button = <Button
 							{...testProps('toggleBtn')}
@@ -158,59 +159,59 @@ function TabBar(props) {
 		getTabProps = () => {
 			const
 				tabProps = {
-					className: `
-						${styles.TAB_BG}
-						${isCollapsed ? 'justify-center' : 'justify-start'}
-					`,
+					className: clsx(
+						styles.TAB_BG,
+						isCollapsed ? 'justify-center' : 'justify-start',
+					),
 				},
 				textProps = {
 					// numberOfLines: 1,
 					// ellipsizeMode: 'head',
-					className: `
-						${styles.TAB_FONTSIZE}
-						${styles.TAB_COLOR}
-					`,
+					className: clsx(
+						styles.TAB_FONTSIZE,
+						styles.TAB_COLOR,
+					),
 				},
 				iconProps = {
 					// size: 'md',
-					className: `
-						${styles.TAB_ICON_COLOR}
-					`,
+					className: clsx(
+						styles.TAB_ICON_COLOR,
+					),
 				};
 			switch(direction) {
 				case VERTICAL:
-					tabProps.className += `
-						rounded-l-lg
-						rounded-r-none
-						w-full
-						ml-2
-						mr-0
-						mb-1
-						px-4
-					`;
-					textProps.className += `
-						w-full
-						mr-0
-						mb-1
-						py-0
-						pl-3
-						pr-0
-						flex-1
-						text-left
-					`;
+					tabProps.className += clsx(
+						'rounded-l-lg',
+						'rounded-r-none',
+						'w-full',
+						'ml-2',
+						'mr-0',
+						'mb-1',
+						'px-4',
+					);
+					textProps.className += clsx(
+						'w-full',
+						'mr-0',
+						'mb-1',
+						'py-0',
+						'pl-3',
+						'pr-0',
+						'flex-1',
+						'text-left',
+					);
 					break;
 				case HORIZONTAL:
-					tabProps.className += `
-						rounded-t
-						rounded-b-none
-						mr-1
-						py-1
-					`;
-					textProps.className += `
-						px-1
-						py-0
-						mr-1
-					`;
+					tabProps.className += clsx(
+						'rounded-t',
+						'rounded-b-none',
+						'mr-1',
+						'py-1',
+					);
+					textProps.className += clsx(
+						'px-1',
+						'py-0',
+						'mr-1',
+					);
 					break;
 				default:
 			}
@@ -459,16 +460,16 @@ function TabBar(props) {
 		tabBar = <VStackNative
 					{...testProps('TabBar')}
 					{...propsToPass}
-					className={`
-						${isCollapsed ? 'w-[50px]' : 'w-[' + tabWidth + 'px]'}
-						${isCollapsed ? 'pl-1' : 'pl-4'}
-						items-center
-						justify-start
-						py-2
-						overflow-x-hidden
-						overflow-y-auto
-						${styles.TAB_BAR_CLASSNAME}
-					`}
+					className={clsx(
+						isCollapsed ? 'w-[50px]' : 'w-[' + tabWidth + 'px]',
+						isCollapsed ? 'pl-1' : 'pl-4',
+						'items-center',
+						'justify-start',
+						'py-2',
+						'overflow-x-hidden',
+						'overflow-y-auto',
+						styles.TAB_BAR_CLASSNAME
+					)}
 				>
 					{renderedTabs}
 					{canToggleCollapse ? 
@@ -488,16 +489,16 @@ function TabBar(props) {
 	if (direction === HORIZONTAL) {
 		tabBar = <HStackNative
 					{...testProps('TabBar')}
-					className={`
-						${'h-[' + tabHeight + 'px]'}
-						items-center
-						justify-start
-						overflow-x-auto
-						overflow-y-hidden
-						p-1
-						pb-0
-						${styles.TAB_BAR_CLASSNAME}
-					`}
+					className={clsx(
+						'h-[' + tabHeight + 'px]',
+						'items-center',
+						'justify-start',
+						'overflow-x-auto',
+						'overflow-y-hidden',
+						'p-1',
+						'pb-0',
+						styles.TAB_BAR_CLASSNAME
+					)}
 				>
 					<ScrollView
 						horizontal={true}